$(function(){

	var color_btn_class = 'color_btn';
	var color_btn_name_prefix = 'color_';
	var color_btn_over_state = '_ov';

	$("." + color_btn_class).hover(
		function(){
		$(this).fadeTo(1,0.8);
			$(this).animate({ top:-4},{duration: 200, easing: 'easeOutBounce'});
			$(this).css("cursor","pointer");
		},
		function(){
			$(this).fadeTo(1,1);
			$(this).animate(
				{top:0},
				{duration: 200, easing: 'easeOutBounce', complete:function(){
						$(this).queue([]);
						$(this).fadeTo(1,1);
					}
				}
			);
		}
	);

	$("." + color_btn_class).click(function(){
		var target_id = $(this).attr("target");
		var a_img_filepath = $(this).children("img").attr("src");

		re = new RegExp(color_btn_over_state + "\.([a-zA-Z0-9]*)$");
		var rep_src = a_img_filepath.replace(re,function(whole,re1){return "." + re1});

		var a_img_filepath_spl = rep_src.split('/');

		var a_img_filename = a_img_filepath_spl.pop();

		var a_img_filename_rep = a_img_filename.replace(color_btn_name_prefix , "");
		var color_name = a_img_filename_rep.replace(/\.[a-zA-Z0-9]*$/,"");

		var org_src = $("#" + target_id).css("background-image");

		re = new RegExp("_[a-zA-Z0-9]+\.","g");
		var src_rep = org_src.replace(/\_[a-zA-Z0-9]*\./ , "_" + color_name + "\.");

		$("#" + target_id).css("background-image" , src_rep);
	});

});