// JavaScript Document
//var preloadImages = new Image();
var minimumPadding = 2;

// Stored values from each step
var selectedMatType = 0; // Step 1
var selectedMatColor = -1;	// Step 2
var selectedWidthSize = -1; // Step 3
var selectedWidthFraction = -1; // Step 3
var selectedHeightSize = -1; // Step 3
var selectedHeightFraction = -1; // Step 3
var selectedOpeningType = -1;	// Step 4
var selectedOpeningWidthSize = -1; // Step 5
var selectedOpeningWidthFraction = -1; // Step 5
var selectedOpeningHeightSize = -1; // Step 5
var selectedOpeningHeightFraction = -1; // Step 5
var selectedOpeningPosition = -1;	// Step 6
var matBoardPrice = -1;	// Step 7
var matBoardDesc = "";	// Step 7

var maxInsideWidth = 0;
var maxInsideHeight = 0;

var mattingType = new Array();
var mattingColor = new Array();
var matColorPreview = new Array();
var matPrice = new Array();
var matColorID = new Array();
var outsideDimensions = new Array();
var insideDimensions = new Array();
var openingTypes = new Array();
var openingTypeImages = new Array();
var openingPositions = new Array();

var i;
var j;

openingTypes[0] = "Rectangle";
openingTypes[1] = "Square";
openingTypes[2] = "Round";
openingTypes[3] = "Oval";
openingTypes[4] = "Blank - No Opening";

for (i = 0; i <= 4; i++) openingTypeImages[i] = new Array();

openingTypeImages[0][0] = "inside_dim_rectangle";
openingTypeImages[0][1] = "opening_type_rectangle";
openingTypeImages[1][0] = "inside_dim_square";
openingTypeImages[1][1] = "opening_type_square";
openingTypeImages[2][0] = "inside_dim_round";
openingTypeImages[2][1] = "opening_type_round";
openingTypeImages[3][0] = "inside_dim_oval";
openingTypeImages[3][1] = "opening_type_oval";
openingTypeImages[4][0] = false;
openingTypeImages[4][1] = "opening_type_blank";

openingPositions[0] = "Centered";

function matTypeSelected(matTypeID) {
	if (matTypeID == null){
		selectedMatType = getRadioValue(document.customMatForm.matType);
	} else {
		selectedMatType = matTypeID;
	}
	resetStep(2, 2);
}

function matColorSelected(){
	var matColorObj = document.customMatForm.matColor;
	var matColorID = matColorObj.options[matColorObj.selectedIndex].value;
	if (matColorID >= 0) {
		selectedMatColor = matColorID;
		$("#colorPreview").attr("src", "images/mbsmall/" + matColorPreview[selectedMatType][selectedMatColor]);
		resetStep(3, 3);
	} else {
		selectedMatColor = -1;
		$("#colorPreview").attr("src", "images/mbconfig/nopreview.gif");
		resetStep(3, 2);
	}
}

function outsideDimsChanged(){
	var formObj = document.customMatForm;
	
	var widthSizeIndex = formObj.widthSize.selectedIndex;
	var widthFractionIndex = formObj.widthFraction.selectedIndex;
	var heightSizeIndex = formObj.heightSize.selectedIndex;
	var heightFractionIndex = formObj.heightFraction.selectedIndex;
	
	var widthSizeValue = formObj.widthSize.options[widthSizeIndex].value;
	var widthFractionValue = formObj.widthFraction.options[widthFractionIndex].value;
	var heightSizeValue = formObj.heightSize.options[heightSizeIndex].value;
	var heightFractionValue = formObj.heightFraction.options[heightFractionIndex].value;
		
	// Make sure we have a value for all 4 inputs
	if (widthSizeIndex != 0 && widthFractionIndex >= 0 && heightSizeIndex != 0 && heightFractionIndex >= 0){
		// Make sure both values arent greater than 32 and also make sure no values are greater than 40
		var totalWidth = eval(widthSizeValue) + eval(getFractionValue(widthFractionValue, true));
		var totalHeight = eval(heightSizeValue) + eval(getFractionValue(heightFractionValue, true));
		
		if ((totalWidth > 32 && totalHeight > 32) || (totalWidth > 40 || totalHeight > 40)) {
			resetStep(4, 3);
			jAlert("Largest size available is 32x40 or 40x32", "Invalid Size");
		} else if (totalWidth < 7 && totalHeight < 7){
			resetStep(4, 3);
			jAlert("Smallest size available is 5x7 or 7x5", "Invalid Size");
		} else {
			maxInsideWidth = totalWidth - minimumPadding;
			maxInsideHeight = totalHeight - minimumPadding;
			selectedWidthSize = widthSizeValue;
			selectedWidthFraction = widthFractionValue;
			selectedHeightSize = heightSizeValue;
			selectedHeightFraction = heightFractionValue;
			resetStep(4, 4);
		}
	} else {
		resetStep(4, 3);
	}
	
}

