var productArray = new Array();
var styleDropdownArray = new Array();
var sizeDropdownArray = new Array();
var colorDropdownArray = new Array();

var templateProductAttributeSwatchHex = new Ext.Template(
    '<td height="28" width="28"><table class="productCatalogItemSwatchBorder" cellspacing="0" name="{systemRef}" id="swatchTable{systemRef}"><tr><td height="22" bgcolor="{location}" align="center" width="22" valign="top" title="{description}" style="cursor: pointer;" onclick="onSelectColorSwatch(\'{systemRef}\', this)" onmouseover="hoverSwatch(\'{swatchSku}\',\'{reallocation}\', this)" onmouseout="setSelectedProductInformation()" /></tr></table></td>'
);

var templateProductAttributeSwatchImg = new Ext.Template(
    '<td height="28" width="28">',
    '<table class="productCatalogItemSwatchBorder" cellspacing="0" cellpadding="0" name="{systemRef}" id="swatchTable{systemRef}">',
    '<tr>',
    '<td height="22" width="22" align="center" onmouseover="hoverSwatch(\'{swatchSku}\',\'{reallocation}\', this)" onmouseout="setSelectedProductInformation()">',
    '<a href="javascript:onSelectColorSwatch(\'{systemRef}\', this)">',
    '{location}',
    '</a>',
    '</TD>',
    '</tr>',
    '</table>',
    '</td>'
);

function ProductGroupProduct(productId, productGroupId, sku, styleSystemRef, styleDescription, sizeSystemRef, sizeDescription, colorSystemRef, colorDescription, imageLocation, 
unitPrice, unitPriceBV, retailPrice, retailPriceBV, consultantUnitPrice, consultantUnitPriceBV, consultantRetailPrice, consultantRetailPriceBV, 
unitOfMeasure, isProductAvailable, isProductTempUnavailable, isProductBackorder, isProductLimitedAvailable, estimatedAvailabilityDate, name, currencyCode,
unitPriceDisplay, retailPriceDisplay, consultantUnitPriceDisplay, consultantRetailPriceDisplay, location, productDescription)
{
    this.productId = productId; 
    this.productGroupId = productGroupId;
    this.sku = sku;
    this.styleSystemRef = styleSystemRef;
    this.styleDescription = styleDescription;
    this.sizeSystemRef = sizeSystemRef;
    this.sizeDescription = sizeDescription;
    this.colorSystemRef = colorSystemRef;
    this.colorDescription = colorDescription;
    this.imageLocation = imageLocation;
    this.unitPrice = unitPrice;
    this.unitPriceBV = unitPriceBV;
    this.retailPrice = retailPrice;
    this.retailPriceBV = retailPriceBV;
    this.consultantUnitPrice = consultantUnitPrice;
    this.consultantUnitPriceBV = consultantUnitPriceBV;
    this.consultantRetailPrice = consultantRetailPrice;
    this.consultantRetailPriceBV = consultantRetailPriceBV;
    this.unitOfMeasure = unitOfMeasure;
    this.isProductAvailable = isProductAvailable;
    this.isProductTempUnavailable = isProductTempUnavailable;
    this.isProductBackorder = isProductBackorder;
    this.isProductLimitedAvailable = isProductLimitedAvailable;
    this.estimatedAvailabilityDate = estimatedAvailabilityDate;
    this.name=name;
    this.currencyCode=currencyCode;
    this.unitPriceDisplay=unitPriceDisplay;
    this.currencyCode=currencyCode;
    this.currencyCode=currencyCode;
    this.currencyCode=currencyCode;
    this.location=location;
    this.productDescription=productDescription;
}

function DropDownInfo(id, description)
{
    this.id = id; 
    this.description = description;
}

function Swatch(colorSystemRef, colorDescription, imageLocation, swatchSku, location)
{
    this.colorSystemRef = colorSystemRef;
    this.colorDescription = colorDescription;
    this.imageLocation = imageLocation;
    this.swatchSku = swatchSku;
    this.location = location;
}

