var numSets;
var selectedSetArray = new Array();


var elevationNameForForm = "";
var hiddenFieldValue = "";



// CLICK HANDLER FOR LINKED U KITCHENS //
/////////////////////////////////////////

function clickSetU(theLinkID,theSetID,numWalls) {

	var theSelectedLink;
	var newHTML;
	var newSet = eval("set" + theSetID);
	var iteratedSet;
	var theSelectedDiv;

	var zoomImage1 = newSet.elevation_1_ZoomURL;
	var zoomImage2 = newSet.elevation_2_ZoomURL;
	var zoomImage3 = newSet.elevation_3_ZoomURL;

	var zoomNote1 = newSet.elevation_1_Notes;
	var zoomNote2 = newSet.elevation_2_Notes;
	var zoomNote3 = newSet.elevation_3_Notes;

	var totalPrice = (newSet.elevation_1_Price + newSet.elevation_2_Price + newSet.elevation_3_Price);


	for(i=1;i<=numSets;i++) { //turn all off

		iteratedSet = selectedSetArray[i];
		theSelectedLink = "select" + i;
		theSelectedDiv = "linked-set-U-" + i + "a";

		var elevationName1 = eval("set" + iteratedSet + ".elevation_1_Name");
		var elevationName2 = eval("set" + iteratedSet + ".elevation_2_Name");
		var elevationName3 = eval("set" + iteratedSet + ".elevation_3_Name");

		document.getElementById(elevationName1).href="javascript:clickSetU(" + i + "," + iteratedSet + ",3);";
		document.getElementById(elevationName2).href="javascript:clickSetU(" + i + "," + iteratedSet + ",3);";
		document.getElementById(elevationName3).href="javascript:clickSetU(" + i + "," + iteratedSet + ",3);";

		document.getElementById(elevationName1).style.cursor = "hand";
		document.getElementById(elevationName2).style.cursor = "hand";
		document.getElementById(elevationName3).style.cursor = "hand";

		newHTML= "<a href='javascript:clickSetU(" + i + "," + iteratedSet + "," + numWalls + ")'>" + elevationName1 + " + " + elevationName2 + " + " + elevationName3 + "</a>";
		document.getElementById(theSelectedLink).innerHTML = newHTML;
		document.getElementById(theSelectedDiv).style.border = "1px solid #ffffff";



		}


	document.getElementById("tab-instruction-image").style.visibility = "visible";

	theSelectedLink = "select" + theLinkID;
	theSelectedDiv = "linked-set-U-" + theLinkID + "a";
	newHTML = "<b>" + newSet.elevation_1_Name + " + " + newSet.elevation_2_Name + " + " + newSet.elevation_3_Name + "</b>";

	//make the thumbnails click into the enlargement:

	document.getElementById(newSet.elevation_1_Name).href="javascript:lightbox('show','zoom-1');";
	document.getElementById(newSet.elevation_2_Name).href="javascript:lightbox('show','zoom-2');";
	document.getElementById(newSet.elevation_3_Name).href="javascript:lightbox('show','zoom-3');";

	document.getElementById(newSet.elevation_1_Name).style.cursor = "url(images/magnify.cur)";
	document.getElementById(newSet.elevation_2_Name).style.cursor = "url(images/magnify.cur)";
	document.getElementById(newSet.elevation_3_Name).style.cursor = "url(images/magnify.cur)";

	document.getElementById(theSelectedLink).innerHTML = newHTML;
	document.getElementById(theSelectedLink).style.color = "#6d9e33";
	document.getElementById(theSelectedDiv).style.border = "1px solid #f7941e";

	document.getElementById("tab-wall-1").style.visibility = "visible";
	document.getElementById("tab-wall-2").style.visibility = "visible";
	document.getElementById("tab-wall-3").style.visibility = "visible";
	document.getElementById('plan-step-title').innerHTML = "The price for the configurations you selected is shown in the bars to the right. <br><span class='subcaption'>Contact us to adapt these designs more closely to your space or get more information.</span>";

	document.getElementById("price-wall-1").innerHTML = "$" + newSet.elevation_1_Price;
	document.getElementById("price-wall-2").innerHTML = "$" + newSet.elevation_2_Price;
	document.getElementById("price-wall-3").innerHTML = "$" + newSet.elevation_3_Price;

	document.getElementById('save-to-portfolio').style.visibility = "visible";
	document.getElementById('total-price').style.visibility = "visible";
	document.getElementById('contact-us').style.visibility = "visible";
	document.getElementById('total-price-label').innerHTML = "$" + totalPrice;



	document.getElementById('zoom-image-1').innerHTML = "<img src='" + filepath + zoomImage1 + "'>";
	document.getElementById('zoom-image-2').innerHTML = "<img src='" + filepath + zoomImage2 + "'>";
	document.getElementById('zoom-image-3').innerHTML = "<img src='" + filepath + zoomImage3 + "'>";
	document.getElementById('zoom-1-price').innerHTML = "" + newSet.elevation_1_Price;
	document.getElementById('zoom-2-price').innerHTML = "" + newSet.elevation_2_Price;
	document.getElementById('zoom-3-price').innerHTML = "" + newSet.elevation_3_Price;

	document.getElementById('zoom-1-elevation-name').innerHTML = newSet.elevation_1_Name;
	document.getElementById('zoom-2-elevation-name').innerHTML = newSet.elevation_2_Name;
	document.getElementById('zoom-3-elevation-name').innerHTML = newSet.elevation_3_Name;


	document.getElementById('zoom-1-wall-notes').innerHTML = newSet.elevation_1_Notes;
	document.getElementById('zoom-2-wall-notes').innerHTML = newSet.elevation_2_Notes;
	document.getElementById('zoom-3-wall-notes').innerHTML = newSet.elevation_3_Notes;


	var selectedElevationNameList = "";
	var selectedElevationList = "";

		for(i=1;i<=numWalls;i++) {

			var elevationID = eval("newSet.elevation_" + i + "_ID");

			if(i<numWalls){
				selectedElevationList += elevationID + "&id[]=";
				selectedElevationNameList += "Wall " + eval("newSet.elevation_" + i + "_Name") + " and ";


			}
			else {
				selectedElevationList += elevationID;
				selectedElevationNameList += "Wall " + eval("newSet.elevation_" + i + "_Name");

				}

			var zoomSaveID = "zoom-" + i + "-save-link";
			document.getElementById(zoomSaveID).href = "customer-portfolio.php?action=save&id[]=" + elevationID;

			}
	document.getElementById('save-to-portfolio').href = "customer-portfolio.php?action=save&id[]=" + selectedElevationList;
	document.getElementById('quote-form-elevation-list').innerHTML = selectedElevationNameList;
	document.getElementById('selected-elevations').innerHTML = "<input type=hidden name='input6'  value='" + selectedElevationNameList + "'>";



}

