var myName = ["20", "1", "13", "13", "1", "13", "14", "9", "13", "1"];
var changeThis = 0;
var currentOffset = 0;
var delayBetweenLetters = 100;

setTimeout('nextImage();', 1000);

function nextImage(){
	if(currentOffset > myName[changeThis] * -30){
		/*Works with chrome/ff, not IE: document.getElementsByClassName('flippyImage')[changeThis].style.backgroundPosition = currentOffset + "px 0";*/
		/*must use getElementsByTagName('span'), ff doesnt support "all"*/
		document.getElementById('floatyDiv').getElementsByTagName('span')[changeThis].style.backgroundPosition = currentOffset + "px 0";
		currentOffset -= 30;
		setTimeout('nextImage();', delayBetweenLetters);
	} else if(changeThis < myName.length - 1) {
		changeThis++;
		currentOffset = 0;
		setTimeout('nextImage();', delayBetweenLetters);
	} else {
		setTimeout('disappear();', delayBetweenLetters * 3);
		setTimeout('reappear();' , delayBetweenLetters * 6);
		setTimeout('disappear();', delayBetweenLetters * 9);
		setTimeout('reappear();' , delayBetweenLetters * 12);
	}
}

function disappear(){
		for(var i = 0; i < myName.length; i++){
document.getElementsByClassName('flippyImage')[i].style.backgroundPosition = document.getElementsByClassName('flippyImage')[i].style.backgroundPosition.replace("0pt", "41px");
		}
}

function reappear(){
		for(var i = 0; i < myName.length; i++){
document.getElementsByClassName('flippyImage')[i].style.backgroundPosition = document.getElementsByClassName('flippyImage')[i].style.backgroundPosition.replace("41px", "0pt");
		}
}