var currentPattern = 1;
var currentType = 1;
var currentApplication = 1;
var currentFinish = 1;
var currentSample = "pattern";

function displaySystem(sampleType) { dSystem(sampleType,1); }

function dSystem(sampleType,sNum)
{
	//set the current active sample 
	currentSample = sampleType;
	//Update the image and text accordingly
	cSample(false,sNum);
	// Move to the proper location
	setSystemLocation();

	
	document.getElementById("sContainer").style.visibility = "visible";
	document.getElementById("sT").style.visibility = "visible";
	document.getElementById("sTDesc").style.visibility = "visible";
	document.getElementById("sTControls").style.visibility = "visible";

	var tStyle = document.getElementById("sT").style;

	var t2 = document.getElementById("sT2");
	var t2Style = t2.style;

	if(sampleType == "pattern")
	{
		t2Style.visibility = "visible";
		t2Style.width = "200px";
		t2.innerHTML = "<a href='javascript:dSystem(\"type\",1);'>See it in stone</a> &nbsp; ";

		tStyle.width = "200px";
		tStyle.textAlign = "left";
		tStyle.cssFloat = "left";
	}
	else
	{
		tStyle.textAlign = "center";
		t2.innerHTML = "";
		t2Style.width = "0px";
		tStyle.width = "100%";
	}

}
function hideSystem()
{

	document.getElementById("sContainer").style.visibility = "hidden";
	document.getElementById("sT").style.visibility = "hidden";
	document.getElementById("sT2").style.visibility = "hidden";
	document.getElementById("sTDesc").style.visibility = "hidden";
	document.getElementById("sTControls").style.visibility = "hidden";

}

function setType(num)
{
	currentType = num;	
}

function changeSample(d) { cSample(d,1); }
function cSample(d,num)
{
	var newImageID = num;

	switch (currentSample)
	{
		case "pattern":
			if(d == 'n') { if(currentPattern < 8) newImageID = currentPattern+1; else newImageID = 8; }
			if(d == 'p') { if(currentPattern > 1) newImageID = currentPattern-1; else newImageID = 1; }
			currentPattern=newImageID;
			document.getElementById("sT2").innerHTML = "<a href='javascript:dSystem(\"type\","+newImageID+");'>See it in stone</a> &nbsp; ";
			break;
		case "type":
			if(d == 'n') { if(currentType < 9) newImageID = currentType+1; else newImageID = 9; }
			if(d == 'p') { if(currentType > 1) newImageID = currentType-1; else newImageID = 1; }
			currentType=newImageID;
			break;
		case "application":
			if(d == 'n') { if(currentApplication < 3) newImageID = currentApplication+1; else newImageID = 3; }
			if(d == 'p') { if(currentApplication > 1) newImageID = currentApplication-1; else newImageID = 1; }
			currentApplication=newImageID;
			break;
		case "finish":
			if(d == 'n') { if(currentFinish < 4) newImageID = currentFinish+1; else newImageID = 4; }
			if(d == 'p') { if(currentFinish > 1) newImageID = currentFinish-1; else newImageID = 1; }
			currentFinish=newImageID;
			break;
		default:
			break;
	}
	updateSampleText(newImageID);
	document.getElementById("sImage").src = "images/the_system/lg_" + currentSample + "_" + newImageID + ".jpg";
	return;
}

function updateSampleText(num)
{
	var t = "";
	
	switch(currentSample)
	{
		case "pattern":
			if(num == 1) t = "Rounded mosaic set with 3/8\" mortar joint (1 of 8)";
			else if(num == 2) t = "Rounded mosaic dry set (2 of 8)";
			else if(num == 3) t = "Rounded mosaic set with 3/8\" mortar joint (3 of 8)";
			else if(num == 4) t = "Square and rectangular with 3/8\" mortar joint (4 of 8)";
			else if(num == 5) t = "(5 of 8)";
			else if(num == 6) t = "(6 of 8)";
			else if(num == 7) t = "(7 of 8)";
			else if(num == 8) t = "(8 of 8)";
			break;
		case "type":
			if(num == 1) t = "Options are unlimited, here are 9 examples (1 of 9)";
			else if(num == 2) t = "Options are unlimited, here are 9 examples (2 of 9)";
			else if(num == 3) t = "Options are unlimited, here are 9 examples (3 of 9)";
			else if(num == 4) t = "Options are unlimited, here are 9 examples (4 of 9)";
			else if(num == 5) t = "Options are unlimited, here are 9 examples (5 of 9)";
			else if(num == 6) t = "Options are unlimited, here are 9 examples (6 of 9)";
			else if(num == 7) t = "Options are unlimited, here are 9 examples (7 of 9)";
			else if(num == 8) t = "Options are unlimited, here are 9 examples (8 of 9)";
			else if(num == 9) t = "Options are unlimited, here are 9 examples (9 of 9)";
			break;
		case "application":
			if(num == 1) t = "Hardscapes (1 of 3)";
			else if(num == 2) t = "Exterior (2 of 3)";
			else if(num == 3) t = "Interior (3 of 3)";
			break;
		case "finish":
			if(num == 1) t = "Mortar Joint (1 of 4)";
			else if(num == 2) t = "Dry Set (2 of 4)";
			else if(num == 3) t = "Dry Set (3 of 4)";
			else if(num == 4) t = "Dry Set (4 of 4)";
			break;
		default:
			break;
	}
	document.getElementById("sTDesc").innerHTML = t;
}

function setSystemLocation()
{
	var sLeft = "0px";
	
	switch(currentSample)
	{
		case "pattern":
			sLeft = "5px";
			break;
		case "type":
			sLeft = "246px";
			break;
		case "application":
		case "finish":
			sLeft = "489px";
			break;
		default:
			break;
			
	}
	document.getElementById("sContainer").style.left = sLeft;
}

function setStep(num)
 {
	 var stepNum = num;
	 var tempStepName = null;
	 for (i=1; i<=5; i++)
	 {
		 tempStepName = "step_" + i;
		 document.getElementById(tempStepName).style.fontWeight = "normal"; 
	 }
	 tempStepName = "step_" + stepNum;
	 document.getElementById(tempStepName).style.fontWeight = "bold";
	 document.getElementById("stepimg").src = "images/the_system/" + tempStepName + ".jpg";
	 
	 switch (stepNum)
	 {
		 case 1:
		 	document.getElementById("stepdescription").innerHTML = "Working with you, we define details from the stone type, color range and pattern to the width of mortar joints and edge finish. If you have a photograph of a stonework style or historic work you want to match, we simply scan the photo and replicate the look. We can even control the degree of surface weathering.";
			 return;
		 case 2:
		 	document.getElementById("stepdescription").innerHTML = "We prepare the complete pattern, so that every stone is entirely unique, with no repeating patterns. Then you will receive a complete CAD diagram of the entire project to proof digitally and a sample board to proof the actual stone.";
			 return;
		 case 3:
		 	document.getElementById("stepdescription").innerHTML = "When the design is approved, each stone is shaped and numbered to fit its position in the rendering using high pressure water moving at three times the speed of sound, mixed with sand.";
			 return;
		 case 4:
		 	document.getElementById("stepdescription").innerHTML = "After the raw stone is shaped, it is hand-dressed, using traditional hammer and chisel techniques. It is the perfect blending of technology and the artisan craft. When the stone is set in place, all visible stone edges will already be hand chiseled.";
			 return;
		 case 5:
		 	document.getElementById("stepdescription").innerHTML = "Following multiple quality inspections, the numbered stones are palletized in the order they will be assembled during installation and prepared for shipment.";
			 return;
		default:
			return;
		 
	 }
 }