$(document).ready(function() {
    setupBellyBand();
    setupPhotoCredits();
});



/********************************************************* Global Variables ********************************************************/
var iHeroIndex = 0;
var bOkToClick = false;
var bOkToClick2 = false;
var seoTimeout = null;



/************************************************************ Belly Band ***********************************************************/
function setupBellyBand() {
    // Postioning
    setupBellyBand_Positioning();
    $(window).resize(setupBellyBand_Positioning);

    // jScroll Page
    setupBellyBand_jScrollPane();

    // Open/Close
    setupBellyBand_OpenClose();
}

function setupBellyBand_Positioning() {
    var viewportHeight = $(window).height();

    if (viewportHeight < 661) {  // was 691
        var newBottom = viewportHeight - 660 + 35; // -1 * (690 - viewport height) - offset positioning --- viewportHeight - 690 + 80
        $("[id$='Content_HomePage_p_Wrapper_p']").css("bottom", newBottom);
    }
    else if (viewportHeight > 922) { // Was 952
        var newBottom = viewportHeight - 922 + 35; // -1 * (952 - viewport height) - offset positioning
        $("[id$='Content_HomePage_p_Wrapper_p']").css("bottom", newBottom);
    }
    else {
        $("[id$='Content_HomePage_p_Wrapper_p']").css("bottom", 35);
    }    
}

function setupBellyBand_OpenClose() {
    // Open/Close the Promos
    $("[id$='Trigger_Promo_p_BellyBand_p']").click(function() {
        if ($(this).closest("[id$='Promo_BellyBand_p'].open").length == 0) {
            openBellyband($(this));
        }
        else {
            closeBellyband($(this));
        }
    });

    $("[id$='Image_Promo_p_BellyBand_p']").click(function() {
        openBellyband($(this));
    });

    // Open/Close the SEO Box (some unique features so the code is slightly different)
    var $seoTrigger = $("[id$='TriggerSEO_Promo_p_BellyBand_p']");
    $seoTrigger.click(function() {
        if ($("[id$='SEO_Promo_BellyBand_p'].open").length > 0) {
            closeSeoBox($(this)); 
        }
        else {
            openSeoBox($(this));       
        }
    });

//    // Opens the SEO box then closes after 5 seconds (business rule...)
//    setTimeout(function() { openSeoBox($seoTrigger); }, 350);
//    seoTimeout = setTimeout(function() { closeSeoBox($seoTrigger); }, 5350);

    // Clear timeout if user clicks on the SEO box -- The other clear is in 'trigger_jScrollPane()'
    $("[id$='SEO_Promo_BellyBand_p']").mousedown(function() {
        clearTimeout(seoTimeout);
    });

}

function openBellyband($item) {
    var $parent = $item.closest("[id$='Promo_BellyBand_p']");
    var $image = $parent.find("[id$='Image_Promo_p_BellyBand_p']");
    var $content = $parent.find("[id$='Content_Promo_p_BellyBand_p']");
    var $trigger = $parent.find("[id$='Trigger_Promo_p_BellyBand_p']");

    $parent.addClass("open");
    $parent.animate({ height: '525px', top: '-335px' }, animateTime / 2); // Was -285px
    $content.css("height", "0");
    $content.css("display", "block");
    $content.animate({ height: '489px' }, animateTime / 2);
    $image.animate({ height: '0', opacity: 0 }, animateTime / 2);

    setTimeout(function() {
        $image.css("display", "none");
    }, animateTime / 2);

    // Google Analyitics Tracking
    var bellybandName = $.trim($trigger.text());
    _gaq.push(['_trackPageview', '/tracking/' + bellybandName]); 
}

function closeBellyband($item) {
    var $parent = $item.closest("[id$='Promo_BellyBand_p']");
    var $image = $parent.find("[id$='Image_Promo_p_BellyBand_p']");
    var $content = $parent.find("[id$='Content_Promo_p_BellyBand_p']");

    $parent.removeClass("open");
    $parent.animate({ height: '164px', top: '0' }, animateTime / 2);
    $content.animate({ height: '0' }, animateTime / 2);
    $image.css("display", "block");
    $image.animate({ height: '127px', opacity: 1 }, animateTime / 2);
}

