var splashTimeOut = 3000; // 5000ms = 5 seconds

var splashPage = 0;
var splashPageIcon;
var splashPages = 0;
var splashTimer = null;
var selSquare = $(document.createElement("div")).attr("id", "splash_select_square");

function initSplash (splashItems) {
	var splash = $("#splash");
	
	for (var i in splashItems) {
		var newEle = $(document.createElement("span")).css("background-color", "#ffb000").data("splash", splashItems[splashPages++]).data("page", i);
		$("#splash_menu").append(newEle);
		newEle.mouseover(function (event) {
			splashPageIcon = $(event.target);
			$("#splash_content").html(splashPageIcon.data("splash"));
			splashPage = splashPageIcon.data("page");
			selSquare.stop().animate({'left': getIconLeftPos()}, 250); //animate
		});
	};

	// Set the first image
	splashPageIcon = $("#splash_menu span").first();
	$("#splash_content").html(splashPageIcon.data("splash"));

	// Create the selection square
	selSquare.css({'top': '-75px', 'left': getIconLeftPos()}).appendTo("#splash");

	// Set the timer
	setSplashTimer ();

	// Set mouseover timer stop
	splash.mouseover(function(event) {
		stopSplashTimer ();
	});

	// Set mouseover timer start
	splash.mouseout(function(event) {
		setSplashTimer ();
	});
}

function setSplashTimer () {
	splashTimer = setTimeout ('changeSplashPage()', splashTimeOut); }

function stopSplashTimer () {
	if (splashTimer != null) {
		clearTimeout(splashTimer);
	}
}

function changeSplashPage () {
	if (++splashPage == splashPages) {
		splashPage = 0;
		splashPageIcon = $("#splash_menu span").first();
		$("#splash_content").html(splashPageIcon.data("splash"));
	} else {
		splashPageIcon = splashPageIcon.next();
		$("#splash_content").html(splashPageIcon.data("splash"));
	}
	selSquare.stop().animate({'left': getIconLeftPos()}, 250); //animate
	setSplashTimer();
}

function getIconLeftPos () {
	return splashPageIcon.position().left;
}