// Global Variables
var animateTime = 500;
var fadeTime = 375;
var delay = 500;

var collapseWidth = 431;
var collapsePos = 186; // 241;
var expandWidth = 439;
var expandPos = 13;

var collapseWidthControls = 245; //  221;
var expandWidthControls = 399;

var hoverIntent = false;

var $emptySlide;

if ($j.browser.msie) {
    expandPos = 0;
}

// On Page Load, setup the slideshow functionality
$j(document).ready(function () {
    collapsePos = parseInt($j("[id$='Homepage_c_Slideshow']").find("div.maskOuter").css("left"));
    $emptySlide = $j("[id$='SlideEmpty_c_Items_Homepage_p_Slideshow_p']");

    // Special Expand Functionality for the iPad
    if (navigator.platform.indexOf("iPad") != -1) {
        $j("[id$='iPad_Homepage_p_Slideshow_p']").show();
        $j("[id$='Details_Items_p_Homepage_p_Slideshow_p']").click(function () {
            window.location = $j(this).find("a").attr("href");
        });
        setupIPad_ClickExpand();
    }

    // Expand Functionality for Everyone Else
    else {
        $j("[id$='Homepage_Slideshow_p']").hover(function () {
            if (hoverIntent)
                clearTimeout(hoverIntent);
            else expandSlideshow($j(this));
        }, function () {
            $item = $j(this);
            hoverIntent = setTimeout(function () {
                hoverIntent = false;
                collapseSlideshow($item);
            }, delay);
        });
    }

    // Slide Rotate Functionality
    $j("[id$='Previous_c_Control_Controls_p_Homepage_p_Slideshow_p']").click(function () {
        var $currentSlide = $j("[id$='Items_Homepage_p_Slideshow_p']:visible");
        var $previousSlide = $j("[id$='Items_Homepage_p_Slideshow_p']:visible").prev("[id$='Items_Homepage_p_Slideshow_p']");
        if ($previousSlide.html() == null) $previousSlide = $j("[id$='Items_Homepage_p_Slideshow_p']:last");
        if ($previousSlide.html() == $emptySlide.html()) $previousSlide = $j("[id$='Items_Homepage_p_Slideshow_p']:last");

        slideTransition($currentSlide, $previousSlide)
    });

    $j("[id$='Next_c_Control_Controls_p_Homepage_p_Slideshow_p']").click(function () {
        var $currentSlide = $j("[id$='Items_Homepage_p_Slideshow_p']:visible");
        var $nextSlide = $j("[id$='Items_Homepage_p_Slideshow_p']:visible").next("[id$='Items_Homepage_p_Slideshow_p']");
        if ($nextSlide.html() == null) $nextSlide = $j("[id$='Items_Homepage_p_Slideshow_p']:first").next("[id$='Items_Homepage_p_Slideshow_p']");
        if ($nextSlide.html() == $emptySlide.html()) $nextSlide = $j("[id$='Items_Homepage_p_Slideshow_p']:first").next("[id$='Items_Homepage_p_Slideshow_p']");

        slideTransition($currentSlide, $nextSlide)
    });
});