function openSeoBox($item) {
    var $parent = $item.closest("[id$='Promo_BellyBand_p']");
    var $image = $parent.find("[id$='ImageSEO_Promo_p_BellyBand_p']");
    var $content = $parent.find("[id$='ContentSEO_Promo_p_BellyBand_p']");
    var $trigger = $item;

    $parent.addClass("open");
    $parent.animate({ height: '525px', top: '-335px' }, animateTime / 2); // Was -285px
    $content.css("height", "0");
    $content.css("display", "block");
    $content.animate({ height: '488px' }, animateTime / 2);
    $image.animate({ height: '0', opacity: 0 }, animateTime / 2);
    $trigger.css("background", "url('/images/wrapper/belly.band.background.png')");
    trigger_jScrollPane();

    setTimeout(function() {
        $image.css("display", "none");
    }, animateTime / 2);

    // Google Analyitics Tracking
    _gaq.push(['_trackPageview', '/tracking/seo']); 
}

function closeSeoBox($item) {
    var $parent = $item.closest("[id$='Promo_BellyBand_p']");
    var $image = $parent.find("[id$='ImageSEO_Promo_p_BellyBand_p']");
    var $content = $parent.find("[id$='ContentSEO_Promo_p_BellyBand_p']");
    var $trigger = $item;

    $parent.removeClass("open");
    $parent.animate({ height: '164px', top: '0' }, animateTime / 2);
    $content.animate({ height: '0' }, animateTime / 2);
    $image.css("display", "block");
    $image.animate({ height: '127px', opacity: 1 }, animateTime / 2);
    $trigger.css("background", "#F58A20");
}

function setupBellyBand_jScrollPane() {
    $('.scroll-pane').jScrollPane({ verticalDragMinHeight: 32, verticalDragMaxHeight: 32 });
}

function trigger_jScrollPane() {
    var api = $('.scroll-pane').data('jsp');
    api.scrollToY(0);
    setTimeout(function() {
        api.reinitialise();

        $("[id$='SEO_Promo_BellyBand_p'] .jspDrag").mousedown(function() {
            clearTimeout(seoTimeout);
        });
    }, animateTime / 4);
}


/********************************************************** Photo Credits **********************************************************/
function setupPhotoCredits() {
    if ($("[id$='PhotoCredits']").length > 0) {

        // Setup Auto Slideshow
        var autoSlideshow = setInterval(function() { showNextHero(); }, 8250);

        // Setup Photo Credits Slideshow
        bOkToClick = true;
        bOkToClick2 = true;
        $("[id$='Prev_PhotoCredits_p']").click(function() { clearInterval(autoSlideshow); showPrevHero(); });
        $("[id$='Next_PhotoCredits_p']").click(function() { clearInterval(autoSlideshow); showNextHero(); });

        // Setup Photo Credits Expand/Collapse
        $("[id$='Trigger_PhotoCredits_p']").click(function() {
            if (bOkToClick) {
                bOkToClick2 = false;

                if ($("[id$='PhotoCredits']").hasClass("closed")) {
                    $("[id$='PhotoCredits']").animate({ width: "415px" }, animateTime / 1.5);

                    setTimeout(function() {                        
                        var newHeight = $("[id$='Content_PhotoCredits_p']").height();
                        $("[id$='PhotoCredits']").animate({ height: newHeight }, animateTime / 1.5);

                        setTimeout(function() {
                            $("[id$='PhotoCredits']").addClass("open");
                            $("[id$='PhotoCredits']").removeClass("closed");
                            $("[id$='Content_PhotoCredits_p']").css("width", "0");
                            $("[id$='Content_PhotoCredits_p']").animate({ width: "331px" }, animateTime / 1.5);
                            setTimeout(function() { bOkToClick2 = true; }, animateTime / 1.5)
                        }, animateTime / 1.5);
                    }, animateTime / 1.5);
                }
                else {
                    var oldHeight = $("[id$='Content_PhotoCredits_p']").height();
                    $("[id$='Content_PhotoCredits_p']").css("display", "");
                    $("[id$='Content_PhotoCredits_p']").css("height", oldHeight);
                    $("[id$='Content_PhotoCredits_p']").animate({ width: '0' }, animateTime / 1.5);

                    setTimeout(function() {
                        $("[id$='PhotoCredits']").removeClass("open");
                        $("[id$='PhotoCredits']").addClass("closed");
                        $("[id$='PhotoCredits']").animate({ height: "20px" }, animateTime / 1.5);

                        setTimeout(function() {
                            $("[id$='PhotoCredits']").animate({ width: "80px" }, animateTime / 1.5);
                            setTimeout(function() { bOkToClick2 = true; }, animateTime / 1.5);
                        }, animateTime / 1.5);
                    }, animateTime / 1.5);
                }
            }
        });
    }
}

