jQuery(document).ready(function () {
    var b = jQuery('#Picker').data('homepage');
    setTimeout(function () { bind_page(b) }, 500);
});

function bind_page(isHomepage) {
    jQuery('#Picker').data('current', 0);

    // Align the images in the picker
    jQuery('#Picker *').each(function () {
        var ele = jQuery(this);

        ele.attr('width', '75').attr('height', '130');
        ele.css('left', 42 * ele.index());
    }).hover(
        function () {
            // Cache the element and index
            var ele = jQuery(this);
            var index = ele.index();

            // Set it to the front
            ele.css('z-index', 100).addClass('hover');

            // For each one, we reset the z-index to be 
            // the inverse of the distance from the 
            // current element (so as to stack them like a
            // pyramid - out from center).
            jQuery('#Picker img').each(function () {
                var child = jQuery(this);
                var childIndex = child.index();

                if (childIndex == index) return;
                else if (childIndex > index) {
                    child.css('z-index', 10 + index - childIndex);
                }
                else {
                    child.css('z-index', 10 + childIndex - index);
                }
            });
        },
        function () {
            jQuery(this).removeClass('hover');
        }
    );

    if (!(jQuery('#Picker *:eq(0)').attr('href'))) {
        jQuery('#Picker *').click(picker_img_click);
    }

    setTimeout(
        function () {
            jQuery('#Picker *:eq(0)').click()
        },
        1000
    );

        if (isHomepage == true) {
            setInterval(function () {
                var current = jQuery('#Picker').data('current');

                current++;

                if (current > jQuery('#Picker *').size()) current = 0;

                jQuery('#Picker').data('current', current);
                jQuery('#Picker *:eq(' + current + ')').click();
            },
            4000);
        }
}

function picker_img_click(event) {
    var ele = jQuery(this);

    event.preventDefault();

    jQuery('#HomeFlavorPanels .selected, #Picker .selected').removeClass('selected');
    
    var index = ele.index();

    jQuery('#Picker *').each(function () {
        var child = jQuery(this);
        var childIndex = child.index();

        if (childIndex == index) return;
        else if (childIndex > index) {
            child.css('z-index', 10 + index - childIndex);
        }
        else {
            child.css('z-index', 10 + childIndex - index);
        }
    });

    ele.css('z-index', 100);

    ele.addClass('selected');
    jQuery('#HomeFlavorPanels *[data-flavor="' + ele.data('flavor') + '"]').addClass('selected');
}