// JScript File

    var selectedProduct = "5445";
    var selectedProductType = "bag";
    var viewDirection = "front";
    var numOfColors = 0;
    var color0 = "full";
    var color1 = "";
    var color2 = "";
    var color3 = "";
    var colorDisplay1 = "";
    var colorDisplay2 = "";
    var colorDisplay3 = "";
    var hdnProductID = 'hdnProduct';
    var hdnProductColor1ID = 'hdnProductColor1';
    var hdnProductColor2ID = 'hdnProductColor2';
    var hdnProductColor3ID = 'hdnProductColor3';
    var hdnProductColor1DisplayID = 'hdnProductColor1Display';
    var hdnProductColor2DisplayID = 'hdnProductColor2Display';
    var hdnProductColor3DisplayID = 'hdnProductColor3Display';
    var hdnBuildButtonID = '';
    var hdnProductTypeID = '';
    
    // Product Descriptions
    var arrDescription = new Array();
    //arrDescription["5445"] = new Array("<h2>Backpack</h2><p><strong>Size:</strong> 19\" tall x 11.5\" wide x 7\" deep main compartment.</p><p>Fashion combined with Function….Cinch straps help adjust cargo closer to the spine with high density PE foam back padding providing added comfort and safety while techie organizer pockets help keep your valuable accessible. Special waterproof tarpaulin liner provides puncture resistance while fleece lined valuables pocket keeps belongings safe with waterproof zippers.</p>");
    //arrDescription["5447"] = new Array("<h2>Duffel</h2><p><strong>Size:</strong> 25\" wide x 12\" deep x 13\" tall</p><p>Oversize main cargo storage compartment provides ample space for short or long hauls while 2 additional pockets allow separation of additional items as well as a fleece lined front access pocket with water proof zipper for storing valuables. Special tarpaulin provides water proof lining that handles the toughest of demands.</p>");
    //arrDescription["5448"] = new Array("<h2>Messenger</h2><p><strong>Size:</strong> 19\" wide x 12\" tall x 8\" deep</p><p>Oversize means one LARGE main cargo storage pocket with internal valuables storage as well as a fleece lined quick access external pocket with water proof zipper. Heavy duty and utilitarian combine with fashionable looks for every day use. Extra mesh bottle holder and special water proof tarpaulin are designed for people on the move.</p>");
    //arrDescription["5446"] = new Array("<h2>Computer Briefcase</h2><p><strong>Size:</strong> 16\" wide x 9\" deep x 12\" tall</p><p>With expanding capabilities, internal filing compartments and techie organizer pockets, this executive portfolio attache was constructed for the business traveler with added features like the built in trolley strap, quick release shoulder strap and reinforced internal liner.</p>");
    //arrDescription["5449"] = new Array("<h2>Tote</h2><p><strong>Size:</strong> 17.5\" wide x 14.5\" tall x 6.75\" deep</p><p>You won’t want to leave home without it. A shoulder tote big enough to hold everything from your magazines to all your every day essentials. With an internal pocket as well as external fleece lined quick access valuables storage pocket, this every day bag has a heavy duty tarpaulin lining to help repel water and withstand the every day grind of shopping or beach outings.</p>");
    //arrDescription["accessories"] = new Array("<h2>Accessories</h2><p>Choose from one of our seven accessories.</p>");

    function drawProduct()
    {
        // draw the bag
        setIfExists("productColor0",buildPath(0));
        setIfExists("productColor1",buildPath(1));
        setIfExists("productColor2",buildPath(2));
        setIfExists("productColor3",buildPath(3));
    }

    function buildPath(colorIndex)
    {
        var sourcePath = "";
        var color = eval("color" + colorIndex);
        
        if(colorIndex == 0 && color1 == "")
            sourcePath = "images/products/" + selectedProduct + "/" + selectedProduct + "_" + color + "_" + viewDirection + ".png";
        else
            sourcePath = "images/products/" + selectedProduct + "/" + selectedProduct + "_" + color + "_" + viewDirection + "_" + colorIndex + ".png";

        return sourcePath;
    }

    function setIfExists(id,src)
    {
        var img = new Image();
        
        img.onload = function ()
        {
            document.images[id].src = src;
        };
        img.onerror = function ()
        {
            document.images[id].src = "blank.gif";
        }
        img.src = src;
    }

    function setProduct(newProduct)
    {
        updateSelectedProduct(newProduct) // update global variable and label variable
        updateProductActionButton(newProduct); // update product action button
        setProductType(newProduct); // update the product type
        resetView(); // reset view controls
    }
    
    function changeProduct(newProduct)
    {
        setProduct(newProduct);
        updateDescription(newProduct); // update the product description if it exists
        drawProduct(); // draw the bag
    }
    
    function updateSelectedProduct(newProduct)
    {
        selectedProduct = newProduct;

        // update the hidden labels
        if(document.getElementById(hdnProductID))
            document.getElementById(hdnProductID).value = newProduct;
    }
    
    function setProductType(newProduct)
    {
        if(newProduct < 6000)
            selectedProductType = "bag";
        else
            selectedProductType = "accessory";

        if(document.getElementById(hdnProductTypeID))
            document.getElementById(hdnProductTypeID).value = selectedProductType;
    }

    function setColor(colorIndex,newColor,newName)
    {
        // set the appropriate color variable
        eval("color" + colorIndex + " = '" + newColor + "';");

        // update the hidden labels
        if(document.getElementById(eval("hdnProductColor" + colorIndex + "ID")))
            document.getElementById(eval("hdnProductColor" + colorIndex + "ID")).value = newColor;
        if(document.getElementById(eval("hdnProductColor" + colorIndex + "DisplayID")))
            document.getElementById(eval("hdnProductColor" + colorIndex + "DisplayID")).value = newName;
        
        // update the zoomed color swatch   
        colorZoom(colorIndex,newColor);
    }
    
    function changeColor(colorIndex,newColor,newName)
    {
        eval("color" + colorIndex + " = '" + newColor + "';");
        drawProduct();

        // update the hidden labels
        if(document.getElementById(eval("hdnProductColor" + colorIndex + "ID")))
            document.getElementById(eval("hdnProductColor" + colorIndex + "ID")).value = newColor;
        if(document.getElementById(eval("hdnProductColor" + colorIndex + "DisplayID")))
            document.getElementById(eval("hdnProductColor" + colorIndex + "DisplayID")).value = newName;
        
        // update the zoomed color swatch   
        colorZoom(colorIndex,newColor);
    }
    
    function changeView(newView)
    {
        viewDirection = newView;
        drawProduct();
    }
    
    function resetView(product)
    {
        if(document.getElementById("viewControls"))
        {
            if(selectedProductType == "accessory")
            {
                changeView("front"); // use the front view because accessories don't have alternate view angles
                
                // hide the view controls so the user can't choose a different one
                document.getElementById("viewControls").style.display = "none";
            }
            else
            {
                // show the view controls
                document.getElementById("viewControls").style.display = "block";
            }
        }
    }
    
    function colorZoom(colorIndex,newColor)
    {
        //alert("colorZoom" + index);
        if(document.images["colorZoom" + colorIndex])
            document.images["colorZoom" + colorIndex].src = "images/swatch_zoom_" + newColor + ".jpg";
    }
    
    function updateDescription(newProduct)
    {
        // update the product description if it exists
        if(document.getElementById("productDescription"))
            document.getElementById("productDescription").innerHTML = arrDescription[newProduct];
    }
    
    function updateProductActionButton(newProduct)
    {
        if(document.getElementById(hdnBuildButtonID))
        {
            // update the action button
            if(newProduct == "accessories")
            {
                document.getElementById(hdnBuildButtonID).value = "Choose An Accessory";
            }
            else
            {
                document.getElementById(hdnBuildButtonID).value = "Build This Bag";
            }
        }
    }
    
    function defaultColors(newProduct)
    {
        updateSelectedProduct(newProduct);
        updateDescription(newProduct); // update the product description if it exists
        updateProductActionButton(newProduct); // update product action button
        setProductType(newProduct); // update the product type
        resetView(); // reset view controls
        drawProduct(); // draw the bag
    }