/**************************************************/
/*             JS Animated Mouse-Over             */
/*                                                */
/*         Copyright (c) 2011 Leo Mylonas.        */
/*               All rights reserved.             */
/**************************************************/

images = 18; // number of images (frames) to be used in the animation

var currentimage = new Array(); // new blank array (will contain the current frame of animation for each nav link)
int = new Array(); // new black array (will contain animation intervals for each nav link)

// set starting frame for each nav link
currentimage[0] = 0;
currentimage[1] = 0;
currentimage[2] = 0;
currentimage[3] = 0;
currentimage[4] = 0;
currentimage[5] = 0;

// on nav link mouseover, the 'on' function is called
// arguments: [obj] is element animation is applied on
//            [button] the number of the navlink
function on(obj, button) {
	// if already animating, stop
	clearInterval(int[button]);
	// go to the first frame
	currentimage[button] = 0;
	// start the animation
	int[button] = setInterval(function(){over(obj,button);} ,30 );
}

// on nav link mouseout, the 'off' function is called
// arguments: [obj] is element animation is applied on
//            [button] the number of the navlink
function off(obj, button) {
	// if already animating, stop
	clearInterval(int[button]);
	// start the animation in reverse
	int[button] = setInterval(function(){out(obj, button);} ,30 );
}

// the 'over' function is called by the 'on' function
// arguments: [object] is element animation is applied on
//            [button] the number of the navlink
function over(object, button){
		// displays the current frame of the animation
		//alert("images/design/mouseover/"+currentimage[button]+".png");
		object.style.background = "url(images/design/mouseover/"+currentimage[button]+".png) no-repeat bottom";

		// if at end of animation
		if (currentimage[button] == images-1){
			// stop animation
			clearInterval(int[button]);
		}else{
			// otherwise, forward animation one frame
			currentimage[button]++;
		}
}

// the 'out' function is called by the 'off' function
// arguments: [object] is element animation is applied on
//            [button] the number of the navlink
function out(object, button){
		// displays the current frame of the animation
		object.style.background = "url(images/design/mouseover/"+currentimage[button]+".png) no-repeat bottom";
		
		// if at end of animation
		if (currentimage[button] == 0){
			// stop animation
			clearInterval(int[button]);
		}else{
			// otherwise reverse the animation one frame
			currentimage[button] -= 1;
		}
}

// the 'load' function is called when the webpage first loads
function load(){
	// set the initial frame of the animation for each nav link
	var objects = document.getElementById("nav").getElementsByTagName("td");
	for (i=0; i < objects.length; i++) {
		objects[i].style.background = "url(images/design/mouseover/0.png) no-repeat bottom";
	}
}