// EXPRESS METHODS


    function getExpressSelectedProducts() {

        var table = document.getElementById("ppeTable");
        var rowLines = table.getElementsByTagName("tr");

        var order = new Order();

        for (var h = 0; h < rowLines.length; h++) {

            var rowNode = rowLines[h];

        var quantity = getRowQuantity(rowNode);

        if (quantity > 0) {
            var xpp_productID =rowNode.getAttribute("pp_selectedproduct");

            var optionsDiv = document.getElementById("productOptionsBlock_" + xpp_productID);

            var orderItem = new OrderItem();
            orderItem.ProductID = optionsDiv.getAttribute("pp_productid");
            orderItem.Name = optionsDiv.getAttribute("pp_productname");
            orderItem.Quantity = quantity;
            order.OrderItems[order.OrderItems.length] = orderItem;
            
            var buttonidString = optionsDiv.getAttribute("pp_optionbuttonsindexes");
            var buttonidArray = buttonidString.split(',');

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

                var ybutton = OptionButtons[buttonidArray[i]];

                if (ybutton!=null && ybutton.get("checked") == true) {

                    var option = new OrderItemSelection();

                    option.ProductOptionID = ybutton.get("value");
                    option.Name = ybutton.get("title");

                    orderItem.OrderItemSelections[orderItem.OrderItemSelections.length] = option;
                }
            }

            var controls = optionsDiv.getElementsByTagName("input");

            for (var i = 0; i < controls.length; i++) {
                var control = controls[i];

                if (control.type == "text") {

                        if (control.value > "") {
                            var option = new OrderItemSelection();
                            option.ProductOptionID = control.attributes["optionid"].value;
                            option.Name = control.attributes["optionname"].value;
                            option.SelectedValue = control.value;
                            orderItem.OrderItemSelections[orderItem.OrderItemSelections.length] = option;
                        }
                }
            }

            }
        }
        return order;

    }
    
    function getRowQuantity(rowNode){
        var selectors = rowNode.getElementsByTagName("select");
        if (selectors.length > 0)
        {
            var qtySelector;
            for (var h = 0; h < selectors.length; h++) {
                if (selectors[h].className == "selectorQty") qtySelector = selectors[h];
            }
            return qtySelector.options[qtySelector.selectedIndex].value;
        } else 
        return 0;
    }
    
    function selectDistinguisher(ddl) {
    
    var rowNode = ddl.parentNode.parentNode.parentNode;
    cancelOptions(rowNode);
        if (ddl.selectedIndex == 0) 
        {
            removeClass(rowNode, "selectedDistinguisher");
            rowNode.setAttribute("pp_selectedProduct", "");
            unSetQty(rowNode);
        } else 
        { 
            addClass(rowNode,"selectedDistinguisher");
            rowNode.setAttribute("pp_selectedProduct", ddl.options[ddl.selectedIndex].value);
            showOptions(rowNode);
            setQtyIfNotSet(rowNode);
        }
    }

    function unSetQty(rowNode) {
        var selectors = rowNode.getElementsByTagName("select");
        var qtySelector;
        for (var h = 0; h < selectors.length; h++) {
            if (selectors[h].className == "selectorQty") qtySelector = selectors[h];
        }
        qtySelector.selectedIndex = 0;
        selectQty(qtySelector);
    }

    function setQtyIfNotSet(rowNode) {
    var selectors = rowNode.getElementsByTagName("select");
    var qtySelector;
    for (var h = 0; h < selectors.length; h++) {
    if(selectors[h].className=="selectorQty") qtySelector = selectors[h];
    }
    if (qtySelector.selectedIndex == 0) 
        {
        qtySelector.selectedIndex = 1;
        selectQty(qtySelector);
        }
    }

    function addClass(el, className) 
    {
        if (el.className.indexOf(className) == -1) el.className += " " + className;
    }

    function hasClass(el, className) {
        if (el.className.indexOf(className) != -1) return true; else return false
    }

    function removeClass(el, className) 
    {
        el.className = el.className.replace(" "+className, "");
    }

    function setSubmitability() {

        var qtySelectors = document.getElementsByName("pp_selectQty");
        var itemOrdered=false;
        for (var h = 0; h < qtySelectors.length; h++) {

            var selector = qtySelectors[h];
            if (selector.selectedIndex > 0) itemOrdered = true;
        }
        if (itemOrdered) setIsSubmitable();
        else setNotSubmitable();
    }

    function selectQty(ddl) {
        var rowNode = ddl.parentNode.parentNode.parentNode;
        if (ddl.selectedIndex == 0) 
        {
            removeClass(rowNode,"selectedQty");
            cancelOptions(rowNode);
            setSubmitability();
        } else 
        {
        addClass(rowNode, "selectedQty");
        showOptions(rowNode);
        setIsSubmitable();
        }
    }

    function showOptions(row) {

        if (row.getAttribute("pp_selectedProduct")!=null) {

            var productID = row.getAttribute("pp_selectedProduct"); 
            if(productID!="") addClass(document.getElementById("productOptionsBlock_" + productID), "selectedProduct");
        } 
    }

    function cancelOptions(row) 
    { 
        var productID = row.getAttribute("pp_selectedProduct"); 
        if (productID != "") 
        {
            removeClass(document.getElementById("productOptionsBlock_" + productID), "selectedProduct");
        }
    }

    var OptionButtons = new Array(); // for express picker
    var FullOptionButtons = new Array(); // for full catalog picker

    function initializePpeDetail() {

        var ppeTable = document.getElementById("ppeTable");
        var optionsBlocks = YAHOO.util.Dom.getElementsByClassName("optionsBlock", "div", ppeTable);

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

            var optionsBlock = optionsBlocks[i];

            var productBlock = optionsBlock.parentNode;
            var optionButtonsIndexes = "" + productBlock.getAttribute("pp_optionButtonsIndexes");

            var option_type = optionsBlock.getAttribute("pp_option_type");

            if (option_type == "radiobuttons") {

                var inputs = optionsBlock.getElementsByTagName("input");

                var OptionGroup = new YAHOO.widget.ButtonGroup(optionsBlock);
                var buttons = OptionGroup.getButtons();
                for (var k = 0; k < buttons.length; k++) {

                    if (optionButtonsIndexes != "") optionButtonsIndexes += ",";
                    optionButtonsIndexes += OptionButtons.length + "";

                    OptionButtons[OptionButtons.length] = buttons[k];
                }


            } else if (option_type == "checkboxes") {

                var checkboxes = optionsBlock.getElementsByTagName("input");
                var checkboxesIDs = new Array(checkboxes.length);

                for (var j = 0; j < checkboxes.length; j++) {
                    checkboxesIDs[j] = checkboxes[j].id;
                }

                for (var j = 0; j < checkboxesIDs.length; j++) {
                    var checkbox = document.getElementById(checkboxesIDs[j]);
                    var text = checkbox.getAttribute("title");
                    var valure = checkbox.getAttribute("value");
                    var ybutton = new YAHOO.widget.Button(checkboxesIDs[j], { label: text, value: valure });

                    if (optionButtonsIndexes != "") optionButtonsIndexes += ",";
                    optionButtonsIndexes += OptionButtons.length + "";

                    OptionButtons[OptionButtons.length] = ybutton;
                }

            }
            productBlock.setAttribute("pp_optionButtonsIndexes", optionButtonsIndexes);
        }

        var buttonElements = ppeTable.getElementsByTagName('button');

        for (var k = 0; k < buttonElements.length; k++) { buttonElements[k].innerHTML = buttonElements[k].getAttribute('title');  }
    }

    function toggleCategoryVisibility(div) {

        var details = document.getElementById("itemdetails");

        // show the products in the detail window
        for (var k = 0; k < div.childNodes.length; k++) {
            if (div.childNodes[k].className == "productDiv") {

                var productsDiv = div.childNodes[k];
                details.innerHTML = productsDiv.innerHTML;
            }
        }

        // toggle the highlighting of selected categories
        var parentNode = div.parentNode;
        for (var k = 0; k < parentNode.childNodes.length; k++) {

            if ((parentNode.childNodes[k].className == "productCategory") || (parentNode.childNodes[k].className == "productCategorySelected")) {
                var productCat = parentNode.childNodes[k];

                if (productCat == div)
                    productCat.className = "productCategorySelected";
                else
                    productCat.className = "productCategory"
            }
        }
    }

