//This function will take the appropriate actions when a frame type is selected
    function FrameSelection(event, chkID, strFrameTypes, strItemFrameType, strItemFinish, intPrintGroupID, intOldProductID, intNewProductID) {
        if (document.getElementById(chkID).checked) { 
            DeselectFrame(chkID,intPrintGroupID,strFrameTypes,strItemFinish);  //Unselect any other frame options that exist within this print group for this finish
            ShowMYCFrame(event, intPrintGroupID, strItemFrameType); //Display the frame preview image for this selection
            UpdateQuantityName(intOldProductID, intNewProductID); //Update the name of the quantity textbox to reflect the ID of the product choice
            if (document.getElementById('txtQuantity' + intOldProductID).value == '') {
                document.getElementById('txtQuantity' + intOldProductID).value = 1; //Auto-populate the quantity field if it's empty
            }
        } else { 
            HideMYCFrame(intPrintGroupID, strItemFrameType); //Hide the frame preview image for this selection
            UpdateQuantityName(intOldProductID, intOldProductID); //Update the name of the quantity textbox back to the original product - the ID of the quantity textbox always stays the same and is that of the first print product
        }
    }
    
    //This will display the appropriate frame checkboxes for the print finish - the only thing that should change is the price
    function DisplayFrameOptions(strDDID, intPrintGroup, strFrameTypes, intProductID) {
        if (document.getElementById('txtQuantity' + intProductID).value == '') {
            document.getElementById('txtQuantity' + intProductID).value = 1; //Auto-populate the quantity field if it's empty
        }
        //Determine the finish that is selected and display the frame options that match that finish, if one exists
        var strSelectedFinish = document.getElementById(strDDID).options[document.getElementById(strDDID).selectedIndex].text.substr(0, document.getElementById(strDDID).options[document.getElementById(strDDID).selectedIndex].text.indexOf(' '));
        var j, aFrameTypes;
        aFrameTypes = strFrameTypes.split(",");
        for (j=0; j < aFrameTypes.length; j++) {
            if (document.getElementById('div' + strSelectedFinish + aFrameTypes[j] + 'Frame' + intPrintGroup)) {
                document.getElementById('div' + strSelectedFinish + aFrameTypes[j] + 'Frame' + intPrintGroup).style.display = '';
            }
        }
        
        //Go through the other finish frames and hide the ones that don't correspond to the selected finish
        var i, strFinish;
        for (i = 0; i < document.getElementById(strDDID).options.length; i++) {
            strFinish = document.getElementById(strDDID).options[i].text.substr(0, document.getElementById(strDDID).options[i].text.indexOf(' '));
            if (strFinish != strSelectedFinish) { 
                for (j=0; j < aFrameTypes.length; j++) {
                    if (document.getElementById('div' + strFinish + aFrameTypes[j] + 'Frame' + intPrintGroup)) {
                        document.getElementById('div' + strFinish + aFrameTypes[j] + 'Frame' + intPrintGroup).style.display = 'none';
                    }
                }
            }
        }
    } 
    
    //This function will unselect any other frame options that had been selected before this new selection
    function DeselectFrame(strSelectedID, intPrintGroupID, strFrameTypes, strFinish) {
       var i, j, aFrameTypes;
        aFrameTypes = strFrameTypes.split(",");
        for (j=0; j < aFrameTypes.length; j++) {
            if (strSelectedID != 'chk' + strFinish + aFrameTypes[j] + 'Frame' + intPrintGroupID) {
                if (document.getElementById('chk' + strFinish + aFrameTypes[j] + 'Frame' + intPrintGroupID)) {
                    //If a frame option exists for this finish, unselect it
                    document.getElementById('chk' + strFinish + aFrameTypes[j] + 'Frame' + intPrintGroupID).checked = false; //Unselect the checkbox
                }
                
                if (document.getElementById('div' + aFrameTypes[j] + 'FramePreview' + intPrintGroupID)) {
                    document.getElementById('div' + aFrameTypes[j] + 'FramePreview' + intPrintGroupID).style.display = 'none'; //Hide the frame preview image
                }
            }
        }
    }
    
    //This function will update the quantity textbox so that the name contains the ID of the product selected - so that on the cart page we can determine which product
    // is being purchased
    function UpdateQuantityName(intQuantityID, intNewID) { 
        document.getElementById('txtQuantity' + intQuantityID).name = 'txtQuantity' + intNewID;
    }
    
    //This function will display the frame preview when the user mouses over the text - 
    // the code was borrowed from our datePicker.js script to fix the issue in IE6 where the layer displays behind the drop-downs
    // It basically builds the layers on the fly - static layers didn't seem to work for me.
    function displayFramePreview(chkFieldName, intProductCode, strDomainName)
    {
        var divID = 'divMouseOverFramePreview';
        var divIframeID = 'divMouseOverFramePreviewIframe';
        var targetField = document.getElementById(chkFieldName);

        var x = targetField.offsetLeft;
        var y = targetField.offsetTop + targetField.offsetHeight + 2;

        // deal with elements inside tables and such
        var parent = targetField;
        while (parent.offsetParent) {
            parent = parent.offsetParent;
            x += parent.offsetLeft;
            y += parent.offsetTop;
        }
      
        if (!document.getElementById(divID)) {
            var newNode = document.createElement("div");
            newNode.setAttribute("id", divID);
            newNode.setAttribute("style", "visibility: hidden;");
            document.body.appendChild(newNode);
        }
      
        // move the datepicker div to the proper x,y coordinate and toggle the visiblity
        var pickerDiv = document.getElementById(divID);
        pickerDiv.style.position = "absolute";
        pickerDiv.style.left = x + "px";
        pickerDiv.style.top = y + "px";
        pickerDiv.style.visibility = (pickerDiv.style.visibility == "visible" ? "hidden" : "visible");
        pickerDiv.style.zIndex = 10000;
      
        document.getElementById(divID).innerHTML = '<table class=MYCFramePreview><tr><td><img src=' + strDomainName + 'images/products/' + intProductCode + '.jpg height=43></td></tr></table>';

        if (!document.getElementById(divIframeID)) {
            newNode = document.createElement("iFrame");
            newNode.setAttribute("id", divIframeID);
            newNode.setAttribute("src", "javascript:false;");
            newNode.setAttribute("scrolling", "no");
            newNode.setAttribute("frameborder", "0");
            document.body.appendChild(newNode);
        }

        var iFrameDiv;
        if (!pickerDiv) 
            pickerDiv = document.getElementById(divID); 
        if (!iFrameDiv) {
            iFrameDiv = document.getElementById(divIframeID);

            iFrameDiv.style.position = "absolute";
            iFrameDiv.style.width = pickerDiv.offsetWidth;
            iFrameDiv.style.height = pickerDiv.offsetHeight;
            iFrameDiv.style.top = pickerDiv.style.top;
            iFrameDiv.style.left = pickerDiv.style.left;
            iFrameDiv.style.zIndex = pickerDiv.style.zIndex - 1;
            iFrameDiv.style.visibility = pickerDiv.style.visibility;
        }

    }
    
    function HideMYCFrameMouseOver(intPrintGroupID, strFrameType){
        document.getElementById('divMouseOverFramePreview').style.visibility = 'hidden';
        document.getElementById('divMouseOverFramePreviewIframe').style.visibility = 'hidden';
    }
    
    //This next 2 functions are used to display/hide the frame and text when the user selects to purchase the frame
    function ShowMYCFrame(event, intPrintGroupID, strFrameType) {
        if (document.getElementById('div' + strFrameType + 'FramePreview' + intPrintGroupID)) {
            document.getElementById('div' + strFrameType + 'FramePreview' + intPrintGroupID).style.display = '';
        }
    }

    function HideMYCFrame(intPrintGroupID, strFrameType){
        if (document.getElementById('div' + strFrameType + 'FramePreview' + intPrintGroupID)) {
            document.getElementById('div' + strFrameType + 'FramePreview' + intPrintGroupID).style.display = 'none';
        }
    }