var fadeTime = 1000;
var animateTime = 3500;
var slideTime = 5000;
var slideAnimateTime = 4000;
var waitTime = 2000;
var offsetTime = 100;

var ssImgs = new Array();
ssImgs[0] = "/cpl/SiteBase/wrap/theme0/images/slideshow/slideshow_00.jpg";
ssImgs[1] = "/cpl/SiteBase/wrap/theme0/images/slideshow/slideshow_01.jpg";
ssImgs[2] = "/cpl/SiteBase/wrap/theme0/images/slideshow/slideshow_02.jpg";
ssImgs[3] = "/cpl/SiteBase/wrap/theme0/images/slideshow/slideshow_03.jpg";
ssImgs[4] = "/cpl/SiteBase/wrap/theme0/images/slideshow/slideshow_04.jpg";
ssImgs[5] = "/cpl/SiteBase/wrap/theme0/images/slideshow/slideshow_05.jpg";

var emptyImg = "/cpl/SiteBase/wrap/theme0/images/slideshow/empty.gif";
//var sbrCookie = false;
//if (getCookie('isSBR')) sbrCookie = true;
//HttpCookie sbrCookie = Request.Cookies["isSBR"];
//if (sbrCookie != null)

$(document).ready(function() {
    loadImages();
    if (sbrCookie) $("#phoneImg").attr("src", emptyImg);
    slideshow();
});

// Loads the images onto the page
function loadImages() {
    for (num in ssImgs) {
        $("#imageCacheDiv").append("<img src='" + ssImgs[num] + "' />");
    }
    $("#pleaseWait").css("display", "none");
}