// CLICK HANDLER FOR LINKED L KITCHENS //
/////////////////////////////////////////

function clickSetL(theLinkID,theSetID,numWalls) {

	var theSelectedLink;
	var newHTML;
	var newSet = eval("set" + theSetID);
	var iteratedSet;
	var theSelectedDiv;


	var zoomImage1 = newSet.elevation_1_ZoomURL;
	var zoomImage2 = newSet.elevation_2_ZoomURL;

	var zoomNote1 = newSet.elevation_1_Notes;
	var zoomNote2 = newSet.elevation_2_Notes;

	var totalPrice = (newSet.elevation_1_Price + newSet.elevation_2_Price);


	for(i=1;i<=numSets;i++) { //turn all off

		iteratedSet = selectedSetArray[i];
		theSelectedLink = "select" + i;
		theSelectedDiv = "linked-set-L-" + i;
		var elevationName1 = eval("set" + iteratedSet + ".elevation_1_Name");
		var elevationName2 = eval("set" + iteratedSet + ".elevation_2_Name");
		newHTML= "<a href='javascript:clickSetL(" + i + "," + iteratedSet + "," + numWalls + ")'>" + elevationName1 + " + " + elevationName2 + "</a>";
		document.getElementById(theSelectedLink).innerHTML = newHTML;
		document.getElementById(theSelectedDiv).style.border = "1px solid #ffffff";

		document.getElementById(elevationName1).href="javascript:clickSetL(" + i + "," + iteratedSet + ",2);";
		document.getElementById(elevationName2).href="javascript:clickSetL(" + i + "," + iteratedSet + ",2);";
		document.getElementById(elevationName1).style.cursor = "hand";
		document.getElementById(elevationName2).style.cursor = "hand";


		}


	document.getElementById("tab-instruction-image").style.visibility = "visible";

	//make the thumbnails click into the enlargement:

	document.getElementById(newSet.elevation_1_Name).href="javascript:lightbox('show','zoom-1');";
	document.getElementById(newSet.elevation_2_Name).href="javascript:lightbox('show','zoom-2');";

	document.getElementById(newSet.elevation_1_Name).style.cursor = "url(images/magnify.cur)";
	document.getElementById(newSet.elevation_2_Name).style.cursor = "url(images/magnify.cur)";


	theSelectedLink = "select" + theLinkID;
	theSelectedDiv = "linked-set-L-" + theLinkID;
	newHTML = "<b>" + newSet.elevation_1_Name + " + " + newSet.elevation_2_Name + "</b>";
	document.getElementById(theSelectedLink).innerHTML = newHTML;
	document.getElementById(theSelectedLink).style.color = "#6d9e33";
	document.getElementById(theSelectedDiv).style.border = "1px solid #f7941e";
	//document.getElementById(theSelectedDiv).style.cursor = "url(images/magnify.cur)";

	document.getElementById("tab-wall-1").style.visibility = "visible";
	document.getElementById("tab-wall-2").style.visibility = "visible";
	document.getElementById('plan-step-title').innerHTML = "The price for the configurations you selected is shown in the bars to the right. <br>Contact us to adapt these designs more closely to your space or get more information.</span>";

	document.getElementById("price-wall-1").innerHTML = "$" + newSet.elevation_1_Price;
	document.getElementById("price-wall-2").innerHTML = "$" + newSet.elevation_2_Price;

	document.getElementById('save-to-portfolio').style.visibility = "visible";
	document.getElementById('total-price').style.visibility = "visible";
	document.getElementById('contact-us').style.visibility = "visible";
	document.getElementById('total-price-label').innerHTML = "$" + totalPrice;



	document.getElementById('zoom-image-1').innerHTML = "<img src='" + filepath + zoomImage1 + "'>";
	document.getElementById('zoom-image-2').innerHTML = "<img src='" + filepath + zoomImage2 + "'>";
	document.getElementById('zoom-1-price').innerHTML = "" + newSet.elevation_1_Price;
	document.getElementById('zoom-2-price').innerHTML = "" + newSet.elevation_2_Price;

	document.getElementById('zoom-1-elevation-name').innerHTML = newSet.elevation_1_Name;
	document.getElementById('zoom-2-elevation-name').innerHTML = newSet.elevation_2_Name;


	document.getElementById('zoom-1-wall-notes').innerHTML = newSet.elevation_1_Notes;
	document.getElementById('zoom-2-wall-notes').innerHTML = newSet.elevation_2_Notes;


	var selectedElevationNameList = "";
	var selectedElevationList = "";

		for(i=1;i<=numWalls;i++) {

			var elevationID = eval("newSet.elevation_" + i + "_ID");

			if(i<numWalls){
				selectedElevationList += elevationID + "&id[]=";
				selectedElevationNameList += "Wall " + eval("newSet.elevation_" + i + "_Name") + " and ";


			}
			else {
				selectedElevationList += elevationID;
				selectedElevationNameList += "Wall " + eval("newSet.elevation_" + i + "_Name");

				}

			var zoomSaveID = "zoom-" + i + "-save-link";
			document.getElementById(zoomSaveID).href = "customer-portfolio.php?action=save&id[]=" + elevationID;

			}
	document.getElementById('save-to-portfolio').href = "customer-portfolio.php?action=save&id[]=" + selectedElevationList;
	document.getElementById('quote-form-elevation-list').innerHTML = selectedElevationNameList;
	document.getElementById('selected-elevations').innerHTML = "<input type=hidden name='input6'  value='" + selectedElevationNameList + "'>";

}


