var effect_running = 0;

/*************************************************************************
  This code is from Dynamic Web Coding at www.dyn-web.com
  Copyright 2001-4 by Sharon Paine
  See Terms of Use at www.dyn-web.com/bus/terms.html
  regarding conditions under which you may use this code.
  This notice must be retained in the code as is!
*************************************************************************/

/*
 * Initialise the product scroller
*/
function initScrollLayer() {

	var wndo = new dw_scrollObj('scroll_window', 'scroll_layer', 'scroll_table');
	//wndo.bSizeDragBar = false;
	wndo.setUpScrollbar("dragBar", "track", "h", 1, 1);	
	
	/* Check if we need to resize the scroll window */
	resizeScrollWindow();
}

function resizeScrollWindow() {

	if (!$('scroll_window')) { return false; }
	if (!$('scroll_layer')) { return false; }
	
	var scroll_window = $('scroll_window');
	var scroll_layer = $('scroll_layer');
		
	if (scroll_window.offsetWidth > scroll_layer.offsetWidth) {
	
		/* Hide the scrollbar */
		//$('scrollbar').style.display = 'none';
	
		/* Get the current width of the scroll window */
		scroll_window_width = scroll_window.offsetWidth;	
		
		/* Set the width of the scroll window and then centre it in the browser */
		scroll_window.style.width = scroll_layer.offsetWidth + 'px';
		scroll_window.style.marginLeft = ((scroll_window_width-scroll_layer.offsetWidth)/2) + 'px';
	}

}

/*
 * Attach mouse hover events to the product name header
 *
 * @return boolean Returns true if successful, or false if unsuccessful 
*/
function attachProductNameRollovers() {

	var i;

	if (!$('scroll_table')) return false;

	table_cells = $('scroll_table').getElementsByTagName('td');

	for (var i = 0; i < table_cells.length; i++) {

		if (table_cells[i].nodeName) {

			table_cells[i].onmouseover = function() {
				product_title = this.getElementsByTagName('h2')[0];
				product_title.style.display = 'block';
			}

			table_cells[i].onmouseout = function() {
				product_title = this.getElementsByTagName('h2')[0];
				product_title.style.display = 'block';
			}

		}

	}
}

/*
 * Attach mouse hover events to the product option color blocks 
 *
 * @return boolean Returns true if successful, or false if unsuccessful 
*/
function attachProductColorRollovers() {

	var i, j;



	if (!$('scroll_table')) return false;
	
	table_cells = $('scroll_table').getElementsByTagName('td');	

	for (var i = 0; i < table_cells.length; i++) {
	
		if (table_cells[i].nodeName) {
		
			// Get the list of images from the 2nd DIV in the table cell, this is the product-colors div
			color_blocks = table_cells[i].getElementsByTagName('div')[1].getElementsByTagName('img')

			// Go through each block and attach the rollover events
			for (var j = 0; j < color_blocks.length; j++) {

				color_blocks[j].onmouseover = function() {	
					this.style.border = "1px solid " + this.style.backgroundColor;
				}

				color_blocks[j].onmouseout = function() {
					this.style.border = "1px solid #D0D0D0";
				}			

			}
			
		}
	}	
}

/*
 * Change over the product option image based on clicking a new color option
 * 
 * @param int $product_id Product ID of color option and the image to swap
 * @param int $opton_id The ID of the product option we want to swap the image to
 * @return boolean Returns true if successful, or false if unsuccessful
*/
function changeProductOptionImage(product_id, option_id) {

	/* Make sure we have some basic JS functionality */
	if (!document.getElementById) { return false; }
	if (!$('product_' + product_id + '_image')) { return false; }

	/* Make sure we arent already doing an image swap */
	if (effect_running == 1) { return false; }

	/* Set flag to show we are currently doing an image swap */
	effect_running = 1;

	/* Make the change image AJAX call */
	x_changeProductOptionImage(product_id, option_id, changeProductOptionImageCallback);

	/* Timeout the effect running flag after 0.8s */
	setTimeout("effect_running = 0;", 800);		
}

/*
 * Change over the product option image based on clicking a new color option
 * 
 * @param int $product_id Product ID of color option and the image to swap
 * @param int $opton_id The ID of the product option we want to swap the image to
 * @return boolean Returns true if successful, or false if unsuccessful
*/
function changeProductOptionImageCallback(option_info) {

	product_id = option_info.product_id;
	product_option_id = option_info.product_option_id;
		
	/* Update the product detail page link */
	if (!$('product_' + product_id + '_cell').getElementsByTagName('a')) return false;
	product_link = $('product_' + product_id + '_cell').getElementsByTagName('a');
	product_link[0].href = 'product/' + product_id + '/option/' + product_option_id;
	
	swapProductOptionImage(product_id, option_info, 'image_scrolling');	
	
	return true;
}

Event.observe(window, 'load', attachProductNameRollovers, false);
Event.observe(window, 'load', attachProductColorRollovers, false);
Event.observe(window, 'load', initScrollLayer, false);