// The Events of the Slideshow
function slideshow() {

    ///////////////////////////////////////////////////////////////////////////////////
    // Transition to Slide 1
    ///////////////////////////////////////////////////////////////////////////////////
    setTimeout(function() {
        $("#mainImage").fadeIn(fadeTime);
        $("#phoneImg").fadeIn(fadeTime);
        $("#borderImg01").fadeIn(fadeTime);
    }, offsetTime);

    // Animation - Show Text
    offsetTime += fadeTime + 500;
    setTimeout(function() {
        $("#contentImg01").fadeIn(fadeTime);
    }, offsetTime);

    // Animation - Pans Image
    offsetTime += slideAnimateTime;
    setTimeout(function() {
        $("#mainImage").animate({ right: 0, top: -50, width: 760 }, animateTime);
        $("#contentImg01").fadeOut(fadeTime);
        //$("#phoneImg").fadeIn(animateTime);
    }, offsetTime);


    ///////////////////////////////////////////////////////////////////////////////////
    // Transition to Slide 2
    ///////////////////////////////////////////////////////////////////////////////////
    offsetTime += slideTime;
    setTimeout(function() {
        var cssObj = { 'width': '760px', 'top': '-375px' };
        $("#phoneImg").fadeOut(fadeTime);
        $("#borderImg01").fadeOut(fadeTime);
        slideTransition(1, cssObj);
    }, offsetTime);

    // Animation - Pan Images
    offsetTime += slideAnimateTime;
    setTimeout(function() {
        $("#mainImage").animate({ left: 451, top: 0, width: 308 }, animateTime);
        $("#subImg01").css('display', 'block');
        $("#subImg01").animate({ left: 1 }, animateTime);
    }, offsetTime);

    // Animation - Show Text
    offsetTime += slideAnimateTime;
    setTimeout(function() {
        $("#contentImg02").fadeIn(fadeTime);
    }, offsetTime);

    offsetTime += fadeTime;
    setTimeout(function() {
        $("#contentImg03").fadeIn(fadeTime);
    }, offsetTime);

    offsetTime += fadeTime;
    setTimeout(function() {
        $("#contentImg04").fadeIn(fadeTime);
        $("#contentImg05").fadeIn(fadeTime);
        $("#contentImg05").animate({ top: 90 }, fadeTime);
    }, offsetTime);

    offsetTime += fadeTime;
    setTimeout(function() {
        $("#contentImg06").fadeIn(fadeTime);
    }, offsetTime);


    ///////////////////////////////////////////////////////////////////////////////////
    // Transition to Slide 3
    ///////////////////////////////////////////////////////////////////////////////////
    offsetTime += slideTime;
    setTimeout(function() {
        var cssObj = { 'width': '760px', 'left': '0px', 'top': '0px' };
        $("#subImg01").fadeOut(fadeTime);
        $("#contentImg02").fadeOut(fadeTime);
        $("#contentImg03").fadeOut(fadeTime);
        $("#contentImg04").fadeOut(fadeTime);
        $("#contentImg05").fadeOut(fadeTime);
        $("#contentImg06").fadeOut(fadeTime);
        slideTransition(2, cssObj);
    }, offsetTime);

    // Animation - Pans Image
    offsetTime += waitTime;
    setTimeout(function() {
        $("#mainImage").animate({ top: -460 }, animateTime);
    }, offsetTime);

    // Animation - Show Text
    offsetTime += slideAnimateTime;
    setTimeout(function() {
        $("#borderImg02").fadeIn(fadeTime);
        $("#contentImg07").fadeIn(fadeTime);
    }, offsetTime);


    ///////////////////////////////////////////////////////////////////////////////////
    // Transition to Slide 4
    ///////////////////////////////////////////////////////////////////////////////////
    offsetTime += slideTime;
    setTimeout(function() {
        var cssObj = { 'width': '1175px', 'left': '0px', 'top': '-25px' };
        $("#borderImg02").fadeOut(fadeTime);
        $("#contentImg07").fadeOut(fadeTime);
        slideTransition(3, cssObj);
    }, offsetTime);

    // Animation - Pans Image
    offsetTime += waitTime;
    setTimeout(function() {
        $("#mainImage").animate({ top: -90, width: 760 }, animateTime);
    }, offsetTime);

    // Animation - Show Text
    offsetTime += slideAnimateTime;
    setTimeout(function() {
        $("#borderImg02").fadeIn(fadeTime);
        $("#contentImg08").fadeIn(fadeTime);
    }, offsetTime);


    ///////////////////////////////////////////////////////////////////////////////////
    // Transition to Slide 5
    ///////////////////////////////////////////////////////////////////////////////////
    offsetTime += slideTime;
    setTimeout(function() {
        var cssObj = { 'width': '760px', 'left': '0px', 'top': '-194px' };
        $("#borderImg02").fadeOut(fadeTime);
        $("#contentImg08").fadeOut(fadeTime);
        slideTransition(4, cssObj);
    }, offsetTime);

    // Animation - Pans Image
    offsetTime += waitTime;
    setTimeout(function() {
        $("#mainImage").animate({ top: 0 }, animateTime);
    }, offsetTime);


    ///////////////////////////////////////////////////////////////////////////////////
    // Transition to Slide 6
    ///////////////////////////////////////////////////////////////////////////////////
    offsetTime += slideTime;
    setTimeout(function() {
        var cssObj = { 'width': '760px', 'left': '0px', 'top': '0px' };
        slideTransition(5, cssObj);
    }, offsetTime);

    // Animation - Pans Image
    offsetTime += waitTime;
    setTimeout(function() {
        $("#mainImage").animate({ top: -194 }, animateTime);
    }, offsetTime);


    ///////////////////////////////////////////////////////////////////////////////////
    // Transition to Slide 1
    ///////////////////////////////////////////////////////////////////////////////////
    offsetTime += slideTime;
    setTimeout(function() {
        var cssObj = { 'width': '760px', 'left': '0px', 'top': '-50px' };
        slideTransition(0, cssObj);
    }, offsetTime);

    offsetTime += fadeTime;
    setTimeout(function() {
        $("#borderImg01").fadeIn(fadeTime);
        $("#phoneImg").fadeIn(fadeTime);
    }, offsetTime);

    offsetTime += fadeTime;
    setTimeout(function() {
        $("#contentImg09").fadeIn(fadeTime);
    }, offsetTime);
}

// Fades out the current image and fades in the new
function slideTransition(newImageIndex, cssObj) {
    $("#mainImage").queue(function() {
        $(this).fadeOut(fadeTime);
        $(this).dequeue();
    });
    $("#mainImage").queue(function() {
        $(this).attr("src", ssImgs[newImageIndex]);
        $(this).dequeue();
    });
    $("#mainImage").queue(function() {
        $(this).css(cssObj);
        $(this).dequeue();
    });
    $("#mainImage").queue(function() {
        $(this).fadeIn(fadeTime);
        $(this).dequeue();
    });
}