function openingTypeSelected(){
	var openingTypeObj = document.customMatForm.openingType;
	var openingTypeID = openingTypeObj.options[openingTypeObj.selectedIndex].value;
	selectedOpeningType = openingTypeID;
	if (openingTypeID >= 0) {
		$("#openingPreview").attr("src", "images/mbconfig/" + openingTypeImages[openingTypeID][1] + "/" + matColorPreview[selectedMatType][selectedMatColor]);

		if (openingTypeID == 4) {
			$("#openingCustomize").hide();
			allStepsCompleted();
			resetStep(7, 7);
		} else {
			$("#openingCustomize").show();
			$("#openingDimensions").attr("src", "images/mbconfig/" + openingTypeImages[openingTypeID][0] + "/" + matColorPreview[selectedMatType][selectedMatColor]);
			if (openingTypeID == 1 || openingTypeID == 2) {
				var smallestSize = 0;
				if (maxInsideWidth < maxInsideHeight){
					smallestSize = maxInsideWidth;
				} else {
					smallestSize = maxInsideHeight;
				}
				
				var myWidthArray = new Array();
				for (var i = 1; i <= Math.floor(smallestSize); i++){
						myWidthArray[i] = i;
				}
				
				populateSelectMenu("openingWidthSizeB", myWidthArray, "--");
			} else {
				var myWidthArray = new Array();
				var myHeightArray = new Array();
				
				for (var i = 1; i <= Math.floor(maxInsideWidth); i++){
					myWidthArray[i] = i;	
				}
				
				for (var i = 1; i <= Math.floor(maxInsideHeight); i++){
					myHeightArray[i] = i;	
				}
	
				populateSelectMenu("openingWidthSize", myWidthArray, "--");
				populateSelectMenu("openingHeightSize", myHeightArray, "--");
			}
			resetStep(5, 5);
		}
	} else {
		$("#openingDimensions").attr("src", "images/mbconfig/nopreview.gif");
		$("#openingPreview").attr("src", "images/mbconfig/nopreview.gif");
		resetStep(5, 4);
	}
}

function insideDimsChanged(){
	var formObj = document.customMatForm;
	
	var widthSizeIndex = formObj.openingWidthSize.selectedIndex;
	var widthFractionIndex = formObj.openingWidthFraction.selectedIndex;
	var heightSizeIndex = formObj.openingHeightSize.selectedIndex;
	var heightFractionIndex = formObj.openingHeightFraction.selectedIndex;
	
	// Make sure we have a value for all 4 inputs
	if (widthSizeIndex != 0 && widthFractionIndex >= 0 && heightSizeIndex != 0 && heightFractionIndex >= 0){
		// All values are valid
		selectedOpeningWidthSize = formObj.openingWidthSize.options[widthSizeIndex].value;
		selectedOpeningWidthFraction = formObj.openingWidthFraction.options[widthFractionIndex].value;
		selectedOpeningHeightSize = formObj.openingHeightSize.options[heightSizeIndex].value;
		selectedOpeningHeightFraction = formObj.openingHeightFraction.options[heightFractionIndex].value;
		

		var outWidth = eval(selectedWidthSize) + eval(getFractionValue(selectedWidthFraction, true));
		var outHeight = eval(selectedHeightSize) + eval(getFractionValue(selectedHeightFraction, true));
		var inWidth = eval(selectedOpeningWidthSize) + eval(getFractionValue(selectedOpeningWidthFraction, true));
		var inHeight = eval(selectedOpeningHeightSize) + eval(getFractionValue(selectedOpeningHeightFraction, true));
		
		var widthDiff = outWidth - inWidth;
		var heightDiff = outHeight - inHeight;
		
		if (widthDiff < 2 && heightDiff < 2){
			resetStep(6, 5);
			jAlert("The opening dimensions must be at least 2 inches smaller than the mat's dimensions", "Invalid Opening Dimensions");
		} else if (widthDiff < 2) {
			resetStep(6, 5);
			jAlert("The opening width must be at least 2 inches smaller than the mat's width", "Invalid Opening Width");
		} else if (heightDiff < 2) {
			resetStep(6, 5);
			jAlert("The opening height must be at least 2 inches smaller than the mat's height", "Invalid Opening Height");
		} else {
			resetStep(6, 6);
		}
	} else {
		resetStep(6, 5);
	}
	
}

