var currImageID = 1;
var changeDirection = 1;
var shownDiv = 1;
var shown = 1;
var hidden = 2;

$(document).ready( function() {
	setTimeout ( "startImageFlip()", 1000 );
});

function startImageFlip()
{
	var startedAt = new Date();
	
	if(shownDiv == 2)
	{
		shown = 2;
		hidden = 1;
	}
	else
	{
		shown = 1;
		hidden = 2;
	}
	
	//Put the hidden on top:
	$("#gag_div_" + hidden).css("display", "none");
	$("#gag_div_" + hidden).css("z-index", "2");
	$("#gag_div_" + shown).css("z-index", "1");
	
	//Now set its image
	currImageID = currImageID + changeDirection;
	if(currImageID == 21)
	{
		currImageID = 19
		changeDirection = -1;
	}
	else if(currImageID == 0)
	{
		currImageID = 2
		changeDirection = 1;
	}
	
	var img = new Image();

		$(img)
		// once the image has loaded, execute this code
		.load(function () {
				var timeDiff = (new Date()) - startedAt;
				$("#gag_div_" + hidden).empty();
				$("#gag_div_" + hidden).append(this);
				fadeInImage();
		})
		
		.attr('src', "./images/gag/" + currImageID + ".jpg");;	
	
	//$("#gag" + hidden).attr("src", "./images/gag/" + currImageID + ".jpg");
	
	
	
}

function fadeInImage()
{
	$("#gag_div_" + hidden).fadeIn("slow", function() {
			if(shownDiv == 1)
				shownDiv = 2;
			else
				shownDiv = 1;
			
		setTimeout ( "startImageFlip()", 250 );//start the next one
	});
	
}