var effect_running = 0;

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

	if (!document.getElementById) { return false; }
	if (!$('product-option-colors')) { return false; }

	image_list = $('product-option-colors').getElementsByTagName('img');

	for (var i = 0; i < image_list.length; i++) {
	
		if (image_list[i].nodeName) {	

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

			image_list[i].onmouseout = function() {
				this.style.border = "1px solid #D0D0D0";
			}
		}		
	}
	return true;
}

/*
 * 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; }
	if (!$('product_'+product_id+'_image_link')) { 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);

	/* Make the fill the available sizes select box AJAX call */
	x_getAvailableProductOptionSizes(product_id, option_id, getAvailableProductOptionSizesCallback);
	
	/* deselect other swatch images */
	
	if(document.getElementById("product-option-colors") !== null) {
		var swatch_labels = document.getElementById("product-option-colors").getElementsByTagName("label");
	} else {
		var swatch_labels = [];
	}
	
	for(i=0;i<swatch_labels.length;i++) {
		swatch_labels[i].className = '';
	}
	
	/* select swatch image */
	if(document.getElementById('label_product_option_'+option_id) !== null) {
		document.getElementById('label_product_option_'+option_id).className = 'selected';
	}
	
	/* Timeout the effect running flag after 0.8s */
	setTimeout("effect_running = 0;", 800);
	
	
}

/*
 * The AJAX callback, this function receives the new product option information
 * 
 * @param array $option_info Information about the product option we want to swap to
 * 							 contains option information and the new image info
 * @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;
	
	/* Make sure we can access the product image link */
	if (!$('product_' + product_id + '_image_link')) return false;
	
	
	/* Update the main product image link */
	//product_image_link.href = 'images/' + option_info.image.image_orig;


	/** update zoom img **/

	product_image_link = $('product_' + product_id + '_image_link');
	imgs = product_image_link.getElementsByTagName("img");
	
	for(i=0;i<imgs.length;i++) {
		if(i < 1 || i > 1) {
			continue;
		}
		product_zoom_image = imgs[i];
		has_img = true;
	}
	
	
	if(!has_img) {
		return false;
	}
	
	product_zoom_image.src = "nav/loading_zoom.gif";
	product_image_link.href = "nav/loading_zoom.gif";

	/* Firefox, MSIE and then everything else */
	if (BrowserDetect.browser == 'Firefox') {

		product_image_preloader = new Image();
		product_image_preloader.src = 'images/' + option_info.image.image_orig;		
		product_image_preloader.onload = function() {			
			product_image_link.href = 'images/' + option_info.image.image_orig;
			//swapImage(product_zoom_image, option_info.image.image_orig);
			product_image_link = $('product_' + product_id + '_image_link');
			imgs = product_image_link.getElementsByTagName("img");
			
			for(i=0;i<imgs.length;i++) {
				if(i < 1 || i > 1) {
					continue;
				}
				product_zoom_image = imgs[i];
				has_img = true;
			}
			product_zoom_image.src = "images/"+option_info.image.image_orig;
			
		}		

	} else if (BrowserDetect.browser == 'MSIE') {

		product_image_preloader = new Image();
		product_image_preloader.src = 'images/' + option_info.image.image_orig;
		product_image_preloader.onload = function() {
			product_image_link.href = 'images/' + option_info.image.image_orig;
			//swapImage(product_zoom_image, option_info.image.image_orig);
			product_image_link = $('product_' + product_id + '_image_link');
			imgs = product_image_link.getElementsByTagName("img");
			
			for(i=0;i<imgs.length;i++) {
				if(i < 1 || i > 1) {
					continue;
				}
				product_zoom_image = imgs[i];
				has_img = true;
			}
			product_zoom_image.src = "images/"+option_info.image.image_orig;
		}

		if (product_image_preloader.complete) {
			product_image_link.href = 'images/' + option_info.image.image_orig;
			//swapImage(product_zoom_image, option_info.image.image_orig);
			product_image_link = $('product_' + product_id + '_image_link');
			imgs = product_image_link.getElementsByTagName("img");
			
			for(i=0;i<imgs.length;i++) {
				if(i < 1 || i > 1) {
					continue;
				}
				product_zoom_image = imgs[i];
				has_img = true;
			}
			product_zoom_image.src = "images/"+option_info.image.image_orig;
			
		}

	} else {
		product_image_link.href = 'images/' + option_info.image.image_orig;
		//swapImage(product_zoom_image, option_info.image.image_orig);
		product_image_link = $('product_' + product_id + '_image_link');
		imgs = product_image_link.getElementsByTagName("img");
		
		for(i=0;i<imgs.length;i++) {
			if(i < 1 || i > 1) {
				continue;
			}
			product_zoom_image = imgs[i];
			has_img = true;
		}
		product_zoom_image.src = "images/"+option_info.image.image_orig;

		/* Safari doesnt work with form labels so we need to check the option manually */
		$('chosen_product_option_' + product_option_id).checked = "checked";

	}
	
	//product_zoom_image.src = 'images/' + option_info.image.image_orig;
	

	/* Display the chosen option name */
	$('chosen-color').innerHTML = option_info.product_option_name;
	
	/* Display the chosen option price */
	$('product-option-price').innerHTML = option_info.display_price;	
	
	swapProductOptionImage(product_id, option_info, 'image_med');
	
	return true;
}