objWall_1 = new objWall(99,0);
objWall_2 = new objWall(99,0);
objWall_3 = new objWall(99,0);

var numWalls;
var wallsClickedInto = 0;

var selectedElevationArray = new Array();




// CLICK HANDLER FOR UNLINKED KITCHENS //
/////////////////////////////////////////


/*
tab-wall-1
tab-wall-2
tab-wall-3

tab span.wall-label

tab span.price-label

tab-instruction-image

elevation-name-wall-1
elevation-name-wall-2
elevation-name-wall-3

price-wall-1
price-wall-2
price-wall-3

*/


function clickOn(theLinkID,theElevationID) {

	document.getElementById("tab-instruction-image").style.visibility = "visible";

	var divID = "grid-" + (theLinkID + 1);
	//this is the physical ID of the container DIV for the elevation thumb and title

	var theNewElevation = eval("elevation" + theElevationID);
	//var currentlySelectedElevationSpan = "select" + currentSelection;

	var theSelectedWall = theNewElevation.wallNumber;

	var zoomImage =  theNewElevation.zoomURL;
	var zoomNotes = theNewElevation.notes;


	//if wall number is 1 then check to see if an item Wall 1 has been previously selected
	if(theSelectedWall == 1) {

			theLink = "thumblink" + theElevationID;
			document.getElementById(theLink).style.cursor = "url(images/magnify.cur)";
			document.getElementById(theLink).href = "javascript:lightbox('show','zoom-1');";

			if(objWall_1.elevationID == 99) {
				objWall_1.elevationID = theElevationID;
				objWall_1.spanID = theLinkID;
				wallsClickedInto++;

				}
			else {
				clickOff(objWall_1.spanID,objWall_1.elevationID);
				objWall_1.elevationID = theElevationID;
				objWall_1.spanID = theLinkID;

				}

			for(t=1;t<=numWalls;t++) {

				var theTab = "tab-wall-" + t;
				document.getElementById(theTab).style.visibility = "visible";

				}

			document.getElementById("price-wall-1").innerHTML = "$" + theNewElevation.elevationPrice;
			//document.getElementById("name-wall-1").innerHTML = theNewElevation.elevationName;

			document.getElementById('zoom-image-1').innerHTML = "<img src='" + filepath + zoomImage + "'>";
			document.getElementById('zoom-1-price').innerHTML = theNewElevation.elevationPrice;
			document.getElementById('zoom-1-wall-notes').innerHTML = zoomNotes;
			document.getElementById('zoom-1-elevation-name').innerHTML = theNewElevation.elevationName;
			document.getElementById('zoom-1-save-link').href = "customer-portfolio.php?action=save&id[]=" + theElevationID;



			selectedElevationArray[0] = objWall_1.elevationID;

		}

	//if wall number is 2 then check to see if an item Wall 2 has been previously selected
		if(theSelectedWall == 2) {

			theLink = "thumblink" + theElevationID;
			document.getElementById(theLink).style.cursor = "url(images/magnify.cur)";
			document.getElementById(theLink).href = "javascript:lightbox('show','zoom-2');";

			if(objWall_2.elevationID == 99) {
				objWall_2.elevationID = theElevationID;
				objWall_2.spanID = theLinkID;
				wallsClickedInto++;
				}
			else {
				clickOff(objWall_2.spanID,objWall_2.elevationID);
				objWall_2.elevationID = theElevationID;
				objWall_2.spanID = theLinkID;
				}


			for(t=1;t<=numWalls;t++) {

				var theTab = "tab-wall-" + t;
				document.getElementById(theTab).style.visibility = "visible";

				}

				document.getElementById("price-wall-2").innerHTML = "$" + theNewElevation.elevationPrice;
			//document.getElementById("name-wall-2").innerHTML = theNewElevation.elevationName;
			document.getElementById('zoom-image-2').innerHTML = "<img src='" + filepath + zoomImage + "'>";
			document.getElementById('zoom-2-price').innerHTML = theNewElevation.elevationPrice;
			document.getElementById('zoom-2-wall-notes').innerHTML = zoomNotes;
			document.getElementById('zoom-2-elevation-name').innerHTML = theNewElevation.elevationName;
			document.getElementById('zoom-2-save-link').href = "customer-portfolio.php?action=save&id[]=" + theElevationID;



			selectedElevationArray[1] = objWall_2.elevationID;


			}

	//if wall number is 3 then check to see if an item Wall 3 has been previously selected
	if(theSelectedWall == 3) {

			if(objWall_3.elevationID == 99) {
				objWall_3.elevationID = theElevationID;
				objWall_3.spanID = theLinkID;
				wallsClickedInto++;
				}
			else {
				clickOff(objWall_3.spanID,objWall_3.elevationID);
				objWall_3.elevationID = theElevationID;
				objWall_3.spanID = theLinkID;
				}

			selectedElevationArray[2] = objWall_3.elevationID;

			elevationNameForForm = elevationNameForForm + theNewElevation.elevationName + "<br>";
			hiddenFieldValue = hiddenFieldValue + theNewElevation.elevationName + ", ";

			}


	var theLink = "select" + theLinkID;

	var totalPrice = 0;

	var newHTML = "<b>" + theNewElevation.elevationName + "</b>"; //"<a href='javascript:clickOff(" + theLinkID + "," + theElevationID + ")'>deselect</a>";
	document.getElementById(theLink).innerHTML = newHTML;
	document.getElementById(theLink).style.color = "#6d9e33";

	document.getElementById(divID).style.border = "1px solid #f7941e";





	if(wallsClickedInto == numWalls){

		var a = selectedElevationArray.length - 1;
		var selectedElevationList = "";
		var selectedElevationNameList = "";

		for(i=0;i<=a;i++) {



			var subTotal = eval("elevation" + selectedElevationArray[i] + ".elevationPrice");

			totalPrice = totalPrice + subTotal;

			if(i<a){
				selectedElevationList += selectedElevationArray[i] + "&id[]=";
				selectedElevationNameList += "Wall " + eval("elevation" + selectedElevationArray[i] + ".elevationName") + " and ";
			}
			else {
				selectedElevationList += selectedElevationArray[i];
				selectedElevationNameList += "Wall " + eval("elevation" + selectedElevationArray[i] + ".elevationName");

				}
			}


		document.getElementById('quote-form-elevation-list').innerHTML = selectedElevationNameList;
		document.getElementById('selected-elevations').innerHTML = "<input type=hidden name='input6'  value='" + selectedElevationNameList + "'>";

		document.getElementById('plan-step-title').innerHTML = "The price for the configurations you selected is shown in the bars to the right. <br>Contact us to adapt these designs more closely to your space or get more information.</span>";

		document.getElementById('save-to-portfolio').style.visibility = "visible";
		document.getElementById('total-price').style.visibility = "visible";
		document.getElementById('total-price-label').innerHTML = "$" + totalPrice;
		document.getElementById('contact-us').style.visibility = "visible";

		document.getElementById('save-to-portfolio').href = "customer-portfolio.php?action=save&id[]=" + selectedElevationList;



		}
}

