/**
* Assign the view handler
*/

viewHandler = Home;

/**
* Creates a new object with methods used by the Home page
*
* @author				Matt Gifford
* @copyright			2008 Timeshifting Interactive Limited
*/
function Home()
	{
	// Step 1. Define Properties

	var _instance = this;

	this.opacityMode = ((navigator.appName && navigator.appName == 'Microsoft Internet Explorer') ? 'DX_IMAGE_TRANSFORM' : 'W3C');
	this.previousImage = 1;
	this.currentImage = 1;
	this.totalFullsizeImages = 1;
	this.rotationPaused = false;
	this.rotationTimeout = null;
	this.thumbnailCache = [];

	this.animationReferences = { count: 1 };
	this.thumbnailScrollRange = 0;
	this.thumbnailsScrolling = false;
	var _MAX_THUMBNAILS_VISIBLE = 5;
	var _THUMBNAIL_WIDTH = 50;



	// Step 2. Define Public Methods

	/**
	* Sets up the initial page state and event handlers
	*/
	this.init = function()
		{
		// Call generic page init method
		this.base.init.call(this);

		// Add event handlers to thumbnails
		var imgs = document.getElementById('BannerThumbnails').getElementsByTagName('img');
		for (var x = 0; x < imgs.length; x++)
			{
			var newImage = new Image();
			newImage.src = imgs[x].src.replace('-small', '-over');
			this.thumbnailCache.push( newImage );
			imgs[x].onmouseover = function()
				{
				this.src = this.src.replace('-small', '-over');
				xhtml.setFullsizeImage(this.id.replace(/\D/g, '') * 1);
				}
			imgs[x].onmouseout = function()
				{
				this.src = this.src.replace('-over', '-small');
				}
			}

		// Add event handlers to fullsize images
		var divs = document.getElementById('BannerFullsize').getElementsByTagName('div');
		this.totalFullsizeImages = divs.length;
		this.previousImage = this.totalFullsizeImages;
		for (var x = 0; x < xhtml.totalFullsizeImages; x++)
			{
			divs[x].onmouseover = function()
				{
				xhtml.rotationPaused = true;
				}
			divs[x].onmouseout = function()
				{
				xhtml.rotationPaused = false;
				}
			}

		// Setup scrolling of the thumbnails
		var count = document.getElementById('BannerThumbnailsArtboard').getElementsByTagName('div').length;
		if (_MAX_THUMBNAILS_VISIBLE < count)
			{
			this.thumbnailScrollRange = (count - _MAX_THUMBNAILS_VISIBLE) * _THUMBNAIL_WIDTH * -1;		// CSS left position offsets are negative
			}
		document.getElementById('BannerThumbnailsArtboard').style.left = '0px';

		// Start rotation of fullsize watch image
		this.rotationTimeout = setTimeout("xhtml.rotateFullsizeImage();", 3000);
		}


	/**
	* Scrolls the thumbnail container to the left
	*/
	this.thumbnailsPrev = function()
		{
		var offset = parseInt(document.getElementById('BannerThumbnailsArtboard').style.left);

		// Check if we are not already scrolling
		if (xhtml.thumbnailsScrolling == true)
			{
			return;
			}

		// Check if we can scroll
		if (offset < 0)
			{
			// Calculate the scroll destination
			offset += _THUMBNAIL_WIDTH;

			// Set the thumbnails as scrolling
			xhtml.thumbnailsScrolling = true;

			// Animate the artboard
			var anim = new YAHOO.util.Anim(document.getElementById('BannerThumbnailsArtboard'), {left: { to: offset }}, 0.75, YAHOO.util.Easing.easeBoth );
			anim.onComplete.subscribe(
				function()
					{
					xhtml.thumbnailsScrolling = false;
					}
				);
			anim.animate();
			}
		else
			{
			// Animate to indicate we can't scroll any further
			xhtml.thumbnailsScrolling = true;
			var anim = new YAHOO.util.Anim(document.getElementById('BannerThumbnailsArtboard'), {left: { to: 25 }}, 0.15, YAHOO.util.Easing.easeIn );
			anim.onComplete.subscribe(
				function()
					{
					var anim = new YAHOO.util.Anim(document.getElementById('BannerThumbnailsArtboard'), {left: { to: 0 }}, 0.35, YAHOO.util.Easing.easeOut );
					anim.onComplete.subscribe(
						function()
							{
							xhtml.thumbnailsScrolling = false;
							}
						);
					anim.animate();
					}
				);
			anim.animate();
			}
		}


	/**
	* Scrolls the thumbnail container to the right
	*/
	this.thumbnailsNext = function()
		{
		var offset = parseInt(document.getElementById('BannerThumbnailsArtboard').style.left);

		// Check if we are not already scrolling
		if (xhtml.thumbnailsScrolling == true)
			{
			return;
			}

		// Check if we can scroll
		if (this.thumbnailScrollRange < offset)
			{
			// Calculate the scroll destination
			offset -= _THUMBNAIL_WIDTH;

			// Set the thumbnails as scrolling
			xhtml.thumbnailsScrolling = true;

			// Animate the artboard
			var anim = new YAHOO.util.Anim(document.getElementById('BannerThumbnailsArtboard'), {left: { to: offset }}, 0.75, YAHOO.util.Easing.easeBoth );
			anim.onComplete.subscribe(
				function()
					{
					xhtml.thumbnailsScrolling = false;
					}
				);
			anim.animate();
			}
		else
			{
			// Animate to indicate we can't scroll any further
			xhtml.thumbnailsScrolling = true;
			var anim = new YAHOO.util.Anim(document.getElementById('BannerThumbnailsArtboard'), {left: { to: xhtml.thumbnailScrollRange - 25 }}, 0.15, YAHOO.util.Easing.easeIn );
			anim.onComplete.subscribe(
				function()
					{
					var anim = new YAHOO.util.Anim(document.getElementById('BannerThumbnailsArtboard'), {left: { to: xhtml.thumbnailScrollRange }}, 0.35, YAHOO.util.Easing.easeOut );
					anim.onComplete.subscribe(
						function()
							{
							xhtml.thumbnailsScrolling = false;
							}
						);
					anim.animate();
					}
				);
			anim.animate();
			}
		}


	/**
	* Sets the fullsize watch image and info on the homepage
	*
	* @param		id			The id of the image to swap to
	* @return		void
	*/
	this.setFullsizeImage = function(id)
		{
		// Stop the rotation
		xhtml.rotationPaused = true;
		clearTimeout( xhtml.rotationTimeout );

		// rotateFullsizeImage image numbers
		xhtml.previousImage = id - 1;
		xhtml.currentImage = id;
		if (xhtml.totalFullsizeImages < xhtml.previousImage)
			{
			xhtml.previousImage = 1;
			}
		if (xhtml.previousImage < 1)
			{
			xhtml.previousImage = xhtml.totalFullsizeImages;
			}
		if (xhtml.totalFullsizeImages < xhtml.currentImage)
			{
			xhtml.currentImage = 1;
			}

		// Update positions
		var divs = document.getElementById('BannerFullsize').getElementsByTagName('div');
		for (var x = 0; x < xhtml.totalFullsizeImages; x++)
			{
			divs[x].style.zIndex = 100;
			divs[x].style.visibility = 'hidden';
			}

		document.getElementById('BannerFullsize' + xhtml.currentImage).style.zIndex = 200;
		xhtml.setOpacity(document.getElementById('BannerFullsize' + xhtml.currentImage), 100);
		document.getElementById('BannerFullsize' + xhtml.currentImage).style.visibility = 'visible';

		// Continue the content rotation
		xhtml.rotationPaused = false;
		xhtml.rotationTimeout = setTimeout("xhtml.rotateFullsizeImage();", 6000);
		}


	/**
	* Rotates the fullsize watch image and info on the homepage
	*/
	this.rotateFullsizeImage = function()
		{
		if (xhtml.rotationPaused == true)
			{
			xhtml.rotationTimeout = setTimeout("xhtml.rotateFullsizeImage();", 6000);
			return;
			}

		// rotateFullsizeImage image numbers
		this.previousImage++;
		this.currentImage++;
		if (xhtml.totalFullsizeImages < this.previousImage)
			{
			this.previousImage = 1;
			}
		if (xhtml.totalFullsizeImages < this.currentImage)
			{
			this.currentImage = 1;
			}

		// Update positions
		document.getElementById('BannerFullsize' + this.previousImage).style.zIndex = 100;
		document.getElementById('BannerFullsize' + this.currentImage).style.zIndex = 200;

		// Set new image visible but with an opacity of 0%
		this.setOpacity(document.getElementById('BannerFullsize' + this.currentImage), 0);
		document.getElementById('BannerFullsize' + this.currentImage).style.visibility = 'visible';

		// Start fade in for new image
		this.fadeInFullsizeImage(0);

		// Continue the content rotation
		xhtml.rotationTimeout = setTimeout("xhtml.rotateFullsizeImage();", 6000);
		}


	/**
	* Fades in the current image
	*
	* @param		percentage		The current percentage level
	* @return		void
	*/
	this.fadeInFullsizeImage = function(percentage)
		{
		// Set new opacity
		percentage += 5;
		this.setOpacity(document.getElementById('BannerFullsize' + this.currentImage), percentage);

		// Check if we are at 100%
		if (percentage < 100)
			{
			// If not, continue the fade in
			setTimeout("xhtml.fadeInFullsizeImage(" + percentage + ");", 10);
			}
		else
			{
			// Otherwise hide the old image
			document.getElementById('BannerFullsize' + this.previousImage).style.visibility = 'hidden';
			}
		}


	/**
	* Sets the opacity of an object
	*
	* @param		obj							The object to set the opacity of
	* @param		opacityPercent			The opacity for the object as an integer from: 0 to 100
	*/
	this.setOpacity = function(obj, opacityPercent)
		{
		switch ( this.opacityMode )
			{
			case 'W3C':
				var opacityNumeric = opacityPercent/100;
				obj.style.MozOpacity = opacityNumeric;
				obj.style.KhtmlOpacity = opacityNumeric;
				obj.style.opacity = opacityNumeric;
				break;

			case 'DX_IMAGE_TRANSFORM':
				try
					{
					// Add filter if it hasn't been initialized
					if (obj.getAttribute('alphaEnabled') != 1)
						{
						obj.style.filter = 'alpha(opacity=' + opacityPercent + ')';
						obj.setAttribute('alphaEnabled', 1);
						}
					obj.filters.alpha.opacity = opacityPercent;
					}
				catch (err)
					{
					// DirectX filters are unavailable, and since they're only way of doing opacity in Internet Explorer sliently ignore and return
					return;
					}
				break;
			}
		}
	}