/*
 * AJAX callback to update the options in the available sizes select box
 * 
 * @param array $sizes Contains all available sizes for a specified product ID
 * @return boolean Returns true if successful, or false if unsuccessful
*/
function getAvailableProductOptionSizesCallback(sizes) {

    size_select_box = $('chosen_product_size');

	/* Clear the contents of the select box */
    while (size_select_box.length > 0) {
        size_select_box.remove(0);
    }
    
    /* Add the default choose size message option */
    addOptionToSelectBox(size_select_box, "", document.createTextNode("Choose a size"));
    
    /* Add all the available sizes to the select box */
	
	// Count number of available sizes, this will help us preselect first option if there is only 1 available :)
	var sizes_count = 0;
	for(j in sizes) {
		sizes_count++;
	}
	
    for (i in sizes) {
		var option_selected = false;
		if(sizes_count == 1) {
			option_selected = true;
		}
		
    	if (sizes[i].is_available == 1) {    
    		addOptionToSelectBox(size_select_box, i, document.createTextNode(sizes[i].name),option_selected);
    	} else {
    		addOptionToSelectBox(size_select_box, '', document.createTextNode(sizes[i].name + ' - out of stock'),option_selected);
    	}
    }
    
    /* Just give the size select box a small highlight so people notice its changed */
    new Effect.Highlight(size_select_box, { startcolor:'#FFFF99', endcolor:'#FFFFFF', duration: 1.5 });
}

/*
 * Add a new option to a select box
 * 
 * @param select $select Reference to the select box we wish to add the option
 * @param string $value The value of the new select option
 * @param textnode $content A new TextNode to be added in the DOM as the new option
 * @return boolean Returns true if successful, or false if unsuccessful
*/ 
function addOptionToSelectBox(select, value, content, option_selected) {

    new_option = document.createElement("option");
    new_option.value = value;
    new_option.appendChild(content);
	new_option.selected = option_selected;
    
    select.appendChild(new_option);
    
    return true;
}


/** EY ADDITIONAL SHOTS **/