/// THESE METHODS FOR PRODUCT PICKER DIALOG

function openProductPicker() {
    showProductPickerInMode(pickerMode);
    productPickerDialog.show();
}

function openProductPickerProgressOrder() {
    showProductPickerInMode("progress");
    productPickerDialog.show();
}

function openProductPickerExpress() {
    showProductPickerInMode(pickerMode);
    productPickerDialog.show();
}

function openProductPickerFull() {
    showFullOrder();
    productPickerDialog.show();
}

function openProductPickerProduct(productID) {
    showLoadingDetail();
    productPickerDialog.show();
    showProductDetail(productID, "");
}

function openProductPickerOrderItem(json) {
    productPickerDialog.show(); 
    setSelectedOrderItem(json);
}

function closeProductPicker() {
    productPickerDialog.hide();
}

var productPickerDialog;
var productPickerXml;
var imageID;
var orderItemID;
var action;

function initProductPickerExpress() {

    var handlePPCancel = function () {
        if (isCancelable == true) {
            productPickCancelEvent.fire();
            this.cancel();
        }
    }

    var handlePPSubmit = function () {
        
        //Don't want warning for leaving page when a user is submitting a correct order
        window.onbeforeunload = null;

        if (isSubmitable) {
            showProgressOrder();
            productPickCompleteEvent.fire();
        }
    }

    productPickerDialog =
             new YAHOO.widget.Dialog("productPickerPanel",
			{   
			    width: "800px",
			    height: "500px",
			    fixedcenter: "contained",
			    autofillheight: "body",
			    visible: false,
			    effect: { effect: YAHOO.widget.ContainerEffect.FADE, duration: 1 },
			    draggable: false,
			    modal: true,
			    close: false,
			    constraintoviewport: false,
			    buttons: [{ text: "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>OK</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;", handler: handlePPSubmit, isDefault: true },
						  { text: "Cancel", handler: handlePPCancel}]
			});
			productPickerDialog.render(document.body);






    productPickerDialogRef = productPickerDialog;
    var divDetails = document.getElementById("detail");
    if (divDetails.innerHTML.length > 0) {
        showProductPickerInMode("detail");
        initializeDetail();
    }

    initializePpeDetail();
}

