/*
 * Extending the scriptaculous transitions for an bouncing effect
 */
//Effect.Transitions.easeInOutBounce = function(pos){
//	if (pos < (1/2.75)) {
//		return (7.5625 * pos * pos);
//	} 
//	else if (pos < (2/2.75)) {
//		return (7.5625 * (pos -= (1.5/2.75)) * pos + 0.75);
//	} else if (pos < (2.5/2.75)) {
//		return (7.5625*(pos -= (2.25/2.75)) * pos + 0.9375);
//	} else {
//		return (7.5625*(pos -= (2.625/2.75)) * pos + 0.984375);
//	}
//}

var Lichtflutslider = new Class.create({
	initialize: function(itemcontainerid, navcontainer){
		this.container = $(itemcontainerid);
		this.navcontainer = $(navcontainer);
		this.mode = 'fade';
		this.transition = Effect.Transitions.sinoidal;
		this.speed = 2.0;
		this.fadeSpeed = 2.0;
		this.slideInterval = 8000;
		this.pauseInterval = 10000;
		
		this.actitem = 0;
		this.isMoving = false;
		this.slideTicker = null;
		this.pause = null;
	
		this.items = this.container.childElements();

		//save original number of items
		this.itemsCount = this.items.size();
		
		this.itemWidth = this.items.first().getWidth();
		
		this.initMode();
		this.updateNavBar();
		
		
	},
	
	initMode: function(){
		switch(this.mode){
			case 'slide':
				var newFirst = this.items.last().cloneNode(true);
				var newLast = this.items.first().cloneNode(true);
		
				this.container.insert({top: newFirst});
				this.container.insert({bottom: newLast});
		
				this.items = this.container.childElements();
		
				this.container.setStyle({
					'width':this.items.size() * this.itemWidth + 'px',
					'top':'0px',
					'left': -this.itemWidth + 'px',
					'position':'relative'
				});
				//apend mouse events for start and stop the automatic slide
				this.appendEvents();
				
				this.startAutoSlide();
				break;
			case 'fade':
				this.items.each(function(item){
					item.setStyle({
						'position':'absolute',
						'float':'none'
					});
					item.hide();
				},this);
				Effect.Appear(this.items[this.actitem],{
					duration: this.fadeSpeed,
					afterFinish: function(){
						this.appendEvents();
						this.startAutoSlide();
					}.bind(this)
				});
				break;
			default:
				break;
		}
	},
	
	appendEvents: function(){
		this.container.observe('mouseover', function(event){
			window.clearInterval(this.slideTicker);
			event.stop();
		}.bind(this))
		this.container.observe('mouseout', function(event){
			window.clearInterval(this.slideTicker);
			this.startAutoSlide();		
			event.stop();

		}.bind(this));
	},
	
	show: function(itemnr){
		if(this.isMoving){
			return;
		}
		
		this.isMoving = true;
		window.clearInterval(this.slideTicker);
		
		
		if(this.mode == 'slide'){
			this.actitem = itemnr;
			var efx = new Effect.Move(this.container, {
				duration: this.speed,
				x: -((this.actitem + 1) * this.itemWidth),
				y: 0,
				mode: 'absolute',
				transition: this.transition,
				afterFinish:function(){this.isMoving = false;}.bind(this)
			});
		}
		else if(this.mode == 'fade'){
			if(this.actitem == itemnr){
				this.isMoving = false;
				return;
			}
			Effect.Fade(this.items[this.actitem],{
				duration: this.fadeSpeed
			});
			this.actitem = itemnr;
			Effect.Appear(this.items[itemnr],{
				duration: this.fadeSpeed,
				afterFinish: function(){	
					this.isMoving = false;
				}.bind(this)
			});
		}
		this.updateNavBar();	
	},
	
	updateNavBar: function(){
		var navItems = this.navcontainer.select('li.lfs-nav');
		
		//remove next and prev links
		navItems.pop();
		navItems.shift();
		//console.log(navItems);
		
		navItems[this.actitem].addClassName('active');
		navItems.each(function(item){
			if(navItems.indexOf(item) != this.actitem){
				item.removeClassName('active');
			}
		},this);
		
	},
	
	
	startAutoSlide: function(){
		window.clearInterval(this.slideTicker);
		this.slideTicker = window.setInterval(this.moveLeft.bind(this), this.slideInterval);
	},
	
	previous: function(){
		window.clearInterval(this.slideTicker);
		this.moveRight();
	},
	next: function(){
		window.clearInterval(this.slideTicker);
		this.moveLeft();
	},
		
	moveLeft: function(){
		if(this.isMoving){
			return;
		}		
		this.isMoving = true;
		
		if (this.mode == "fade") {
			Effect.Fade(this.items[this.actitem],{
				duration: this.fadeSpeed
			});
			this.actitem++;
			if(this.actitem == this.itemsCount){
				this.actitem = 0;
			}
			Effect.Appear(this.items[this.actitem],{
				duration: this.fadeSpeed,
				afterFinish:function(){
					this.isMoving = false;						
				}.bind(this)
			});
			this.isMoving = false;
				
		}
		else if(this.mode == "slide"){
			this.actitem++;
			if (this.actitem < this.itemsCount) {
				var efx = new Effect.Move(this.container, {
					duration: this.speed,
					x: -this.itemWidth,
					y: 0,
					mode: 'relative',
					transition: this.transition,
					afterFinish: function(){
						this.isMoving = false;
					}.bind(this)
				});
			}
			else {
				this.actitem = 0;
				var efx = new Effect.Move(this.container, {
					duration: this.speed,
					x: -this.itemWidth,
					y: 0,
					mode: 'relative',
					transition: this.transition,
					afterFinish: function(){
						this.container.setStyle({
							'top': 0,
							'left': -this.itemWidth + 'px',
							'position': 'relative'
						});
						this.isMoving = false;
					}.bind(this)
				});
			}
		}
		this.updateNavBar();
	},
	
	moveRight: function(){
		if(this.isMoving){
			return;
		}	
		this.isMoving = true;

		if(this.mode == "fade"){
			Effect.Fade(this.items[this.actitem],{
				duration: this.fadeSpeed				
			});
			this.actitem--;
			if(this.actitem == -1){
				this.actitem = this.itemsCount - 1;
			}
			Effect.Appear(this.items[this.actitem],{
				duration: this.fadeSpeed,
				afterFinish: function(){
					this.isMoving = false;
				}.bind(this)
			});
		}
		else if(this.mode == 'slide'){
			this.actitem--;	
			if (this.actitem >= 0) {
				var efx = new Effect.Move(this.container, {
					duration: this.speed,
					x:  +this.itemWidth,
					y: 0,
					mode: 'relative',
					transition: this.transition,
					afterFinish:function(){
						this.isMoving = false;
					}.bind(this)			
				});
			}
			else{
				this.actitem = this.itemsCount - 1;
				var efx = new Effect.Move(this.container, {
					duration: this.speed,
					x: + this.itemWidth,
					y: 0,
					mode: 'relative',
					afterFinish: function(){
						this.container.setStyle({
							'top':'0px',
							'left':-((this.actitem + 1) * this.itemWidth) + 'px',
							'position':'relative'
						});
						this.isMoving = false;					
					}.bind(this)
				});
			}
		}	
		this.updateNavBar();	
	}
});