function swapAdditionalShots(product_id, image_resized, image_orig, product_option_id) {
	
	product_image_link = $('product_' + product_id + '_image_link');
	imgs = product_image_link.getElementsByTagName("img");
	
	for(i=0;i<imgs.length;i++) {
		if(i < 1 || i > 1) {
			continue;
		}
		product_zoom_image = imgs[i];
		has_img = true;
	}
	
	
	if(!has_img) {
		return false;
	}
	
	product_zoom_image.src = "nav/loading_zoom.gif";
	product_image_link.href = "nav/loading_zoom.gif";

	/* Firefox, MSIE and then everything else */
	if (BrowserDetect.browser == 'Firefox') {

		product_image_preloader = new Image();
		product_image_preloader.src = 'images/' + image_orig;		
		product_image_preloader.onload = function() {			
			product_image_link.href = 'images/' + image_orig;
			//swapImage(product_zoom_image, option_info.image.image_orig);
			product_image_link = $('product_' + product_id + '_image_link');
			imgs = product_image_link.getElementsByTagName("img");
			
			for(i=0;i<imgs.length;i++) {
				if(i < 1 || i > 1) {
					continue;
				}
				product_zoom_image = imgs[i];
				has_img = true;
			}
			product_zoom_image.src = "images/"+image_orig;
			
		}		

	} else if (BrowserDetect.browser == 'MSIE') {

		product_image_preloader = new Image();
		product_image_preloader.src = 'images/' + image_orig;
		product_image_preloader.onload = function() {
			product_image_link.href = 'images/' + image_orig;
			//swapImage(product_zoom_image, option_info.image.image_orig);
			product_image_link = $('product_' + product_id + '_image_link');
			imgs = product_image_link.getElementsByTagName("img");
			
			for(i=0;i<imgs.length;i++) {
				if(i < 1 || i > 1) {
					continue;
				}
				product_zoom_image = imgs[i];
				has_img = true;
			}
			product_zoom_image.src = "images/"+image_orig;
		}

		if (product_image_preloader.complete) {
			product_image_link.href = 'images/' + image_orig;
			//swapImage(product_zoom_image, option_info.image.image_orig);
			product_image_link = $('product_' + product_id + '_image_link');
			imgs = product_image_link.getElementsByTagName("img");
			
			for(i=0;i<imgs.length;i++) {
				if(i < 1 || i > 1) {
					continue;
				}
				product_zoom_image = imgs[i];
				has_img = true;
			}
			product_zoom_image.src = "images/"+image_orig;
			
		} 	

	} else {
		product_image_link.href = 'images/' + image_orig;
		//swapImage(product_zoom_image, option_info.image.image_orig);
		product_image_link = $('product_' + product_id + '_image_link');
		imgs = product_image_link.getElementsByTagName("img");
		
		for(i=0;i<imgs.length;i++) {
			if(i < 1 || i > 1) {
				continue;
			}
			product_zoom_image = imgs[i];
			has_img = true;
		}
		product_zoom_image.src = "images/"+image_orig;

	}

	
	product_image_cont = document.getElementById('product_'+product_id+'_image_link');
			
			
	imgs = product_image_cont.getElementsByTagName("img");
	
	has_img = false;
	
	for(i=0;i<imgs.length;i++) {
		if(i >= 1) {
			continue;
		}
		product_image = imgs[i];
		has_img = true;
	}
	
	
	if(!has_img) {
		return false;
	}
	

	/* Hide the current product image */
	product_image.src = "nav/clear.gif";
	product_image.style.display = 'none';

	/* Firefox, MSIE and then everything else */
	if (BrowserDetect.browser == 'Firefox') {

		product_image_preloader = new Image();
		product_image_preloader.src = 'images/' + image_resized;		
		product_image_preloader.onload = function() {			
			swapImage(product_image, image_resized);
		}		

	} else if (BrowserDetect.browser == 'MSIE') {

		product_image_preloader = new Image();
		product_image_preloader.src = 'images/' + image_resized;
		product_image_preloader.onload = function() {
			swapImage(product_image, image_resized);
		}

		if (product_image_preloader.complete) {
			swapImage(product_image, image_resized);
		} 	

	} else {
		swapImage(product_image, image_resized);
	}
	
	
	if(product_option_id != '' && product_option_id != '0') {
		
		x_changeProductOptionImage(product_id, product_option_id, swapAddtlShotsCallback);
		// change selected product option...

	}
	
}


function swapAddtlShotsCallback(option_info) {
	
	/* Make the fill the available sizes select box AJAX call */
		x_getAvailableProductOptionSizes(option_info.product_id, option_info.product_option_id, getAvailableProductOptionSizesCallback);
		
		/* deselect other swatch images */
		
		var swatch_labels = document.getElementById("product-option-colors").getElementsByTagName("label");
		
		for(i=0;i<swatch_labels.length;i++) {
			swatch_labels[i].className = '';
		}
		
		
		/* select swatch image */
		if(document.getElementById('label_product_option_'+option_info.product_option_id) !== null) {
			document.getElementById('label_product_option_'+option_info.product_option_id).className = 'selected';
		}
		
		
		/* Safari doesnt work with form labels so we need to check the option manually */
		$('chosen_product_option_' + option_info.product_option_id).checked = "checked";
		
		/* Timeout the effect running flag after 0.8s */
		setTimeout("effect_running = 0;", 800);
		
		$('chosen-color').innerHTML = option_info.product_option_name;
		
		$('product-option-price').innerHTML = option_info.display_price;	
	
}

Event.observe(window, 'load', attachProductColorOptionEvents, false);