function changeSrc(imgId)
  {
   document.getElementById("myImage").src = document.getElementById(imgId).src;
   document.getElementById("img_one").className = "thumb_unselected"; 
   document.getElementById("img_two").className = "thumb_unselected"; 
   document.getElementById("img_three").className = "thumb_unselected"; 
   document.getElementById(imgId).className = "thumb_selected"; 
   document.getElementById(imgId).blur();
   
  }

// global constants
var productSetSku = null;
var products = new Array();
var productColours = new Array();
var productColourCode = null;
var productSize = null;
var product = null;
var defaultProductSize = "";
var defaultProductColourCode = "";
var oneSize = false;
var productColoursString = "";
var formRef = null;
var selectedInStock;
var numberOfImagesAvailable = 1;

var plugin = (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"]) ? navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin : 0;

// Product 'Class'
function Product(sku, inStock, originalPrice, currentPrice, priceAdjusted, image, colourCode) {

	// properties
	this.sku = sku;
	this.inStock = inStock;
	this.originalPrice = originalPrice;
	this.currentPrice = currentPrice;
	this.priceAdjusted = priceAdjusted;
	this.image = (image == null) ? "" : image;
	this.imageReference = this.image.substring(0, this.image.indexOf('.'));
//	alert("this.imageReference " + this.imageReference );

	this.colourCode = colourCode;

	// preload image
	this.imageObject = new Image();
//	this.imageObject.src = "/images/products/" + image;
}

// setup an array which determines if all of a product colour is inStock or not
function setupProductColours() {
	var lastColour = "";
	var prod;
	var colourIndex = -1;
	for (var i = 0; i < products.length; i++){
		prod = products[i];
		if (isNewColour(prod.colourCode)) {
			colourIndex++;
			productColours[prod.colourCode] = false;
		}
		if (prod.inStock) {
		 	productColours[prod.colourCode] = true;
		}
	}
}

function isNewColour(colourCode) {
	var colourStr = "-" + colourCode + "-";
	if (productColoursString.indexOf(colourStr) < 0) {
		productColoursString = productColoursString + colourStr;
		return true;
	}
	return false;
}

// Find a Product object
function findProduct(colourCode, size) {
	var i = 0;
	var product = null;
	var sku = productSetSku + '-' + colourCode + '-' + size;
	for (i = 0; i < products.length; i++) {
		product = products[i];
		if (product.sku == sku) {
			return product;
		}
	}
	return null;
}

// find one size product
function findProductNoSize(colourCode) {
	return findProduct(colourCode, 'ONE');
}

function updateProductImage() {
//    alert("updateProductImage()");
/*	if ((product != null) && (product.image != "")) {
		document.images["productImage"].src = "/images/products/" + product.image;
	}
*/
    if(product!= null){
        if(plugin){
            reloadFlash(product.imageReference,numberOfImagesAvailable);
        }
        else{
   		    document.images["productImage"].src = "/images/products/" + product.imageReference + "/1/main.jpg";
        }
    }
}

function setAltLayer(imagePath,numberOfImagesAvailable){
//    alert("setAltLayer() " +  imagePath + " , " + numberOfImagesAvailable);
    //this is the code that determines what is displayed below the Zoomify controls
	var controlsObj;

	if(plugin && numberOfImagesAvailable>1){
	//if there is alternate images
		controlsObj = '<div style="padding:1px;width:226px;">';
		controlsObj += '<div style="float:left;">';
		controlsObj += '<a href=javascript:reloadFlash("'+imagePath+'/1.'+'",2);><img src="/images/products/'+imagePath+"/1/"+'alt-thumb.jpg" height="53" border="0" class="altthumb" width ="51"></a>&nbsp;';
		controlsObj += '<a href=javascript:reloadFlash("'+imagePath+'/2.'+'",2);><img src="/images/products/'+imagePath+"/2/"+'alt-thumb.jpg" height="53" border="0" class="altthumb" width ="51"></a>';
		controlsObj += '</div><div style="float:right;width:100px;padding:1px;" class="normalLink">Select an image from the left for alternate views of this product.</div>';
		controlsObj += '</div>';
	}else if(plugin && numberOfImagesAvailable==1){
	//if there is only one image
		controlsObj = '<div style="padding:15px;">Use the controls above to zoom into the image.</div>';
	}else{
	//if the user doesn't have flash
		controlsObj = '<div style="padding:10px;">To fully take advantage of zooming functionality you need to install flash.  <a href="http://www.macromedia.com/go/getflashplayer" target="_new">Click here</a> to get it</div>';
	}
	document.getElementById("alternateThumbs").innerHTML = controlsObj;
}

function reloadFlash(img,numberOfImagesAvailable){
//    alert(" reloadFlash()  " + img + " , " + numberOfImagesAvailable);
/*
	CALL THIS FUNCTION WITH THE IMAGE NAME TO CHANGE THE IMAGE...
	SAMPLE CALL : reloadFlash('lambswool_crewneck-navy.jpg',2);
	OR: reloadFlash('lambswool_crewneck-navy/1.',2);
*/

	var flashObj = document.getElementById("flashBaby");

	var imagePath = img.substring(0,img.indexOf('.'));
	if (img.indexOf('.')<0){
		imagePath=img+"/1";
	}

//    alert("imagePath "+ imagePath);

	var inners = '<param name="movie" value="/images/zoom_func/hackett_zoomer.swf?imagePath=images/products/'+imagePath+'" />';
	inners+='<param name="src" value="/images/zoom_func/hackett_zoomer.swf?imagePath=images/products/'+imagePath+'" />';
	inners+='<embed src="/images/zoom_func/hackett_zoomer.swf?imagePath=/images/products/'+imagePath+'" quality="high" bgcolor="#ffffff" width="228" height="243" name="hackett_zoomer" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="https://www.macromedia.com/go/getflashplayer" />';
	flashObj.innerHTML = inners;
	//if the new colour variant has a different number of thumbs
	// we may need to reset the control layer using setAltLayer
//	setAltLayer(imagePath.substring(0,imagePath.length-2),numberOfImagesAvailable);

	setAltLayer(imagePath.substring(0,imagePath.length-2),numberOfImagesAvailable);
}


function updateForm() {
	formRef.elements["addToBasketSku"].value = product.sku;
	if ((product != null) && (product.inStock == true)) {
		document.getElementById("buttonOff").style.display = 'none';
		document.getElementById("buttonOn").style.display = 'inline';
	} else {
		document.getElementById("buttonOn").style.display = 'none';
		document.getElementById("buttonOff").style.display = 'inline';
	}
}

// drop down menus
function updateDropDowns() {

	var allOut = true;
	var selectedColour = formRef.elements["productColour"].value;
	var productIter = null;

	// iterate through the size options
	if (!oneSize) {
		for (var i = 0; i < formRef.elements["productSize"].length; i++) {
			productIter = findProduct(selectedColour, document.forms["catalogueItemForm"].elements["productSize"][i].value);
			if (!productIter.inStock) {
				document.forms["catalogueItemForm"].elements["productSize"][i].style.color = '#cccccc';
			} else {
				document.forms["catalogueItemForm"].elements["productSize"][i].style.color = '';
			}
		}
	} else {
		productIter = findProductNoSize(selectedColour);
	}

	var colourCode=null;
	var colourDropdownRef=formRef.elements["productColour"];

	for (var j = 0; j < colourDropdownRef.length; j++) {
		colourCode=colourDropdownRef[j].value;
		if (productColours[colourCode] == false) {
			colourDropdownRef[j].style.color = '#cccccc';
 		}
		else {
			colourDropdownRef[j].style.color = '';
		}
	}
}

function updateProductPrice() {
    var priceInfo = "";
    var priceInfoDiv;
	if (product != null) {
        if (product.priceAdjusted) {
            priceInfo = "<span style=\"width:80px\"><strong>Original price:</strong></span>";
            priceInfo = priceInfo + "<strong style=\"text-decoration:line-through\">" +product.originalPrice + "</strong><br/>";
            priceInfo = priceInfo + "<strong style=\"color:#a4263c\"><span style=\"width:80px\">Sale price: </span>";
            priceInfo = priceInfo + product.currentPrice + "</strong>";
        } else {
            priceInfo = "<strong><span style=\"width:50px\">Price: </span>" + product.currentPrice + "</strong>";
        }
        priceInfoDiv = document.getElementById("priceInfo");
        priceInfoDiv.innerHTML = priceInfo;
	}
}

function updateFromForm() {
//    alert("updateFromForm()");
	if (products.length > 1) {
		productColourCode = formRef.elements["productColour"].value;
		if (!oneSize) {
			productSize = formRef.elements["productSize"].value;
			product = findProduct(productColourCode, productSize);
		} else {
			product = findProductNoSize(productColourCode);
		}
		updateDropDowns();
	} else {
		product = products[0];
	}
	updateProductImage();
	updateProductPrice();
	updateForm();
}

function setupProductSelector() {
//     ("setupProductSelector() ");
	formRef = document.forms["catalogueItemForm"];
	if (productColours.length == 0) {
		setupProductColours();
	}
	setupInitialProductDisplayed();
	updateFromForm();
}

function setupInitialProductDisplayed() {
	if (products.length > 1) {
		if(defaultProductSize == "") {
			var prod = null;
			var selectedColour = formRef.elements["productColour"].value;
			if (!oneSize) {
				// try for currently selected colour first
				for (var i = 0; i < formRef.elements["productSize"].length; i++) {
					prod = findProduct(selectedColour, formRef.elements["productSize"][i].value);
					if (prod.inStock) {
						formRef.elements["productSize"].selectedIndex = i;
						return;
					}
				}
				// should we check colour as well ?
			}
		}
	}
}