/**
* Assign the view handler
*/

viewHandler = Work;

/**
* Creates a new WebPage object with methods used by the Work/Projects page
*/
function Work()
	{
	// Step 1. Define Properties

	var _instance = this;

	_instance.thumbnailsWidth = 0;
	var _grabberBeingDragged = false;
	var _leftButtonDown = false;
	var _draggedObj = null;
	var _leftOffset = 0;
	_scrollDirection = null;


	// 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. Add event handlers to thumbnail images
		if (document.getElementById('workContentThumbs'))
			{
			var images = document.getElementById('workContentThumbs').getElementsByTagName('img');
			for (var x = 0; x < images.length; x++)
				{
				if (images[x].className != '')
					{
					images[x].onclick = __eventHandlerChangeImage;
					}
				}
			}

		// 2. Add event handler for construction popup
		if (document.getElementById('constructionPopup'))
			{
			document.getElementById('constructionPopup').onclick = function()
				{
				var leftOffset = parseInt(window.screen.width) ? ((parseInt(window.screen.width)/2)-442) : 40;
				var topOffset = parseInt(window.screen.height) ? ((parseInt(window.screen.height)/2)-270) : 40;
				window.open(
					this.href,
					'whyConstruction',
					'toolbar=no,location=no,directories=no,status=no,scrollbars=no,resizable=no,copyhistory=no,width=884,height=550,top=' + topOffset + ',left=' + leftOffset
					);
				return false;
				}
			}

		// 3. Setup Scrollbar
		if (document.getElementById('designThumbsWrapper'))
			{
			_instance.thumbnailsWidth = document.getElementById('designThumbsWrapper').getElementsByTagName('span')[0].offsetWidth;
			}

		// Check if a scrollbar is needed
		if (document.getElementById('designThumbsWrapper'))
			{
			if (_instance.thumbnailsWidth < 550)
				{
				document.getElementById('designThumbsScrollbar').className = 'hidden';
				return;
				}

			// Add event handlers		
			document.getElementById('designThumbsScrollbarLeft').onclick = function() { xhtml.scrollLeft(); }
			document.getElementById('designThumbsScrollbarRight').onclick = function() { xhtml.scrollRight(); }
			document.getElementById('designThumbsScrollbarGrabber').onmousedown = function(event) { xhtml.processMouseDown(event); }
			YAHOO.util.Event.addListener(document, 'mousemove', xhtml.processMouseMove, xhtml);
			YAHOO.util.Event.addListener(document, 'mouseup', xhtml.processMouseUp, xhtml);

			// Set the initial scroll position on the target
			document.getElementById('designThumbsWrapper').style.left = '0px';

			// Save the left offset
			_leftOffset = YAHOO.util.Dom.getX('designThumbsScrollbar') + 20;
			}
		}


	/**
	* Scroll the thumbnails to the left
	*/
	this.scrollLeft = function()
		{
		// Scroll the target
		var newX = parseInt(document.getElementById('designThumbsWrapper').style.left) + 20;
		if (0 < newX)
			{
			newX = 0;
			}
		document.getElementById('designThumbsWrapper').style.left = newX + 'px';

		// Reposition the grabber
		var grabberX = Math.ceil((Math.abs(newX) / (_instance.thumbnailsWidth-540)) * 500);
		document.getElementById('designThumbsScrollbarGrabber').style.left = grabberX + 'px';
		}


	/**
	* Scroll the thumbnails to the right
	*/
	this.scrollRight = function(id)
		{
		// Scroll the target
		var newX = parseInt(document.getElementById('designThumbsWrapper').style.left) - 20;
		if ((newX + _instance.thumbnailsWidth-540) < 0)
			{
			newX = (_instance.thumbnailsWidth-540) * -1;
			}
		document.getElementById('designThumbsWrapper').style.left = newX + 'px';

		// Reposition the grabber
		var grabberX = Math.ceil((Math.abs(newX) / (_instance.thumbnailsWidth-540)) * 500);
		document.getElementById('designThumbsScrollbarGrabber').style.left = grabberX + 'px';
		}


	/**
	* Processes and dispatches the Mouse Down event
	*
	* @param		event		the browser event object
	*/
	this.processMouseDown = function(event)
		{
		// Assign event for Internet Explorer
		if (!event)
			{
			event = window.event;
			}

		// Check if the left button was pressed
		if (event.which != 1 && event.button != 1)
			{
			// Middle or right click, so return
			return;
			}

		// Retrieve the object clicked on
		var obj = (!!(window.attachEvent && !window.opera) ? event.srcElement : event.target);

		if (obj.id != 'designThumbsScrollbarGrabber')
			{
			return;
			}

		// Store that the mouse button is down
		_leftButtonDown = true;
		_scrollDirection = 'horizontal';

		// Left click on a draggable object, process drag start
		_dragStart(obj);
		}


	/**
	* Processes and dispatches the Mouse Move event
	*
	* @param		event		the browser event object
	*/
	this.processMouseMove = function(event)
		{
		// Check if an object is being dragged
		if (_grabberBeingDragged == false || _draggedObj == null || _scrollDirection != 'horizontal')
			{
			return;
			}

		// Assign event for Internet Explorer
		if (!event)
			{
			event = window.event;
			}

		// Check if the mouse button is still down, if not release the object from dragging
		if (_leftButtonDown == false)
			{
			_dragEnd();
			return;
			}

		// Process the move event
		_dragMove(!!event.clientX ? event.clientX : event.pageX);
		}


	/**
	* Processes and dispatches the Mouse Up event
	*/
	this.processMouseUp = function()
		{
		// Check if an object is being dragged
		if (_grabberBeingDragged == false || _draggedObj == null || _scrollDirection != 'horizontal')
			{
			return;
			}

		_scrollDirection = null;

		// Process the move event
		_dragEnd();
		}



	// Step 3. Define Private Methods

	/**
	* Sets up the dragging of one of grabbers
	*
	* @param		obj						the object (grabber) clicked on
	*/
	function _dragStart(obj)
		{
		// Disable text selection
		document.onselectstart = function()
					{
					return false;
					}
		document.getElementById('page').style.MozUserSelect = 'none';
		document.getElementById('page').style.KhtmlUserSelect = 'none';
		document.getElementById('page').unselectable = 'on';

		_draggedObj = obj;

		// Store that a grabber is being dragged
		_grabberBeingDragged = true;
		}


	/**
	* Moves the grabber in the document
	*
	* @param		mousePosition		the mouse position at the time of the move event
	*/
	function _dragMove(mousePosition)
		{
		// Update the grabber position
		newX = mousePosition - _leftOffset;

		// Range check for top
		if (newX < 0)
			{
			newX = 0;
			}

		// Range check for bottom
		if (500 < newX)
			{
			newX = 500;
			}

		// Move the grabber
		document.getElementById('designThumbsScrollbarGrabber').style.left = newX + 'px';

		// Scroll the target
		var targetX = Math.ceil((Math.abs(newX) / 500) * (_instance.thumbnailsWidth - 540)) * -1;
		document.getElementById('designThumbsWrapper').style.left = targetX + 'px';
		}


	/**
	* Ends the object dragging
	*/
	function _dragEnd()
		{
		// Enable text selection
		document.onselectstart = null;
		document.getElementById('page').style.MozUserSelect = '';
		document.getElementById('page').style.KhtmlUserSelect = '';
		document.getElementById('page').unselectable = 'off';

		// Store that the grabber is no longer is being dragged
		_grabberBeingDragged = false;
		_draggedObj = null;
		_leftButtonDown = false;
		}


	/**
	* Event Handler for change of the press image
	*/
	function __eventHandlerChangeImage()
		{
		if (document.getElementById(this.className))
			{
			// Hide the other sheets
			var sheets = document.getElementById('workContentSheets').getElementsByTagName('div');
			for (var x = 0; x < sheets.length; x++)
				{
				sheets[x].className = 'hidden';
				}

			// Display the new sheet
			document.getElementById(this.className).className = '';
			}
		}
	}