$(document).ready(function() {
    // buy online hover
    $("ul#buyOnlineLinks img").hover(
        function() {
            var originalImage = $(this).attr("src");
            $(this).attr("src", originalImage.replace(".jpg", "_over.jpg"));
        },
        function() {
            var overImage = $(this).attr("src");
            $(this).attr("src", overImage.replace("_over", ""));
        }
    );
	if(undefined != perm_blonde_ids)
	{
	    var shades = { 
		    "perm" : {
			    "blond" : { "ids" : perm_blonde_ids, "names" : perm_blonde_names },
			    "red" : { "ids" : perm_red_ids, "names" : perm_red_names },
			    "black" : { "ids" : perm_black_ids, "names" : perm_black_names },
		    },
		    "tf" : {
			    "blond" : { "ids" : tf_blonde_ids, "names" : tf_blonde_names },
			    "red" : { "ids" : tf_red_ids, "names" : tf_red_names },
			    "black" : { "ids" : tf_black_ids, "names" : tf_black_names },
		    },
		    "eight" : {
			    "blond" : { "ids" : eight_blonde_ids, "names" : eight_blonde_names },
			    "red" : { "ids" : eight_red_ids, "names" : eight_red_names },
			    "black" : { "ids" : eight_black_ids, "names" : eight_black_names },
		    }
	    };
	}
	
	$("div#shades a").attr("href", "#");

    $("div#shades a").click(function() {
        if ($(this).attr("class") != "on") {
            $("div#shades a").attr("class", "off");
            $(this).attr("class", "on");
            $("div#shades h3").html($(this).html());
            var id = $(this).attr("id").replace("ctl00_ctl00_body_body_", "").replace("_link", "");
            $("div#shades h3").attr("class", id);
			colours = ["blond", "red", "black"];
			for (var i=0; i<colours.length; i++){
				var colour = colours[i];
				$("div." + colour + " table tbody tr[id]").remove();
				for (var iter=0; iter<shades[id][colour]["ids"].length; iter++){
					$("div." + colour + " table tbody").append(formShade(shades[id][colour]["ids"][iter], shades[id][colour]["names"][iter]));
				}
			}
		}
		return false;
	});
});

function formShade(shade_id, shade_name) {
	var height = "15";
	if (in_array(shade_id, new_shades)) height = "20";
	var cell1 = "<td valign=\"top\" width=\"54\"><img src=\"/niceneasy/images/shades/shade_nne_" + shade_id + ".gif\" height=\"" + height + "\" /></td>";
	var cell2 = "<td align=\"center\" width=\"54\">" + shade_id + "</td>";
	var cell3 = "<td width=\"231\">" + shade_name + "</td>";
	return "<tr id=\"shade_" + shade_id + "\">" + cell1 + cell2 + cell3 + "</tr>";
}

function in_array(needle, haystack, argStrict) {
    var found = false, key, strict = !!argStrict;
    for (key in haystack) {
        if ((strict && haystack[key] === needle) || (!strict && haystack[key] == needle)) {
            found = true;
            break;
        }
    }
    return found;
}