$(function () {

	//--Start: IE HACK for changing radio buttons:
	if ($.browser.msie){$('input:radio').click(function(){this.blur();this.focus();});}
	//--End: IE HACK for changing radio buttons:

	dir = "images/";
	currPosition = false;
	initSelectors();
	$("#cardSelector").change(changeCard);
	$("#reversalSelector").click(changeCard);
	$("#horizontalSelector").click(changeCard);
	$("#deck div").draggable({ stack: { group: '#deck div', min: 1 } });	
	$("#deck div img").click(currentCard);
	$("#spreadSelector").change(changeSpread);
	$("#bg_selector input[name=bgImage]:radio").change(bgImageSelect);
	//$("#bg_selector input[name=bgImage]:radio").change(bgImageSelect).click(function(){this.blur()});
	
});	


// Functions

	function bgImageSelect() {
	
	  // remove any classes on #tabletop
		$("#tabletop").removeClass();

	  // Get the value of the currently selected radio button
		currBGimage = $('input[name=bgImage]:radio:checked').val();

		if (currBGimage == "red") {
			$("#tabletop").addClass('bg-red');
		}
		else if (currBGimage == "wood") {
			$("#tabletop").addClass('bg-wood');
		}
		else if (currBGimage == "gray") {
			$("#tabletop").addClass('bg-gray');
		}
		else if (currBGimage == "stars") {
			$("#tabletop").addClass('bg-stars');
		}
		else {
			alert('class does not match radio button');
		}
	}

	  
	function initSelectors() {

	  // on pageload/reload, reset background image radio button to "Starry Night"
		$("#bgStars").attr("checked", true);

	  // on pageload/reload, reset card selector dropdown 
		$("#cardSelector").attr("value","blank.gif");

	  // on pageload/reload, set spread image to current selection
		currSpread = $("#spreadSelector option:selected").val();
		currSpreadImg = dir + currSpread;
		$("#spread img").attr("src", currSpreadImg);	

	  // on pageload/reload, set print header (#branding) to current spread selection
		//currSpreadText = $("#spreadSelector option:selected").text();
		//$("#branding h1").text(currSpreadText);

	  // on pageload/reload, set positions descriptions
		if (currSpread == "spread_celtic_cross.png"){
			$("#positions div").css("display","none");
			$("#positions_celtic_cross").css("display","block");
		}
		else if (currSpread == "spread_date.png"){
			$("#positions div").css("display","none");
			$("#positions_date").css("display","block");
		}
		else if (currSpread == "spread_blocked_relationship.png"){
			$("#positions div").css("display","none");
			$("#positions_blocked_relationship").css("display","block");
		}
		else {
			$("#positions div").css("display","none");
		}

	}


	function changeSpread() {

		var newSpread = $("#spreadSelector option:selected").val();
		//var newSpreadText = $("#spreadSelector option:selected").text();     //***** line 1of2 - This changes the text in the branding section *****
		var newSpreadImg = dir + newSpread;
		$("#spread img").attr("src", newSpreadImg);
		//$("#branding h1").text(newSpreadText);                               //***** line 2of2 - This changes the text in the branding section *****
		
		
		if (newSpread == "spread_celtic_cross.png"){
			$("#positions div").css("display","none");
			$("#positions_celtic_cross").css("display","block");
		}
		else if (newSpread == "spread_date.png"){
			$("#positions div").css("display","none");
			$("#positions_date").css("display","block");
		}
		else if (newSpread == "spread_blocked_relationship.png"){
			$("#positions div").css("display","none");
			$("#positions_blocked_relationship").css("display","block");
		}
		else {
			$("#positions div").css("display","none");
		}

	} 


	function changeCard() {
		//var pos = $("#positionSelector option:selected").text();
		if (currPosition==false) {
			var pos = "01";
		} else {
			pos = currPosition;
		}
		var card = $("#cardSelector option:selected").val();
		var orientation = "";
		var upright = "";
		var rev = "r_";
		var hor = "x_";
		
		if ($("#reversalSelector:checked").val() != null) {
			var revStatus ="checked";
		} else revStatus = "unchecked";
		
		if ($("#horizontalSelector:checked").val() != null) {
			var horStatus ="checked";
		} else horStatus = "unchecked";

		//alert("revStatus: " + revStatus + "  horStatus: " + horStatus);
		
		if (revStatus == "checked" && horStatus == "checked") {
			if ($(this).attr("id") == "reversalSelector") {
				$("#horizontalSelector").attr("checked",false);
				orientation = rev;
			}
			else if ($(this).attr("id") == "horizontalSelector") {
				$("#reversalSelector").attr("checked",false);
				orientation = hor;
			}
		}
		
		if (revStatus == "unchecked" && horStatus == "unchecked") {	orientation = upright; }
		else if (revStatus == "checked" && horStatus == "unchecked") { orientation = rev; }
		else if (revStatus == "unchecked" && horStatus == "checked") { orientation = hor; }
		
	// Find current Div Id (one of the cards) and change image dimensions based on orientation
		var currDivId = "pos_" + currPosition;		

		if (orientation == hor) {
			$("#" + currDivId + " img").attr("width", 165);
			$("#" + currDivId + " img").attr("height", 100);
		}
		else {
			$("#" + currDivId + " img").attr("width", 100);
			$("#" + currDivId + " img").attr("height", 165);
		}

	// Create path to image
		var cardPath = dir + orientation + card;
		$("#pos_" + pos + " img").attr("src", cardPath);

	}

	function currentCard() {
		currPosition = $(this).parent().attr("id").slice(4);
		//alert(currPosition);
		var currImgPath = $(this).attr("src");
		var filename = currImgPath.slice(dir.length);
		
		// set current position dropdown
			//$("#positionSelector").attr("value",currPosition);

		// set card dropdown
			if (filename.indexOf("r_") != -1 || filename.indexOf("x_") != -1) {
				var filenameBase = filename.slice(2);
				$("#cardSelector").attr("value",filenameBase);
			} else {
				$("#cardSelector").attr("value",filename);
			}
		
		// set current checkbox
			if (currImgPath.indexOf("r_") != -1) {
				// reversed - set checkboxes
				$("#reversalSelector").attr("checked", true);
				$("#horizontalSelector").attr("checked", false);
			} 
			else if (currImgPath.indexOf("x_") != -1) {
				// horizontal - set checkboxes
				$("#reversalSelector").attr("checked",false);
				$("#horizontalSelector").attr("checked", true);
			}
			else {
				// upright - set checkboxes
				$("#reversalSelector").attr("checked",false);
				$("#horizontalSelector").attr("checked", false);
			}
	}