var nMessages = 5;
var index = 0;
var fgScreenshot;
var bgScreenshot;
var fgText;
var bgText;
var delay = 4500;
var speed = 1000;

// Init when page has finished loading
$(document).ready(function() {
// Create an image the screenshot, with the exact same style and position
	fgScreenshot = $("#screenshot");
	fgScreenshot.after($("<img id='bgscreenshot' class='screenshot'/>"));
	bgScreenshot = $("#bgscreenshot");
	// put it behind and make it transparent
	bgScreenshot.css({ "z-index": 0, "opacity": 0.0});

	// And start the animation
	window.setTimeout(swap, delay);

});

function swap() {
	// Move to next image/text
    index = ((index) % (nMessages)) +1 ;
    var nextIndex = ((index) % nMessages + 1);
    // Set the background image to the next image
    bgScreenshot.attr("src", "/resources/img/index/anime/screenshot_0" + nextIndex + "_" + lang +".png");
    // and make it progressively opaque
    bgScreenshot.animate({"opacity": 1.0}, speed);
    
    // Simultaneously, make the foreground image progressively transparent
    fgScreenshot.animate({"opacity": 0.0}, speed, function() {
	    // When finished, swap foreground and background variables,
	    // preparing for the next animation
	    var temp = fgScreenshot;
	    fgScreenshot = bgScreenshot;
	    bgScreenshot = temp;
	
	    // and trigger the next animation
	    window.setTimeout(swap, delay);
    });
    fgScreenshot.css({"display": "block"});

    // Same for the text
    fgText = $("#message_" + index );
    bgText = $("#message_" + nextIndex);
    bgText.animate({"opacity": 1.0}, speed);
    fgText.animate({"opacity": 0.0}, speed, function() {
	    var temp = fgText;
	    fgText = bgText;
	    bgText = temp;
    });
    bgText.css({"display": "block"});
}