function insideDimsChangedB(){
	var formObj = document.customMatForm;
	
	var widthSizeIndex = formObj.openingWidthSizeB.selectedIndex;
	var widthFractionIndex = formObj.openingWidthFractionB.selectedIndex;
	
	// Make sure we have a value for all inputs
	if (widthSizeIndex != 0 && widthFractionIndex >= 0){
		// All values are valid
		selectedOpeningWidthSize = formObj.openingWidthSizeB.options[widthSizeIndex].value;
		selectedOpeningWidthFraction = formObj.openingWidthFractionB.options[widthFractionIndex].value;
		
		var outWidth = eval(selectedWidthSize) + eval(getFractionValue(selectedWidthFraction, true));
		var outHeight = eval(selectedHeightSize) + eval(getFractionValue(selectedHeightFraction, true));
		
		var inWidth = eval(selectedOpeningWidthSize) + eval(getFractionValue(selectedOpeningWidthFraction, true));

		if ((Math.min(outWidth, outHeight) - inWidth) < 2){
			resetStep(6, 5);
			jAlert("The opening width must be at least 2 inches smaller than your smallest opening dimension", "Invalid Opening Width");
		} else {
			resetStep(6, 6);
		}
	} else {
		resetStep(6, 5);
	}
}

function openingPositionSelected(){
	var openingPositionObj = document.customMatForm.openingPosition;
	var openingPositionID = openingPositionObj.options[openingPositionObj.selectedIndex].value;
	selectedOpeningPosition = openingPositionID;

	if (openingPositionID >= 0){
		allStepsCompleted();
		resetStep(7, 7);
	} else {
		resetStep(7, 6);	
	}
}

function allStepsCompleted(){
	document.customMatForm.design_id.value = matColorID[selectedMatType][selectedMatColor];
	var width = eval(selectedWidthSize) + eval(getFractionValue(selectedWidthFraction, true));
	var height = eval(selectedHeightSize) + eval(getFractionValue(selectedHeightFraction, true));
	var matBoardPrice = (((width * height) / 144) * matPrice[selectedMatType][selectedMatColor]).toFixed(2);
	if (width > 27 && height > 27) {
		if (Math.min(width, height) <= 28 && Math.max(width, height) <= 31){
			$("#shippingSurcharge").hide();		
		} else if (Math.min(width, height) <= 30 && Math.max(width, height) <=30){
			$("#shippingSurcharge").show();
		} else {
			$("#shippingSurcharge").show();
		}
	} else {
		$("#shippingSurcharge").hide();
	}
	
	if (matBoardPrice < 7) {
		$("#matCutFee").html("You must purchase " + Math.ceil(7 / matBoardPrice) + " of these<br />mats to avoid a $2.95 cut fee");	
		$("#matCutFee").show();
	} else {
		$("#matCutFee").hide();
	}
	
	$("#matBoardConfiguration").html("<p>" + getProductDescription() + "</p>");
	$("#matBoardConfigurationPrice").html("<p><strong>Price:</strong> $" + matBoardPrice + " each</p>");
}

function getProductDescription(){
	var selWidthFrac = selectedWidthFraction;
	var selHeightFrac = selectedHeightFraction;
	var selOpenWidthFrac = selectedOpeningWidthFraction;
	if (selWidthFrac == 0) selWidthFrac = "";
	if (selHeightFrac == 0) selHeightFrac = "";
	if (selOpenWidthFrac == 0) selOpenWidthFrac = "";

	var description = "<strong>Your Selection:</strong><ul><li><strong>Type:</strong> " + mattingType[selectedMatType] + "</li><li><strong>Color:</strong> " + mattingColor[selectedMatType][selectedMatColor] + "</li><li><strong>Dimensions:</strong> " + selectedWidthSize + " " + getFractionValue(selWidthFrac, false) + "\" x " + selectedHeightSize + " " + getFractionValue(selHeightFrac, false) + "\"</li><li><strong>Opening Type:</strong> " + openingTypes[selectedOpeningType] + "</li>";
	if (selectedOpeningType == 1 || selectedOpeningType == 2){
		description = description + "<li><strong>Opening Dimensions:</strong> " + selectedOpeningWidthSize + " " + getFractionValue(selOpenWidthFrac, false) + "\" x " + selectedOpeningWidthSize + " " + getFractionValue(selOpenWidthFrac, false) + "\"";
	} else if (selectedOpeningType == 0 || selectedOpeningType == 3) {
		var selOpenHeightFrac = selectedOpeningHeightFraction;
		if (selOpenHeightFrac == 0) selOpenHeightFrac = "";
		description = description + "</li><li><strong>Opening Dimensions:</strong> " + selectedOpeningWidthSize + " " + getFractionValue(selOpenWidthFrac, false) + "\" x " + selectedOpeningHeightSize + " " + getFractionValue(selOpenHeightFrac, false) + "\"";
	} else {
		// Blank, do nothing
	}
	
	if (selectedOpeningType != 4){
		description = description + "</li><li><strong>Opening Position:</strong> " + openingPositions[selectedOpeningPosition] + "</li></ul>";
	}
	
	return description.replace(/ "/g, "\"");
}

