$(document).ready(function(){
	// button hover
	$("#btns .li").hover(
		function()
		{
			var btn = $(".btn", $(this));
			var id = btn.attr("id");
			var indx = id.replace(/btn_(\d+)/, "$1");
			if (!isNaN(indx))
			{
				var elm_h = $("#btn_"+indx+"_h");
				btn.css({backgroundImage: "url("+elm_h.attr("src")+")", width: 100});
    btn.animate({width: "100%"});
			}
		},
		function()
		{
			var btn = $(".btn", $(this));
			var id = btn.attr("id");
			var indx = id.replace(/btn_(\d+)/, "$1");
			if (!isNaN(indx))
			{
				var elm_o = $("#btn_"+indx+"_o");
				btn.css({backgroundImage: "url("+elm_o.attr("src")+")"});
				btn.stop().css({width: "100%"});
			}
		}
	);
	// button press
	$(".btn").bind("keypress mousedown", function()
		{
			var id = $(this).attr("id");
			var indx = id.replace(/btn_(\d+)/, "$1");
			if (!isNaN(indx))
			{
				var elm_p = $("#btn_"+indx+"_p");
				$(this).css({backgroundImage: "url("+elm_p.attr("src")+")"});
			}
		}
	);
});