/**
* Assign the view handler
*/

viewHandler = Collection;

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

	var _instance = this;
	var _imageCache = [];

	this._thumbnailCurrent = 1;
	this._thumbnailCount = 1;
	this._thumbnailWidth = 148;
	this._thumbnailWindow = 6;
	this._thumbnailAdvance = 4;

	this._scrollInProgress = false;



	// 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);


		// 1. Setup the thumbnail scrolling
		xhtml._thumbnailCount = document.getElementById('content').getElementsByTagName('a').length;
		xhtml._thumbnailCurrent = parseInt(document.getElementById('content').className.replace('item', '') * 1);
		_updateButtons();

		// Store the current position to use on the next page
		cookie.set('firstthumbnail', xhtml._thumbnailCurrent);

		// 2. Add event handlers to view thumbnails
		var anchors = document.getElementById('collectionContentViews').getElementsByTagName('a');
		for (var x = 0; x < anchors.length; x++)
			{
			// Cache the large view
			_imageCache.push(new Image());
			_imageCache[_imageCache.length-1].src = anchors[x].getElementsByTagName('img')[0].src.replace('small', 'large');

			// Add the event handler
			anchors[x].onclick = function()
				{
				// Reset the active class
				var anchors = document.getElementById('collectionContentViews').getElementsByTagName('a');
				for (var x = 0; x < anchors.length; x++)
					{
					anchors[x].className = '';
					}

				// Set the active class
				this.className = 'active';

				// Update the image
				document.getElementById('fullsize').src = this.childNodes[0].src.replace('small', 'large');
				}
			}


		// 3. Add event handlers to related products
		var anchors = document.getElementById('content').getElementsByTagName('a');
		for (var x = 0; x < anchors.length; x++)
			{
			// Cache rollover image
			var currentImage = anchors[x].getElementsByTagName('img')[0];
			var previous = currentImage.getAttribute('rolloverId');
			var next = currentImage.getAttribute('currentId');
			_imageCache.push(new Image());
			_imageCache[_imageCache.length-1].src = currentImage.src.replace('imageId=' + previous, 'imageId=' + next);

			// Add mouse over and out events
			anchors[x].onmouseover = function()
				{
				var currentImage = this.getElementsByTagName('img')[0];
				var normal = currentImage.getAttribute('currentId');
				var rollover = currentImage.getAttribute('rolloverId');
				currentImage.src = currentImage.src.replace('imageId=' + normal, 'imageId=' + rollover);
				}
			anchors[x].onmouseout = function()
				{
				var currentImage = this.getElementsByTagName('img')[0];
				var normal = currentImage.getAttribute('currentId');
				var rollover = currentImage.getAttribute('rolloverId');
				currentImage.src = currentImage.src.replace('imageId=' + rollover, 'imageId=' + normal);
				}
			}
		}


	/**
	* Scrolls the thumbnail container left, to show the additional thumbail(s) that are on the right
	*/
	this.next = function()
		{
		// Check if we can scroll
		if ( xhtml._thumbnailCurrent < (xhtml._thumbnailCount - xhtml._thumbnailWindow + 1) && xhtml._scrollInProgress == false)
			{
			var previousThumbnail = xhtml._thumbnailCurrent;

			// Increase the current item
			xhtml._thumbnailCurrent += xhtml._thumbnailAdvance;

			// Bound the new position
			if ( (xhtml._thumbnailCount - xhtml._thumbnailWindow + 1) < xhtml._thumbnailCurrent)
				{
				xhtml._thumbnailCurrent = (xhtml._thumbnailCount - xhtml._thumbnailWindow + 1);
				}

			// Update the container location
			this.scroll( _calculateOffset(previousThumbnail), _calculateOffset(xhtml._thumbnailCurrent), -1);

			// Store the current position to use on the next page
			cookie.set('firstthumbnail', xhtml._thumbnailCurrent);

			// Update the scroll buttons
			_updateButtons();
			}
		}

	/**
	* Scrolls the thumbnail container right, to show the previous displayed (and now hidden) thumnail(s)
	*/
	this.prev = function()
		{
		// Check if we can scroll
		if (xhtml._thumbnailCurrent != 1 && xhtml._scrollInProgress == false)
			{
			var previousThumbnail = xhtml._thumbnailCurrent;

			// Increase the current item
			xhtml._thumbnailCurrent -= xhtml._thumbnailAdvance;

			// Bound the new position
			if ( xhtml._thumbnailCurrent < 1)
				{
				xhtml._thumbnailCurrent = 1;
				}

			// Update the container location
			this.scroll( _calculateOffset(previousThumbnail), _calculateOffset(xhtml._thumbnailCurrent), 1);

			// Store the current position to use on the next page
			cookie.set('firstthumbnail', xhtml._thumbnailCurrent);

			// Update the scroll buttons
			_updateButtons();
			}
		}


	/**
	* Scrolls the thumbnail container to the specified location
	*
	* @param		currentOffset		The current "left" location relative to the container div in pixels
	* @param		newOffset	 			The target "left" location to move to
	* @param		direction				Either -1 or 1 indicating whether the scroll is left or right
	*/
	this.scroll = function(currentOffset, newOffset, direction)
		{
		xhtml._scrollInProgress = true;

		// Update the container location
		currentOffset += direction * 6;
		document.getElementById('content').style.left = currentOffset + 'px';

		// Check if we need to recurse
		if ( 3 < Math.abs(currentOffset - newOffset) )
			{
			setTimeout('xhtml.scroll(' + currentOffset + ', ' + newOffset + ', ' + direction + ');', 10);
			}
		else
			{
			document.getElementById('content').style.left = _calculateOffset(xhtml._thumbnailCurrent) + 'px';
			xhtml._scrollInProgress = false;
			}
		}


	/**
	* Logs touch start event
	*
	* @param		event		The touch event
	* @return		void
	*/
	this.productsTouchStart = function(event) {
		// event.preventDefault();
		if (isNaN(parseInt(document.getElementById('content').style.left)))
			{
			document.getElementById('content').style.left = '0px';
			}
		xhtml.startDivX = parseInt(document.getElementById('content').style.left);
		xhtml.startTouchX = event.targetTouches[0].pageX;
		}


	/**
	* Logs touch move event
	*
	* @param		event		The touch event
	* @return		void
	*/
	this.productsTouchMove = function(event) {
		event.preventDefault();
		xhtml.touchOffset = (xhtml.startTouchX - event.targetTouches[0].pageX) * -1;

		var offset = (xhtml.startDivX + xhtml.touchOffset);
		if (0 < offset)
			{
			offset = 0;
			}
		if (offset < ((xhtml._thumbnailCount - 6) * xhtml._thumbnailWidth * -1))
			{
			offset = ((xhtml._thumbnailCount - 6) * xhtml._thumbnailWidth * -1);
			}

		xhtml._thumbnailCurrent = ((offset * -1) / xhtml._thumbnailWidth) + 1;
		document.getElementById('content').className = 'item' + (((offset * -1) / xhtml._thumbnailWidth) + 1);

		document.getElementById('content').style.left = offset + 'px';
		}


	/**
	* Logs touch end event
	*
	* @param		event		The touch event
	* @return		void
	*/
	this.productsTouchEnd = function(event) {
		xhtml.touchOffset = 0;
		}


	/**
	* Logs touch cancel event
	*
	* @param		event		The touch event
	* @return		void
	*/
	this.productsTouchCancel = function(event) {
		xhtml.touchOffset = 0;
		}



	/**
	* Updates the previous and next scroll buttons, setting them as disabled where necessary
	*/
	function _updateButtons()
		{
		// Update previous button
		if ( 1 < xhtml._thumbnailCurrent )
			{
			document.getElementById('collectionContentProductsPrev').className = '';
			}
		else
			{
			document.getElementById('collectionContentProductsPrev').className = 'disabled';
			}

		// Update next button
		if ( xhtml._thumbnailCurrent < (xhtml._thumbnailCount - xhtml._thumbnailWindow + 1) )
			{
			document.getElementById('collectionContentProductsNext').className = '';
			}
		else
			{
			document.getElementById('collectionContentProductsNext').className = 'disabled';
			}
		}


	/**
	* Calucates the position of the container to display the specified thumbnail first in the window
	*
	* @param		thumbnail			The thumbnail number
	* @return		The left offset in pixels
	*/
	function _calculateOffset(thumbnail)
		{
		return ((thumbnail - 1) * xhtml._thumbnailWidth * -1);
		}
	}