/**
 *		SLIDESHOW.JS
 *
 *		Maakt van afbeelding url;s een slideshow
 *
 *		Versie: Beta
 *		Datum: 14 feb, 2008
 *
 *		Notes:
 *		- Slideshow must be append to an relative position div!
 */

var Slideshow = Class.create({
	
	/**
	 *	Create
	 *	Create DOM
	 */	
	create: function (Options) {
		
		if(typeof this.id != "undefined")
			return;
		
		// Set options
		this.options = Options || {};
		this.options.handler = $(this.options.handler) || $(document.body);
		this.options.opacity = this.options.opacity || 0;
		this.options.zIndexCount = 10;
		
		// Set data
		this.Data = Options.images || [];
		
		// Create unique ID
		var date = new Date();
		this.id = date.getMinutes() + '' + date.getMilliseconds();
		
		// Set ss data
		this.timerId = false;
		this.currentId = 0;
		this.isPlay = false;
		
		// Set clock data
		this.clockId = 0;
		this.clockTimer = false;
		
		// Create HTML
		// Container
		var Container = document.createElement('div');
		Container = $(Container);
		Container.id = 'slideshow-container-' + this.id;
		Container.addClassName('slideshow-container');
		
		// Image container
		var ImgContainer = document.createElement('div');
		ImgContainer = $(ImgContainer);
		ImgContainer.id = 'slideshow-image-' + this.id;
		ImgContainer.addClassName('slideshow-image-container');
		Container.appendChild(ImgContainer);
		
		// Action container, buttons and slidebar
		var ActionContainer = document.createElement('div');
		ActionContainer = $(ActionContainer);
		ActionContainer.id = 'slideshow-action-' + this.id;
		ActionContainer.addClassName('slideshow-action-container');
		
		// Progress container
		var progressContainer = document.createElement('div');
		progressContainer = $(progressContainer);
		progressContainer.id = 'slideshow-progressbar-container-' + this.id;
		progressContainer.addClassName('slideshow-progressbar-container');
		
		// Prgress bar
		var progressBar = document.createElement('div');
		progressBar = $(progressBar);
		progressBar.id = 'slideshow-progressbar-' + this.id;
		progressBar.addClassName('slideshow-progressbar');
		progressContainer.appendChild(progressBar);
		
		// Clock
		var clockContainer = document.createElement('div');
		clockContainer = $(clockContainer);
		clockContainer.id = 'slideshow-clock-container-' + this.id;
		clockContainer.addClassName('slideshow-clock-container');
		
		// Clock got 4 pictures
		var clock1 = document.createElement('img');
		clock1 = $(clock1);
		clock1.hide();
		//clock1.src = './img/slideshow/clock_1.png';
		clock1.id = 'slideshow-clock-0-' + this.id;
		clock1.addClassName('slideshow-clock');
		clockContainer.appendChild(clock1);
		
		var clock2 = document.createElement('img');
		clock2 = $(clock2);
		clock2.hide();
		//clock2.src = './img/slideshow/clock_2.png';
		clock2.id = 'slideshow-clock-1-' + this.id;
		clock2.addClassName('slideshow-clock');
		clockContainer.appendChild(clock2);
		
		var clock3 = document.createElement('img');
		clock3 = $(clock3);
		clock3.hide();
		//clock3.src = './img/slideshow/clock_3.png';
		clock3.id = 'slideshow-clock-2-' + this.id;
		clock3.addClassName('slideshow-clock');
		clockContainer.appendChild(clock3);
		
		var clock4 = document.createElement('img');
		clock4 = $(clock4);
		clock4.hide();
		//clock4.src = './img/slideshow/clock_4.png';
		clock4.id = 'slideshow-clock-3-' + this.id;
		clock4.addClassName('slideshow-clock');
		clockContainer.appendChild(clock4);
		
		// Append Clock
		ImgContainer.appendChild(clockContainer);
		
		// 
		ImgContainer.appendChild(progressContainer);
					
		Container.appendChild(ActionContainer);
		
		// Append Slideshow DOM
		this.options.handler.appendChild(Container);
		
		// Preload images
		this.load();
	},
	
	/**
	 *	Create the buttons
	 *	Play, Pause, Stop, Next, Previous, Slider
	 */
	createButtons: function (ImgContainer, ActionContainer) {		
		
		// Slider, create slider handler and track
		var sContainer = document.createElement('div');
		sContainer = $(sContainer);
		sContainer.addClassName('slideshow-slide-container');
		
		// Track
		var sTrack = document.createElement('div');
		sTrack = $(sTrack);
		sTrack.id = 'slideshow-slide-track-' + this.id;
		sTrack.addClassName('slideshow-slide-track');
		
		// Handler
		var sHandler = document.createElement('div');
		sHandler = $(sHandler);
		sHandler.id = 'slideshow-slide-handler-' + this.id;
		sHandler.addClassName('slideshow-slide-handler');
		sTrack.appendChild(sHandler);
		
		//
		sContainer.appendChild(sTrack);
		ActionContainer.appendChild(sContainer);
		
		// 56k Update
		// Display some text
		var iContainer = document.createElement('div');
		iContainer = $(iContainer);
		iContainer.setOpacity(.6);
		iContainer.id = 'slideshow-info-background-' + this.id;
		iContainer.addClassName('slideshow-info-background-container');
		$('slideshow-image-' + this.id).appendChild(iContainer);
		
		var iTextSContainer = document.createElement('div');
		iTextSContainer = $(iTextSContainer);
		iTextSContainer.setOpacity(.4);
		iTextSContainer.id = 'slideshow-info-text-shadow-' + this.id;
		iTextSContainer.addClassName('slideshow-info-text-shadow-container');		
		$('slideshow-image-' + this.id).appendChild(iTextSContainer);	
		
		var iTextContainer = document.createElement('div');
		iTextContainer = $(iTextContainer);
		iTextContainer.id = 'slideshow-info-text-' + this.id;
		iTextContainer.addClassName('slideshow-info-text-container');		
		$('slideshow-image-' + this.id).appendChild(iTextContainer);	
	},
	
	/**
	 *	Active the slider
	 */
	activateSlider: function () {
		
		var Self = this;
		
		// Set image slider
		this.slider = new Control.Slider('slideshow-slide-handler-' + this.id, 'slideshow-slide-track-' + this.id, {
			
			range:$R(0, (this.Data.length - 1)),
			
			axis:'horizontal'
		});
		
		this.slider.options.onChange = function (value) {
			
			if(!Self.isPlay)
				Self.Play();
		}
		
		this.slider.options.onSlide = function (value) {
			
			Self.pause();
			Self.gotoId( Math.round(value) );
			
			Self.resetClock();
		}
	},
	
	/**
	 *	Preload the slideshow images
	 */
	load: function () {
		
		this.preloaded = 0;
		this.preTotal = this.Data.length;
		
		this.preTmp = [];
		
		for(i = 0; i < this.Data.length; i++) {
			
			this.preTmp[i] = new Image();
			this.preTmp[i].id = i;
			this.preTmp[i].src = this.Data[i].file;
			
			var Self = this;
			
			// IE second load time bug
			// First time image is loaded fileSize return -1, so it can be preloaded
			// Else just place the image (Skip)
			if(this.preTmp[i].fileSize && this.preTmp[i].fileSize > -1) {
				
				this.preloaded++;
				this.addImage(this.preTmp[i].id);
				this.checkLoad();
				this.setProgress();
			}
			
			this.preTmp[i].onload = function () {
				Self.preloaded++;
				Self.addImage(this.id);
				Self.checkLoad();
				Self.setProgress();
			};
			
			// Throw error when image isn't found
			this.preTmp[i].onerror = function () {
				
				throw("Slideshow: Image not found: " + this.src);
			};
			
			/**
			 * Opera sucks..
			 * Hates preloading images, go and surf on a descent browser
			 */
			if(window.opera || navigator.userAgent.toLowerCase().indexOf('opera')>-1) {
				
				this.preloaded++;
				this.addImage(this.preTmp[i].id);
				this.checkLoad();
				this.setProgress();
			}
		}
	},
	
	/**
	 *	Set progress in the progress bar
	 */
	setProgress: function () {
		
		var W = eval($('slideshow-progressbar-container-' + this.id).getStyle('width').replace('px', ''));
		
		var P = (W / this.preTotal) * this.preloaded;
		
		$('slideshow-progressbar-' + this.id).setStyle({
			width: P + 'px'
		});
	},
	
	/**
	 *	Add image 2 slideshow container
	 */
	addImage: function (id) {
		
		var image = document.createElement('img');
		image = $(image);
		image.src = this.Data[id].file;
		image.id = 'slideshow-image-' + this.id + '-' + id;
		image.addClassName('slideshow-image');
		
		image.setStyle({
			display: 'none',
			opacity: this.options.opacity,
			position: 'absolute',
			left: '0px',
			top: '0px'
		});
		
		/*image.observe('click', function () {
			
			window.location = './?pid=5&sid=' + this.Data[id].sid;
		}.bindAsEventListener(this));*/
		
		$('slideshow-image-' + this.id).appendChild(image);
	},
	
	/**
	 *	Check if al images are loaded, when loaded ???
	 */
	checkLoad: function () {
		
		if(this.preloaded == this.preTotal) {
			
			var Self = this;
			
			setTimeout(function () {
			
				$('slideshow-progressbar-container-' + Self.id).setStyle({
					display: 'none'
				});
				
				// TEMP
				Self.createButtons($('slideshow-image-' + Self.id), $('slideshow-action-' + Self.id));
				Self.activateSlider();
				
				// Start clock
				Self.resetClock();
				
				// Set buttons and display first image
				Self.displayCurrent();
				Self.play();
			}, 200);
		}
	},
	
	//-------------------------------------------------------------------------------------------------------//
	
	hideCurrent: function () {
	
		var Self = this;
		
		var Element = $('slideshow-image-' + this.id + '-' + this.currentId);
		
		new Effect.Opacity('slideshow-image-' + this.id + '-' + this.currentId, {
			
			duration: 0.8,
			from: 1,
			to: this.options.opacity,
			afterFinish: function () {
				
				$(Element).style.display = 'none';
			}
		});
		
		//$('slideshow-image-' + this.id + '-' + this.currentId).style.display = 'none';
	},
	
	displayCurrent: function () {
		
		$('slideshow-info-text-' + this.id).innerHTML = this.Data[this.currentId].info;
		$('slideshow-info-text-shadow-' + this.id).innerHTML = this.Data[this.currentId].info;
		
		$('slideshow-image-' + this.id + '-' + this.currentId).style.display = 'block';
		
		new Effect.Opacity('slideshow-image-' + this.id + '-' + this.currentId, {
			
			duration: 0.8,
			from: this.options.opacity,
			to: 1
		});
	},
	
	/**
	 *	Let's play
	 */
	play: function () {
		
		clearTimeout(this.timerId);
		
		//$('slideshow-button-play-' + this.id).hide();
		//$('slideshow-button-pause-' + this.id).show();
		
		this.Play();
	},
	
	Play: function () {
		
		// Active clock
		this.startClock();
		
		var interval = 1000 / this.options.fps;
		var Self = this;
		
		if(!this.isPlay) {
			
			this.isPlay = true;
			
			this.timerId = setTimeout( function () { Self.Play(); }, interval);
			return;
		}
		
		clearTimeout(this.timerId);
		
		this.hideCurrent();
		
		//$('slideshow-image-' + this.id + '-' + this.currentId).style.display = 'none';
		
		this.currentId++;
		
		if(this.currentId == this.preTotal)
			this.currentId = 0;
			
		/*$('slideshow-image-' + this.id + '-' + this.currentId).style.display = 'block';
		$('slideshow-image-' + this.id + '-' + this.currentId).setOpacity(0);
		this.options.zIndexCount++;
		$('slideshow-image-' + this.id + '-' + this.currentId).style.zIndex = this.options.zIndexCount;*/
		
		this.displayCurrent();
		
		this.timerId = setTimeout( function () { Self.Play(); }, interval);
	},
	
	/**
	 *	Goto next image
	 */
	next: function () {
		
		this.pause();
	  
		this.hideCurrent();
		
		this.currentId++;
		
		if(this.currentId == this.preTotal)
			this.currentId = 0;
			
		// Set slider value
		this.slider.setValue(this.currentId);	
		
		this.displayCurrent();
	},
	
	/**
	 *	Goto previous image
	 */
	previous: function () {
		
		this.pause();
		
		this.hideCurrent();
		
		this.currentId--;
		
		if(this.currentId < 0)
			this.currentId = this.preTotal - 1;
		
		// Set slider value
		this.slider.setValue(this.currentId);	
		
		this.displayCurrent();
	},
	
	pause: function () {
		
		clearTimeout(this.timerId);
		
		this.isPlay = false;
		
		//$('slideshow-button-pause-' + this.id).hide();
		//$('slideshow-button-play-' + this.id).show();
	},
	
	gotoId: function (id) {
		
		if(id == this.currentId)
			return;
		
		this.hideCurrent();
		
		this.currentId = id;
		
		this.displayCurrent();
	},
	
	setFPS: function (fps) {
		
		if(!isNaN(fps))
			this.options.fps = fps;
		
		if(this.isPlay) {
			
			clearTimeout(this.timerId);
			this.isPlay = false;
			
			this.Play();
		}
	},
	
	/**
	 *	56k Update
	 */
	
	startClock: function () {
		
		var interval = (1000 / this.options.fps) / 4;
		var Self = this;
		
		this.clockTimer = setTimeout( function () { Self.nextClock(); }, interval );
	},
	
	nextClock: function () {
		
		var interval = ((1000 / this.options.fps) / 4) - 10;
		var Self = this;
		
		// Hide current clock image
		$('slideshow-clock-' + this.clockId + '-' + this.id).hide();
		
		this.clockId++;
		
		if(this.clockId == 4) {
			
			var JJ = true;
			this.clockId = 0;
		}
		
		// Show current clock image
		$('slideshow-clock-' + this.clockId + '-' + this.id).show();
		
		if(!JJ)
			this.clockTimer = setTimeout( function () { Self.nextClock(); }, interval );
	},
	
	resetClock: function () {
		
		clearTimeout(this.clockTimer);
		
		$('slideshow-clock-' + this.clockId + '-' + this.id).hide();
		
		this.clockId = 0;
		
		$('slideshow-clock-' + this.clockId + '-' + this.id).show();
	}
});

// ---------------------------------------------------------------------- //

var Slide = new Slideshow();

var SSData = {
	
	handler: 'fotoprotools_headimage',		// Where the slideshow will be the child of, can be id or element
	fps: .2,
	
	images: [
		
		{file: '../img/fotoprotools_b_2.jpg'},
		{file: '../img/fotoprotools_b_3.jpg'},
		{file: '../img/fotoprotools_b_4.jpg'}
	]
};


Event.observe(window, 'load',

	function () {
		
		Slide.create(SSData);
	}
);