/* Everite Door Co. web site supporting JavaScript */

// once document has loaded, we begin
//
window.onload = function() {

  // activate ddajaxtabs (see ajaxtabs/ajaxtabs.js)
  var top_tabs = new ddajaxtabs("windowtabs", "windowdivcontainer");
  top_tabs.setpersist(true);
  top_tabs.setselectedClassTarget("link");
  top_tabs.init();
  
  var btm_tabs = new ddajaxtabs("doortabs", "doordivcontainer");
  btm_tabs.setpersist(true);
  btm_tabs.setselectedClassTarget("link");
  btm_tabs.init();

  // set default DesignCenter structure
  DesignCenter.door_id = defaults.door_id;
  DesignCenter.door_type = defaults.door_type;
  DesignCenter.top_id = defaults.top_id;
  DesignCenter.top_type = defaults.top_type;
  DesignCenter.grade = defaults.grade;
  DesignCenter.single_or_dbl = defaults.single_or_dbl;
  DesignCenter.qty = defaults.qty;
  DesignCenter.no_hardware = defaults.no_hardware;
  DesignCenter.opt_extsprings = defaults.opt_extsprings;
  DesignCenter.opt_stdtorsion = defaults.opt_stdtorsion;
  DesignCenter.opt_insulate = defaults.opt_insulate;
  DesignCenter.opt_lowhead = defaults.opt_lowhead;

  // how many sections using default supplied data?
  DesignCenter.num_sections = computeSections(DesignCenter.high_feet, DesignCenter.high_inches);
  
  // set initial door preview and make visible
  setDoorPreview(false);
  document.getElementById("contentdoorimage_a").className = null;
  
  // place quote form with default DesignCenter door definition
  document.getElementById("quoteform").innerHTML = changeMenu();
    
  // setup key filter
  document.onkeypress = captureKey;
  
  // load images
  preload_images();
}

// filter enter key
//
function captureKey(event) {
  var e = (event ? event.which : window.event.keyCode);
  return (e != 13);
}

// update door settings & preview image on door top/bottom selection
//
function changeOnImageClick(image_set_id, idx) {

  // set door/top images array for selected set
  var image_set = theImageSet(image_set_id);
  
  // set the door/top ID
  var image_name = image_set[idx][0];

  // ref the quote form & the outer DIV container
  var qform = document.dc;
  var qdiv = document.getElementById("quoteform");
  
  switch (image_set_id) {
	
	case "custom":
	case "semi-custom":
	
	  // special top handler when selecting cumberland
	  if (image_name == "Cumberland") {
	  
	    // set door top to custom cumberland settings
	    DesignCenter.top_id = "Cumberland-TOP";
	    DesignCenter.top_type = "wood";
	    
	    // disable door top selection (cumberland top is fixed)
	    document.getElementById("windowtabs").setAttribute("style", "display:none");
	    DesignCenter.cached = document.getElementById("windowdivcontainer").innerHTML;
	    document.getElementById("windowdivcontainer").innerHTML =
	    		"<p>The Cumberland is pictured above is a 3 Section Door. Alternate top options not offered. </p>";
	    
	  // custom top handler when selecting away from cumberland
	  //   (we discover by looking into the near past using the current state 
	  //	of the quote form, which hasn't been updated yet via changeMenu() )
	  } else if (qform["doorName"] && (qform["doorName"].value == "Cumberland")) {
	  
		// set door top to default settings
	    DesignCenter.top_id = defaults.top_id;
	    DesignCenter.top_type = defaults.top_type;
	    
	    // enable door top selection (use cached value)
	    document.getElementById("windowtabs").setAttribute("style", "display:block");
	    document.getElementById("windowdivcontainer").innerHTML = DesignCenter.cached;
	    DesignCenter.cached = null;
	  }
	  
	  // set selected door ID & type
	  DesignCenter.door_id = image_name;
	  DesignCenter.door_type = image_set_id;
	  
	  // door change: reset door image & panel style selection
	  DesignCenter.door_img = null;
	  DesignCenter.inlay_panels = null;
	  
	  break;
   
	default:
	
	  // set selected top ID & type
	  DesignCenter.top_id = image_name;
	  DesignCenter.top_type = image_set_id;
	  
	  // top change: reset top image
	  DesignCenter.top_img = null;
	  
	  break;
  }

  // redraw quote form using updated DesignCenter values
  qdiv.innerHTML = changeMenu();
  
  // update door preview image (false = use full size image; do not scale)
  setDoorPreview(false);
}

