//Define Global Variables

var currentSkyscraper = 1;                          //SET THE CURRENT SKYSCRAPER TO THE FIRST ONE

var maxSkyscraper = 4;                              //NOTE THAT THE MAX NUMBER OF SKYSCRAPERS IS 4

var skyscraperTimeout = 0;                          //DEFAULT THE TIMEOUT TO 0

var ssfocus = true; 

//Function to set up the MyCrestron End User Skyscraper Rotator

$(document).ready(

    function intializeSkyscraperRotator() {

        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

        $("#divSkyscraperControls").show();    //MAKE THE CONTROLS VISIBLE

        //Add a hover event to the list controls

        $(".liSkyscraperControl").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() {

	window.onblur = function() { ssfocus = false; }
	window.onfocus = function() { ssfocus = true; }
	document.onblur = window.onblur;
	document.focus = window.focus;
	
	if(ssfocus ) {
    showNextSkyscraper();                                                   //SHOW THE NEXT SKYSCRAPER 
skyscraperTimeout = setTimeout('rotateSkyscraperControls();',5000);     
}
}


//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)

    {

        $("#divSkyscraperContent").animate({marginLeft : "-=324px"}, 500);

    }

    else

    {

        $("#divSkyscraperContent").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) * 324;

    if (marginLeftPos > 0) 

    {

        $("#divSkyscraperContent").animate({marginLeft : "-" + marginLeftPos + "px"}, 100);

    }

    else

    {

        $("#divSkyscraperContent").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);    

}