/**
 * Class: SlideShow
 * 
 * Description:
 * Slideshow class that works by given a spritesheet
 * 
 * @bersion: 1.0_21.10.08
 * @author: Dan From <df AT wwi.dk>
 * @copyright: 2008 WWI A/S
 * 
**/

var SlideShow = Class.create();
SlideShow.prototype = {
	
	numberOfImages: 0, // Integer: the number of images
	current: 0, // Integer: the current number (0 is first)
	spriteSheet: null, // String: the url of the spritesheet
	spriteSheetImage: null, // Image: image of the spritesheet
	spriteWidth: 0, // Integer: the width of a single sprite
	spriteHeight: 0, // Integer: the height of a single sprite
	imageTag: null, // Element: the dummy image element that will be replaced
	imageDivTag: null, // Element: the slideshow element
	timer: null, // Timer: the timer that makes the slideshow possible
	waitTimer: null, // Timer: if the user has requested to start the slide, but the sprite isn't loaded
	isWaiting: false, // Boolean: false if the image has been loaded, true if the image has'nt been loaded
	mayBeStarted: false, // Boolean: if the slide timer can be started
	
	
	/**
	 * Constructor:
	 * 
	 * Sets up the slideshow
	 * 
	 * Arguments:
	 * 
	 * String: url of the image
	 * Integer: the width of a sprite
	 * Integer: the height of a sprite
	 * Element: the dummy tag
	 * 
	**/
	initialize: function()
	{
		this.spriteSheet = arguments[0];
		this.spriteWidth = arguments[1];
		this.spriteHeight = arguments[2];
		this.imageTag = arguments[3];
		
		if (!this.imageTag) return;
		
		this.imageDivTag = new Element('div', {
			id: 'slideshowDiv'
		}).update("&nbsp;");
		
		this.imageDivTag.setStyle({
			'width': this.spriteWidth + 'px',
			'height': this.spriteHeight + 'px',
			'backgroundImage': 'url(' + this.spriteSheet + ')',
			'backgroundPosition': '0 0',
			'position': 'relative',
			'top': '-2px'
		});
		
		$(this.imageTag.parentNode).insert(this.imageDivTag, {
			position: 'inside'
		});
		
		this.imageTag.remove();
		
		this.spriteSheetImage = new Image();
		this.spriteSheetImage.src = this.spriteSheet;
		
		var tmpWidth = this.spriteSheetImage.width;
		var tmpHeight = this.spriteSheetImage.height;
		if (tmpWidth == 0 && tmpHeight == 0) {
			this.spriteSheetImage.onload = this.setup.bind(this);
		} else {
			this.setup();
		}
	},
	
	/**
	 * Method: setup
	 * 
	 * Calculates how many images is in the sprite sheet
	 * 
	**/
	
	setup: function()
	{
		var dimensions = this.getImageDimensions();
		var width = dimensions.width;
		var height = dimensions.height;
		
		this.numberOfImages = height / this.spriteHeight;
		this.mayBeStarted = true;
	},
	
	/**
	 * Method: next
	 * 
	 * Finds the next image
	 * 
	**/
	
	next: function()
	{
		this.current++;
		if (this.current == this.numberOfImages) this.current = 0;
		this.updateBackground();
	},
	
	/**
	 * Method: prev
	 * 
	 * Finds the previous image
	 * 
	**/
	
	prev: function()
	{
		this.current--;
		if (this.current == 0) this.current = this.numberOfImages;
		this.updateBackground();
		
	},
	
	/**
	 * Method: updateBackground
	 * 
	 * Shows the image
	 * 
	**/
	
	updateBackground: function()
	{
		var offsetY = (this.current * this.spriteHeight);
		this.imageDivTag.setStyle({
			'backgroundPosition': '0 ' + offsetY + 'px'
		});
	},
	
	/**
	 * Method: start
	 * 
	 * Starts the slideshow, if some criterias is meet
	 * 
	**/
	
	start: function()
	{
		if (this.mayBeStarted) {
			if (this.waitTimer) {
				clearInterval(this.timer);
				this.waitTimer = null;
			}
			this.isWaiting = false;
			this.mayBeStarted = false;
			this.timer = window.setInterval(this.next.bind(this), 5000);
		} else if (!this.isWaiting) {
			this.isWaiting = true;
			this.waitTimer = window.setInterval(this.start.bind(this), 500);
		}
	},
	
	/**
	 * Method: stop
	 * 
	 * Stops the slideshow
	 * 
	**/
	
	stop: function()
	{
		clearInterval(this.waitTimer);
		clearInterval(this.timer);
		this.timer = null;
		this.isWaiting = false;
		this.mayBeStarted = false;
	},
	
	/**
	 * Method: getImageDimensions
	 * 
	 * Returns the dimension of the spritesheet
	 * 
	**/
	
	getImageDimensions: function()
	{
		return {
			height: this.spriteSheetImage.height,
			width: this.spriteSheetImage.width
		};
	}
	
};

/**
 * This is the method that will be runned, when the window is done loading
 * 
**/

var onLoaded = function(){
	var slide = new SlideShow('images/slideshow1.jpg', 120, 120, $('slideshow'));
	slide.start();
};

/**
 * This is the observer, that fires the onLoaded method, when the window is done loading
 * 
**/

Event.observe(window, 'load', onLoaded);