// Slide Transition
function slideTransition($currentSlide, $nextSlide) {
    $currentImage = $currentSlide.find("[id$='Image_Items_p_Homepage_p_Slideshow_p']");
    $currentDetails = $currentSlide.find("[id$='Details_Items_p_Homepage_p_Slideshow_p']");
    $nextImage = $nextSlide.find("[id$='Image_Items_p_Homepage_p_Slideshow_p']");
    $nextDetails = $nextSlide.find("[id$='Details_Items_p_Homepage_p_Slideshow_p']");
    $innerMask = $j("[id$='Items_c_Homepage_Slideshow_p']");
    $controls = $j("[id$='Controls_Homepage_p_Slideshow_p']");

    var higherSibiling_TopOffset = -32;
    var higherSibiling_LeftOffset = 26;
    var lowerSibiling_TopOffset = -381;
    var lowerSibiling_LeftOffset = 26;
    var controls_TopOffset = 184;
    var controls_LeftOffset = 46;

    if ($j.browser.mozilla) {
        higherSibiling_TopOffset = -33;
        higherSibiling_LeftOffset = 26.3;
        lowerSibiling_TopOffset = -382;
        lowerSibiling_LeftOffset = 26.3;
        controls_TopOffset = 183;
        controls_LeftOffset = 47;
    }

    if ($currentSlide.index() > $nextSlide.index()) {
        $currentSlide.css("top", lowerSibiling_TopOffset);
        $currentSlide.css("left", lowerSibiling_LeftOffset);
        $nextSlide.css("top", higherSibiling_TopOffset);
        $nextSlide.css("left", higherSibiling_LeftOffset);
    }
    else {
        $currentSlide.css("top", higherSibiling_TopOffset);
        $currentSlide.css("left", higherSibiling_LeftOffset);
        $nextSlide.css("top", lowerSibiling_TopOffset);
        $nextSlide.css("left", lowerSibiling_LeftOffset);
    }

    $innerMask.css("background-color", "#FFFFFF");

    $currentSlide.css("z-index", "10");
    $nextSlide.css("z-index", "5");

    $controls.css("top", controls_TopOffset);
    $controls.css("left", controls_LeftOffset);

    $nextSlide.show();
    $nextImage.hide();
    $nextDetails.css("left", (-1 * expandWidth));

    $currentImage.fadeOut(fadeTime * 2);
    $nextImage.fadeIn(fadeTime * 2);
    $currentDetails.animate({ left: (-1 * expandWidth) }, fadeTime * 2);


    setTimeout(function () {
        $currentSlide.hide();
        $currentSlide.css("top", "-35px");
        $currentSlide.css("left", "-1px");
        $nextSlide.css("top", "-35px");
        $nextSlide.css("left", "-1px");

        $innerMask.css("background-color", "transparent");
        $controls.css("top", "181px");
        $controls.css("left", 19.5);

        $nextDetails.animate({ left: expandPos }, animateTime);
    }, fadeTime * 2);

    // Controls Animation
    $controls.animate({ left: 42, width: expandWidthControls + 10 }, fadeTime / 4);
    setTimeout(function () {
        $controls.animate({ left: controls_LeftOffset, width: expandWidthControls }, fadeTime / 4);
    }, fadeTime / 4);
}

function slideTransition_FadeToNothing_ThenFadeIn($currentSlide, $nextSlide) {
    $currentImage = $currentSlide.find("[id$='Image_Items_p_Homepage_p_Slideshow_p']");
    $currentDetails = $currentSlide.find("[id$='Details_Items_p_Homepage_p_Slideshow_p']");
    $nextImage = $nextSlide.find("[id$='Image_Items_p_Homepage_p_Slideshow_p']");
    $nextDetails = $nextSlide.find("[id$='Details_Items_p_Homepage_p_Slideshow_p']");

    $currentImage.fadeOut(fadeTime);
    $currentDetails.animate({ left: (-1 * expandWidth) }, fadeTime);

    setTimeout(function () {
        $nextImage.hide();
        $nextImage.fadeIn(fadeTime);
    }, fadeTime * 0.7);


    setTimeout(function () {
        $currentSlide.hide();
        $nextSlide.show();
        $nextDetails.css("left", (-1 * expandWidth));
        $nextDetails.animate({ left: expandPos }, animateTime);
    }, fadeTime);

    // Controls Animation
    $j("[id$='Controls_Homepage_p_Slideshow_p']").animate({ left: 8, width: expandWidthControls + 10 }, fadeTime / 4);
    setTimeout(function () {
        $j("[id$='Controls_Homepage_p_Slideshow_p']").animate({ left: 19, width: expandWidthControls }, fadeTime / 4);
    }, fadeTime / 4);
}

// Special Expand Functionality for the iPad
function setupIPad_ClickExpand() {
    $j("[id$='Homepage_Slideshow_p']").click(function () {
        expandSlideshow($j(this));
        $j(this).unbind("click");
        setTimeout(function () { setupIPad_ClickCollapse(); }, animateTime);      
    });
}

