///<reference path="jquery-vsdoc.js" />

var slideIndex = 10;
var slideShowRun = 0;
var paused = false;

function nextSlide(run, delta) {
    if (run >= 0 && run != slideShowRun) {
        return;
    }

    var beingHidden = '#slide' + slideIndex;
    slideIndex = (slideIndex + delta + 11) % 11;
    var beingShown = '#slide' + slideIndex;

    preloadImage();

    var dim = $('#slideShowBackgroundDim');
    if (slideIndex == 0) {
        dim.addClass('Invisible');
    }
    else {
        dim.removeClass('Invisible');
    }

    var image = $('#slideImg' + slideIndex);

    if (slideIndex == 0) {
        $('#slideImg1').css('width', '266px');
        $('#slideImg1').css('height', '208px');
    }
    else if (slideIndex == 1) {
        image.animate({
            width: '300px',
            height: '235px'
        }, 1000);

        $('#slideImg2').css('width', '486px');
        $('#slideImg2').css('height', '355px');
    }
    else if (slideIndex == 2) {
        image.animate({
            width: '443px',
            height: '320px'
        }, 1000);

        $('#slideImg3').css('width', '348px');
        $('#slideImg3').css('height', '254px');
    }
    else if (slideIndex == 3) {
        $('#slideImg4').css('background-position', '-21px -45px');
        $('#slideImg5').css('background-position', '-404px -45px');

        image.animate({
            width: '324px',
            height: '236px'
        }, 1000);
    }
    else if (slideIndex == 4) {
        image.animate({
            backgroundPosition: '(-404px -45px)'
        }, 1700);
    }
    else if (slideIndex == 5) {
        image.animate({
            backgroundPosition: '(-21px -81px)'
        }, 1700);
    }
    else if (slideIndex == 6) {
        image.css('top', '75px');
        image.css('width', '524px');
        image.css('height', '324px');
        image.animate({
            top: '95px',
            width: '428px',
            height: '264px'
        }, 1000);

        $('#slideImg7').css('left', '265px');
        $('#slideImg7').width('202px');
        $('#slideImg7').height('54px');
    }
    else if (slideIndex == 7) {
        image.animate({
            width: '403px',
            height: '109px',
            left: '165px'
        }, 2000);

        $('#slideImg8').width('236px');
        $('#slideImg8').height('366px');
    }
    else if (slideIndex == 8) {
        image.animate({
            width: '216px',
            height: '335px'
        }, 1000);

        $('#slideImg9').width('385px');
        $('#slideImg9').height('355px');
    }
    else if (slideIndex == 9) {
        image.animate({
            width: '358px',
            height: '330px'
        }, 1000);

        $('#slideImg10').width('618px');
        $('#slideImg10').height('328px');
    }
    else if (slideIndex == 10) {
        image.animate({
            width: '566px',
            height: '298px'
        }, 1000);
    }

    $(beingShown).removeClass('Invisible');
    $(beingHidden).addClass('Invisible');

    if (run >= 0) {
        setTimeout('nextSlide(' + run + ', 1)', 5000);
    }
}

function preloadImage() {
    if (slideIndex != 3 && slideIndex != 4) {
        var nextSlideIndex = slideIndex + 1;
        var imagePath = '/images/Demo/slide' + nextSlideIndex + '.png';
        $('#slideImg' + nextSlideIndex).attr('src', imagePath);
        //$('#preloadImg').attr('src', imagePath);
    }   
    
    if (slideIndex == 2) {
        var bigScreenshot = "url('/images/demo/Slide4,5.png')";
        $('#slideImg4').css('background-image', bigScreenshot);
        $('#slideImg5').css('background-image', bigScreenshot);
        //$('#preloadImg').attr('src', bigScreenshot);
    }
}

function demoPause() {
    if (!paused) {
        paused = true;
        slideShowRun++;
        $('#PauseButton').removeClass('PauseButton');
        $('#PauseButton').addClass('PlayButton');
    }
}

function demoResume() {
    if (paused) {
        paused = false;
        setTimeout('nextSlide(' + (++slideShowRun) + ', 1)', 700);
        $('#PauseButton').removeClass('PlayButton');
        $('#PauseButton').addClass('PauseButton');
    }
}

function demoBack() {
    demoPause();
    nextSlide(-1, -1);
}

function demoNext() {
    demoPause();
    nextSlide(-1, +1);
}

function demoPauseResume() {
    if (paused) {
        demoResume();
    }
    else {
        demoPause();
    }
}

$(document).ready(function() {
    $('#BackButton').click(demoBack);
    $('#NextButton').click(demoNext);
    $('#PauseButton').click(demoPauseResume);
    
    nextSlide(0, 1);
});