$(document).ready(function () {

    //hides unused banners and shows the first
    $("#homeFeatureBG1").css('left', 0);

    $("#homeFeatureNav1").css('left', 510);

    //hides callout content and shows the first
    $(".callout_content").css('display', 'none');
    $("#content_dbresources").css('display', 'block');

    //hides main product containers and shows the first
    $("#contentM").css('display', 'block');
    $(".product_content").each(function () {
        $("#" + $(this).attr('id') + " .product").each(function (index) {
            $(this).css('left', (index * 472));
        });
    });
    $("#contentM1").addClass('onState');
    drawIndicator("#contentM");

    //Start automatic Banner Change
    var timeOutId = setTimeout(loopBannerAnimation,7000);
    function loopBannerAnimation(){
        var current = $(".homeFeatureNav .onState").attr('id').substring($(".homeFeatureNav .onState").attr('id').length - 1);
        switch (current) {
            case '1':
                animateBanner($("#nav1_2"), current, "2");
                break;
            case '2':
                animateBanner($("#nav1_3"), current, "3");
                break;
            case '3':
                animateBanner($("#nav1_1"), current, "1");
                break;
        }
    }

    // Banner Click Events
    $(".homeFeatureNav .offState").click(function () {
        var current = $(".homeFeatureNav .onState").attr('id').substring($(".homeFeatureNav .onState").attr('id').length - 1);
        var next = $(this).attr('id').substring($(this).attr('id').length - 1);
        animateBanner($(this), current, next)
    });

    function animateBanner(container, current, next) {
        $("#homeFeatureBG" + current).animate({ left: '-=980' });
        $("#homeFeatureBG" + next).animate({ left: '+=980' });
        $("#homeFeatureNav" + next).animate({ left: '-=470' });
        $("#homeFeatureNav" + current).animate({ left: '+=470' });

        $(".homeFeatureNav .onState").addClass("offState").removeClass("onState");
        container.removeClass("offState").addClass("onState");
        
        clearTimeout(timeOutId); //Clear to be reset
        timeOutId = setTimeout(loopBannerAnimation,7000);
    }

    // On/Off States Main Nav
    $("#headerNav img").hover(function () {
        this.src = this.src.replace("-off", "-on");
        var selected = $(this).attr('id').substring($(this).attr('id').length - 1);
        $("#headerNav" + selected).css('display', 'block');
    },
    function () {
        var selected = $(this).attr('id').substring($(this).attr('id').length - 1);
        $("#headerNav" + selected).css('display', 'none');
        this.src = this.src.replace("-on", "-off");
    });
    $(".menuNav").hover(function () {
        var selected = $(this).attr('id').substring($(this).attr('id').length - 1);
        $("#headerImg" + selected).attr('src', $("#headerImg" + selected).attr('src').replace("-off", "-on"));
        $(this).css('display', 'block');
    },
    function () {
        var selected = $(this).attr('id').substring($(this).attr('id').length - 1);
        $(this).css('display', 'none');
        $("#headerImg" + selected).attr('src', $("#headerImg" + selected).attr('src').replace("-on", "-off"));
    });

    // On/Off States Product Nav
    $("#productNav img").hover(function () {
        if ($(this).attr('class') == 'offState') {
            this.src = this.src.replace("-off", "-on");
        }
    },
    function () {
        if ($(this).attr('class') == 'offState') {
            this.src = this.src.replace("-on", "-off");
        }
    });

    $("#productContentWrapper .productNavArrows").hover(function () {
        this.src = this.src.replace("-off", "-on");
    },
    function () {
        this.src = this.src.replace("-on", "-off");
    });

    // Arrow Click Events
    $("#productContentWrapper .productNavArrows").click(function () {
        var current = $(".product_content .onState").attr('id').substring($(".product_content .onState").attr('id').length - 1);
        var currentType = $(".product_content .onState").attr('id').substring(0, $(".product_content .onState").attr('id').length - 1);
        var next;
        var startMove;
        var endMove;

        if ($(this).attr('id').indexOf('right') != -1) {
            next = (parseInt(current) + 1).toString();
            endMove = '-=472';
        }
        else {
            next = (parseInt(current) - 1).toString();
            endMove = '+=472';
        }

        if (next == '0') {
            next = ($("#" + currentType + " .product").length).toString();
            endMove = "-=" + ((parseInt(next) * 472) - 472).toString();
        }
        else if (next == ($("#" + currentType + " .product").length + 1).toString()) {
            next = '1';
            endMove = "+=" + ((472 * $("#" + currentType + " .product").length) - 472).toString();
        }

        $("#" + currentType + " .product").animate({ left: endMove });

        $("#" + currentType + current).removeClass("onState");
        $("#" + currentType + next).addClass("onState");

        $("#indicator .onState").removeClass("onState").addClass("offState");

        $("#indicator li").each(function (index) {
            if (index == (parseInt(next) - 1))
                $(this).addClass("onState").removeClass("offState");
        });
    });
        
    $("#indicator li").live('click',function () {
        var current = parseInt($("#indicator .onState").attr('id').substring($("#indicator .onState").attr('id').length - 1));
        var currentType = $(".product_content .onState").attr('id').substring(0, $(".product_content .onState").attr('id').length - 1);
        var selection = parseInt($(this).attr('id').substring($(this).attr('id').length - 1));
        var endMove;
        if(current > selection)
            endMove = "+=" + (current*472 - selection*472).toString();
        else
            endMove = "-=" + (selection*472 - current*472).toString();
        
        $("#" + currentType + " .product").animate({ left: endMove});
        $("#indicator .onState").removeClass("onState").addClass("offState");
        $("#ind" + selection.toString()).addClass("onState").removeClass("offState");
        $("#" + currentType + current).removeClass("onState");
        $("#" + currentType + selection).addClass("onState");
    });

    // Product Nav Clicks
    $("#productNav img").click(function () {
        if ($(this).attr('class') == 'offState') {
            var container = "#" + $(this).attr('id').replace('Nav', '');
            this.src = this.src.replace("-off", "-on");
            $("#productNav img.onState").attr('src', $("#productNav img.onState").attr('src').replace("-on", "-off"));
            $("#productNav img.onState").addClass("offState").removeClass("onState");

            var current = parseInt($(".product_content .onState").attr('id').substring($(".product_content .onState").attr('id').length - 1));
            var currentType = $(".product_content .onState").attr('id').substring(0, $(".product_content .onState").attr('id').length - 1);
            $("#" + currentType + " .product").each(function (index) {
                $(this).css('left', 472 * index);
            });

            $(".product_content").toggle(false);
            $(container).toggle(true);

            $(".product_content .onState").removeClass("onState");
            $(container + "1").addClass("onState");
            $(this).removeClass("offState").addClass("onState");

            drawIndicator(container);
        }
    });

    // On/Off States Callouts
    $("#homeContentRight img").hover(function () {
        if ($(this).attr('class') == 'offState') {
            this.src = this.src.replace("-off", "-on");
        }
    },
    function () {
        if ($(this).attr('class') == 'offState') {
            this.src = this.src.replace("-on", "-off");
        }
    });

    // Callout Clicks
    $("#homeContentRight img").click(function () {
        if ($(this).attr('class') == 'offState') {
            var newContainer = "#" + $(this).attr('id').replace('callout', 'content');
            var oldContainer = "#" + $("#homeContentRight img.onState").attr('id').replace('callout', 'content');
            this.src = this.src.replace("-off", "-on");
            $("#homeContentRight img.onState").attr('src', $("#homeContentRight img.onState").attr('src').replace("-on", "-off"));
            $("#homeContentRight img.onState").addClass("offState").removeClass("onState");

            $(oldContainer).animate({ height: 'toggle' });
            $(newContainer).animate({ height: 'toggle' });
            $(this).removeClass("offState").addClass("onState");
        }
    });

    function drawIndicator(container) {
        var html;

        html = "<ul>";
        $(container + " .product").each(function (index) {
            if (index == 0)
                html += "<li id=\"ind" + (index + 1).toString() + "\" class=\"onState\">";
            else
                html += "<li id=\"ind" + (index + 1).toString() + "\" class=\"offState\">";
                
            html += "<img alt=\"\" width=\"14px\" height=\"14px\" src=\"images/global/blank.gif\" />";
        });
        html += "</ul>";

        $("#productContentWrapper #indicator").children().remove();
        $("#productContentWrapper #indicator").append(html);
    }

});