// toggle single or double door
//
function singleDouble() {
  var rt_bottom = document.mainDoorBottomRight;
  var rt_top = document.mainDoorTopRight;
  var wide_ft = document.getElementById("span_widefeet");
  
  if (DesignCenter.single_or_dbl == "double_door") {
    DesignCenter.single_or_dbl = "single_door";
	rt_bottom.className = "btm right invisible";
	rt_top.className = "top right invisible";
 	wide_ft.innerHTML = "<select id='wide_feet' name='wide_feet' style='font-size:10px;'>"
						+ "<option value=''>Feet</option>"
 						+ theOptionsList(measure.singleWide, true, null);				
  } else {
    DesignCenter.single_or_dbl = "double_door";
	rt_bottom.className = "btm right";
	rt_top.className = "top right";
 	wide_ft.innerHTML = "<select id='wide_feet' name='wide_feet' style='font-size:10px;'>"
						+ "<option value=''>Feet</option>"
 						+ theOptionsList(measure.doubleWide, true, null);
  }
}

//
//
function changeSections() {
  var feet = document.dc["high_feet"].value;
  var inch = document.dc["high_inches"].value;

  DesignCenter.high_feet = feet.substr(0, (feet.length - 1));
  DesignCenter.high_inches = inch.substr(0, (inch.length - 1));  
  DesignCenter.num_sections = computeSections(DesignCenter.high_feet, DesignCenter.high_inches);

  // update quote form
  document.getElementById("numSections").innerHTML = DesignCenter.num_sections;
  document.dc["sections"].value = DesignCenter.num_sections;
}

//
//
function coatingChanged() {
  var qform = document.dc;
  DesignCenter.grade = qform["paintstain"].value;

  // redraw quote form
  document.getElementById("quoteform").innerHTML = changeMenu();

  // update inlay panel using new default selection (redraw resets this value)
  DesignCenter.inlay_panels = qform["exteriorpanels"].value;
}

//
//
function panelsChanged() {
  DesignCenter.inlay_panels = document.dc["exteriorpanels"].value;
}

//
//
function hardwareSelect() {
  var qform = document.dc;
  if (DesignCenter.no_hardware == false) {
    
    DesignCenter.no_hardware = true;
    DesignCenter.opt_stdtorsion = false;
    DesignCenter.opt_extsprings = false;
    
    qform["stdtorsion"].checked = false;
    qform["extsprings"].checked = false;
    
    qform["stdtorsion"].disabled = true;
    qform["extsprings"].disabled = true;
    
  } else {

    DesignCenter.no_hardware = false;
  
    qform["stdtorsion"].disabled = false;  
    qform["extsprings"].disabled = false;  
  }
}

