// Number of Screens. Welcome screen is separte from this. So total
// images will be NoOfImages + 1
var NoOfImages = 5;

// Time for which one screen should be displayed 
// First element is for Welcome screen and subsicuent for images
var TimePerScreen = new Array(30000, 30000, 30000, 30000, 30000, 30000);

// Time for playing animation for the transition
// This will be get doubled i.e Fade out and Fade in for next image
var TimeToFade = 2000.0;

// variable to hold if we are in trasition state
var InAnimation = false;

// id of current displaying screen
var id = 0; ;

// Function Start
// Starting point for tutorials
function Start() {
    window.setTimeout("Rotate()", TimePerScreen[0]);
}

// Function Rotate
// Keep rotating screens in ascending order
// Note this will not repeat the welcome screen for which id is 0
function Rotate() {
    var currImg = 'img' + (id);
    
    if (!InAnimation) {
        InAnimation = true;
        Fade(currImg);
    }
    else {
        // Hide the current DIV and show the next DIV
        var currDiv = 'div' + (id);
        
        var nextId = id + 1;
        if (nextId > NoOfImages) {
            nextId = 1;
        }
        var nextDiv = 'div' + (nextId);
        var nextImg = 'img' + (nextId);
        
        document.getElementById(currDiv).style.display = "none";
        document.getElementById(nextDiv).style.display = "block";
        Fade(nextImg);
    }
}

// Function Fade
// Parameter Element to Fade
// Start Fade in or Fade out depending upon the FadeState of element 
function Fade(elementId) {
    var element = document.getElementById(elementId);

    // element.FadeState = 1 to start displaying image
    // element.FadeState = -1 to start dimming image
    
    if (element.FadeState == null) {
        if (element.style.opacity == null
        || element.style.opacity == ''
        || element.style.opacity == '1') {
            element.FadeState = -1;
        }
        else {
            element.FadeState = 1;
        }
    }

    element.FadeTimeLeft = TimeToFade;
    setTimeout("AnimateFade(" + new Date().getTime() + ",'" + elementId + "')", 100);

}

// Function AnimateFade
// Start Animation for transition
function AnimateFade(lastTick, elementId) {

    var curTick = new Date().getTime();
    var elapsedTicks = curTick - lastTick;
    var element = document.getElementById(elementId);

    if (element.FadeTimeLeft <= elapsedTicks) {

        element.style.opacity = element.FadeState == 1 ? 1 : 0;
        element.style.filter = 'alpha(opacity = ' + (element.FadeState == 1 ? '100' : '0') + ')';

        if (element.FadeState == -1) {
            // Current image is fade out completly, 
            // Call Rotate function to display the next image  
            setTimeout('Rotate()', 50);
        }
        else {
            InAnimation = false;
            id = id + 1;
            if (id > NoOfImages) id = 1;
            
            // Set timeout for next screen
            setTimeout("Rotate()", TimePerScreen[id]);
        }
        element.FadeState = -element.FadeState;
        return;
    }

    element.FadeTimeLeft -= elapsedTicks;
    var newOpVal = element.FadeTimeLeft / TimeToFade;
    if (element.FadeState == 1)
        newOpVal = 1 - newOpVal;

    element.style.opacity = newOpVal;
    element.style.filter = 'alpha(opacity = ' + (newOpVal * 100) + ')';

    setTimeout("AnimateFade(" + curTick + ",'" + elementId + "')", 100);
}