var productPickCancelEvent = new YAHOO.util.CustomEvent("productPickCancelEvent");
var productPickCompleteEvent = new YAHOO.util.CustomEvent("productPickCompleteEvent");

YAHOO.util.Event.onContentReady('productPickerPanel', initProductPickerExpress);


/// EXTERNAL METHODS UCT PICKER
var productPickerDialogRef;

function showProductPickerInMode(mode) {
  
    var detail = document.getElementById("detail");
    var loadingDetail = document.getElementById("loadingDetail");
    var express = document.getElementById("express");
    var full = document.getElementById("full");
    var progress = document.getElementById("progress");
    setNotSubmitable();
    setIsCancelable();

    if (mode == "detail") { detail.style.display = "block"; setIsSubmitable(); pickerMode = mode; }
    else detail.style.display = "none";
    if (mode == "loadingDetail") loadingDetail.style.display = "block";
    else loadingDetail.style.display = "none";
    
    //do not let the customer continue on unless they have selected a quantity for their order
    if (mode == "express") {
        express.style.display = "block";
        pickerMode = mode;
        setSubmitability();
    }
    else express.style.display = "none";
    if (mode == "full") full.style.display = "block";
    else full.style.display = "none";
    if (mode == "progress") { progress.style.display = "block"; hideProgressImage(); setNotCancelable(); }
    else progress.style.display = "none";

}
// shortcut methods used throughout the control and pages
function showExpressOrder() { showProductPickerInMode("express"); }
function showFullOrder() { showProductPickerInMode("full");}
function showProgressOrder() { showProductPickerInMode("progress"); }

function showLoadingDetail() { showProductPickerInMode("loadingDetail"); }
function showDetail() { showProductPickerInMode("detail"); }

