var slideshow = "";

window.addEvent('domready', function() {
	if($('slideshow')){
		slideshow = new Slideshow();
	}
});







var Slideshow = new Class({
 
		Implements : [Options],
		picShown : 0, //index van de foto die getoond wodt op dat moment
		
		options : {
			slideshow_image_max_width : 349
		},
 
		initialize : function(options){
			this.setOptions(options);
			this.positionPictures();
			$('slideshow_nav').setStyle('display','block');
			$('slideshow').getElements('div.slideshow_image').each(function(el, index){
				if(index != 0){															
					el.setStyle('display','none');
				}
			});
			this.makeAltCaptions();	
			this.makeHovers();	
		},

		positionPictures : function(){
			var l = 0;
			var w = 0;
			$each($('slideshow').getElements('div.slideshow_image_bg'), function(el, index){
				var pic = el.getElement('img');
				var picWidth = el.getElement('div.image_info').get('html');
				
				l = (this.options.slideshow_image_max_width - picWidth) / 2;	
				pic.setStyle('left', l+'px');				
			},this);	
		},

		makeHovers : function(){
			$('slideshow_nav').getElements('div.slideshow_navitem')[0].addClass('ooover');
			$each($('slideshow_nav').getElements('div.slideshow_navitem'), function(el, index){
				el.addEvent('click', function(){
					this.showPicture(index);
				}.bind(this));
				el.addEvent('click', function(){
					this.removeAllHovers();						  	
					el.addClass('ooover');
				}.bind(this));					
			},this);	
		},
		
		removeAllHovers : function(){
			$('slideshow_nav').getElements('div.slideshow_navitem').each(function(el, index){
				el.removeClass('ooover');		
			},this);	
		},	
		
		makeAltCaptions : function(){
			$each($('slideshow').getElements('div.slideshow_image'),function(el, index){
				
				var alt = el.getElement('img').getProperty('alt');
				
				if(alt == null || alt.length == 0){
					alt = ' ';	
				}
			
				var altElement = new Element('div',{
					'class': 'altElement',
					'html': alt
				});
			
				altElement.inject(el,'bottom');			

			},this);	
		},	
		
	
		showPicture : function (index){
			if(index != this.picShown){
				// de elements van de twee images waar het om draait
				var from = $('slideshow').getElements('div.slideshow_image')[this.picShown];
				var to = $('slideshow').getElements('div.slideshow_image')[index];
				
				// twee Fx instances
				this.fromFx = new Fx.Tween(from);	
				this.toFx = new Fx.Tween(to);	
			
				to.setStyle("opacity",'0');
				to.setStyle("display",'block');
				
				this.fromFx.start('opacity', 0);
				from.setStyle("display",'none');
				
				this.toFx.start('opacity', 1);
				
				this.picShown = index;
			}
		},
	
		attachStyle : function(src) {
			var linker = new Element('link');
				linker.setProperties({
				rel: 'stylesheet',
				type: 'text/css',
				media: 'all',
				href: src
			});
			
			linker.injectBefore($(document.head).getElement('script'));
		}

});