function setupIPad_ClickCollapse() {
    $j("[id$='iPad_Homepage_p_Slideshow_p']").click(function () {
        var $item = $j(this).closest("[id$='Homepage_Slideshow_p']");
        collapseSlideshow($item);
        $j(this).unbind("click");
        setTimeout(function () { setupIPad_ClickExpand(); }, animateTime);        
    });
}

// Expand Functionality for Everyone Else and the iPad
function expandSlideshow($item) {
    // Shows a random slide
    var numOfItems = $j("[id$='Items_Homepage_p_Slideshow_p']").length - 1;
    var randNum = 3; // Math.floor(Math.random() * numOfItems) + 3;

    // Transition to first slide
    var $nextSlide = $j("[id$='Items_Homepage_p_Slideshow_p']").siblings(":nth-child(" + randNum + ")");
    var $nextImage = $nextSlide.find("[id$='Image_Items_p_Homepage_p_Slideshow_p']");
    var $nextDetails = $nextSlide.find("[id$='Details_Items_p_Homepage_p_Slideshow_p']");

    $emptySlide.hide();
    $nextImage.hide();
    $nextSlide.show();
    $nextImage.fadeIn(fadeTime);

    $nextDetails.css("left", (-1 * expandWidth));
    $nextDetails.animate({ left: expandPos }, animateTime);

    // Controls Collapse
    $j("[id$='Homepage_c_Slideshow']").animate({ width: expandWidth }, animateTime);
    $j("[id$='Homepage_c_Slideshow']").find("div.maskOuter").animate({ left: 40 }, animateTime);
    $item.find("[id$='Details_Items_p_Homepage_p_Slideshow_p']").animate({ width: expandWidth }, animateTime);

    // Controls Animation
    $j("[id$='Controls_Homepage_p_Slideshow_p']").animate({ left: -10, width: expandWidth + 40 }, animateTime / 4);
    setTimeout(function () {
        $j("[id$='Controls_Homepage_p_Slideshow_p']").animate({ left: 19, width: expandWidthControls }, animateTime / 4);
    }, animateTime);
}

function collapseSlideshow($item) {
    // Reverts back to the empty slide
    var $currentSlide = $j("[id$='Items_Homepage_p_Slideshow_p']:visible");
    var $nextSlide = $emptySlide;

    $currentImage = $currentSlide.find("[id$='Image_Items_p_Homepage_p_Slideshow_p']");
    $currentDetails = $currentSlide.find("[id$='Details_Items_p_Homepage_p_Slideshow_p']");
    $nextImage = $nextSlide.find("[id$='Image_Items_p_Homepage_p_Slideshow_p']");
    $nextDetails = $nextSlide.find("[id$='Details_Items_p_Homepage_p_Slideshow_p']");
    
    // (1) Removes the control arrows and details ribbon
    $j("[id$='Controls_Homepage_p_Slideshow_p']").animate({ left: -10, width: expandWidth + 40 }, animateTime / 4);
    $currentDetails.animate({ left: (-1 * expandWidth) }, fadeTime);

    setTimeout(function () {
        // (2) Start collapsing the image
        $j("[id$='Homepage_c_Slideshow']").animate({ width: collapseWidth }, animateTime);
        $j("[id$='Homepage_c_Slideshow']").find("div.maskOuter").animate({ left: collapsePos }, animateTime);
        $item.find("[id$='Details_Items_p_Homepage_p_Slideshow_p']").animate({ width: 0 }, animateTime);

        setTimeout(function () {
            // (3) Fadeout to the $emptyImage - Starts 1/2 through step #2
            $currentImage.fadeOut(fadeTime);

            setTimeout(function () {
                $currentSlide.hide();
                $nextDetails.hide();
                $nextSlide.show();
            }, fadeTime);


            setTimeout(function () {
                // (4) Once everything is complete, move the control arrows back into view
                $j("[id$='Controls_Homepage_p_Slideshow_p']").animate({ left: 19, width: collapseWidthControls }, animateTime / 4);
            }, animateTime);
        }, animateTime / 2);
    }, animateTime / 4);
}