// Update the quote form to match current DesignCenter settings
//
function changeMenu() {
  var qform = document.dc;
  
  // retain old form selection details (or set default value)
  var paintstain = (qform["paintstain"] ? qform["paintstain"].value : DesignCenter.grade);
  var glassoption = (qform["glassoption"] ? qform["glassoption"].value : DesignCenter.glass);
  var quantity = (qform["quantity"] ? qform["quantity"].value : DesignCenter.qty);
  var wide_feet = (qform["wide_feet"] ? qform["wide_feet"].value : DesignCenter.wide_feet);
  var wide_inches = (qform["wide_inches"] ? qform["wide_inches"].value : DesignCenter.wide_inches);		
  var high_feet = (qform["high_feet"] ? qform["high_feet"].value : DesignCenter.high_feet);
  var high_inches = (qform["high_inches"] ? qform["high_inches"].value : DesignCenter.high_inches);
  var singledouble = (qform["singledouble"] ? (qform["singledouble"][0].checked == 1 ? "single_door" : "double_door") : DesignCenter.single_or_dbl);
  var insulation = (qform["insulation"] && (qform["insulation"].checked == 1) ? true : DesignCenter.opt_insulate);
  var no_hardware = (qform["no_hardware"] && (qform["no_hardware"][0].checked == 1) ? true : DesignCenter.no_hardware);
  var stdtorsion = (qform["stdtorsion"] && (qform["stdtorsion"].checked == 1) ? true : DesignCenter.opt_stdtorsion);
  var extsprings = (qform["extsprings"] && (qform["extsprings"].checked == 1) ? true : DesignCenter.opt_extsprings);
  var low_head_room = (qform["low_head_room"] && (qform["low_head_room"].checked == 1) ? true : DesignCenter.opt_lowhead);
  var instruct = (qform["spec_instr"] ? qform["spec_instr"].value : DesignCenter.spec_instr);

  // context-specific considerations
  var doortoprightClass = DesignCenter.single_or_dbl;
    
  // set current door selection details
  var formContent = "<br /><strong>Type</strong><br />"
  					+ "<p class='none' id='doorType'>" + DesignCenter.door_type + "</p><br />";
  formContent += "<strong>Product Code</strong><br />"
  					+ "<p class='none' id='doorName'>" + DesignCenter.door_id + "</p>"
  					+ "<p class='none' id='topName'>"
  						+ (DesignCenter.top_id == "Cumberland-TOP" ? " &nbsp; " : DesignCenter.top_id)
  					+ "</p><br />";
  formContent += "<input type='hidden' name='topType' value='" + DesignCenter.top_type + "' />";
  formContent += "<input type='hidden' name='topName' value='" + DesignCenter.top_id + "' />";
  formContent += "<input type='hidden' name='doorType' value='" + DesignCenter.door_type + "' />";
  formContent += "<input type='hidden' name='doorName' value='" + DesignCenter.door_id + "' />";
  
  // shared style foo
  var std_style = " width='160' style='width: 160px; font-size:10px;'";
  
  // grade selection
  formContent += "<strong>Grade</strong>";
  formContent += "<select id='paintstain' name='paintstain' onchange='coatingChanged();setDoorPreview(false);'" + std_style + ">";
  for (the_grade in styles_stain) {
	formContent += "<option value='" + the_grade + "'"
				   + (paintstain == the_grade ? " selected" : "") + ">"
				   + styles_stain[the_grade] + "</option>";
  }
  formContent += "</select><br /><br />";
  
  // trim style selection
  if (DesignCenter.door_type == "semi-custom") {
    formContent += "<strong>Styles &amp; Rails</strong>";
  } else {
    formContent += "<strong>Wood Species</strong>";
  }
  formContent += "<select id='stylesrailsstain_01' name='stylesrailsstain_01'" + std_style + ">";
  formContent += theOptionsList(styles_trim, theTrimStyle(paintstain, DesignCenter.door_id), null) + "</select><br /><br />";
  
  // panel style selection
  if (DesignCenter.door_type == "semi-custom") {
    formContent += "<strong>Exterior Panels</strong>";
  } else {
    formContent += "<strong>Inlay/Panels</strong>";
  }
  formContent += "<select id='exteriorpanels' name='exteriorpanels' onchange='panelsChanged();setDoorPreview(false);'" + std_style + ">";
  formContent += theOptionsList(styles_panels, thePanelStyle(paintstain, DesignCenter.door_id), DesignCenter.inlay_panels) + "</select><br /><br />";
  
  // glass style options
  formContent += "<strong>Glass Options</strong><br /><select id='glassoption' name='glassoption'" + std_style + ">";
  if (theTopType(DesignCenter.top_type) == "glass") {
	formContent += theOptionsList(styles_glass, true, glassoption);
  } else {
	formContent += "<option value='Not Applicable'>Not Applicable</option>";
  }
  formContent += "</select><br /><br />";
  
  // door size options
  formContent += "<strong>Door Measurements</strong><br />";
  
  formContent += "<input name='singledouble' type='radio' value='single_door' onclick='singleDouble();'"
  					+ (doortoprightClass == "single_door" ? " checked" : "")
  					+ ">Single (OR)</input>";
  formContent += " <input name='singledouble' type='radio' value='double_door' onclick='singleDouble();'"
    				+ (doortoprightClass == "double_door" ? " checked" : "")
  					+ ">Double Door</input><br /><br />";
  
  formContent += "<div class='fldleft'>Width</div> "
  					+ "<span id='span_widefeet'><select id='wide_feet' name='wide_feet' style='font-size:10px;'>"
  					+ "<option value=''>Feet</option>";
  formContent += theOptionsList((singledouble == "single_door" ? measure.singleWide : measure.doubleWide), true, wide_feet);
  formContent += "</select></span> <select id='wide_inches' name='wide_inches' style='font-size:10px;'>"
  					+ "<option value=''>Inches</option>";
  formContent += theOptionsList(measure.inches, true, wide_inches) + "</select> *<br />";
	  
  formContent += "<div class='fldleft'>Height</div> "
  					+ "<select id='high_feet' name='high_feet' style='font-size:10px;' onchange='changeSections();setDoorPreview(false);'>";
  formContent += "<option value=''>Feet</option>" + theOptionsList(measure.bothHeight, true, high_feet);
  formContent += "</select> <select id='high_inches' name='high_inches' style='font-size:10px;' onchange='changeSections();setDoorPreview(false);'>";
  formContent += "<option value=''>Inches</option>" + theOptionsList(measure.inches, true, high_inches)
			  		+ "</select> *<br /><br />";
		  
  // door sections
  formContent += "<strong>Sections:</strong> <a id='numSections'>" + DesignCenter.num_sections + "</a><br />";
  formContent += "<input type='hidden' name='sections' value='" + DesignCenter.num_sections + "' />";
  
  // sections only? or, w/ hardware option(s)
  formContent += "<input name='no_hardware' type='radio' onclick='hardwareSelect()'"
  						+ (no_hardware ? " checked" : "") + "/> Door Sections Only<br />";
  formContent += "<input name='no_hardware' type='radio' onclick='hardwareSelect()'"
  						+ (no_hardware ? "" : " checked") + "/> Track, Hardware &amp; Springs<br />";
  formContent += "<div class='fldleft'>&nbsp;</div> <input name='stdtorsion' type='checkbox' value='stdtorsion'"
  						+ (stdtorsion ? " checked" : "") + " /> Standard Torsion<br />";
  formContent += "<div class='fldleft'>&nbsp;</div> <input name='extsprings' type='checkbox' value='extsprings'"
  						+ (extsprings ? " checked" : "") + " /> Extension Springs<br /><br />";
  
  // quantity
  formContent += "<strong>Quantity:</strong> <input name='quantity' type='text' size='2' value='" + quantity + "' /><br /><br />";
  
  // other door options
  formContent += "<strong>Options</strong><br />";
  formContent += "<input name='insulation' type='checkbox' value='insulation'"
  						+ (insulation ? " checked" : "") + " /> Insulation<br />";
  formContent += "<input name='low_head_room' type='checkbox' value='low_head_room'"
  						+ (low_head_room ? " checked" : "") + " /> Low Head Room<br /><br />";
  
  // comments & instructions
  formContent += "<strong>Special Instructions</strong><br />"
  						+ "<textarea name='spec_instr' cols='20' rows='6'>"
  						+ (instruct != null ? instruct : "") + "</textarea><br />";
  
  // spec
  formContent += "<a href='productspecs.html' target='_blank'>View Product Details</a><br /><br />";
  
  return formContent;
}

