var $j = jQuery.noConflict();
var newsCtr = 0;    //Current display index
var eventsCtr = 0;  //Current display index

//THEATER
$j(function () {
    $j("div[id*='spinner'] a:first").addClass("selected");

    //Set Default State of each portfolio piece
    $j("#theater > #header").show();
    $j("#theater > #header > a:first").addClass("focus");

    //We don't want to replace the entire HTML in the overlay, just the content
    $j("#theater-overlay > div#prod-name > p > span").html($j(overlayTicker[0]).find("p.prod-name > span").html());
    $j("#theater-overlay > div#prod-desc > p > span").html($j(overlayTicker[0]).find("p.prod-desc> span").html());
    $j("#theater-overlay > div#learn-more > p > a").attr("href", $j("#theater > #header > a:first").attr("href"));

    //Get size of images, how many there are, then determin the size of the image reel.
    var imageWidth = $j("#theater").width();
    var imageSum = $j("#theater > #header img").size();
    var imageReelWidth = imageWidth * imageSum;

    //Adjust the image reel to its new size
    $j("#theater > #header").css({ 'width': imageReelWidth });

    //Paging + Slider Function
    rotate = function () {
        var triggerID = $active.find("img").attr("id") - 1; //Get number of times to slide
        var imageReelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

        $j("#theater > #header > a").removeClass("focus"); //Remove all active class
        $active.addClass("focus"); //Add active class (the $active is declared in the rotateSwitch function)

        $j("div[id*='spinner'] > a").removeClass("selected");
        $activeRadio.addClass("selected");

        //Slider Animation
        $j("#theater > #header").animate({
            left: -imageReelPosition
        }, 500);

        //Animate theater overlay
        $j("#theater-overlay > div#prod-name > p > span, #theater-overlay > div#prod-desc > p > span").fadeOut(250, function () {
            $j("#theater-overlay > div#prod-name > p > span").html($j(overlayTicker[triggerID]).find("p.prod-name > span").html()).fadeIn(250);
            $j("#theater-overlay > div#prod-desc > p > span").html($j(overlayTicker[triggerID]).find("p.prod-desc > span").html()).fadeIn(250);
            $j("#theater-overlay > div#learn-more > p > a").attr("href", $active.attr("href"));
        });
    };

    //Rotation + Timing Event
    rotateSwitch = function () {
        play = setInterval(function () { //Set timer - this will repeat itself every 5 seconds
            $active = $j('#theater > #header > a.focus').next();
            $activeRadio = $j("div[id*='spinner'] a.selected").next();

            if ($active.length === 0) { //If paging reaches the end...
                $active = $j('#theater > #header > a:first'); //go back to first
                $activeRadio = $j("div[id*='spinner'] a:first");
            }
            rotate(); //Trigger the paging and slider function
        }, 5000); //Timer speed in milliseconds (5 seconds)
    };

    rotateSwitch(); //Run function on launch

    //On Click
    $j("div[id*='spinner'] a").click(function (e) {
        e.preventDefault();

        //Use the radio-button's index to find out which image to show
        //NOTE: (THung) - We have multiple div tags with the same "header" id in HTML, make sure to specify which header we want in the code
        $active = $j("#theater > #header > a:nth-child(" + ($j("div[id*='spinner'] a").index(this) + 1) + ")");
        $activeRadio = $j(this);

        clearInterval(play) //clear timer
        rotate(); //Trigger rotation immediately
        rotateSwitch(); //restart timer
    });

    //Stop the theater animation when mouse hovers over the images and the overlays
    $j("#theater > #header img, #theater-overlay > div").hover(function () {
        clearInterval(play);
    }, function () {
        rotateSwitch();
    });
});

//Promo, News & Events
$j(function () {
    //background color use animate effect to switch color
    //Change background color on mouseover/mouseout
    $j("#promo > li > div.container, #news-events > div#news > div.container, #news-events > div#events > div.container").hover(function () {
        //Only stop the timer IF object is events
        if ($j(this).closest("div").parent().attr("id") == "events")
            clearInterval(eventTimer);
        else if ($j(this).closest("div").parent().attr("id") == "news")
            clearInterval(newsTimer);
        $j(".slider", this).stop().animate({ top: "-22px" }, { queue: false, duration: 300 });  //This only applies to the promo tags
        $j(this).stop().animate({ backgroundColor: "#fffff" }, 300);
    }, function () {
        //Only restart the timer IF object is events
        if ($j(this).closest("div").parent().attr("id") == "events")
            initializeEventTimer();
        else if ($j(this).closest("div").parent().attr("id") == "news")
            initializeNewsTimer();
        $j(".slider", this).stop().animate({ top: "0px" }, { queue: false, duration: 300 });  //This only applies to the promo tags
        $j(this).stop().animate({ backgroundColor: "#f3f3f3" }, 300);
    });

    $j("#news-events a.left-arrow, #news-events a.right-arrow").click(function (e) {
        e.preventDefault();

        var id = $j(this).closest("div").parent().attr("id");
        var counter = (id == "news" ? ($j(this).hasClass("right-arrow") ? (newsCtr + 1) : (newsCtr - 1)) : ($j(this).hasClass("right-arrow") ? (eventsCtr + 1) : (eventsCtr - 1)));
        //change the html content only
        rotateNewsEvent(id, counter);
    });

    rotateNewsEvent = function (id, counter) {
        var total = (id == "news" ? newsTicker.length : eventsTicker.length);
        counter = (counter >= total ? 0 : (counter < 0 ? total - 1 : counter));
        var ticker = (id == "news" ? newsTicker[counter] : eventsTicker[counter]);

        if ($j(ticker).attr("href") != "") {
            if ($j(ticker).attr("href").indexOf("http://") >= 0)
                $j("#" + id + " > div.container > a.content").attr("href", $j(ticker).attr("href")).attr("target", "_blank").attr("rel", "nofollow").find("p").removeClass("no-link");
            else
                $j("#" + id + " > div.container > a.content").attr("href", $j(ticker).attr("href")).removeAttr("target").removeAttr("rel").find("p").removeClass("no-link");
        }
        else
            $j("#" + id + " > div.container > a.content").removeAttr("href").removeAttr("target").removeAttr("rel").find("p").addClass("no-link");

        //if (id == "events") {
        $j("#" + id + " > div.container > a.content > p").fadeOut(250, function () {
            $j("#" + id + " > div.container > a.content > p").html($j(ticker).html()).fadeIn(250);
        });
        //}
        //else
        //    $j("#" + id + " > div.container > a.content > p").html($j(ticker).html());

        if (id == "news")
            newsCtr = counter;
        else if (id == "events")
            eventsCtr = counter;
    };

    //switch the event content event 5 seconds
    initializeEventTimer = function () {
        eventTimer = setInterval(function () {
            rotateNewsEvent("events", (eventsCtr + 1));
        }, 5000);
    };

    initializeNewsTimer = function () {
        newsTimer = setInterval(function () {
            rotateNewsEvent("news", (newsCtr + 1));
        }, 5000);
    };

    rotateNewsEvent("news", 0);     //Show the first news item
    rotateNewsEvent("events", 0);   //Show the first event item
    initializeEventTimer();         //Start the events timer
    initializeNewsTimer();          //Start the news timer
});