var curFrame = 1;
var totalFrames;
var rate = 100;
var playing = true;

document.observe("dom:loaded", function() {
	// Get total frames.
	totalFrames = parseInt($("imagecount").innerHTML);
	
	// Load images.
	load(1);
	/*
	var image = document.createElement("img");
	$("animationimage").appendChild(image);
	goToFrame(1);
	*/
	
	$("forward").observe("click", forward);
	$("back").observe("click", back);
	$("jumpgo").observe("click", jump);
	$("gostop").observe("click", gostop);
	$("rate").observe("change", setRate);
});

// Load images.
function load(imageNumber) {
	var image = numToString(imageNumber);
	new Ajax.request("earthquake/" + image + ".gif", {
		onSuccess: function() {
			magic;
		}
	});
}

// Play/Pause button clicked.
function gostop() {
	
}

// Start animation.
function start() {
	
}

// Set a new animation rate.
function setRate() {
	var newRate = parseInt($("rate").value);
	if (newRate >= 10 && newRate <= 5000) {
		rate = newRate;
	}
}

// Go forward one frame.
function forward() {
	if (curFrame < totalFrames) {
		goToFrame(curFrame + 1);
	}
}

// Go back one frame.
function back() {
	if (curFrame > 1) {
		goToFrame(curFrame - 1);
	}
}

// Jump to frame.
function jump() {
	var frame = parseInt($("jump").value);
	if (frame >= 1 && frame <= totalFrames) {
		goToFrame(frame);
	} else {
		alert("Invalid frame!");
	}
}

// Go to specified frame.
function goToFrame(frame) {
	frame = parseInt(frame);
	if (frame <= totalFrames && frame >= 1) {
		if (frame == 1) {
			$("back").disabled = true;
			$("forward").disabled = false;
		} else if (frame == totalFrames) {
			$("back").disabled = false;
			$("forward").disabled = true;
		} else {
			$("back").disabled = false;
			$("forward").disabled = false;
		}
		
		var newImageString = "" + frame;
		zeros = 4 - newImageString.length;
		var newImage = "";
		for (var i = 0; i < zeros; i++) {
			newImage += "0";
		}
		newImage += frame;
		$("animationimage").getElementsByTagName("img")[0].src = "earthquake/" + newImage + ".gif";
		curFrame = frame;
		
		$("framenumber").innerHTML = frame;
	}
}

// Convert a less than 4 digit number to a 4 character string lead by zeros.
function numToString(num) {
	var numString = "" + num;
	zeros = 4 - numString.length;
	var newNum = "";
	for (var i = 0; i < zeros; i++) {
		newNum += "0";
	}
	newNum += num;
	return newNum;
}