var intervalId;
var timeoutId;

//This method should be used on first body load
function StartBanners(bannerGroupId)
{
    intervalId = setInterval(function(){LoadNextBannerAuto(bannerGroupId)}, 5000);
}; 

function LoadNextBannerAuto (bannerGroupId) 
{
    LoadNext(false, bannerGroupId);
}

//This method never used in Osborne Richardson
function LoadPreviousBannerAuto (bannerGroupId) 
{
    LoadPrevious(false, bannerGroupId);
}

function LoadNextBanner (bannerGroupId) 
{
    LoadNext(true, bannerGroupId);
}

function LoadPreviousBanner (bannerGroupId) 
{
    LoadPrevious(true, bannerGroupId);
}

function LoadPrevious ( isManual, bannerGroupId ) {
    //assume only used on homepage for now
    LoadBanner ( 'Previous', bannerGroupId, isManual );
}

function LoadNext ( isManual, bannerGroupId ) {
    //assume only used on homepage for now
    LoadBanner ( 'Next', bannerGroupId, isManual );
}

function LoadBanner ( direction, bannerGroupId, isManual ) {
    
    if ( isManual ) 
    {
        //if it's a manual request, then CLEAR the interval because need to stop auto rotation
        clearInterval(intervalId);
        //also clear the timeout incase it has been set (below) on another call to this method ... 
        clearTimeout(timeoutId);
        //then set a new StartBanners for 5 seconds time (so that the banners will restart automatically if the user has stopped paging them)
        //this will actually mean the wait is 7 second - 2 to the setTimeout, another 5 to the first setInterval...
        timeoutId = setTimeout(StartBanners, 2000);
    }
    
    var div = $('BannerRotator').getElement('div[class=bannerPlaceHolder]');
    var myFx = new Fx.Tween(div, {duration: 800, wait: false, transition: Fx.Transitions.Circ.easeOut, fps: 50});
    myFx.start('opacity', 0);
    
    setTimeout(function(){GetAndProcessRequest(direction, bannerGroupId)}, 850);	
}

function getCurrentId () 
{
    var currentId = $("CurrentBannerId").getElement('input');
    return currentId.get('value');
}

function setCurrentId (value) 
{
    var currentId = $("CurrentBannerId").getElement('input');
    currentId.set('value', value);
}

function GetAndProcessRequest (direction, bannerGroupId)
{
    //This code will send a data object via a GET request and alert the retrieved data.
    var jsonRequest = new Request.JSON({url: "/Handlers/GetBanner.ashx", onComplete: function(banner){
    
        var div = $('BannerRotator').getElement('div[class=bannerPlaceHolder]');
        var myFx = new Fx.Tween(div, {duration: 1600, wait: false, transition: Fx.Transitions.Circ.easeIn, fps: 50});
        myFx.set('opacity', 0);
        div.setStyle('background-image', 'url(\'' + banner.MediaSrc + '\')');
        myFx.start('opacity', 1);
         
        //set the id in the hidden field so that next can be request for next time
        setCurrentId(banner.BannerId);
        
    }}).get({'BannerId': getCurrentId(), 'direction': direction, 'BannerGroupId': bannerGroupId});
}