////////////////////////
//CLICK OFF ////////////
////////////////////////

function clickOff(theLinkID,theElevationID) {


	var divID = "grid-" + (theLinkID + 1);
	//this is the physical ID of the container DIV for the elevation thumb and title

	var theNewElevation = eval("elevation" + theElevationID);
	var theLink = "select" + theLinkID;
	var newHTML = "<a href='javascript:clickOn(" + theLinkID + "," + theElevationID + ")'>" + theNewElevation.elevationName + "</a>";
	var theThumbLink = "thumblink" + theElevationID;
	document.getElementById(theLink).innerHTML = newHTML;
	document.getElementById(theThumbLink).href = "javascript:clickOn(" + theLinkID + "," + theElevationID + ")";
	document.getElementById(theThumbLink).style.cursor = "hand";
	document.getElementById(divID).style.border = "1px solid #ffffff";

}


function objLinkedElevation_L(elevation_1_Name,elevation_2_Name,elevation_1_ID,elevation_2_ID,elevation_1_Price,elevation_2_Price,elevation_1_ZoomURL,elevation_2_ZoomURL,elevation_1_Notes,elevation_2_Notes) {
	this.elevation_1_Name = elevation_1_Name;
	this.elevation_2_Name = elevation_2_Name;
	this.elevation_1_ID = elevation_1_ID;
	this.elevation_2_ID = elevation_2_ID;
	this.elevation_1_Price = elevation_1_Price;
	this.elevation_2_Price = elevation_2_Price;
	this.elevation_1_ZoomURL = elevation_1_ZoomURL;
	this.elevation_2_ZoomURL = elevation_2_ZoomURL;
	this.elevation_1_Notes = elevation_1_Notes;
	this.elevation_2_Notes = elevation_2_Notes;

	}



