/**
 *		SLIDESHOW.JS
 *
 *		Maakt van afbeelding url;s een slideshow
 *
 *		Versie: Beta
 *		Datum: 14 feb, 2008
 *
 *		Notes:
 *		- 
 */

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;
		
		// 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) {
		
		var Self = this;
		/*
		// Set button image path
		this.PlaySrc  = './img/slideshow/play.gif';
		this.PauseSrc = './img/slideshow/pause.gif';
		
		// Previous
		var Previous = document.createElement('img');
		Previous = $(Previous);
		Previous.src = './img/slideshow/previous.gif';
		Previous.addClassName('slideshow-button-previous');
		
		Previous.observe('click', Self.previous.bindAsEventListener(this));
		
		ActionContainer.appendChild(Previous);
		
		// PLay
		var Play = document.createElement('img');
		Play = $(Play);
		Play.id = 'slideshow-button-play-' + this.id;
		Play.src = './img/slideshow/play.gif';
		Play.addClassName('slideshow-button-play');
		
		Play.observe('click', Self.play.bindAsEventListener(this));
		
		ActionContainer.appendChild(Play);
		
		// Pause
		var Pause = document.createElement('img');
		Pause = $(Pause);
		Pause.id = 'slideshow-button-pause-' + this.id;
		Pause.src = './img/slideshow/pause.gif';
		Pause.addClassName('slideshow-button-pause');
		
		Pause.setStyle({
			display: 'none'
		});
		
		Pause.observe('click', Self.pause.bindAsEventListener(this));
		
		ActionContainer.appendChild(Pause);
		
		// Next
		var Next = document.createElement('img');
		Next = $(Next);
		Next.src = './img/slideshow/next.gif';
		Next.addClassName('slideshow-button-next');
		
		Next.observe('click', Self.next.bindAsEventListener(this));
		
		ActionContainer.appendChild(Next);
		*/
		
		
		// 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);
		
		
		/*// FPS Slider
		var sFpsContainer = document.createElement('div');
		sFpsContainer = $(sFpsContainer);
		sFpsContainer.addClassName('slideshow-fps-slide-container');
		
		// Track
		var sFpsTrack = document.createElement('div');
		sFpsTrack = $(sFpsTrack);
		sFpsTrack.id = 'slideshow-fps-slide-track-' + this.id;
		sFpsTrack.addClassName('slideshow-fps-slide-track');
		
		// Handler
		var sFpsHandler = document.createElement('div');
		sFpsHandler = $(sFpsHandler);
		sFpsHandler.id = 'slideshow-fps-slide-handler-' + this.id;
		sFpsHandler.addClassName('slideshow-fps-slide-handler');
		sFpsTrack.appendChild(sFpsHandler);
		
		sFpsContainer.appendChild(sFpsTrack);
		ActionContainer.appendChild(sFpsContainer);
		*/
		
		// 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();
		}
		
		// Set FPS slider
		/*this.fpsSlider = new Control.Slider('slideshow-fps-slide-handler-' + this.id, 'slideshow-fps-slide-track-' + this.id, {
			
			range:$R(0, 6),
			axis:'vertical'
		});
		
		this.fpsSlider.options.onSlide = function (value) {
			
			//Self.pause();
			Self.setFPS( 6 - value );
		}
		
		this.fpsSlider.setValue( 6 - this.options.fps );*/
	},
	
	/**
	 *	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);
				
				/*Self.preTotal--;
				Self.checkLoad();
				Self.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
		});
		
		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.5,
			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.5,
			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();
		
		this.currentId++;
		
		if(this.currentId == this.preTotal)
			this.currentId = 0;
		
		// Set slider value
		this.slider.setValue(this.currentId);
		
		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();
	}
});