var numImages = 4;
var isFirstIteration = true;

function increasedCenterpieceImageNumber(src)
{
    return "screenshots/" + String((Number(/\d+/.exec(src)[0])) % numImages + 1) + ".png";;
}

function main()
{
    document.getElementById("centerpiece").parentNode.innerHTML += '<img class="centerpiece" style="opacity:0;" id="centerpiece2" src="screenshots/2.png">';
    
    window.setInterval(function() {
        /*
            ImageNumber - Opacity:
            
            Well1           Well2
            1 - 100%          2 0%
          ->  1 - 100%          2 100%
            2 - 100%          3 0%
          ->  2 - 100%          3 100%
            3 - 100%          1 0%
          ->  3 - 100%          1 100%
        */
        
        if (!isFirstIteration)
        {
            var well1 = document.getElementById("centerpiece");
            var well2 = document.getElementById("centerpiece2");

            //well1: 100%
            well1.style.opacity = 1;
            
            //well2: 0% -> 100%
            well2.style.opacity = 0;
			
			//well1: n -> n % numImages + 1
        	well1.src = increasedCenterpieceImageNumber(well1.src);	
			
			//well2: n -> n % numImages + 1
            well2.src = increasedCenterpieceImageNumber(well2.src);

        }
        
		var isFirst = isFirstIteration;
		
        $('#centerpiece2').animate({
            opacity: 1.0
        }, 1000, function() { });
        
		isFirstIteration = false;
        
    }, 5000);
}