//Define Global Variables
var currentSkyscraper = 1;                          //SET THE CURRENT SKYSCRAPER TO THE FIRST ONE
var maxSkyscraper = 5;                              //NOTE THAT THE MAX NUMBER OF SKYSCRAPERS IS 4
var skyscraperTimeout = 0;                          //DEFAULT THE TIMEOUT TO 0

//Function to set up the MyCrestron End User Skyscraper Rotator
$(document).ready(
    function intializeMyCrestronEndUserSkyscraperRotator() {
        initalizeSkyscraperControls();                      //SET UP THE SKYSCRAPER CONTROLS
        setTimeout('rotateSkyscraperControls();',5000);     //THEN START THE ROTATER
    }
);

//Function to Setup the Controls
function initalizeSkyscraperControls() {
        $(".imgSkyscraperOn").hide();                           //HIDE ALL OF THE ON CONTROLS
        $(".imgSkyscraperOff").show();                          //SHOW ALL OF THE OFF CONTROLS
        $("#imgSkyscraper1Off").hide();                         //HIDE THE OFF CONTROL FOR THE FIRST SKYSCRAPER
        $("#imgSkyscraper1On").show();                          //SHOW THE ON CONTROL FOR THE FIRST SKYSCRAPER
        $("#divMyCrestronEndUserSkyscraperControls").show();    //MAKE THE CONTROLS VISIBLE
        //Add a hover event to the list controls
        $(".liMyCrestronEndUserSkyscraperControl").hover(
            //hover over
            function() {
                $(this).find(".imgSkyscraperOn").toggle();      //TOGGLE THE ON BUTTON FROM VISIBLE TO HIDDEN OR HIDDEN TO VISIBLE
                $(this).find(".imgSkyscraperOff").toggle();     //TOGGLE THE OFF BUTTON FROM VISIBLE TO HIDDEN OR HIDDEN TO VISIBLE
            },
            //hover out
            function() {
                $(this).find(".imgSkyscraperOn").toggle();      //TOGGLE THE ON BUTTON FROM VISIBLE TO HIDDEN OR HIDDEN TO VISIBLE
                $(this).find(".imgSkyscraperOff").toggle();     //TOGGLE THE OFF BUTTON FROM VISIBLE TO HIDDEN OR HIDDEN TO VISIBLE
            } 
        );
        //Add a click event to the off buttons
        $(".linkSkyscraperNavigation").click(
            function() {
                var skyscraperId = $(this).attr("id");                                  //GET THE ID OF THE OFF BUTTON PRESSED
                skyscraperId = skyscraperId.replace("linkSkyscraperNavigation","");     //REMOVE THE GENERIC PORTION OF THE ID
                //$(".imgSkyscraperOn").hide();                   //ENSURE ALL OTHER ON BUTTONS ARE HIDDEN
                //$(this).children(".imgSkyscraperOff").hide();   //HIDE THIS OFF BUTTON
                //$(this).children(".imgSkyscraperOn").show();    //SHOW THE RELATED ON BUTTON
                var intSkyscraper = skyscraperId.valueOf();                 //CONVERT THE ID TO AN INTEGER
                currentSkyscraper = intSkyscraper;                          //SET THE GLOBAL CURRENT SKYSCRAPER VARIABLE TO THE CURRENT SKYSCRAPER
                jumpToSkyscraper(currentSkyscraper);                        //CHANGE THE SHOWN SKYSCRAPER TO THE NEW SKYSCRAPER
                clearTimeout(skyscraperTimeout);
                return false;
            }
        );        
}

//Function to Rotate the Skyscrapers
function rotateSkyscraperControls() {
    showNextSkyscraper();                                                   //SHOW THE NEXT SKYSCRAPER
    skyscraperTimeout = setTimeout('rotateSkyscraperControls();',5000);     //ROTATE THE SKYSCRAPER AGAIN IN 5000 MILISECONDS
}

