// Naming conventions for the thumbnails become important 
// here. The filename for the thumbnail needs to match the
// option value generated by Satchmo. 

$(document).ready(function() {
	mapSize();
	headcover_td =  $("td:contains('Headcover')").next();
	headcover_td.append(" <a id='show_headcovers' href='#'>show options</a>");
	
	$("form#options").after("<div id='headcover_picker'></div>");
	$("div#headcover_picker").hide();
	
	target_select = headcover_td.children([0])
	target_select.addClass("hide_select");
	
	target_select.children().each(function() {
		var text = $(this).text();
		var value = $(this).val();
		$("#headcover_picker").append("" +
				"<div class='image_option'>" +
				"	<img value='" + value + "' alt='" + text + "' src='/static/images/products/headcover-choices/thumb-" + value + ".jpg' / >" +
				"	<p class='option_name'>" + text + "</p>" +
				"</div>");
	});
	
	//stanton's stuff //
	
	// Monitor the window resize event
			if (window.attachEvent) { 
				window.attachEvent("onresize", function() {mapSize()} );		    
			} else { 
				window.addEventListener("resize", function() {mapSize()} , false);
			} 	
			
    
    
    /*
	 * Resizes and centers the map when
	 * the browser is resized
	 *
	 */
    function mapSize() {
    	if (window.innerWidth) {
			document.getElementById("blackPng").style.width = (window.innerWidth) + "px";
			document.getElementById("blackPng").style.height = (window.innerHeight + 380) + "px";
		} else if (document.all) {
			document.getElementById("blackPng").style.width = (document.body.clientWidth) + "px";
			document.getElementById("blackPng").style.height = (window.innerHeight + 380) + "px";

		}
		
	}

	
	
	
	//end stanton's stuff//
	
	$("div#headcover_picker").prepend("<div id='picker_top'><a id='hide_headcovers' href='#'>done</a> </div>");
	
	$("a#show_headcovers").click(function(event) {
		event.preventDefault();
		$("div#grip_picker:visible").hide("slow");
		$("a#grip_options").removeClass("invisible");
		$("div#blackPng").removeClass("invisible");
		$("div#headcover_picker").show("slow");
		$(this).addClass("invisible");
	});
	
	$("a#hide_headcovers").click(function(event) {
		event.preventDefault();
		$("div#headcover_picker").hide("slow");
		$("a#show_headcovers").removeClass("invisible");
		$("div#blackPng").addClass("invisible");
	});
	
	$("#headcover_picker img").each(function() {
		if ($(this).attr("value") == $('#headcover_list').val()) {
			$(this).parent().addClass("selected");
		};
	});

	$("#headcover_picker img").click(function() {
		anchor = $(this);
		a_value = anchor.attr("value");
		a_text = anchor.attr("alt");
		target_select.val(a_value);
		$("div.selected").removeClass("selected");
		$(this).parent().addClass("selected");
		$("span#headcover_text").remove();
		headcover_td.prepend("<span id='headcover_text'>" + a_text + "</span>");
	});

});