function resetStep(step, currentStep){
	switch(step){
		case 2:
			selectedMatColor = -1;
			$("#colorPreview").attr("src", "images/mbconfig/nopreview.gif");
			populateSelectMenu("matColor", mattingColor[selectedMatType], "Select Color...");
		case 3:
			if (currentStep == 3) {
				if (document.getElementById("outsideDimDiv").style.display == "none") $("#outsideDimDiv").show();
				$("#outsideDimensions").attr("src", "images/mbconfig/outside_dim/" + matColorPreview[selectedMatType][selectedMatColor]);
				document.customMatForm.widthSize.selectedIndex = 0;
				document.customMatForm.widthFraction.selectedIndex = 0;
				document.customMatForm.heightSize.selectedIndex = 0;
				document.customMatForm.heightFraction.selectedIndex = 0;
			} else {
				$("#outsideDimensions").attr("src", "images/mbconfig/outsidedimensions.jpg");
				document.customMatForm.widthSize.selectedIndex = 0;
				document.customMatForm.widthFraction.selectedIndex = 0;
				document.customMatForm.heightSize.selectedIndex = 0;
				document.customMatForm.heightFraction.selectedIndex = 0;
				$("#outsideDimDiv").hide();
			}
		
		case 4:
			if (currentStep == 4) {
				document.customMatForm.openingType.selectedIndex = 0;
				$("#openingTypeDiv").show();
			} else {
				document.customMatForm.openingType.selectedIndex = 0;
				$("#openingTypeDiv").hide();
			}
			
			$("#openingPreview").attr("src", "images/mbconfig/nopreview.gif");
		case 5:
			if (currentStep == 5){
				if (selectedOpeningType == 1 || selectedOpeningType == 2) {
					$("#openingDimsWidth").show();
					$("#openingDimsWidthHeight").hide();
					document.customMatForm.openingWidthFractionB.selectedIndex = 0;
				} else {
					$("#openingDimsWidth").hide();
					$("#openingDimsWidthHeight").show();
					document.customMatForm.openingWidthFraction.selectedIndex = 0;
					document.customMatForm.openingHeightFraction.selectedIndex = 0;
				}
			} else {
				document.customMatForm.openingWidthFractionB.selectedIndex = 0;
				document.customMatForm.openingWidthFraction.selectedIndex = 0;
				document.customMatForm.openingHeightFraction.selectedIndex = 0;
				$("#openingDimsWidth").hide();
				$("#openingDimsWidthHeight").hide();
				$("#openingDimensions").attr("src", "images/mbconfig/nopreview.gif");
				$("#openingDimensions").attr("src", "images/mbconfig/nopreview.gif");
			}
		
		case 6:
			if (currentStep == 6) {
				if (document.getElementById("openingPositionDiv").style.display == "none") $("#openingPositionDiv").show();
				populateSelectMenu("openingPosition", openingPositions, "Select Opening Position...");
			} else {
				$("#openingPositionDiv").hide();
			}
		
		case 7:
			if (currentStep == 7){
				$("#statusMsg").hide();
				$("#addToCartInfo").show();
			} else {
				$("#statusMsg").show();
				$("#addToCartInfo").hide();
			}
	}
	
	statusText = false;
	switch(currentStep){
		case 2: statusText = "Please complete Steps 2 through 6"; break;
		case 3: statusText = "Please complete Steps 3 through 6"; break;
		case 4: statusText = "Please complete Steps 4, 5 and 6"; break;
		case 5: statusText = "Please complete Steps 5 and 6"; break;
		case 6: statusText = "Please complete Step 6"; break;
	}
	if (statusText) $("#statusMsg").text(statusText);
}