var DebugLog = {
	show:function(message){
		//console.log(message);
	}
}

var Galery = Class.create({
	
	initialize: function(){
		/** configuration **/
		this.ssConDiv					= 'con-pictures';		// dom element thats slide
		this.ssBtnLeft					= 'galerie-left-arrow';	// dom element of left button
		this.ssBtnRight					= 'galerie-right-arrow';// dom element of right button
		this.ssInfoBar					= 'galerie-infobar';	// dom element of info view
		this.ssx 						= 425; 					// width of a slidshow item
		this.btnLeftStartPos 			= '-43px';				// startposition of left button
		this.btnLeftEndPos 				= '0px';				// endposition of left button
		this.btnRightStartPos 			= '425px';				// startposition of right button
		this.btnRightEndPos 			= '382px';				// endposition of right button
		this.btnWay						= 43;					// way in pixel for buttons
		/** start state of slideshow **/
		this.currentView 				= 0;
		/** start state of slideshow **/
		this.currentPicture				= 0;
		/** configure onload **/
		this.onLoadHandler();
		
	},
	
	onLoadHandler:function(){
		/**	 get all galerie elements	**/
		this.pictures = document.getElementsByClassName('ss-item');
		/** max width of slideshow **/
		this.maxView 					= this.pictures.length * this.ssx;
		/** set total width of slideshow **/
		$(this.ssConDiv).style.width 	= this.maxView +'px';
		/** set infobar **/
		$(this.ssInfoBar).style.top = "425px";
		this.fadeLayer(this.ssInfoBar, 1, 0.5);
		this.infoBarState = false;
		//this.setInfoBar();
		/** start slideshow **/
		this.startSlideShow();
		this.setPictureObserver();
		this.setArrowBtn();
	},
	
	setArrowBtn:function(){
		
		/** LEFT BUTTON **/
		$(this.ssBtnLeft).style.left = '-43px';
		Event.observe($(this.ssBtnLeft), 'mouseover', function() { Galerie.showControls();});
		Event.observe($(this.ssBtnLeft), 'mouseout', function() { Galerie.hideControls();});
		Event.observe($(this.ssBtnLeft), 'click', function() { Galerie.slideLeft();});
		/** RIGHT BUTTON **/
		$(this.ssBtnRight).style.left = '425px';
		Event.observe($(this.ssBtnRight), 'mouseover', function() { Galerie.showControls();});
		Event.observe($(this.ssBtnRight), 'mouseout', function() { Galerie.hideControls();});
		Event.observe($(this.ssBtnRight), 'click', function() { Galerie.slideRight();});
		/** FADE IN **/
		this.fadeLayer('galerie-left-arrow', 0, 0.5);
		this.fadeLayer('galerie-right-arrow', 0, 0.5);
	},
	
	reset:function(){
		/** start state of slideshow **/
		this.currentView 				= 0;
		/** start state of slideshow **/
		this.currentPicture				= 0;
		var tostart = this.maxView;
		DebugLog.show(this.tostart);
		new Effect.Move(this.ssConDiv, {  
							x: this.maxView-this.ssx, 
	   						transition: Effect.Transitions.sinoidal,
	   						queue: 'end' });
	   	this.setInfoBar();
	},
	
	startSlideShow:function(){
		this.timer = new PeriodicalExecuter(function() { Galerie.slideRight();}, 5);
	},
	slideLeft:function(){
		DebugLog.show(this.currentView);
		if(this.currentView > 0){
			this.fadeLayer(this.ssConDiv, 1, 0.8);
			new Effect.Move(this.ssConDiv, {  
							x: this.ssx, 
	   						transition: Effect.Transitions.sinoidal,
	   						queue: 'end' });
			this.currentView = this.currentView-this.ssx;
			this.fadeLayer(this.ssConDiv, 0.8, 1);
			this.currentPicture--;
			this.setInfoBar();
		}
		DebugLog.show(this.currentView);	
	},
	
	slideRight:function(){
		DebugLog.show(this.currentView);
		if(this.currentView < (this.maxView-this.ssx)){
			this.fadeLayer(this.ssConDiv, 1, 0.8);
			new Effect.Move(this.ssConDiv, {  
							x: -this.ssx, 
	   						transition: Effect.Transitions.sinoidal,
	   						queue: 'end' });
			this.currentView = this.currentView+this.ssx;
			this.fadeLayer(this.ssConDiv, 0.8, 1);
			this.currentPicture++;
			this.setPictureObserver();
			this.setInfoBar();
		}else{ this.reset(); }
		DebugLog.show(this.currentView);
	},
	
	fadeLayer:function(e, from, to){
		new Effect.Fade(e, {  
							from: from,
							to: to, 
	   						transition: Effect.Transitions.sinoidal,
	   						queue: 'end',
	   						duration:0.2 });
	},
	
	showBtn:function (e){
		var target = (e == this.ssBtnLeft)?this.btnWay:-this.btnWay;
		if((e == this.ssBtnRight && $(e).style.left == this.btnRightStartPos) || (e == this.ssBtnLeft && $(e).style.left == this.btnLeftStartPos)){
			new Effect.Move(e, {  
								x: target, 
		   						transition: Effect.Transitions.sinoidal,
		   						duration:0.2   });
		   	if(e == this.ssBtnLeft){if(this.currentView > 0)this.fadeLayer(e, 0.5, 0.8);}
			if(e == this.ssBtnRight){if(this.currentView < (this.maxView-this.ssx))this.fadeLayer(e, 0.5, 0.8);}
		 }
	},
	
	hideBtn:function (e){
		var target = (e == this.ssBtnLeft)?-this.btnWay:this.btnWay;
		if((e == this.ssBtnRight && $(e).style.left == this.btnRightEndPos) || (e == this.ssBtnLeft && $(e).style.left == this.btnLeftEndPos)){
			new Effect.Move(e, {  
								x: target, 
		   						transition: Effect.Transitions.sinoidal,
		   						duration:0.2   });
		   	this.fadeLayer(e, 0.8, 0.5);
		}
	},
	
	setInfoBar:function(state){
		var title = $(this.pictures[this.currentPicture]).title;
		if(this.timer==null){
			if(title != "" && state != 'hide'){
				$(this.ssInfoBar).innerHTML ="<span>" + title + "</span>";
				if($(this.ssInfoBar).style.top == '425px')new Effect.Move(this.ssInfoBar, { y: -65, transition: Effect.Transitions.sinoidal, duration:0.5 });
			}else{
				$(this.ssInfoBar).innerHTML ="<span></span>";
				if($(this.ssInfoBar).style.top == '360px')new Effect.Move(this.ssInfoBar, { y: 65, transition: Effect.Transitions.sinoidal, duration:0.5 });
			}
		}
		if(state == 'hide'){
			if($(this.ssInfoBar).style.top == '360px')new Effect.Move(this.ssInfoBar, { y: 65, transition: Effect.Transitions.sinoidal, duration:0.5 });
		}
	},
	
	setPictureObserver:function(){
		Event.observe(this.pictures[this.currentPicture], 'mouseover', function(e) { Galerie.showControls();});
		Event.observe(this.pictures[this.currentPicture], 'mouseout', function(e) { Galerie.hideControls();});
	},
	
	showControls:function(e){
		if(this.timer)this.timer.stop();this.timer = null;
		this.setInfoBar();
		if(this.mousetimer)this.mousetimer.stop()
		this.showBtn(this.ssBtnLeft);
		this.showBtn(this.ssBtnRight);
	},
	
	hideControls:function(e){	
		this.mousetimer = new PeriodicalExecuter(function(t) { 
			Galerie.hideBtn(Galerie.ssBtnLeft);
			Galerie.hideBtn(Galerie.ssBtnRight);
			Galerie.setInfoBar('hide');
			t.stop();
			//Galerie.startSlideShow();
		}, 1);
	}
});

var LightBox = {

}