var Slideshow = new Class({
 
		Implements : [Options, Chain],
		shown: 0,//index of the picture thats shown.
		thumbPosLeft : 0,//tells us where the tumbs-div is at any given time
		
		options : {
			aantalPics : 0,
			aantalThumbsToTheLeft : 6, //aantal thumbs die in een keer worden verschoven
			thumbWidth : 59,
			deep : 0
		},
 
		initialize : function(options){
			this.setOptions(options);
			this.putPicturesInPlace();
			if(this.options.aantalPics > 1){
				this.makeThumbs();		
			}
		},
		
		makeHider : function (which){
			$('hiderul').setStyle('display','none');
			
			
			$('hider').setStyle('cursor','pointer');
			
			$('hider').addEvent('click', function(){
				if($('hiderul').getStyle('display') == 'none'){
					$('hiderul').setStyle('display','block');
					$('hider').setStyle('background-position','-700px 4px');				
				}else {
					$('hiderul').setStyle('display','none');					
				}
											  
			});
			$('hider').addEvent('mouseover', function(){
				$('hider').setStyle('background-position','7px 4px');
			});
			
			$('hider').addEvent('mouseout', function(){
				$('hider').setStyle('background-position','-700px 4px');
			});
		},
		
		next : function (which){
			this.show(which + 1);
			this.hide(which)
		},
		
		showLargePicture : function (which){
			this.hide(this.shown)
			this.show(which);
		},
		
		showLargePictureAndUpdateNav : function (which){
			this.hide(this.shown)
			this.show(which);
			this.updateNav(which);
		},		
		
		show : function(which){
			$$('div.fotowrapper')[which].setStyle('display','block');
			this.shown = which;
			$('fotos_bottom').setStyle('top', $$('img.slideshow_full')[which].get('height')+'px');	
			this.updateCountSpace(which + 1);
		},
		
		updateNav : function(which){
			var totalWidth = this.options.aantalPics * this.options.thumbWidth;
			var offset = this.options.thumbWidth * this.options.aantalThumbsToTheLeft;
			
			var limitleft = (this.options.aantalPics - 7) * this.options.thumbWidth * (-1);
			var newpos = this.options.thumbWidth * which * (-1);			
			newpos = Math.max(newpos, limitleft);

			if (newpos >= limitleft){
				$('thumbs').setStyle('left', newpos);	
				this.thumbPosLeft = newpos;
			}		
			
			if(newpos < 0){
				$('thumbnavleft').setStyle('display','block');
			} else {
				$('thumbnavleft').setStyle('display','none');
			}
			if(newpos > limitleft){
				$('thumbnavright').setStyle('display','block');	
			} else {
				$('thumbnavright').setStyle('display','none');	
			}
		},
		
		hide : function(which){
			$$('div.fotowrapper')[which].setStyle('display','none');
		},
		
		updateAltSpace : function(){
			var alt = $$('div.fotowrapper')[this.shown].getElement('img').get('alt');
			if(alt == "" || alt == null || alt == " "){alt = " "}
			$('altspace').set('html',"<p>"+alt+"</p>");
			
			if(this.options.aantalPics > 1){
				this.updateCountSpace(this.shown + 1);
			}
		},
		
		updateCountSpace : function(which){
			$('countspace').setStyle('opacity',1);
			this.clearChain();
			this.chain(function(){$('countspace').set('html',"<p>"+which+"/"+this.options.aantalPics+"</p>")});
			this.chain(function(){$('countspace').fade('out')});
			
			this.callChain();
			this.callChain.delay(1500,this);
		},		
		
		makeThumbs : function () {
			$('thumbnavleft').setStyle('display','none');
			
			$('fotos_bottom').setStyle('top', $$('img.slideshow_full')[0].get('height')+'px');
			var totalWidth = this.options.aantalPics * 65;
			$('thumbs').setStyle('width',totalWidth);
			$('thumbspace').setStyle('display','block');
			$('thumbnavleft').setStyle('opacity','0.2');
			$('thumbnavright').setStyle('opacity','0.2');
			$('thumbnavright').addEvent('mouseleave', function(){
				this.tween('opacity','0.2');										   
			});
			$('thumbnavleft').addEvent('mouseleave', function(){
				this.tween('opacity','0.2');										   
			});
			$('thumbnavright').addEvent('mouseenter', function(){
				this.tween('opacity','1');										   
			});
			$('thumbnavleft').addEvent('mouseenter', function(){
				this.tween('opacity','1');										   
			});
			$('thumbnavright').addEvent('click', this.moveThumbsToTheLeft.bind(this));
			$('thumbnavleft').addEvent('click', this.moveThumbsToTheRight.bind(this));
			$$('div.thumbsmetkader').each(function(el, index){						  
				el.getElement('div.kader').setStyle('opacity',0);	
				el.addEvent('mouseenter', function(){
					el.getElement('div.kader').setStyle('opacity',1);											   
				});
				el.addEvent('mouseleave', function(){
					el.getElement('div.kader').setStyle('opacity',0);													   
				});
				el.addEvent('click', this.showLargePicture.bind(this,index));
				
				var h = el.getElement('img').get('height');			
				if(h < 54){
					var top = (54 - h) / 2
					el.getElement('img').setStyle('top', top+'px');	
				}
				
				var w = el.getElement('img').get('width');			
				if(w < 54){
					var left = (54 - w) / 2
					el.getElement('img').setStyle('left', left+'px');	
				}				

			}, this);
			if(this.options.aantalPics < 8){
				$('thumbnavright').setStyle('display','none');	
				$('thumbnavright').setStyle('cursor','default');	
			}
			//$$('div.kader')[this.shown].setStyle('opacity',1);		
		},
		
		moveThumbsToTheLeft : function(){
			var offset = this.options.thumbWidth * this.options.aantalThumbsToTheLeft;
			var limit = this.options.thumbWidth * (this.options.aantalPics - 7) * (-1);
			var newPos = this.thumbPosLeft - offset;
			newPos = Math.max(newPos, limit);
			if (newPos >= limit){
				$('thumbs').tween('left',this.thumbPosLeft, newPos);
				this.thumbPosLeft = newPos;
				this.updateNavigation();
			}
		},
		
		moveThumbsToTheRight : function(){
			var offset = this.options.thumbWidth * this.options.aantalThumbsToTheLeft;
			var limit = 0;
			var newPos = this.thumbPosLeft + offset;
			newPos = Math.min(newPos, limit);
			if (newPos <= limit){
				$('thumbs').tween('left',this.thumbPosLeft, newPos);
				this.thumbPosLeft = newPos;
				this.updateNavigation();
			}
		},
		
		updateNavigation : function () {	
			var totalWidth = this.options.aantalPics * this.options.thumbWidth;
			var offset = this.options.thumbWidth * this.options.aantalThumbsToTheLeft;
			var limitleft = Math.floor(totalWidth / offset)  * offset * (-1);
			var limit = this.options.thumbWidth * (this.options.aantalPics - 7) * (-1);

			if(this.thumbPosLeft == 0){
				$('thumbnavleft').setStyle('display','none');	
				$('thumbnavright').setStyle('display','block');					
			} else if(this.thumbPosLeft == limitleft || this.thumbPosLeft == limit){
				$('thumbnavleft').setStyle('display','block');	
				$('thumbnavright').setStyle('display','none');	
			} else if(this.thumbPosLeft < 0){
				$('thumbnavleft').setStyle('display','block');	
				$('thumbnavright').setStyle('display','block');	
			}		
		},
		
		putPicturesInPlace : function () {
			$$('div.fotowrapper').each(function(el, index){
												
				if(index > 0){
					el.setStyle('display','none');											
				} else {
					el.setStyle('display','block');		
				}
				var picWidth = $$('img.slideshow_full')[index].get('width');
				
				if(picWidth != 440){
					$$('img.slideshow_full')[index].setStyle('margin-left', ((440 - picWidth) / 2)+'px');
						
				}
				var picHeight = $$('img.slideshow_full')[index].get('height');
				
				el.setStyle('height', picHeight+'px');
				
				el.setStyle('z-index', this.options.aantalPics - index);
				
 				if(index < (this.options.aantalPics - 1)){
					el.getElement('img').addEvent('click', this.next.bind(this,index));
					el.getElement('img').setStyle('cursor','pointer');
				}
			}, this);
			$$('div.fotowrapper')[this.options.aantalPics  - 1].getElement('img').setStyle('cursor','default');
		}

});