function showNextHero() {
    if (bOkToClick && bOkToClick2) {
        bOkToClick = false;
        iHeroIndex++;
        if (iHeroIndex > heroImgs.length - 1) {
            iHeroIndex = 0;
        }
        updateHero();
    }
}
function showPrevHero() {
    if (bOkToClick && bOkToClick2) {
        bOkToClick = false;
        iHeroIndex--;
        if (iHeroIndex < 0) {
            iHeroIndex = heroImgs.length - 1;
        }
        updateHero();
    }
}

function updateHero() {
    $("[id$='LoadingHero_HomePage_p_Wrapper_p']").show();

    var oldBgImage = $("[id$='Image_Background_p_HomePage_p_Wrapper_p']");
    var newBgImage = $(oldBgImage).clone();
    $(oldBgImage).css('z-index', 1);
    $(newBgImage).css('z-index', 0);
    var img = $(newBgImage).find("[id$='imgBackground']");
    $(img).remove();
    var newImg = $('<img></img>');
    $(newImg).addClass('hero');
    $(newBgImage).addClass('image-under');
    $(newImg).attr("id", iHeroIndex + "_imgBackground");
    $(newImg).load(function() {
        // Remove 'Loading' Image
        $("[id$='LoadingHero_HomePage_p_Wrapper_p']").hide();

        // Title Transition
        $("[id$='Title_Slideshow_p_Main_p_Content_p_Wrapper_p'] h1").fadeOut(500);
        setTimeout(function() {
            $("[id$='Title_Slideshow_p_Main_p_Content_p_Wrapper_p'] h1").css("color", heroImgs[iHeroIndex].color);
            $("[id$='Title_Slideshow_p_Main_p_Content_p_Wrapper_p'] h1").html(heroImgs[iHeroIndex].title);
            $("[id$='Title_Slideshow_p_Main_p_Content_p_Wrapper_p'] h1").fadeIn(500);
        }, 500);

        // Caption Transition
        if ($("[id$='PhotoCredits']").hasClass("open")) {
            $("[id$='Content_PhotoCredits_p']").fadeOut(350);
            setTimeout(function() {
                $("[id$='Content_PhotoCredits_p']").html(heroImgs[iHeroIndex].caption);

                $("[id$='Content_PhotoCredits_p']").css("height", "");
                $("[id$='Content_PhotoCredits_p']").css("width", "");
                var newHeight = $("[id$='Content_PhotoCredits_p']").height();
                $("[id$='PhotoCredits']").animate({ height: newHeight }, animateTime / 1.5);

                $("[id$='Content_PhotoCredits_p']").fadeIn(350);
            }, 350);
        }
        else {
            $("[id$='Content_PhotoCredits_p']").html(heroImgs[iHeroIndex].caption);
            $("[id$='Content_PhotoCredits_p']").css("height", "");
            $("[id$='Content_PhotoCredits_p']").css("width", "");
        }

        // Background Transition
        $(oldBgImage).fadeOut(700, function() {
            $(this).remove();
            $(newBgImage).css('z-index', 1);
            bOkToClick = true;
            $(newBgImage).removeClass('image-under');
        }); ;
    });
    $(newBgImage).append($(newImg));
    $("[id$='Background_HomePage_p_Wrapper_p']").append($(newBgImage));
    $(newImg).attr('src', heroImgs[iHeroIndex].img);
}