var promos;
// new slide timeout duration (ms)
var promosTimeoutDuration = 10000;
var promosSlideSpeed = 600;

// initial promo ID
var promoID = 1;

var newSlideImg;
var promosTimeout;
var visitedPromos = [];
var imgUrls = [];

$(function(){
    //initPromos();
});

function initPromos(){
    $("#promos").append("<div id='newSlide' style='position:absolute;z-index:1;width:622px;height:276px;top:0px;left:0px'></div>");
    $("#newSlide").append("<img id='loader' src='/images/loading.gif' style='position:absolute'/>");
    $("#loader").load(centre);
    if(preloadPromos())
    {
    $("#newSlide").remove();
    $("#loader").remove();
    setNavLayer();
    setInitialPromo();
    setPromosTimeout();     
    }
}

    
    
function preloadPromos(){
    var data = [];
    for(var i = 0, len = promos.length; i < len; i++){
        data[i] = promos[i].html;           
    }
    
    for(var i = 0, len = data.length; i < len; i++){
        $(data[i]).find('img').each(function(i){
        imgUrls[i] = $('<img>').attr('src',$(this).attr('src'));        
        var img = new Image();
        img.src = imgUrls[i];

        }); 
        $(data[i]).find('input').each(function(i){  
        imgUrls[i] = $(this).attr('value');
        var img1 = new Image();
        img1.src = imgUrls[i];
        });         
    }
    return true;
}


function setNavLayer(){
        $("#promos").append("<div id='promosNav'></div>");
        $("#promosNav").append("<div id='promo" + i + "nav' class='promos-slidelinks'></div>");
        var navBtn = $("#promo" + i + "nav");
        $(navBtn).append("<img id='control' src='/images/pause.png' alt='pause'/>");
        $("#control").hover(controlBtnRollover, controlBtnRollout).click(controlBtnClick);      
        for(var i=1; i<= promos.length;i++){
        $(navBtn).append("<a id='promo" + i + "navBtn' href='#'>"+i+"</a>");
        $("#promo" + i + "navBtn").hover(navBtnRollover, navBtnRollout).click(navBtnClick);
    }   
    $(".promosNavOvr").hide();
}

function centre(){
    $(this).css("left", Math.floor(($(this).parent().width() - $(this).width())/2) + "px").css("top", Math.floor(($(this).parent().height() - $(this).height())/2) + "px"); 
}

function setInitialPromo(){
    setCurrentPromo();
    selectNavBtn();
}

function selectNavBtn(){
    for(var i = promos.length; i > 0; i--){
        if(i == promoID){
            $("#promo" + i + "navBtn").toggleClass("promos-active");
        }
        else
        {
        $("#promo" + i + "navBtn").removeClass("promos-active");
        }
    }   
}

function navBtnRollover(){
    var id = parseInt($(this).attr("id").substr(5));    
        $(this).css("cursor", "pointer");
    
}

function navBtnRollout(){
    var id = parseInt($(this).attr("id").substr(5));    
    $(this).css("cursor", "auto");
    
}

function navBtnClick(){
    var id = parseInt($(this).attr("id").substr(5));
    setPromo(id);
}

function controlBtnRollover(){
    $(this).css("cursor", "pointer");
    //$(this).css("background-color", "#ffffff");
    //$(this).css("color", "#7a6a5d");
    
}

function controlBtnRollout(){
    $(this).css("cursor", "auto");
    //$(this).css("background-color", "#7a6a5d");
    //$(this).css("color", "#ffffff");
    
}

function controlBtnClick(){
    if($(this).attr("src") == "/images/pause.png")
    {
    $(this).attr("src","/images/play.png")
    window.clearTimeout(promosTimeout); 
    }
    else
    {
    $(this).attr("src","/images/pause.png")
    setPromosTimeout(); 
    }
}

function setPromo(id){
    clearPromosTimeout();
    promoID = id;
    selectNavBtn();
    if($("#newSlide").length > 0) $("#newSlide").remove();
    $("#promos").append("<div id='newSlide' style='position:absolute;z-index:1;width:960px;height:360px;top:0px;left:0px'></div>");
    $("#newSlide").append("<img id='loader' src='/images/loading.gif' style='position:absolute'/>");
    $("#loader").load(centre);
    $("#newSlide").append("<div id='newSlideContent'></div>");
    if (visitedPromos.join().indexOf(String(promoID)) < 0){
        $("#newSlideContent").html(promos[promoID - 1].html);
        $("#loader").remove();
        $("#newSlide").hide()
        $("#newSlide").fadeIn(promosSlideSpeed);
    } else {
        slide();
    }
    setPromosTimeout();
}

function slide(){

    if(visitedPromos.join().indexOf(String(promoID)) < 0) visitedPromos.push(promoID);
    $("#loader").remove();  
    $("#newSlide").append("<div id='newSlideContent'></div>");
    $("#newSlideContent").html(promos[promoID - 1].html);
    $("#newSlide").css("left", "960px").animate({left: 0}, "slow", "swing", bakeNewSlide);
    $("#newSlide").hide().fadeIn(promosSlideSpeed);
}

function bakeNewSlide(){
    setCurrentPromo();
    $("#newSlide").remove();
}

function setCurrentPromo(){
    if($("#newSlide").length > 0) $("#newSlide").remove();
    $("#promos").append("<div id='newSlide' style='position:absolute;z-index:1;width:622px;height:276px;top:0px;left:0px'></div>");
    //$("#newSlide").append("<img id='loader' src='img/loader.gif' style='position:absolute'/>");
    $("#loader").load(centre);
    $("#newSlide").append("<div id='newSlideContent'></div>");
    $("#newSlideContent").html(promos[0].html);
    $("#newSlide").hide().fadeIn(promosSlideSpeed);
}

function setPromosTimeout(){
    promosTimeout = window.setTimeout(nextSlide, promosTimeoutDuration);
    $(window).unload(clearPromosTimeout);
}

function clearPromosTimeout(){
    window.clearTimeout(promosTimeout);
}

function nextSlide(){
    if(++promoID > promos.length) promoID = 1;
    setPromo(promoID);
}