﻿$(function() {
    preCacheImages();
    selectMenuItem();
    ieMenuWorkaround();
    $('#flash').hide().fadeIn();
    $('#product-browser').productBrowser();
});

function selectMenuItem() {
    $('#main-menu tr:first > td > a').each(function() {
        if (window.location.href.indexOf(this.href) == 0)
            $(this).closest('td').addClass('selected');
    });

    // select the home item by default if none other is selected
    if ($('#main-menu tr:first > td[class~="selected"]').length == 0)
        $('#main-menu tr:first > td:nth-child(2)').addClass('selected');
}

function preCacheImages() {
    var imagesToPreCache = [
        "/Content/Images/Buttons/ButtonGradient.png",
        "/Content/Images/Buttons/ButtonGradientHover.png",
        "/Content/Images/Buttons/ButtonLeft.png",
        "/Content/Images/Buttons/ButtonLeftHover.png",
        "/Content/Images/Buttons/ButtonRight.png",
        "/Content/Images/Buttons/ButtonRightHover.png",
        "/Content/Images/Buttons/MenuDynamicItemGradient.png",
        "/Content/Images/Buttons/MenuDynamicItemGradientHover.png",
        "/Content/Images/Buttons/MenuStaticItemGradient.png",
        "/Content/Images/Buttons/MenuStaticItemGradientHover.png",
        "/Content/Images/Buttons/MenuStaticItemGradientSelected.png",
        "/Content/Images/Buttons/MenuStaticItemLeft.png",
        "/Content/Images/Buttons/MenuStaticItemLeftHover.png",
        "/Content/Images/Buttons/MenuStaticItemLeftSelected.png",
        "/Content/Images/Buttons/MenuStaticItemRight.png",
        "/Content/Images/Buttons/MenuStaticItemRightHover.png",
        "/Content/Images/Buttons/MenuStaticItemRightSelected.png",
        "/Content/Images/Buttons/Recycle.gif",
        "/Content/Images/Buttons/RecycleHover.gif",
        "/Content/Images/Flags/Brazil_Over.png",
        "/Content/Images/Flags/Brazil_SMALL.png",
        "/Content/Images/Flags/Chinese_Over.png",
        "/Content/Images/Flags/Chinese_SMALL.png",
        "/Content/Images/Flags/French_Over.png",
        "/Content/Images/Flags/French_SMALL.png",
        "/Content/Images/Flags/Germany_Over.png",
        "/Content/Images/Flags/Germany_SMALL.png",
        "/Content/Images/Flags/Italian_Over.png",
        "/Content/Images/Flags/Italian_SMALL.png",
        "/Content/Images/Flags/Japanese_Over.png",
        "/Content/Images/Flags/Japanese_SMALL.png",
        "/Content/Images/Flags/Russian_Over.png",
        "/Content/Images/Flags/Russian_SMALL.png",
        "/Content/Images/Flags/Spain_Over.png",
        "/Content/Images/Flags/Spain_SMALL.png"
    ];

    for (var x = 0; x < imagesToPreCache.length; x++) {
        var img = new Image()
        img.src = imagesToPreCache[x]
    }
}

function ieMenuWorkaround() {
    // If the browser is IE 7 or previous,
    if ($.browser.msie && $.browser.version < 8) {
        /*  
        ** For the parents of the main menu (i.e., the thing we want to be on top),  
        */
        $('#main-menu-container').parents().each(function() {
            var p = $(this);
            var pos = p.css('position');

            // If it's positioned,  
            if (pos == 'relative' ||
                pos == 'absolute' ||
                pos == 'fixed') {
                /*  
                ** Add the 'on-top' class name when the  
                ** mouse is hovering over it, and remove  
                ** it when the mouse leaves.  
                */
                p.hover(
                    function() { $(this).addClass('on-top'); },
                    function() { $(this).removeClass('on-top'); });
            }
        });

        $('#main-menu td:has(ul)').hover(
            function() { $('ul', $(this)).show(); },
            function() { $('ul', $(this)).hide(); }
        );
    }
}


// Product browser plugin
//-------------------------------------------------

jQuery.fn.productBrowser = function() {
    var animationId = null;
    var isSliding = false;
    var itemListLeft = 0;
    var itemListWidth = 0;
    var itemWidth = 130;
    var maxItemListLeft = 0;
    var minItemListLeft = 0;
    var visibleWidth = 650;
    var itemsCount = $('#product-browser .item').length;

    var itemListWidth = itemsCount * itemWidth;
    if (itemListWidth <= visibleWidth)
        minItemListLeft = 0;
    else
        minItemListLeft = visibleWidth - itemListWidth;

    $('#product-browser .list').width(itemListWidth);
    $('#product-browser .slide-left').click(function(evt) { slideLeft(); });
    $('#product-browser .slide-left').removeClass('enabled');
    $('#product-browser .slide-right').click(function(evt) { slideRight(); });
    if (itemsCount <= 5)
        $('#product-browser .slide-right').removeClass('enabled');

    function animateSlide(toX) {
        window.clearInterval(animationId);

        if (toX > maxItemListLeft) toX = maxItemListLeft;
        if (toX < minItemListLeft) toX = minItemListLeft;
        itemListLeft = toX;
        var stopPoint = toX;

        if (stopPoint == minItemListLeft)
            $('#product-browser .slide-right').removeClass('enabled');
        else
            $('#product-browser .slide-right').addClass('enabled');

        if (stopPoint == maxItemListLeft)
            $('#product-browser .slide-left').removeClass('enabled');
        else
            $('#product-browser .slide-left').addClass('enabled');

        isSliding = true;

        animationId = window.setInterval(function() {
            var itemListLeft = parseInt($('#product-browser .list').get(0).style.left) || 0;
            var newLeft = calculateDecel(itemListLeft, stopPoint);
            $('#product-browser .list').get(0).style.left = newLeft + "px";

            if (newLeft == stopPoint) {
                window.clearInterval(animationId);
                isSliding = false;
            }
        }, 30);
    }

    function slideLeft() {
        animateSlide(itemListLeft + visibleWidth);
    }

    function slideRight() {
        animateSlide(itemListLeft - visibleWidth);
    }

    function calculateDecel(from, to) {
        var n = from - Math.floor((from - to) * 0.4);
        if (Math.abs(from - to) < 4)
            return to;
        else
            return n;
    }
};

