/**
* konfiguration
*/
SlideshowOptions = Object.extend({
	loader_gif: 'share/pics/loader.gif',
	icon_stop: 'share/pics/slideshow/icon_stop.png',
	icon_start: 'share/pics/slideshow/icon_start.png',
	interval: 4,
	appear_duration: 1.0,

	enable_stop: false
}, window.SlideshowOptions || {});


var Slideshow = Class.create({
	image_array: [],
	count_pic_loaded: 0,
	all_pic_loaded: false,
	current_pic1: 0,
	current_pic2: 0,
	stopped: false,
	
	
	/**
	* wird beim erstellen des objekts aufgerufen. 
	* das array mit den bilder urls wird uebergeben.
	* erstellt die notwendigen container:
	*
	* <div id="ditoy_slideshow">
	* 	<div id="ditoy_slideshow_container_1" style="display: none;"><img src="" /></div>
	* 	<div id="ditoy_slideshow_container_2" style="display: none;"><img src="" /></div>
	* 	<div id="ditoy_slideshow_loader"></div>
	* </div>
	*/
	initialize: function(array) {
		this.image_array = array;
        
        
        // notwendige containers erstellen
		var css_width = $('ditoy_slideshow').style.width;
		var css_height = $('ditoy_slideshow').style.height;
		
		$('ditoy_slideshow').setStyle({
			'background': 'white'
		});
		
		$('ditoy_slideshow').appendChild(Builder.node('div', {id:'ditoy_slideshow_container_1'}));
		$('ditoy_slideshow').appendChild(Builder.node('div', {id:'ditoy_slideshow_container_2'}));
		$('ditoy_slideshow').appendChild(Builder.node('div', {id:'ditoy_slideshow_loader'}));
		
		$('ditoy_slideshow_container_1').appendChild(Builder.node('img', {id:'ditoy_slideshow_img_1'}));
		$('ditoy_slideshow_container_2').appendChild(Builder.node('img', {id:'ditoy_slideshow_img_2'}));
		
		$('ditoy_slideshow_container_1').setStyle({
			'width': css_width,
			'height': css_height,	
			'position': 'absolute',
			'display': 'none'
		});
		$('ditoy_slideshow_container_2').setStyle({
			'width': css_width,
			'height': css_height,	
			'position': 'absolute',
			'display': 'none'
		});
		$('ditoy_slideshow_img_1').setStyle({
			'width': css_width,
			'height': css_height
		});
		$('ditoy_slideshow_img_2').setStyle({
			'width': css_width,
			'height': css_height
		});
		$('ditoy_slideshow_loader').setStyle({
			'width': '31px',
			'height': '31px',	
			'position': 'relative',
			'margin': 'auto',
			'top': '100px',
			'background': 'url('+SlideshowOptions.loader_gif+')'
		});
		
		
		// start/stop containers
		if(SlideshowOptions.enable_stop){
			$('ditoy_slideshow').appendChild(Builder.node('img', {id:'ditoy_slideshow_stop', src:SlideshowOptions.icon_stop}));
			$('ditoy_slideshow').appendChild(Builder.node('img', {id:'ditoy_slideshow_start', src:SlideshowOptions.icon_start}));
			
			$('ditoy_slideshow_stop').hide();
			$('ditoy_slideshow_start').hide();
			
			var margin_left = (css_width.substr(0, css_width.length-2)/2)-60;
			$('ditoy_slideshow_stop').setStyle({
				'marginLeft': margin_left+'px',
				'marginTop': '100px',
				'position': 'absolute',
				'cursor': 'pointer'
			});
			$('ditoy_slideshow_start').setStyle({
				'marginLeft': margin_left+'px',
				'marginTop': '100px',
				'position': 'absolute',
				'cursor': 'pointer'
			});
			
			
			$('ditoy_slideshow_stop').onclick = (function(){
				this.user_stop();	
			}).bind(this);
			
			$('ditoy_slideshow_start').onclick = (function(){
				this.user_start();	
			}).bind(this);
			
			$('ditoy_slideshow').onmouseover = (function(){
				this.show_start_stop_icon();
			}).bind(this);
			
			$('ditoy_slideshow').onmouseout = (function(){
				this.hide_start_stop_icon();
			}).bind(this);
		}
	},
	
	/*
	* startet das vorladen der bilder fuer die slideshow.
	*/
	start: function(){
		this.show_loader();
		this.preload_pic();	
	},
    
    /**
    * laedt alle bilder im vorraus.
    * zeigt loader gif solange an.
    */
    preload_pic: function(){
    	var pic_loaded = this.count_pic_loaded+1;
//    	alert(this.image_array.length+' '+pic_loaded);
		if(this.image_array.length >= pic_loaded){
			var img_name = this.image_array[this.count_pic_loaded];
//			alert(img_name);
			this.count_pic_loaded++;
			var img = new Image();	
			img.onload = (function() {
				this.preload_pic();
			}).bind(this);
			img.src = img_name;
		}else{
			this.all_pic_loaded = true;
			this.hide_loader();
			this.start_slideshow();
		}
	},
	
	/**
	* startet die slideshow.
	*/
	start_slideshow: function(){
//		this.update_back_pic();
	
		this.slide();
		if(this.image_array.length > 1){
			rotation = window.setInterval((function(){ this.slide() }).bind(this), SlideshowOptions.interval*1000);
		}
	},
	
	/**
	* interval methode.
	*/
	slide: function(){
		if(!this.stopped){
			backgr = $("ditoy_slideshow_container_2").firstChild;
			$("ditoy_slideshow_container_2").hide();
			backgr.src = this.image_array[this.current_pic1];
	
			Effect.Appear('ditoy_slideshow_container_2', { duration: SlideshowOptions.appear_duration, afterFinish: (function(){
				this.update_back_pic();
			}).bind(this)});
			
			
			this.current_pic2 = this.current_pic1;
			if(this.current_pic1 == this.image_array.length-1){
				this.current_pic1 = 0;	
			}else{
				this.current_pic1++;	
			}
		}
	},
	
	/**
	* wechselt das hintergrund bild.
	*/
	update_back_pic: function(){
		back_pic = $("ditoy_slideshow_container_1").firstChild;
		back_pic.src = this.image_array[this.current_pic2];
		$("ditoy_slideshow_container_1").show();
	},
	
	user_stop: function(){
		this.stopped = true;	
		this.hide_start_stop_icon();
		this.show_start_stop_icon();
	},
	
	user_start: function(){
		this.stopped = false;	
		this.hide_start_stop_icon();
		this.show_start_stop_icon();
	},
	
	/**
	* zeigt den loader.
	*/
	show_loader: function(){
		$("ditoy_slideshow_loader").style.display = "block";
	},
	
	/**
	* versteckt den loader.
	*/
	hide_loader: function(){
		$("ditoy_slideshow_loader").style.display = "none";
	},
	

	show_start_stop_icon: function(){
		if(this.all_pic_loaded){
			if(this.stopped){
				$("ditoy_slideshow_start").style.display = "block";
			}else{
				$("ditoy_slideshow_stop").style.display = "block";
			}
		}
	},
	
	hide_start_stop_icon: function(){
		$("ditoy_slideshow_start").hide();
		$("ditoy_slideshow_stop").hide();
	}
});