//Function to Show the Next Skyscraper
function showNextSkyscraper() {
    if (currentSkyscraper < maxSkyscraper) {currentSkyscraper++;}       //IF WE ARE NOT AT THE LAST SKYSCRAPER MAKE THE CURRENT SKYSCRAPER THE NEXT SKYSCRAPER
    else {currentSkyscraper = 1;}                                       //OTHERWISE MAKE THE CURRENT SKYSCRAPER THE FIRST SKYSCRAPER
    changeSkyscraper(currentSkyscraper);                                //CHANGE THE SHOWN SKYSCRAPER TO THE NEW SKYSCRAPER
    clearTimeout(skyscraperTimeout);                                    //CLEAR THE TIMEOUT FOR THE PARENT TIMER
    $("#imgSkyscraper" + String(currentSkyscraper) + "Off").hide();     //HIDE THE OFF STATE FOR THE DESIRED SKYSCRAPER
    $("#imgSkyscraper" + String(currentSkyscraper) + "On").show();      //SHOW THE ON STATE FOR THE DESIRED SKYSCRAPER
}

//Function to Change the Skyscraper
function changeSkyscraper(desiredSkyscraper) {
    var prevSkyscraper;
    if (desiredSkyscraper == 1) {prevSkyscraper = maxSkyscraper;}       //IF WE ARE ON THE FIRST SKYSCRAPER THEN THE PREVIOUS SKYSCRAPER WAS THE LAST SKYSCRAPER
    else {prevSkyscraper = desiredSkyscraper - 1;}                      //OTHERWISE THE PREVIOUS SKYSCRAPER IS THE PREVIOUS SKYSCRAPER
    if (desiredSkyscraper != 1)
    {
        $("#divMyCrestronEndUserSkyscraperContent").animate({marginLeft : "-=225px"}, 500);
    }
    else
    {
        $("#divMyCrestronEndUserSkyscraperContent").animate({marginLeft : "0px"}, 100);
    }
    //$("#imgSkyscraper" + String(prevSkyscraper) + "On").hide();         //HIDE THE ON STATE FOR THE PREVIOUS SKYSCRAPER
    //$("#imgSkyscraper" + String(prevSkyscraper) + "Off").show();        //SHOW THE OFF STATE FOR THE PREVIOUS SKYSCRAPER
    //$("#imgSkyscraper" + String(desiredSkyscraper) + "Off").hide();     //HIDE THE OFF STATE FOR THE DESIRED SKYSCRAPER
    $(".imgSkyscraperOn").hide();                                       //HIDE THE ON STATE FOR ALL SKYSCRAPERS
    $(".imgSkyscraperOff").show();                                      //SHOW THE OFF STATE FOR ALL SKYSCRAPERS
    $("#imgSkyscraper" + String(desiredSkyscraper) + "Off").hide();     //HIDE THE OFF STATE FOR THE DESIRED SKYSCRAPER
    $("#imgSkyscraper" + String(desiredSkyscraper) + "On").show();      //SHOW THE ON STATE FOR THE DESIRED SKYSCRAPER
} 

//Function to Jump to a Specific Skyscraper
function jumpToSkyscraper(desiredSkyscraper)
{
    var marginLeftPos = (desiredSkyscraper - 1) * 225;
    if (marginLeftPos > 0) 
    {
        $("#divMyCrestronEndUserSkyscraperContent").animate({marginLeft : "-" + marginLeftPos + "px"}, 100);
    }
    else
    {
        $("#divMyCrestronEndUserSkyscraperContent").animate({marginLeft : "0px"}, 100);
    }
    $(".imgSkyscraperOn").hide();                                       //HIDE THE ON STATE FOR ALL SKYSCRAPERS
    $(".imgSkyscraperOff").show();                                      //SHOW THE OFF STATE FOR ALL SKYSCRAPERS
    skyscraperTimeout = setTimeout('rotateSkyscraperControls();',5000);    
}