function getSelectedProductStyle() {
	if (document.forms["qtyForm"].elements["productStyle"] == undefined) {
		return "";
	}
	return getSelectListValue("qtyForm", "productStyle");
}

function getSelectedProductSize() {
	if (document.forms["qtyForm"].elements["productSize"] == undefined) {
		return "";
	}
	if (document.forms["qtyForm"].elements["productSize"].options.length <=0) {
		return "";
	}
	return getSelectListValue("qtyForm", "productSize");
}

function getSelectedProductColor() {
	if (document.forms["qtyForm"].elements["productColor"] == undefined) {
		return "";
	}
	if (document.forms["qtyForm"].elements["productColor"].options.length <=0) {
		return "";
	}
    if (document.forms["qtyForm"].elements["productColor"].selectedIndex < 0) {
        document.forms["qtyForm"].elements["productColor"].selectedIndex = 0;
    }
	return getSelectListValue("qtyForm", "productColor");
}

function onStyleChange()
{
	buildSizeChoices();
	
	onSizeChange();

}

function onSizeChange()
{
	
	buildColorChoices();
	
    onColorChange();
    
}

function onColorChange() {
	buildColorSwatches();
	
	setSelectedProductInformation();
    
}

function buildSizeChoices() {

	if (document.forms["qtyForm"].elements["productSize"] === undefined) {
		return;
	}
	
	var objElement = document.forms["qtyForm"].elements["productSize"];
	
	var selectedStyle = getSelectedProductStyle();
	var selectedSize = getSelectedProductSize();
	
	var indexLength = objElement.options.length;
    
    for (var i = indexLength-1; i >= 0; i=i-1)
    {
        var optionChild = objElement.options[i];
        objElement.removeChild(optionChild);
    }

	for (var idxDropDown = 0; idxDropDown < sizeDropdownArray.length; idxDropDown=idxDropDown+1) {
	
        var dropDown = sizeDropdownArray[idxDropDown];
        
        for (var idxProducts = 0; idxProducts < productArray.length; idxProducts=idxProducts+1) {
        
	        var product = productArray[idxProducts];
        
	        if (product.styleSystemRef === selectedStyle && product.sizeSystemRef == dropDown.id) {
        
            	var option = document.createElement('OPTION');
            	option.value = dropDown.id;
            	option.innerHTML = dropDown.description;
            
            	if (product.sizeSystemRef == selectedSize) {
	                option.selected = true;
            	}
            
            	objElement.appendChild(option);
            	
            	break;
            	
        	}
        	
    	}

    }
    
}

function buildColorChoices() {

	if (document.forms["qtyForm"].elements["productColor"] === undefined) {
		return;
	}
	
	var selectedStyle = getSelectedProductStyle();
	var selectedSize = getSelectedProductSize();
    var selectedColor = getSelectedProductColor();
	
	var indexLength = document.forms["qtyForm"].elements["productColor"].options.length;
    
    for (var i = indexLength-1; i >= 0; i=i-1)
    {
        var optionChild = document.forms["qtyForm"].elements["productColor"].options[i];
        document.forms["qtyForm"].elements["productColor"].removeChild(optionChild);
    }

	//console.log("selectedStyle:" + selectedStyle + "|selectedSize:[" + selectedSize + "]");
	
	for (var idxDropDown = 0; idxDropDown < colorDropdownArray.length; idxDropDown=idxDropDown+1) {
	
        var dropDown = colorDropdownArray[idxDropDown];

		//console.log("checking color dropdown, dropDown.id:" + dropDown.id + "|dropDown.description:[" + dropDown.description + "]");
		        
        for (var idxProducts = 0; idxProducts < productArray.length; idxProducts=idxProducts+1) {
        
	        var product = productArray[idxProducts];
        
        	if (product.sizeSystemRef === selectedSize && product.styleSystemRef === selectedStyle && product.colorSystemRef == dropDown.id) {
        
        		//console.log("match found, product.styleSystemRef:" + product.styleSystemRef + "|product.sizeSystemRef:[" + product.sizeSystemRef + "]|COLOR=" + product.colorSystemRef);
        		
            	var option = document.createElement('OPTION');
            	option.value = dropDown.id;
            	option.innerHTML = dropDown.description;
            
                document.forms["qtyForm"].productColor.appendChild(option);
            
            	if (product.colorSystemRef == selectedSize || idxProducts==0) {
	                option.selected = true;
            	}
            	
            	break;
            	
        	}
        	
        	
        	
    	}

    }
    
    buildColorSwatches();
    
}

