//v1.7
function swatchOn(theDiv) {

// alert("This is currently in " + myDivStyle + " style.");
if (document.getElementById('myOiledTan').className == "swatchHover") {
document.getElementById('myOiledTan').className = "swatch";
}
if (document.getElementById('myBlack').className == "swatchHover") {
document.getElementById('myBlack').className = "swatch";
}
document.getElementById(theDiv).className = "swatchHover";
}

function swatch2On(theDiv) {
if (document.getElementById('myStand').className == "swatchHover") {
document.getElementById('myStand').className = "swatch";
}
if (document.getElementById('myDec').className == "swatchHover") {
document.getElementById('myDec').className = "swatch";
}
if (document.getElementById('myBasket').className == "swatchHover") {
document.getElementById('myBasket').className = "swatch";
}
document.getElementById(theDiv).className = "swatchHover";
}
//
function clearMe(theField,myDefault) {
var myId = theField.id;
	if(document.getElementById(myId).value==myDefault) {
	document.getElementById(myId).value="";
	}
}

function ChooseFastening() {
var thisChoice = document.getElementById('beltwidth').value;
var i = 0;
//alert ('We are setting up fastening options for belt widths of ' + thisChoice );
document.forms['beltform'].fastening.options[i] = new Option('Select ...','none');
i = i+1;
if (thisChoice > 1) {
document.forms['beltform'].fastening.options[i] = new Option('Black Buckle','Blk');
i = i+1;
} 
document.forms['beltform'].fastening.options[i] = new Option('Brass Buckle','Brs');
i = i+1;
document.forms['beltform'].fastening.options[i] = new Option('Nickel Buckle','Nkl');
i = i+1;
document.forms['beltform'].fastening.options[i] = null;
}
function swatchOff(theDiv,thevalue) {
currentStyle = document.getElementById('style').value;
currentFinish = document.getElementById('finish').value;
	if ((thevalue==currentStyle) || (thevalue==currentFinish)) {
	document.getElementById(theDiv).className = "swatchOn";
	} else {
	document.getElementById(theDiv).className = "swatch";
	}
}

function SelectStyle(theDiv,myStyle) {
document.getElementById('style').value = myStyle;
document.getElementById('myOiledTan').className = "swatch";
document.getElementById('myOiledTanText').className = "swatch";
document.getElementById('myBlack').className = "swatch";
document.getElementById('myBlackText').className = "swatch";
document.getElementById(theDiv).className = "swatchOn";
// document.getElementById(theDiv + "Text").className = "swatchOn";
Message = "You have chosen a " + myStyle + " belt.";
window.status = Message;
}
function SelectFinish(theDiv,thevalue) {
setWidths(thevalue);
document.getElementById('finish').value = thevalue;
document.getElementById('myStand').className = "swatch";
document.getElementById('myStandText').className = "swatch";
document.getElementById('myDec').className = "swatch";
document.getElementById('myDecText').className = "swatch";
document.getElementById('myBasket').className = "swatch";
document.getElementById('myBasketText').className = "swatch";
document.getElementById(theDiv).className = "swatchOn";
// document.getElementById(theDiv + "Text").className = "swatchOn";
Message = "You have chosen a " + thevalue + " belt.";
showstep(1,'no');
ChooseLining()
}


function setWidths(theValue) {
if (theValue != "Standard") {
widthDiv = "Please choose a width from the list below.<br/>";
widthDiv = widthDiv + "Only widths appropriate to your style are available:<br/>"
widthDiv = widthDiv + '	<select name="beltwidth" id="beltwidth" class="select" onChange="showstep(2);ChooseFastening();">';
widthDiv = widthDiv + "<option>Select ...</option>\n";
widthDiv = widthDiv + '<option value="1.25">1.25" (3.1cm)</option>';
widthDiv = widthDiv + '<option value="1.5">1.5" (3.7cm)</option>';
widthDiv = widthDiv + '<option value="1.75">1.75" (4.3cm)</option>';
widthDiv = widthDiv + '<option value="2">2" (5.0cm)</option></select>';
} else {
widthDiv = "Please choose a width from the list below.<br/>";
widthDiv = widthDiv + "Only widths appropriate to your style are available:<br/>"
widthDiv = widthDiv + '	<select name="beltwidth" id="beltwidth" class="select" onChange="showstep(2);ChooseFastening();">';
widthDiv = widthDiv + "<option>Select ...</option>\n";
widthDiv = widthDiv + '<option value="1">1" (2.5cm)</option>';
widthDiv = widthDiv + '<option value="1.25">1.25" (3.1cm)</option>';
widthDiv = widthDiv + '<option value="1.5">1.5" (3.7cm)</option>';
widthDiv = widthDiv + '<option value="1.75">1.75" (4.3cm)</option>';
widthDiv = widthDiv + '<option value="2">2" (5.0cm)</option></select>';
}
document.getElementById('chooseWidth').innerHTML = widthDiv;

}



function showstep(stepdone,decOn) {
var newstep = stepdone + 1;
var nextdiv = "step" + newstep;
//alert('We want to see step ' + newstep + " which is div: " + nextdiv);
document.getElementById(nextdiv).className = "showingdiv";
// do we need to show step 5?
if (decOn == "Decorative" && nextdiv == "step4") {
document.getElementById('step5').className = "showingdiv";
}

}

function ChooseLining() {
var choice = document.getElementById('finish').value;
var myChoice = choice + "_lining";

if (choice == "Decorative") {
var divcode = '	<img src="https://s3-eu-west-1.amazonaws.com/pwluk.com/template/belts-step4b.gif" alt="Step 4 - Select Lining"/>';
divcode = divcode + '<div class="innerstep" id="LiningChoice">';
divcode = divcode + 'Belts with Decorative Stitching are all suede-lined.<br/>';
divcode = divcode + "<input type='hidden' name='lining' value='suede'>";
divcode = divcode + "Please choose the colour of decorative stitching from the list below.<br/>";
divcode = divcode + "<select name='stitching' id='stitching' class='select' onChange='showstep(4);'>";
divcode = divcode + "<option value='tbd'>Select ...</option>";	
divcode = divcode + "<option value='white'>White Stitching</option>";	
divcode = divcode + "<option value='white'>Brown Stitching</option>";	
divcode = divcode + "<option value='black'>Black Stitching</option></select></div>";
} else {
var divcode = '	<img src="https://s3-eu-west-1.amazonaws.com/pwluk.com/template/belts-step4.gif" alt="Step 4 - Select Lining"/>';
divcode = divcode + '<div class="innerstep" id="LiningChoice">';
divcode = divcode + "<input type='hidden' name='stitching' value='n/a'>";
divcode = divcode + 'Please choose a lining option from  the list below.<br/>';
divcode = divcode + '<br/><select name="lining" id="lining" class="select" onChange="showstep(4);">';
divcode = divcode + '<option value="tbd">Select ...</option><option value="suede">Suede Lined</option>';
divcode = divcode + '<option value="unlined">Unlined</option>';
divcode = divcode + '</select>';
divcode = divcode + '</div>';
}
//
document.getElementById('step4').innerHTML = divcode;
}