// Cool Submit v0.3 by Josh

(function(){

/* CONFIG */

// Font color:
// EXAMPLE: var oFontColor = "<#hex color>";
var oFontColor = "#ffffff";

// Padding:
// EXAMPLE: var oSubmitPadding = [<padding-top>, <padding-right>, <padding-bottom>, <padding-left>];
var oSubmitPadding = [2, 20, 2, 5];

// Border CSS rule:
// EXAMPLE: var oBorder = "<CSS border properties>";
var oBorder = "1px solid #ffffff";

// Background color and transition color:
// EXAMPLE: var oBGColor = "<#hex color>";
//          var oBGChange = "<#hex color>";
var oBGColor = "#004080";

var oBGChange = "#002040";

// Background image:
// EXAMPLE: var oBGImage = "<img url>";
var oBGImage = "/images/arrow.gif";

// Animation speeds:
// EXAMPLE: var oSpeed = <speed in seconds>;
// EXAMPLE: var oColorSpeed = <speed in seconds>;
var oSpeed = 0.5;
var oColorSpeed = 0.25;

/* END CONFIG */

function submitOver(e){
	YAHOO.util.Event.removeListener(oTarget, "mouseout", submitOut);
	var oTarget = YAHOO.util.Event.getTarget(e);
	var oPadding = new YAHOO.util.Anim(oTarget, {
			paddingLeft: { to: oSubmitPadding[1] },
			paddingRight: { to: oSubmitPadding[3] }
		}, oSpeed, YAHOO.util.Easing.elasticOut);
	oPadding.animate();
	var oBGAnim = new YAHOO.util.ColorAnim(oTarget, {
			backgroundColor: { to: oBGChange }
		}, oColorSpeed, YAHOO.util.Easing.easeNone);
	oBGAnim.animate();
	function oTween(){
		oTarget.style.backgroundPosition = (parseInt(oTarget.style.paddingLeft) - 10) + "px" + " center";
	}
	function oComplete(){
		YAHOO.util.Event.addListener(oTarget, "mouseout", submitOut);
	}
	oPadding.onTween.subscribe(oTween);
	oPadding.onComplete.subscribe(oComplete);
}

function submitOut(e){
	var oTarget = YAHOO.util.Event.getTarget(e);
	var oPadding = new YAHOO.util.Anim(oTarget, {
			paddingLeft: { to: oSubmitPadding[3] },
			paddingRight: { to: oSubmitPadding[1] }
		}, oSpeed, YAHOO.util.Easing.elasticOut);
	oPadding.animate();
	var oBGAnim = new YAHOO.util.ColorAnim(oTarget, {
			backgroundColor: { to: oBGColor }
		}, oColorSpeed, YAHOO.util.Easing.easeNone);
	oBGAnim.animate();
	function oTween(){
		oTarget.style.backgroundPosition = (oTarget.offsetWidth - parseInt(oTarget.style.paddingRight) + 5) + "px" + " center";
	}
	oPadding.onTween.subscribe(oTween);
}

function initCoolSubmit(){
	var oInputs = document.getElementsByTagName("input");
	var oSubmits = new Array();
	for(var i=0; i<oInputs.length; i++){
		if(oInputs[i].getAttribute("type") == "submit"){
			oSubmits.push(oInputs[i]);
		}
	}
	for(var i=0; i<oSubmits.length; i++){
		oTarget = oSubmits[i];
		YAHOO.util.Dom.setStyle(oTarget, "overflow", "visible"); // lol ie...
		YAHOO.util.Dom.setStyle(oTarget, "color", oFontColor);
		YAHOO.util.Dom.setStyle(oTarget, "border", oBorder);
		YAHOO.util.Dom.setStyle(oTarget, "padding", oSubmitPadding[0] + "px " + oSubmitPadding[1] + "px " + oSubmitPadding[2] + "px " + oSubmitPadding[3] + "px");
		var oEndPoint = (oTarget.offsetWidth - parseInt(oTarget.style.paddingRight) + 5);
		YAHOO.util.Dom.setStyle(oTarget, "background", (oBGColor + " url(" + oBGImage + ") no-repeat " + oEndPoint + "px" + " center"));
		YAHOO.util.Event.addListener(oTarget, "mouseover", submitOver);
		YAHOO.util.Event.addListener(oTarget, "mouseout", submitOut);
	}
}

YAHOO.util.Event.onDOMReady(initCoolSubmit);

})();