function buildColorSwatches() {

    if (document.forms["qtyForm"].elements["productColor"] == 'undefined') {
		return;
	}

	if (document.getElementById("divSwatches") == null) {
		return;
	}

    document.getElementById("divSwatches").style.visibility= "hidden";
    
    var selectedStyle = getSelectedProductStyle();
	var selectedSize = getSelectedProductSize();
    var selectedColor = getSelectedProductColor();

    //colors array contains objects: {img:'', name:'', id:''};
    html = '';          
    html += '<table cellspacing="0" cellpadding="2" border="0" >\n';
    
    var selectedStyle = getSelectedProductStyle();
    var selectedSize = getSelectedProductSize();
    
    var productID;
    var swatchesArray = new Array();    
    for (var i = 0; i < colorDropdownArray.length; i=i+1)
    {
        var color = colorDropdownArray[i];
                
        for (var idxProducts = 0; idxProducts < productArray.length; idxProducts=idxProducts+1)
        {
           var product = productArray[idxProducts];
           if (product.styleSystemRef === selectedStyle) {
                if (product.sizeSystemRef === selectedSize) {
                    if (product.colorSystemRef === color.id){
                        if (!isEmpty(product.imageLocation)) {
                            var swatchDetails = new Swatch(product.colorSystemRef, product.colorDescription, product.imageLocation, 
                            		product.sku, product.location);
                            swatchesArray[swatchesArray.length] = swatchDetails;
                        }    
                    }
                }
           }
        }

    }

    var idxSwatch = 0;
    while (idxSwatch < swatchesArray.length) 
    {
        html += '<tr>\n';
        for (var j = 0; j < 8; j=j+1) 
        {
            if (idxSwatch < swatchesArray.length) 
            {
                if (swatchesArray[idxSwatch].imageLocation.indexOf("#") ==0) {
                    html += templateProductAttributeSwatchHex.applyTemplate({systemRef: swatchesArray[idxSwatch].colorSystemRef, description: swatchesArray[idxSwatch].colorDescription, location: swatchesArray[idxSwatch].imageLocation, swatchSku: swatchesArray[idxSwatch].swatchSku, reallocation: swatchesArray[idxSwatch].location});
                } else {
                
                    html += templateProductAttributeSwatchImg.applyTemplate({systemRef: swatchesArray[idxSwatch].colorSystemRef, description: swatchesArray[idxSwatch].colorDescription, location: swatchesArray[idxSwatch].imageLocation, swatchSku: swatchesArray[idxSwatch].swatchSku, reallocation: swatchesArray[idxSwatch].location});
                }
            }                                   
            idxSwatch = idxSwatch + 1;
        }
        
        html += '</tr>\n';
    }        
    
    html += '</table>';

    if (swatchesArray.length > 0) {
        document.getElementById("divSwatches").innerHTML = html;
        document.getElementById("divSwatches").style.visibility= "visible";
    }
}   




function onSelectColorSwatch(colorSystemRef, anchorObj) {
	document.forms["qtyForm"].elements["productColor"].value = colorSystemRef;
	
	onColorChange();
	
}