//
//
function submitQuote() {
  var qform = document.dc;
  
  // perform validation checks
  var nopass_check = [];
  var req_flds = [qform.firstname, qform.lastname, qform.email, 
				  qform.phone, qform.wide_feet, qform.wide_inches,
				  qform.high_feet, qform.high_inches];
  
  for (var f = 0; f < req_flds.length; f++) {
	if ((req_flds[f].value == "") || (req_flds[f].value == " ")) {
	  req_flds[f].className = "empty";
	  nopass_check.push(req_flds[f].getAttribute("name"));
	}
  }
  
  var err_out = document.getElementById("contentquote_err");
  err_out.innerHTML = "";
  if (nopass_check.length > 0) {
  
	var out_str = " &nbsp; <b class='empty'>!! Please provide: <ul>";
	for (var f = 0; f < nopass_check.length; f++) {
	
	  out_str = out_str + "<li>";
	  
	  switch (nopass_check[f]) {
		case "wide_feet":	out_str += "Width Measure (Feet)";
							break;
		case "wide_inches":	out_str += "Width Measure (Inches)";
							break;
		case "high_feet":	out_str += "Height Measure (Feet)";
							break;
		case "high_inches":	out_str += "Height Measure (Inches)";
							break;
		case "firstname": 	out_str += "First Name";
							break;
		case "lastname": 	out_str += "Last Name";
							break;
		case "email": 		out_str += "Email";
							break;
		case "phone":		out_str += "Phone";
							break;
		default:			out_str += nopass_check[f];
							break;
	  }
  
	  if (f < (nopass_check.length - 1)) {
		out_str = out_str + ", ";
	  }
	  
	  out_str = out_str + "</li>";
	}
	err_out.innerHTML = out_str + "</b><br />";
  
  } else {
	
	// submit form action
	qform.submit();
  }
}
                                          /*.___________________________.
                                           / Development Notes          |
._________________________________________/_____________________________!_____.

dev.music:
2008-06-26	atman "the lonely road"
			autechre "anvil vapre"
			banco de gaia "last train to lhasa"

dev.tasks:
[ √	]001- make it work
[ √	]002- make it better (use global DesignCenter structure)
[	]003- dynamic load top & door tab menu

dev.bugs:
[ √	]001- submit for quote form breaks after switching door or top spec
[ √	]002- fix MSIE squibbles

               .___________________________.
              / Revision History    v1.0a1 |
.____________/_____________________________!__________________________________. 

marco2008-07-01:
- change special instruction text input width.

marco2008-06-30:
- Cumberland disclaimer text modification

v1.0a1
nnunn2008-06-26:
- feature complete
- fix MSIE and other form bugs
- prep for release

nnunn2008-06-10:
- modify form optionsin changeMenu()
- (cont.) housecleaning

nnunn2008-05-29:
- housecleaning (use global DesignCenter structure as reference instead of DOM)

nnunn2008-03-31:
- snarf away 'enter' key char (so form is not submit
- greatly simplified changeSections()
- coatingChanged(): fix MSIE bug where form would not repopulate properly
- special Cumberland handler: changeOnImageClick()
- remove unneeded functions: changeDoor() and changeTop(); now handled by changeMenu()

nnunn2008-03-29:
- changeMenu():
  * retain glass selection
  * retain panel style selection when door top changes
  * remove excess params: doortoprightClass, quantity, wide_feet, wide_inches,
  	singledouble, insulation, trkhrdspr, low_head_room, paintstain (now derived)
- changeMenuLeft() is now changeMenu()
- expand changeOnImageClick() to support removed function behavior
- remove unneeded functions: change_formLeft(), changeMainImage()
- housecleaning

marco2008-03-27:
- modified right column door options layout sequence

nnunn2008-03-27:
- housecleaning
- add door panel style images to preload_images()
- changeOnImageClick() calls panelsChanged()

nnunn2008-03-26:
- add panelsChanged()

marco2008-03-25:
- commented out the from coatingChanged select list the Prime Regardless option
- removed "Polystyrene" from Insulation description
- changed "Coating" select menu title to "Grade" 
- changed "Overlay/Trim" (cust door select menu title) to "Wood Species"

nnunn2008-03-25:
- add door measurement fields to form validation in submitQuote()

nnunn2008-03-24:
- fix bug#01 (move form element up the DOM tree so it is global to all lower input elements)
- offload common code to 'designcenter-common.js'

nnunn2008-03-22:
- serious housecleaning
- add styles_trim[], theTrimStyle()
- add styles_panels[], thePanelStyle()
- add theOptionsList()

nnunn2008-03-20:
- validation checks in submitQuote()

v1.0d1
nnunn2008-03-18:
- import relevant sources from prior work
- init

*/