// this function is called whenever a product is clicked on the full product list. it calls a webmethod found in the BasePage,
// which references the static 'Render' method in 'ProductPickerDetails', which renders the control into a string. The callback method
// showProductDetailCallBack then populates and displays the appropriate div.
function showProductDetail(id, name) {
   
    showLoadingDetail();
    productid = id;
    productname = name;
    PageMethods.getProductPickerDetailsByProductID(id, showProductDetailCallBack, wsErrorRedirect);
   // InitializeProductPickerDetails();
}

function showProductDetailCallBack(json) {

    var response = Sys.Serialization.JavaScriptSerializer.deserialize(json);

    var responseMarkup = response[0];
    var responseScript = response[1];

    var divDetails = document.getElementById("detail");
    divDetails.innerHTML = responseMarkup;
    showProductPickerInMode("detail");

    // add and execute the new dynamic script
    // add and execute the new dynamic script
    var ss = document.createElement('script');
    var scr = responseScript;
    ss.text = scr;
    var hh = document.getElementsByTagName('head')[0];
    hh.appendChild(ss);

    initializeDetail();
}


/// INTERNAL METHODS
var productid;
var productname;
var divProductDetail;
var isSubmitable = false; // determines whether the "Add product" button actually submits or not - i.e. set to true when a product is selected
var isCancelable = true; // determines whether the "Add product" button actually submits or not - i.e. set to true when a product is selected

var productPickerSubmitabilityChangedEvent = new YAHOO.util.CustomEvent("productPickerSubmitabilityChangedEvent");

function setNotSubmitable() {
    isSubmitable = false;
    productPickerSubmitabilityChangedEvent.fire();
    productPickerDialog.getButtons()[0].addClass("yui-button-disabled");
    
}

function setIsSubmitable() {
    isSubmitable = true;
    productPickerSubmitabilityChangedEvent.fire();
    productPickerDialog.getButtons()[0].removeClass("yui-button-disabled");

}

function setIsCancelable() {
    productPickerDialog.getButtons()[1].removeClass("yui-button-disabled");
    isCancelable = true;
}

function setNotCancelable() {
    productPickerDialog.getButtons()[1].addClass("yui-button-disabled");
    isCancelable = false;
}


var OrderDescription = "";

function GetSelectedOrderItemDescription() {

    var description = "";
    var order = GetSelectedOrderItems();
    
    for (var i = 0; i < order.OrderItems.length; i++) {
        
        if (i > 0)
            description += "<br>";
              
        var options = "";
        
        for (var j = 0; j < order.OrderItems[i].OrderItemSelections.length; j++) {
            options += order.OrderItems[i].OrderItemSelections[j].Name;
            if (j != order.OrderItems[i].OrderItemSelections.length - 1)
                options += ", ";
        }
        
        var qty = order.OrderItems[i].Quantity;
        var qtyString;
        if (qty == 1)
            qtyString = "Singles";
        else if (qty == 2)
            qtyString = "Doubles";
        else if (qty == 3)
            qtyString = "Triples";
        else
            qtyString = qty + " of each";

        description += order.OrderItems[i].Name; //  + ", " + qtyString + ", " + options;
    }

    // put an extra br at the end if more than one line
    //if (order.OrderItems.length > 1)
        //description += "<br>";
        
    return description;

}

function GetSelectedOrderItems() {
    
    var order = new Order();

    var divExpress = document.getElementById("express");
    var divFull = document.getElementById("full");
    var divDetails = document.getElementById("detail");
  
    if (pickerMode=="express") {
        order = getExpressSelectedProducts();
    }


    if (pickerMode == "detail") {
        
        var orderItem = new OrderItem();
        order.OrderItems[0] = orderItem;
        orderItem.ProductID = productid;
        orderItem.Name = productname;


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

            var ybutton = FullOptionButtons[i];

            if (ybutton.get("checked") == true) {

                var option = new OrderItemSelection();

                option.ProductOptionID = ybutton.get("value");
                option.Name = ybutton.get("title");

                orderItem.OrderItemSelections[orderItem.OrderItemSelections.length] = option;
            }
        }
        
        var controls = divDetails.getElementsByTagName("input");

        for (var i = 0; i < controls.length; i++) {
            var control = controls[i];

             if (control.type == "text") {
                if (control.id == "pp_quantity") {
                    orderItem.Quantity = control.value;
                } else {
                    if (control.value > "") {
                        var option = new OrderItemSelection();
                        option.ProductOptionID = control.attributes["optionid"].value;
                        option.Name = control.attributes["optionname"].value;
                        option.SelectedValue = control.value;
                        orderItem.OrderItemSelections[orderItem.OrderItemSelections.length] = option;
                    }
                }
                }
            }
    }
    
    return order;
    
}



