// Filename             : vanquis.homepage.js
// Version              : 1.0.0.0
// Namespace            : jQuery
// Notes:               : progressive enhancement for the homepage (panel scoller & button hovers)
// Dependencies         : jQuery 1.3.2
// Revision history     : 15/08/09 - RN - Created
// -------------------------------------------------------------------------------------


$(document).ready(function() {

    // preload panel images
    $.preloadImages("/content/images/homepage/Step1_active.gif", "/content/images/homepage/Step1_inactive.gif", "/content/images/homepage/Step2_active.gif", "/content/images/homepage/Step2_inactive.gif", "/content/images/homepage/Step3_active.gif", "/content/images/homepage/Step3_inactive.gif");

    var somehtml;

    somehtml = '<' + 'ul>';
    somehtml += '<' + 'li>';
    somehtml += '<' + 'img height="38" width="18" alt="Previous panel" title="Previous panel" src="/content/images/homepage/item-arrow-left.jpg" class="clickable-arrow-left" id="prev"/>';
    somehtml += '<' + '/li>';

    somehtml += '<' + 'li id="hpPanelStep1" class="hpPanelSteps"><img src="/Content/Images/homepage/Step1_active.gif" width="37" height="37" /></li>';
    somehtml += '<' + 'li id="hpPanelStep2" class="hpPanelSteps"><img src="/Content/Images/homepage/Step2_inactive.gif" width="37" height="37" /></li>';
    somehtml += '<' + 'li id="hpPanelStep3" class="hpPanelSteps"><img src="/Content/Images/homepage/Step3_inactive.gif" width="37" height="37" /></li>';

    somehtml += '<' + 'li>';
    somehtml += '<' + 'img height="38" width="18" alt="Next panel" title="Next panel" src="/content/images/homepage/item-arrow-right.jpg" class="clickable-arrow-right" id="next"/>';
    somehtml += '<' + '/li>';
    somehtml += '<' + '/ul>';

    $('#item-navigation').html(somehtml.toString());

    $('#upsell').serialScroll({
        target: '#items',
        items: '.scrollable',
        prev: 'img.clickable-arrow-left',
        next: 'img.clickable-arrow-right',
        axis: 'x',
        navigation: '#item-navigation li.hpPanelSteps',
        duration: 700,
        force: true,
        cycle: true,
        interval: 20000,

        onBefore: function(e, elem, $pane, $items, pos) {
            //those arguments with a $ are jqueryfied, elem isn't.
            e.preventDefault();
            if (this.blur)
                this.blur();

            if (pos == 0) {
                $('#hpPanelStep1 img').attr('src', '/Content/Images/homepage/Step1_active.gif');
                $('#hpPanelStep2 img').attr('src', '/Content/Images/homepage/Step2_inactive.gif');
                $('#hpPanelStep3 img').attr('src', '/Content/Images/homepage/Step3_inactive.gif');
            } else if (pos == 1) {
                $('#hpPanelStep1 img').attr('src', '/Content/Images/homepage/Step1_inactive.gif');
                $('#hpPanelStep2 img').attr('src', '/Content/Images/homepage/Step2_active.gif');
                $('#hpPanelStep3 img').attr('src', '/Content/Images/homepage/Step3_inactive.gif');
            } else if (pos == 2) {
                $('#hpPanelStep1 img').attr('src', '/Content/Images/homepage/Step1_inactive.gif');
                $('#hpPanelStep2 img').attr('src', '/Content/Images/homepage/Step2_inactive.gif');
                $('#hpPanelStep3 img').attr('src', '/Content/Images/homepage/Step3_active.gif');
            }

        },
        onAfter: function(elem) {
        }
    });
});