var animTimeOut = 50;
var letterTimeOut = 40;
var spanWidth = 19.25;
var spanHeight = 16;
var spanMarginRight = 0;
var spanMarginBottom = 23;
var sequence = Array(0,  2, 1, 0, 2, 0);
var navObj = new Array();

function animate(el, index, stage)
{
	var posx = -index * (spanWidth + spanMarginRight) + "px";
	var posy = -sequence[stage] * (spanHeight + spanMarginBottom)+ "px";
	var position = posx + " " + posy;
	el.css('background-position', position);
	if((stage+1) < sequence.length){

		setTimeout( function(){animate(el, index, stage+1)}, animTimeOut );
	}
}


function flip(jqObjID)
{
	thisObj = navObj[jqObjID].jq
	
	navObj[jqObjID].count %= navObj[jqObjID].length;


	animate( thisObj.children().eq( navObj[jqObjID].count ),navObj[jqObjID].count,0);
	if(navObj[jqObjID].count != navObj[jqObjID].length-1)
	{
		setTimeout( function(){flip(jqObjID)}, letterTimeOut);
	}
	navObj[jqObjID].count++;
	
}

function splitTopNav()
{
	$("#nav > li > a").each(function(id)
	{
		text = $(this).text();
		// alert(text);
		newText = "";
		for(var i=0; i < text.length; i++)
		{
			// $(this).append(i);
			newText += '<span style="background-position:'+ (-i * (spanWidth + spanMarginRight))   +'px 0">' + text[i] + '</span>';
			navObj[id] = new Object();
		}
		$(this).empty().append(newText);
		navObj[id].length = text.length;
		navObj[id].count = 0;
		navObj[id].jq = $(this);
		$(this).hover(function(){

			flip(id) ;

		});
		
	});
	setTimeout (function(){showOff()}, 100);
}
function showOff()
{
	$("#nav > li > a ").each(function(i){
				setTimeout (function(){flip( [i] )}, i*200 );
	});
}

 $(document).ready(function(){
	splitTopNav();
 });