function objLinkedElevation_U(elevation_1_Name,	elevation_2_Name,	elevation_3_Name,	elevation_1_ID,elevation_2_ID,elevation_3_ID,elevation_1_Price,elevation_2_Price,elevation_3_Price,elevation_1_ZoomURL,	elevation_2_ZoomURL,	elevation_3_ZoomURL,	elevation_1_Notes,elevation_2_Notes,elevation_3_Notes)	{
	this.elevation_1_Name = elevation_1_Name;
	this.elevation_2_Name = elevation_2_Name;
	this.elevation_3_Name = elevation_3_Name;
	this.elevation_1_ID = elevation_1_ID;
	this.elevation_2_ID = elevation_2_ID;
	this.elevation_3_ID = elevation_3_ID;
	this.elevation_1_Price = elevation_1_Price;
	this.elevation_2_Price = elevation_2_Price;
	this.elevation_3_Price = elevation_3_Price;
	this.elevation_1_ZoomURL = elevation_1_ZoomURL;
	this.elevation_2_ZoomURL = elevation_2_ZoomURL;
	this.elevation_3_ZoomURL = elevation_3_ZoomURL;
	this.elevation_1_Notes = elevation_1_Notes;
	this.elevation_2_Notes = elevation_2_Notes;
	this.elevation_3_Notes = elevation_3_Notes;

	}


function objElevation(elevationName,elevationID,elevationPrice,wallNumber,zoomURL,notes) {
	this.elevationName=elevationName;
	this.elevationID=elevationID;
	this.elevationPrice=elevationPrice;
	this.wallNumber=wallNumber;
	this.zoomURL = zoomURL;
	this.notes = notes;
	}

function objWall(elevationID,spanID) {
	this.elevationID = elevationID;
	this.spanID = spanID;
	}



function showMe(what) {
	var theElement = what;
	document.getElementById(theElement).style.visibility = "visible";
	document.getElementById(theElement).style.display = "block";

}


function hideMe(what) {

	var theElement = what;


	document.getElementById(theElement).style.display = "none";
	//document.getElementById("cover").style.display = "none";

	}