/* Static class for the rotating header images */
RotatingTeaserImage = {

	/* Header element */
	_nodeHeader: null,

	/* H1 element */
	_nodeH1: null,

	/* Holds the index for the active header image */
	_currentImage: 0,

	/* Array of header images */
	_images: new Array(),

	/* Array of DOM Images, the indexes match this._images */
	_domImages: new Array(),

	/* Interval in seconds for loading the next header image */
	_interval: 5,

	/* Duration in seconds for the fade effect */
	_fadeDuration: 3,

	/**
	 * Sets the interval for loading the next header image.
	 *
	 * @param float interval (in seconds)
	 */
	setInterval: function(interval)
	{
		this._interval = interval;
	}, // function setInterval

	/**
	 * Sets the duration of the fade effect.
	 *
	 * @param float duration (in seconds)
	 */
	setFadeDuration: function(duration)
	{
		this._fadeDuration = duration;
	}, // function setFadeDuration

	/**
	 * Adds a new image to the array.
	 *
	 * @param string src
	 */
	addImage: function(src)
	{
		this._images.push(src);
	}, // function addImage

	/**
	 * Starts the header image rotation.
	 *
	 * Should be called on document load.
	 */
	start: function()
	{
		/* only start if there are two or more images available */
		if (this._images.length < 2)
		{
			return;
		}
		
		/* Save references to required nodes */
		this._nodeHeader = $("teaser_rotate");

		/* only start when node exists */
		if (this._nodeHeader)
		{
			/* Periodically load a new header image */
			var self = this;
			new PeriodicalExecuter(function() { self._showNextImage(); }, this._interval);

			/* preload images */
			this._preloadImages();
		}
	}, // function start

	/**
	 * Shows the next image in line.
	 */
	_showNextImage: function()
	{
		/* Move the previous header image to the background */
		this._moveImageToBackground(this._currentImage);

		/* Get the index for the next image in line */
		this._currentImage = this._getNextImageIndex();

		/* Add the next header image to the DOM, if not yet added */
		if (!$("rotate-header-image-" + this._currentImage))
		{
			this._insertImageIntoDOM(this._currentImage);
		}

		/* Fade in the image */
		Effect.Appear("rotate-header-image-" + this._currentImage, {"duration": this._fadeDuration});
	}, // function _showNextImage

	/**
	 * Returns the next image index.
	 *
	 * @return int
	 */
	_getNextImageIndex: function()
	{
		return (this._currentImage < (this._images.length - 1)) ? this._currentImage + 1 : 0;
	}, // function _getNextImageIndex

	/**
	 * Moves an image to the background, hiding the original.
	 */
	_moveImageToBackground: function(i)
	{
		/* Set image as background image */
		this._nodeHeader.style.backgroundImage = "url('" + this._images[i] + "')";

		/* If the image is available in the DOM, hide it */
		if ($("rotate-header-image-" + i))
		{
			$("rotate-header-image-" + i).style.display = "none";
		}
	}, // function _moveImageToBackground

	/**
	 * Inserts an image into the DOM.
	 */
	_insertImageIntoDOM: function(i)
	{
		/* check if preloaded */
		if (!this._domImages[i])
		{
			this._domImages[i] = this._createDOMImage(i);
		}
		this._nodeHeader.appendChild(this._domImages[i]);
	}, // function _insertImageIntoDOM
	
	_preloadImages: function()
	{
		/* loop images */
		for (var i = 0; i < this._images; i++)
		{
			/* check if already preloaded */
			if (!this._domImages[i])
			{
				/* if not, preload */
				this._domImages[i] = this._createDOMImage(i);
			}
		}
	}, // function _preloadImages
	
	_createDOMImage: function(i)
	{
		return Builder.node("div", {"id": "rotate-header-image-" + i, "class": "rotate-header-image", "style": "display: none"}, [Builder.node("img", {"src": this._images[i], "width": 349, "height": 151})]);
	} // function _createDOMImage

}; // class RotatingTeaserImage