function updateMyKohlerColor(colorName, colorCode) {
    $("#myKohlerProductColorName").val(colorName);
    $("#myKohlerProductColorCode").val(colorCode);
}

(function($) {
    var colorData = {};
    var addToCompareCallbacks = [];
    var removeFromCompareCallbacks = [];
    var saveToFolderCallbacks = [];
    var addToCartCallbacks = [];
    var initCallbacks = [];
    var envData;
    
    $(document).ready(function() {
        init();
    });
    
    function init() {
        
        // Bind print link
        $("#printBtn").click(function() {
            detail.print();
            return false;
        });    
        
        // Bind clicks on tabs
        var selectedTab;
        $("#rightTabbedBoxTabs > .tab:not(.tabFiller)").click(function(event) {
            $(this).siblings(".tab").removeClass("tabOn");
            $(this).removeClass("tabMouseOver tabMouseOverColor");
            $(this).addClass("tabOn");
            selectedTab = this;
            var index = $("#rightTabbedBoxTabs > .tab").index(this);
            $("#rightTabbedBoxContent").children().css("display", "none").eq(index).css("display", "block");
            
            event.stopPropagation();
            return false;
        });
        $("#rightTabbedBoxTabs > .tab").hover(
            function() {
                if (this != selectedTab) {
                    $(this).addClass("tabMouseOver tabMouseOverColor");
                }
            },
            function() {
                $(this).removeClass("tabMouseOver tabMouseOverColor");
            }
        );   
        
        var lowerSelectedTab;
        $("#lowerTabs > .tab:not(.tabPlaceHolder)").click(function(event) {
            $(this).siblings(".tab").removeClass("tabOn");
            $(this).removeClass("tabMouseOver tabMouseOverColor");
            $(this).addClass("tabOn");
            lowerSelectedTab = this;
            var index = $("#lowerTabs > .tab").index(this);
            $("#lowerContent").children().css("display", "none").eq(index).css("display", "block");
            
            event.stopPropagation();
            return false;
        });
        $("#lowerTabs > .tab").hover(
            function() {
                if (this != lowerSelectedTab) {
                    $(this).addClass("tabMouseOver tabMouseOverColor");
                }
            },
            function() {
                $(this).removeClass("tabMouseOver tabMouseOverColor");
            }
        );
        
        
        // Bind color tile selects
        var selectedColorTile;
        $("#colorGridColors > .colorTile").click(function(e) {
            selectedColorTile = this;
            $("#colorGridColors > .colorTile").removeClass("colorTileSelected");
            $(this).addClass("colorTileSelected");
            var colorCode = $(this).children("div").html();
            var color = colorData[colorCode];
            if (color == null) { return; }
            var colorTxt = color.name + " (-" + colorCode + ")";
            $("#colorGridText").html('<span class="bold">Color/Finish: </span>' + colorTxt);
            $("#infoColorFinish").html(colorTxt);
            $("#infoModelNumber").html("K-" + color.prodNum);
            $("#infoListPrice").html(color.price);
            if (color.webLink != null && color.webLink != "") {
                $("#orderColorSample").attr("href", color.webLink);
                $("#orderColorSample").css("display", "block");
            } else {
                $("#orderColorSample").css("display", "none");
            }
            $("#prodColorTile img").get(0).src = "/common/images/colors/50x50/" + color.gifSwatch;
            $("#mainPhoto").get(0).src = "/onlinecatalog/300x350/" + color.prodPhoto;
            
            e.stopPropagation();
            return false;
        });
        

        var colorBalloonTimer = new Timer();
        function openColorBalloonFn(colorTile) {
            colorBalloonTimer.clear();
            colorBalloonTimer.set(function() {
                var offset = $(colorTile).offset();
                var x = offset.left - 25 + 16;
                var y = offset.top - 9 + 14;
                
                var colorCode = $(colorTile).children("div").html();
                var color = colorData[colorCode];
                var colorTxt = color.name + " (-" + colorCode + ")";
                $("#infoColorFinish2").html(colorTxt);
                $("#infoModelNumber2").html("K-" + color.prodNum);
                if (color.price != null && color.price.charAt(0) == '$') {
                    $("#infoListPrice2").html(color.price);
                } else {
                    $("#infoListPrice2").html("N/A");
                }
                $("#colorBalloonColorChip > img").get(0).src = "/common/images/colors/50x50/" + color.gifSwatch;
                $("#colorBalloon").css("top", y + "px");
                $("#colorBalloon").css("left", x + "px");
                
                $("#colorBalloon").fadeIn(250);
                
                $("#colorBalloon").unbind("mouseover").unbind("mouseout");
                $("#colorBalloonBase").hover(function() {}, function() {
                    $("#colorBalloon").fadeOut(250);
                });
                
                $("#colorBalloon").one("click", function() {
                    $(colorTile).unbind("mouseover");
                    $("#colorBalloon").fadeOut(250, function() {
                        $(colorTile).one("mouseout", function() {
                            openColorBalloonFn(colorTile);
                            $(colorTile).mouseover(function() {
                                openColorBalloonFn(colorTile);
                            });
                        });
                    });
                    $(colorTile).click();
                });
            }, 400);
            $(colorTile).mousemove(function() {
                colorBalloonTimer.reset();
            });
            $(colorTile).click(function() {
                colorBalloonTimer.clear();
            });
        };
        
        $("#colorGridColors > .colorTile").mouseover(function() {
            openColorBalloonFn(this);
        });
        $("#colorGridColors > .colorTile").mouseout(function() {
            colorBalloonTimer.clear();
        });
        
        
        // Check if dimensions content is present, if not expand the color box to fill the whole area
        if ($("#colorFinishDimensions").size() == 0) {
            $("#colorGrid").css("height", "100%");
        }
        
        // Additional Items Required link
        $("#additionalItemsRequired").click(function() {
            $("#lowerTabs > .tab").eq(1).click();
            return false;
        });
        
        // Related Items "View all" and "Collapse" links
        // first, get the opened and closed heights of all the tables
        var tableHeights = {};
        var tables = $("#requiredItems").find("table").get();
        $("#lowerTabs > .tab").eq(1).click(function() {
            for (var i = 0; i < tables.length; i++) {
                var table = $(tables[i]);
                var index = i;
                
                if (table.find(".extraRelatedProds:first").css("display") == "none") {
                    var closedHeight = table.height();
                    table.find(".extraRelatedProds").css("display", "");
                    var openedHeight = table.height();
                    tableHeights[index] = [closedHeight, openedHeight];
                    table.find(".extraRelatedProds").css("display", "none");
                } else {
                    var openedHeight = table.height();
                    table.find(".extraRelatedProds").css("display", "none");
                    var closedHeight = table.height();
                    tableHeights[index] = [closedHeight, openedHeight];
                    table.find(".extraRelatedProds").css("display", "");
                }
            }
        });
        // bind "view all" link
        $("#requiredItems").find("a.viewAll").click(function() {
            var tableContainer = $(this).parents(".sectionHead").next("div.tableContainer");
            var table = tableContainer.children("table");
            var index = $("#requiredItems").find("table").index(table.get(0));
            
            var closedHeight = tableHeights[index][0];
            var openedHeight = tableHeights[index][1];
            
            table.find(".extraRelatedProds").css("display", "");
            
            tableContainer.height(closedHeight);
            var parent = $(this).parent();
            tableContainer.animate({height: openedHeight + "px"}, 500, function() {
                parent.css("display", "none");
                parent.next(".showingInfo").css("display", "block");
                positionWhiteOut();
            });
            
            return false;
        });
        // bind "collapse" link
        $("#requiredItems").find("a.collapse").click(function() {
            var tableContainer = $(this).parents(".sectionHead").next("div.tableContainer");
            var table = tableContainer.children("table");
            var index = $("#requiredItems").find("table").index(table.get(0));
            
            var closedHeight = tableHeights[index][0];
            var openedHeight = tableHeights[index][1];
            
            tableContainer.height(openedHeight);
            var parent = $(this).parent();
            tableContainer.animate({height: closedHeight + "px"}, 500, function() {
                table.find(".extraRelatedProds").css("display", "none");
                parent.css("display", "none");
                parent.prev(".showingInfo").css("display", "block");
                positionWhiteOut();
            });        
            
            return false;
        });
        
        // Bind compare and save to folder links
        showAddToCompare();
        $("#actionLinks #saveToFolder").click(function() {
            var bubble = true;
            for (var i = 0; i < saveToFolderCallbacks.length; i++) {
                if ($.isFunction(saveToFolderCallbacks[i])) {
                    var ret = saveToFolderCallbacks[i]();
                    if (ret == false) {
                        bubble = false;
                    }
                }
            }
            
            return bubble;
        });
        
        // Bind Add to cart link
        $("#actionLinks #addToCart").click(function() {
            for (var i = 0; i < addToCartCallbacks.length; i++) {
                if ($.isFunction(addToCartCallbacks[i])) {
                    addToCartCallbacks[i]();
                }
            }
        });
        
        // More views
        $("a.moreViews").click(function() {
            $("#detailMoreViews").css("display", "block");
            if (colorData && colorData[getColor()] && $("#detailMoreViewsPhoto img").size() > 0) {
                var src = colorData[getColor()].prodPhoto;
                if (src && src != "") {
                    $("#detailMoreViews #detailMoreViewsRight img:first").get(0).src = "125x160/" + src;
                    $(".detailMoreViewsPhoto img").get(0).src = "350x400/" + src;
                    $("#detailMoreViews #detailMoreViewsEnlarge img").get(0).src = "550wide/" + src;
                }
            }
            $(document).bind("click.detailMoreViewsClose", function(event) {
                if ($(event.target).parents("#detailMoreViews").size() == 0 && !$(event.target).hasClass("moreViews")) {
                    $("#detailMoreViews #detailMoreViewsClose").click();
                }
            });
        });
        $("#detailMoreViews #detailMoreViewsClose").click(function() {
            $("#detailMoreViews").css("display", "none");
            $(document).unbind("click.detailMoreViewsClose");
        });
        $("#detailMoreViews #detailMoreViewsPrintBtn").click(function() {
            var src = $(".detailMoreViewsPhoto img").get(0).src;
            src = src.substr(src.lastIndexOf("/") + 1, src.length);
            var href = "printPhoto.jsp?img=" + src;
            window.open(href, "_blank", "");
        });
        $("#detailMoreViews #detailMoreViewsRight img").click(function() {
            $(this).siblings().removeClass("detailMoreViewsSelected");
            $(this).addClass("detailMoreViewsSelected");
            var src = $(this).get(0).src;
            src = src.substr(src.lastIndexOf("/"), src.length);
            var src550 = "550wide" + src;
            var src350 = "350x400" + src;
            $(".detailMoreViewsPhoto img").get(0).src = src350;
            $("#detailMoreViews #detailMoreViewsEnlarge img").get(0).src = src550;
        });
        $("#detailMoreViews #detailMoreViewsEnlargeBtn").click(function() {
            $("#detailMoreViews #detailMoreViewsEnlarge").css("display", "block");
            $("#detailMoreViews #detailMoreViewsEnlarge a.enlarge").one('click', function() {
                $("#detailMoreViews #detailMoreViewsEnlarge").css("display", "none");
            });
        });

        // swap large image popup source
        $("li[@id^='thumbs_item'] a").click(function() {
            var imgName = $(this).children(".thumbImgName").html();
            if (imgName.length > 0) {
                $("#largeImageName").html(imgName);
                var path =  $("#largeSrcDir").html() + imgName;
                document.getElementById("enlargeImg").src = path;
            }
        });

        $("#enlargeProductPhoto").click(function() {
            var imgPath = $("#largeSrcDir").html() + $("#largeImageName").html();
            enlarge(imgPath);
        });
        
        // Fire onInit callbacks
        for (var i = 0; i < initCallbacks.length; i++) {
            initCallbacks[i]();
        }
    }
    
    function setEnvironment(data) {
        envData = data;
    }
    
    function onInit(callback) {
        initCallbacks.push(callback);
    }
    
    function setColorData(data) {
        colorData = data;
    }
    
    function getColorData() {
        return colorData;
    }
    
    function setColor(color) {
        $("#colorGridColors > .colorTile > div").each(function() {
            if ($(this).text() == color) {
                $(this).parent().click();
            }
        });
    }
    
    function getColor() {
        var colorTiles = $("#colorGridColors > .colorTile").get();
        for (var i = 0; i < colorTiles.length; i++) {
            if ($(colorTiles[i]).hasClass("colorTileSelected")) {
                return $(colorTiles[i]).children("div").text();
            }
        }
        
        return $("#colorGridColors > .colorTile:first").children("div").text();
    }
    
    function setTabs(tab0, tab1) {
        if (tab0 != undefined) {
            $("#rightTabbedBoxTabs > .tab").eq(tab0).click();
        }
        if (tab1 != undefined) {
            $("#lowerTabs > .tab").eq(tab1).click();
        }
    }
    
    function addToCompare() {
        for (var i = 0; i < addToCompareCallbacks.length; i++) {
            if ($.isFunction(addToCompareCallbacks[i])) {
                addToCompareCallbacks[i]();
            }
        }
        showRemoveFromCompare();
    }
    
    function removeFromCompare() {
        for (var i = 0; i < removeFromCompareCallbacks.length; i++) {
            if ($.isFunction(removeFromCompareCallbacks[i])) {
                removeFromCompareCallbacks[i]();
            }
        }
        showAddToCompare();
    }
    
    function showAddToCompare() {
        var link = $("#actionLinks #addToCompare");
        link.parent().removeClass("remove");
        link.parent().addClass("add");
        link.html("Add to Compare");
        link.unbind("click");
        link.click(function() {
            addToCompare();
        });
    }
        
    function showRemoveFromCompare() {
        var link = $("#actionLinks #addToCompare");
        link.parent().removeClass("add");
        link.parent().addClass("remove");
        link.html("Delete from Compare");
        link.unbind("click");
        link.click(function() {
            removeFromCompare();
        });
    }
    
    function onAddToCompare(callback) {
        addToCompareCallbacks.push(callback);
    }
    
    function onRemoveFromCompare(callback) {
        removeFromCompareCallbacks.push(callback);
    }
    
    function onSaveToFolder(callback) {
        saveToFolderCallbacks.push(callback);
    }
    
    function onAddToCart(callback) {
        addToCartCallbacks.push(callback);
    }
    
    function print() {
        var printZip = "";
        var cookies = document.cookie.split("; ");
        for (var i = 0; i < cookies.length; i++) {
            var cookieData = cookies[i].split("=");
            if (cookieData.length >= 2 && cookieData[0] == "printZipCode") {
                printZip = cookieData[1];
            }
        }
        
        if (printZip == "") {
            showPrintDlg();
        } else {
            goPrint({printZip:printZip, prodColor:getColor()});
        }
    }
    
    function showPrintDlg() {
        $("#printDlg").css("display", "block");
        $("#printDlg #printZip").focus();
        $("#printDlg #printDlgClose, #printDlg #printGo").one("click", function() {
            $("#printDlg").css("display", "none");
        });

        $("#printDlg #printGo").one("click", function() {
            var printZip = $("#printDlg #printZip").val();
            if ($("#printDlg #printAsk:checked").size() > 0) { 
                goPrint({printZip:printZip, prodColor:getColor(), printAsk:"1"});
            } else {
                goPrint({printZip:printZip, prodColor:getColor()});
            }
            return false;
        });
        
        $("#printDlg").unbind("keypress");
        $("#printDlg").keypress(function(e) {
            if (e.which == 13) {
                $("#printDlg #printGo").click();
            }
        });
        
        $("#printDlg").click(function(event) {
            event.stopPropagation();
        });
        $(document).unbind("click.printClose");
        $(document).bind("click.printClose", function() {
            $("#printDlg #printDlgClose").click();
        });
    }
    
    function goPrint(urlParams) {
        var href = $("#printDlg #printGo").attr("href");
        href = getUrl(href, urlParams);
        window.open(href);
        return false;
    }
    
    function getUrl(url, urlQueryParams) {
        var urlParams = {};
        var qIndex = url.indexOf("?");
        if (qIndex > 0) {
            var qStr = url.substring(qIndex, url.length);
            var params = qStr.split("&");
            for (var i = 0; i < params.length; i++) {
                var paramSplit = params[i].split("=");
                if (paramSplit.length >= 2) {
                    urlParams[paramSplit[0]] = paramSplit[1];
                }
            }
            url = url.substring(0, qIndex);
        } else {
            url = url + "?";
        }
        
        for (var i in urlQueryParams) {
            urlParams[i] = urlQueryParams[i];
        }
        var count = 0;
        for (var i in urlParams) {
            if (count > 0) {
                url = url + "&";
            }
            url = url + i + "=" + urlParams[i];
            count++;
        }
        return url;
    }
    
    window.detail = {
        setEnvironment: setEnvironment,
        onInit:onInit,
        setColorData:setColorData,
        getColorData:getColorData,
        setColor:setColor,
        getColor:getColor,
        setTabs:setTabs,
        showAddToCompare:showAddToCompare,
        showRemoveFromCompare:showRemoveFromCompare,
        onAddToCompare:onAddToCompare,
        onRemoveFromCompare:onRemoveFromCompare,
        onSaveToFolder:onSaveToFolder,
        onAddToCart:onAddToCart,
        print:print
    };
    
    
    
    
    
    
    /*---------------------------------------------------- A Timer class -----------------------------------------------*/
    function Timer() {
        this.timer = null;
        var curFn;
        var curTimeout;
        
        this.set = function(fn, time) {
            this.clear();
            curFn = fn;
            curTimeout = time;
            this.timer = window.setTimeout(fn, time);
        };
        
        this.clear = function() {
            if(this.timer) {
                clearTimeout(this.timer);
            }
            this.timer = null;
            curFn = null;
            curTimeout = null;
        };
        
        this.reset = function() {
            if (curFn == null || curTimeout == null) { return; }
            this.set(curFn, curTimeout);
        };
    }
    /*---------------------------------------------- End Timer class -------------------------------------------*/
})(jQuery);