// ****************************
// slideshow controls
// ****************************
fnStageSlideshow = new Class({
	Implements: [Options, Events],
	
	options: {
		width: 980,
		duration: 1000,
		autoslide: false,
		pause: false,
		initId: 0,
		noSlide: false
	},
	
	initialize: function(stage, controler, target, options){
		
		this.stage = $(stage);
		if(!this.stage) return;
		
		this.imagelink = $('stage_imagelink');
		this.imagelinkNo = $('stage_imagelink_no');
		this.imagelinkHi = $('stage_imagelink_hi');
		
		this.controler = $(controler);
		if(!this.controler) return;
		
		this.target = $(target);
		if(!this.target) return;
		
		this.setOptions(options);
		this.options.autoslideDefault = this.options.autoslide;
		
		// hash wert auslesen und # entfernen
		var initHash = window.location.hash;
		if(initHash) {
			this.options.initId = initHash.substring(1)-1;
			this.options.autoslideDefault = false;
			this.options.pause = true;
			this.options.noSlide = true;
		}
		
		var that = this;
		this.initControler(that);
	},
	
	initControler: function(that){
		
		// set image button
		if(this.imagelinkNo) {
			this.imagelinkNo.fade('in');
			this.imagelinkNo.getElement('a').set('href', 'javascript: stageSlideshow.startSlide();');
			this.imagelinkHi.fade('out');
			this.imagelinkHi.getElement('a').set('href', 'javascript: stageSlideshow.startSlide();');
			
			//this.imagelink.fade('in');
			this.imagelink.addEvents({
				mouseover: function(){ 
					that.imagelinkHi.fade('in');
				},
				
				mouseout: function(){ 
					that.imagelinkHi.fade('out');
				}
			});
		}
		if(! this.options.autoslide) this.imagelink.fade('hide');
		if(this.imagelinkHi) this.imagelink.fade('hide');
		
		// move controler to target container
		var copy = this.controler.clone('true', 'true');
		this.controler.dispose();
		copy.inject(this.target, 'top');
		this.controler = this.target.getElement('#stage_image_controler');
		this.controler.removeClass('helper');
		
		this.prevButton = this.controler.getElement('#slide_button_prev');
		this.nextButton = this.controler.getElement('#slide_button_next');
		
		// define slide fx
		this.slideFx = new Fx.Tween(this.stage, {
			'link': 'cancel',
			'unit': 'px',
			'duration': this.options.duration,
			'property': 'left'
		});
		this.slideFx.addEvent('start', function(){
			that.checkStatus('start');
		});
		this.slideFx.addEvent('complete', function(){
			that.checkStatus('complete');
		});
		
		// pause autoslide if mouseover
		this.stage.addEvents({
			mouseover: function(){ 
				that.options.pause = true;
			},
			
			mouseout: function(){ 
				that.options.pause = false;
			}
		});
		
		this.controler.addEvents({
			mouseover: function(){ 
				that.options.pause = true;
			},
			
			mouseout: function(){ 
				that.options.pause = false;
			}
		});
		
		// add click event to each button
		/*
		this.controler.getElements('div.goSlide').each(function(el) {
			el.addEvent('click', this.goSlide.bind(this, el));
		}, this);
		*/
		this.controler.getElements('div.goSlide').addEvents({
			click: function(){ 
				that.goSlide(this);
				that.options.autoslide = false;
			}
		});
		
		// set first slide as active
		var defaultSlide = this.controler.getElement('#slide_button_0');
		defaultSlide.fireEvent('click');
		this.options.autoslide = this.options.autoslideDefault;
		
		// add click event to prev button
		this.prevButton.addEvents({
			click: function(){ 
				that.prevSlide(this);
				that.options.autoslide = false;
			}
		});
		
		// add click event to next button
		this.nextButton.addEvents({
			click: function(){ 
				that.nextSlide(this);
				that.options.autoslide = false;
			}
		});
		
		// auto slide
		if(this.options.autoslide) {
			this.autoSlideTimer = that.autoSlide.periodical(this.options.autoslide, this);
		};
		
		// in initEl
		var initEl = this.controler.getElement('#slide_button_' + this.options.initId);
		if(initEl) this.goSlide(initEl, this.options.noSlide);
		
		return;
	},
	
	goSlide: function(el, noSlide){
		this.controler.getElements('div.goSlide').removeClass('active');
		
		var button_id = el.get('id');
		this.slide_id = button_id.replace('slide_button_', '');
		
		el.addClass('active');
		var offset = this.slide_id.toInt() * this.options.width * -1;
		
		
		if(noSlide) this.stage.setStyle('left', offset);
		this.slideFx.start(offset);

		this.checkStatus(this.slide_id);

		//alert(offset);
		return;
	},
	
	prevSlide: function(){
		var prevSlideId = 'slide_button_' + eval(this.slide_id.toInt() - 1);
		var prevEl = this.controler.getElement('#' + prevSlideId);
		if(prevEl) this.goSlide( prevEl);
		
		return;
	},
	
	nextSlide: function(){
		var nextSlideId = 'slide_button_' + eval(this.slide_id.toInt() + 1);
		var nextEl = this.controler.getElement('#' + nextSlideId);
		
		var firstSlideId = 'slide_button_0';
		var firstEl = this.controler.getElement('#' + firstSlideId);
		
		if(nextEl) this.goSlide(nextEl);
		else if(this.options.autoslide) this.goSlide(firstEl);
		
		return;
	},
	
	checkStatus: function(eventType){
		var slideId = this.slide_id.toInt();
		
		var nextSlideId = 'slide_button_' + eval(slideId + 1);
		var nextEl = this.controler.getElement('#' + nextSlideId);
		if(!nextEl) this.nextButton.set('styles', {'background-position' : 'bottom right'});
		else this.nextButton.set('styles', {'background-position' : 'bottom left'});
		
		var prevSlideId = 'slide_button_' + eval(slideId - 1);
		var prevEl = this.controler.getElement('#' + prevSlideId);
		if(!prevEl) this.prevButton.set('styles', {'background-position' : 'top right'});
		else this.prevButton.set('styles', {'background-position' : 'top left'});
		
		if(slideId != 0) {
			if(this.imagelink) {
				this.imagelink.fade('out');
				this.imagelink.getElement('#stage_imagelink_no').fade('out');
			}
		} else if(eventType == 'complete' && slideId == 0) {
			if(this.imagelink && this.options.autoslideDefault) {
				this.imagelink.fade('in');
				this.imagelink.getElement('#stage_imagelink_no').fade('in');
			}
		}
		
		return;
	},
	
	autoSlide:function() {
		if(this.options.pause) return;
		if(! this.options.autoslide) return;
		
		this.nextSlide();
		
		return;
	},
	
	startSlide:function() {
		this.options.autoslide = this.options.autoslideDefault;
		$clear(this.autoSlideTimer);
		this.autoSlideTimer = this.autoSlide.periodical(this.options.autoslide, this);
		this.nextSlide();
		
		this.imagelink.fade('out');
		this.imagelink.getElement('#stage_imagelink_no').fade('out');
		this.imagelink.getElement('#stage_imagelink_hi').fade('out');
		
		return;
	}
});