function GetSelectedOrderItemsXML() {
    var order = GetSelectedOrderItems();
    var result = Sys.Serialization.JavaScriptSerializer.serialize(order);
    return result;
}

// this event is fired when a product is loaded into the product picker.
// it is used by the express workflow and order fom gallery as a trigger to
// populate the selected product text on the screen
var productPickerItemLoadedEvent = new YAHOO.util.CustomEvent("productPickerItemLoadedEvent");

function Order() {
    this.OrderItems = new Array();
}

function OrderItem() {
    this.ProductID = 0;
    this.Name = "";
    this.Quantity = 1;
    this.OrderItemSelections = new Array();
}

function OrderItemSelection() {
    this.ProductOptionID = 0;
    this.SelectedValue = "";
    this.Name = "";
}


function setSelectedOrderItemCallBack(json) {
    //YAHOO.util.Event.onContentReady("detail", detailsDivLoaded);
    var response = Sys.Serialization.JavaScriptSerializer.deserialize(json);

    var responseMarkup = response[0];
    var responseScript = response[1];

    var divDetails = document.getElementById("detail");
    divDetails.innerHTML = responseMarkup;
    showProductPickerInMode("detail");
    
    setIsSubmitable();
    // used on the express page


    // add and execute the new dynamic script
    var ss = document.createElement('script');
    var scr = responseScript;
    ss.text = scr;
    var hh = document.getElementsByTagName('head')[0];
    hh.appendChild(ss);

    initializeDetail();
   productPickerItemLoadedEvent.fire();
}

//function detailsDivLoaded() {
//    var divDetails = document.getElementById("detail");
//    if (divDetails.innerHTML.length > 0) {
//        
//    }
// }

function setSelectedOrderItemCallBackFail() {
    detail.innerHTML = "We are experiencing technical difficulties. You can try <span class='linkButton' onclick='showFullOrder()'>changing product</span>";
    showProductPickerInMode("detail");
}

function showProductPickerWithOrderItemByOrderItemGUID(guid) {

    PageMethods.getProductPickerDetailsByOrderItemGUID(guid, showProductDetailCallBack, wsErrorRedirect);
}


function setSelectedOrderItem(json) {

    showProductPickerInMode("loadingDetail");
    
    var order = Sys.Serialization.JavaScriptSerializer.deserialize(json);
    var orderItem = order.OrderItems[0];

    productid = orderItem.ProductID; // set these, dont know if theyre needed still?
    productname = orderItem.Name;

    // go get the html for the selected product and continue in the callback method
    PageMethods.getProductPickerDetailsByOrderItem(json, setSelectedOrderItemCallBack, wsErrorRedirect);
}


function toggleCheckboxesForOptionGroup(containerid, checkid) {

    var divContainer = document.getElementById(containerid);
    checkboxes = divContainer.getElementsByTagName("input");
    for (var i = 0; i < checkboxes.length; i++) {
        var control = checkboxes[i];

        if (control.id == checkid) {
            control.checked = true;
            control.parentNode.className = 'checked';
        }
        else {
            control.checked = false;
            control.parentNode.className = 'unchecked';
        }

    }

}

function setProgressImage(url) {

    document.getElementById('progressImg').src = url;
    document.getElementById('progressImgDiv').style.display = "";
}

function hideProgressImage() {

    document.getElementById('progressImg').src = document.getElementById('progressImg').getAttribute('ldps_loadingImg');
    document.getElementById('progressImgDiv').style.display = "none";
}



function setProgressText(newText) {
    var spanProgressText = document.getElementById("spanProgressText");
    spanProgressText.innerHTML = newText;
}