/*

Setup the color palette browser in the product page
@parameter color: int[optional]
*/
(function($)
{
    window.setupPaletteBrowser = function(color)
    {
        var paletteBrowser = this;
        var $shadeSelect = $("#selectYourShade");

        var selectPaletteItem = function(id)
        {
            var item = palette.items[id];
            if (item)
            {
                $(".product-palette-colors li.hover").removeClass("hover");
                var $paletteItemLI = $('#paletteItem-' + item.id);
                $paletteItemLI.addClass("hover");
                $(".product-palette-sample-selected").css('background', 'url(/skin/frontend/temptu/default/' + item.sampleImage + ')');
            }
            $shadeSelect.triggerHandler("selectPaletteItem", [id]);
        };

        // Inverted UI bindings for the blush color
        $(".product-details-matchingShade.blush").each(function()
        {
            var $colorRoot = $(this);
            $shadeSelect.bind("selectPaletteItem", {}, function(e, id)
            {
                var paletteItem = palette.items[kits.items["foundation-" + id].blush];
                $(".color", $colorRoot).css("background", "url(/skin/frontend/temptu/default/" + paletteItem.solidColorImage + ")");
                $(".label", $colorRoot).html(paletteItem.code + " " + paletteItem.label);
            });
        });

        // Inverted UI bindings for the highlighter color
        $(".product-details-matchingShade.highlighter").each(function()
        {
            var $colorRoot = $(this);
            $shadeSelect.bind("selectPaletteItem", {}, function(e, id)
            {
                var paletteItem = palette.items[kits.items["foundation-" + id].highlighter];
                $(".color", $colorRoot).css("background", "url(/skin/frontend/temptu/default/" + paletteItem.solidColorImage + ")");
                $(".label", $colorRoot).html(paletteItem.code + " " + paletteItem.label);
            });
        });

        $(".product-details-bundle").each(function()
        {
            var $bundleRoot = $(this);
            $shadeSelect.bind("selectPaletteItem", {}, function(e, id)
            {
                //e.data.msg
                var foundation = palette.items[kits.items["foundation-" + id].foundation].solidColorImage;
                var highlighter = palette.items[kits.items["foundation-" + id].highlighter].solidColorImage;
                var blush = palette.items[kits.items["foundation-" + id].blush].solidColorImage;

                $(".colorA", $bundleRoot).css("background", "url(/skin/frontend/temptu/default/" + foundation + ")");
                $(".colorB", $bundleRoot).css("background", "url(/skin/frontend/temptu/default/" + blush + ")");
                $(".colorC", $bundleRoot).css("background", "url(/skin/frontend/temptu/default/" + highlighter + ")");
            });

        });


        var showPreviewPaletteItem = function(id)
        {
            var item = palette.items[id];
            $(".product-palette-sample-preview").css('background', 'url(/skin/frontend/temptu/default/' + item.sampleImage + ')');
        };

        var hidePreviewPaletteItem = function()
        {
            $(".product-palette-sample-preview").css('background', '');
        };

        $("#selectYourShade").change(function(e)
        {
            selectPaletteItem($(this).val());
        });

        // Get the currenty value by forcing the change event
        $("#selectYourShade").change();

        $("#selectYourShade option").each(function()
        {
            var paletteItem = palette.items[this.value];
            var id = paletteItem.id;
            var $productBrowserItem = $('<li id="paletteItem-' + paletteItem.id + '" style="background: url(/skin/frontend/temptu/default/' + paletteItem.solidColorImage + ')"><a href="#" title="' + this.text + '"></a></li>');
            if (id == color)
            {
                $productBrowserItem.addClass("hover");
            }

            $productBrowserItem.click(function(e)
            {
                e.preventDefault();
                $("#selectYourShade").val(id).change();
            });
            $productBrowserItem.hover(function(e)
            {
                showPreviewPaletteItem(id);
            }, function(e)
            {
                hidePreviewPaletteItem();
            });
            $productBrowserItem.appendTo($(".product-palette-colors ul"));
        });

    };
} (jQuery));

/*

Augment the color palette data with a "colection" like behavior

*/
(function($)
{
    window.initPaletteData = function()
    {
        palette.items = {};
        $(palette).each(function()
        {
            palette.items[this.id] = this;
        });
        kits.items = {};
        $(kits).each(function()
        {
            kits.items[this.id] = this;
            kits.items['foundation-' + this.foundation] = this;
        });
    };
} (jQuery));