function setSelectedProductInformation() {

    var selectedStyle = getSelectedProductStyle();
	var selectedSize = getSelectedProductSize();
    var selectedColor = getSelectedProductColor();

    var product = getSelectedProduct();
    
    // Set item number.
    if (document.getElementById("prodSku") != undefined) { 
        document.getElementById("prodSku").innerHTML=product.sku;
    }
    if (document.getElementById("item_description") != undefined) { 
    	document.getElementById("item_description").innerHTML=product.productDescription;
    }
    if (document.getElementById("productImage") != undefined) { 
    	document.getElementById("productImage").src = top.changeImage(product.location);
    }

    // Highlight swatch
    if (document.getElementById("swatchTable" + selectedColor) != undefined) { 
        document.getElementById("swatchTable" + selectedColor).className="productCatalogItemSwatchBorderSelected";
    }

   	document.forms["qtyForm"].elements["itemSku"].value=product.sku;
    
    document.getElementById("divUnitPrice").innerHTML = Numeric.formatCurrency(product.unitPrice) + ' ' + product.unitOfMeasure;
    document.getElementById("divRetailPrice").innerHTML = Numeric.formatCurrency(product.retailPrice) + ' ' + product.unitOfMeasure;
    document.getElementById("divUnitPriceSale").innerHTML = Numeric.formatCurrency(product.unitPrice) + ' ' + product.unitOfMeasure;
    if (product.unitPrice != product.retailPrice) {
        document.getElementById("sale_block").style.visibility="visible";
		document.getElementById("sale_block").style.display="inline";
        document.getElementById("regular_block").style.visibility="hidden";
		document.getElementById("regular_block").style.display="none";
    } else {
        document.getElementById("regular_block").style.visibility="visible";
		document.getElementById("regular_block").style.display="inline";
        document.getElementById("sale_block").style.visibility="hidden";
        document.getElementById("sale_block").style.display="none";
    }
            
    if (document.getElementById("divConsultantRetailPrice") != null) {
    
    	document.getElementById("divConsultantUnitPrice").innerHTML = Numeric.formatCurrency(product.consultantUnitPrice) + ' ' + product.unitOfMeasure;
    	document.getElementById("divConsultantRetailPrice").innerHTML = Numeric.formatCurrency(product.consultantRetailPrice) + ' ' + product.unitOfMeasure;
    
    	if (product.consultantUnitPrice < product.consultantRetailPrice) {
	        document.getElementById("divConsultantRetailPrice").style.visibility="visible";
        	document.getElementById("divConsultantRetailPrice").style.display="block";
    	} else {
	        document.getElementById("divConsultantRetailPrice").style.visibility="hidden";
        	document.getElementById("divConsultantRetailPrice").style.display="none";
    	}
    	
    }
    
    if (document.getElementById("divBusinessVolume") != null) {
        document.getElementById("divBusinessVolume").innerHTML = product.unitPriceBV;
    }

    if (document.getElementById("divAddToOrder") != null) {          
        if (product.isProductAvailable) {
            document.getElementById("divAddToOrder").style.visibility="visible";
            document.getElementById("divAddToOrder").style.display="block";
        } else {
            document.getElementById("divAddToOrder").style.visibility="hidden";
            document.getElementById("divAddToOrder").style.display="none";
        }
           
        if (product.isProductTempUnavailable) {
            document.getElementById("divItemTemporarilyUnavailable").style.visibility="visible";
            document.getElementById("divItemTemporarilyUnavailable").style.display="block";
        } else {
            document.getElementById("divItemTemporarilyUnavailable").style.visibility="hidden";
            document.getElementById("divItemTemporarilyUnavailable").style.display="none";
        }
    }
    
}

function hoverSwatch(swatchSku,reallocation,anchorObj) {
  
    document.getElementById("productImage").src = top.changeImage(reallocation);
    
    // Set sku number.
    if (document.getElementById("prodSku") != undefined) { 
        document.getElementById("prodSku").innerHTML=swatchSku;
    }


}
function getSelectedProduct() {
    
    var selectedStyle = getSelectedProductStyle();
	var selectedSize = getSelectedProductSize();
    var selectedColor = getSelectedProductColor();

    for (var idxProducts = 0; idxProducts < productArray.length; idxProducts=idxProducts+1)
    {
        var product = productArray[idxProducts];
        if (product.styleSystemRef === selectedStyle) {
        	if (product.sizeSystemRef === selectedSize) {
	            if (product.colorSystemRef === selectedColor){
	            	imageIndex = idxProducts;
	                return product;
            	}
          	}
        }
    }

}