// Copyright XLON Technologies 2005
// Button State Animation with CSS Clipping

/////////////////////////////////////////////////////////////////////////////////////
//////  To use this script a user will need the following:
//////  1) a link to this script included in her page
//////    ex. <script type="text/javascript" src="js/btnanim.js"><\/script> (remove the back slash from ending script tag)
//////  2) just before the ending body tag setup an array with 
//////      all of the id's of the buttons as values
//////  3) in this same script before the ending boy tag call BtnInit(array)
//////     and pass in the previously defined array
//////  4) buttons will need to be absolutely positioned (css clipping only
//////     works on absolutely positioned elements)
/////////////////////////////////////////////////////////////////////////////////////

// global variable to be used by functions to track the current button state
var prevBtnState;

function BtnChangeState(obj, clipLeft, clipRight, clipBottom, newPos)
// alter the clip area (apperance) of the button image and its position
{
	obj.style.clip = 'rect(0 '+ clipRight +' '+ clipBottom +' '+ clipLeft +')';
	obj.style.left = newPos;
	//window.status = obj.style.clip + ' :: ' + newPos;
	return false;
}

function BtnAnimOver(e)
// changes the look/state of the button when moused over
{
	var obj;
	if (!e) e = window.event;	// get event details for IE
	// get source of event
	if (e.srcElement)
		obj = e.srcElement;
	else if (e.target)
		obj = e.target;
	var clipLeft;
	var clipRight;
	var clipBottom = obj.height;
	var newPos;
	// determine current values of image
	var width = parseInt(obj.width,10)/3;
	var curPos = parseInt(obj.style.left,10);
	
	if (prevBtnState == 'down')
	{
		newPos = curPos + width;
	}
	else
	{
		newPos = curPos - width;
	}
	clipRight = 2 * width;
	clipLeft = width;
	prevBtnState = 'over';
	BtnChangeState(obj, clipLeft, clipRight, clipBottom, newPos);
}

function BtnAnimDown(e)
// changes the look/state of the button when mouse down
{
	var obj;
	if (!e) e = window.event;	// get event details for IE
	// get source of event
	if (e.srcElement)
		obj = e.srcElement;
	else if (e.target)
		obj = e.target;
	var clipLeft;
	var clipRight;
	var clipBottom = obj.height;
	var newPos;
	// determine current values of image
	var width = obj.width/3;
	var curPos = parseInt(obj.style.left,10);
	
	if (prevBtnState == 'up' || prevBtnState == 'out')
	{
		newPos = curPos - width * 2;
	}
	else
	{
		newPos = curPos - width;
	}
	
	clipRight = 3 * width;
	clipLeft = 2 * width;
	prevBtnState = 'down';
	BtnChangeState(obj, clipLeft, clipRight, clipBottom, newPos);
}

function BtnAnimUp(e)
// changes the look/state of the button on mouse up
{
	var obj;
	if (!e) e = window.event;	// get event details for IE
	// get source of event
	if (e.srcElement)
		obj = e.srcElement;
	else if (e.target)
		obj = e.target;
	var clipLeft;
	var clipRight;
	var clipBottom = obj.height;
	var newPos;
	// determine current values of image
	var width = obj.width/3;
	var curPos = parseInt(obj.style.left,10);
	
	// change in position will depend on previous state
	if (prevBtnState == 'over')
	{
		newPos = curPos + width;
	}
	else if (prevBtnState == 'up')
	{
		return false;
	}
	else
	{
		newPos = curPos + 2 * width;
	}
	clipRight = width;
	clipLeft = 0;
	prevBtnState = 'up';
	BtnChangeState(obj, clipLeft, clipRight, clipBottom, newPos);
}

function BtnAnimOut(e)
// changes the look/state of the button on mouse out
{
	var obj;
	if (!e) e = window.event;	// get event details for IE
	// get source of event
	if (e.srcElement)
		obj = e.srcElement;
	else if (e.target)
		obj = e.target;
	var clipLeft;
	var clipRight;
	var clipBottom = obj.height;
	var newPos;
	// determine current values of image
	var width = obj.width/3;
	var curPos = parseInt(obj.style.left,10);
	
	// change in position will depend on previous state
	if (prevBtnState == 'up')
	{
		prevBtnState = 'up';
		return;
	}
	else if (prevBtnState == 'over')
	{
		newPos = curPos + width;
	}
	else
	{
		newPos = curPos + 2 * width;
	}
	clipRight = width;
	clipLeft = 0;
	prevBtnState = 'out';
	BtnChangeState(obj, clipLeft, clipRight, clipBottom, newPos);
}

function BtnAnimInit(btnArray)
// attach button state events
{
	for (var i in btnArray)
	{
		var obj = document.getElementById(btnArray[i]);
		// decide which event model to use
		if (document.addEventListener)
		{
			obj.addEventListener('onmouseover', BtnAnimOver, false);
			obj.addEventListener('onmousedown', BtnAnimDown, false);
			obj.addEventListener('onmouseup', BtnAnimUp, false);
			obj.addEventListener('onmouseout', BtnAnimOut, false);
		}
		else if (document.attachEvent)
		{
			obj.attachEvent('onmouseover', BtnAnimOver);
			obj.attachEvent('onmousedown', BtnAnimDown);
			obj.attachEvent('onmouseup', BtnAnimUp);
			obj.attachEvent('onmouseout', BtnAnimOut);
		}
	}
}