/////////////////////////
//quote.js
//Written on May 9, 2008 
//Written by Andrew Grant
//fromether@gmail.com
/////////////////////////

//global variables:
var itemNo = 1; //records which field we're drawing
var SIZE = 30; //number of repeating field groups to draw

//functions:
function hidediv(divID) {
  if (document.getElementById) { // DOM3 = IE5, NS6
    //document.getElementById(divID).style.visibility = 'collapse';
    document.getElementById(divID).style.visibility = 'hidden';
    document.getElementById(divID).style.height = '0px';
  } else {
    if (document.layers) { // Netscape 4
      document.hideshow.visibility = 'hidden';
    } else { // IE 4
      document.all.hideshow.style.visibility = 'hidden';
    }
  }
}

function showdiv(divID) {
  if (document.getElementById) { // DOM3 = IE5, NS6
    document.getElementById(divID).style.visibility = 'visible';
    document.getElementById(divID).style.height = 'auto';
  } else {
    if (document.layers) { // Netscape 4
      document.hideshow.visibility = 'visible';
    } else { // IE 4
      document.all.hideshow.style.visibility = 'visible';
    }
  }
} 

function addItem() {
  itemNo++;
  if (itemNo < SIZE+1 ){
    showdiv("it"+ itemNo);
    showdiv("prod"+itemNo);
    includeItem("hid" + itemNo);
  } else {
    alert("Your Order is too big to be processed with this form.\n" +
          "Please call or email us for this large quote." );
  }
}

function removeItem(divNum) {
  hidediv( "it" + divNum );
  hidediv( "prod" + divNum );
  excludeItem( "hid" + divNum );
}

function excludeItem(divID) {
  document.getElementById(divID).value = 'false';
}

function includeItem(divID) {
  document.getElementById(divID).value = 'true';
}

function drawProducts() {
  for ( var i = 1; i < SIZE+1; i++ ){
    document.write(" <div id='it" + i + "' style='visibility: collapse; height: 0px'>");
    document.write("  <br />");
    document.write(" <table id='prod" + i + "' style='visibility:hidden'>");
    document.write("    <tr>");
    document.write("      <td align='right' style='width: 205px; font-weight: bold;'>");
    document.write("        Product Number " + i + "</td>");
    document.write("      <td style='width: 10px'>");
    document.write("      </td>");
    document.write("      <td align='center' colspan='6'>");
    document.write("        <input id='btn_remove" + i + "' type='button' value='Remove This Item' onclick='removeItem(\"" + i + "\")' />");
    document.write("      </td>");
    document.write("    </tr>");
    document.write("    <tr>");
    document.write("      <td align='right' style='width: 205px; font-weight: bold;'>");
    document.write("        Product Location:</td>");
    document.write("      <td style='width: 10px'>");
    document.write("      </td>");
    document.write("      <td align='left' colspan='2'>");
    document.write("        <select id='ddl_loc" + i + "' name='ddl_loc" + i + "' size='1' style='width: 230px'>");
    document.write("          <option selected='selected' value='Basement'>Basement</option>");
    document.write("          <option value='Bathroom #2'>Bathroom #2</option>");
    document.write("          <option value='Bedroom #2'>Bedroom #2</option>");
    document.write("          <option value='Bedroom #3'>Bedroom #3</option>");
    document.write("          <option value='Den'>Den</option>");
    document.write("          <option value='Dining Room'>Dining Room</option>");
    document.write("          <option value='Ensuite'>Ensuite</option>");
    document.write("          <option value='Family Room'>Family Room</option>");
    document.write("          <option value='Front Hallway'>Front Hallway</option>");
    document.write("          <option value='Kitchen'>Kitchen</option>");
    document.write("          <option value='Laundry Room'>Laundry Room</option>");
    document.write("          <option value='Living Room'>Living Room</option>");
    document.write("          <option value='Main Bathroom'>Main Bathroom</option>");
    document.write("          <option value='Master Bedroom'>Master Bedroom</option>");
    document.write("          <option value='Office/Study'>Office/Study</option>");
    document.write("          <option value='Other'>Other</option>");
    document.write("          <option value='Rec-Room'>Rec-Room</option>");
    document.write("          <option value='Side Entrance'>Side Entrance</option>");
    document.write("        </select>");
    document.write("      </td>");
    document.write("    </tr>");
    document.write("    <tr>");
    document.write("      <td align='right' style='width: 205px; font-weight: bold;'>");
    document.write("        Approximate Size:</td>");
    document.write("      <td style='width: 10px'>");
    document.write("      </td>");
    document.write("      <td align='left' colspan='2'>");
    document.write("        <span style='font-size: 0.8em'>Width </span>");
    document.write("        <input id='txt_width" + i + "' type='text' name='txt_size" + i + "' style='font-size: 0.8em;' maxlength='6' size='4' /><span");
    document.write("          style='font-size: 0.8em'> x Height </span>");
    document.write("        <input id='txt_height" + i + "' type='text' name='txt_size" + i + "' style='font-size: 0.8em;' maxlength='6' size='4' /><span");
    document.write("          style='font-size: 0.8em'> (in inches)</span></td>");
    document.write("    </tr>");
    document.write("    <tr>");
    document.write("      <td align='right' style='width: 205px; font-weight: bold;'>");
    document.write("        Style:</td>");
    document.write("      <td style='width: 10px'>");
    document.write("      </td>");
    document.write("      <td align='left' colspan='2'>");
    document.write("        <select id='ddl_style" + i + "' name='ddl_style" + i + "' style='width: 230px'>");
    document.write("          <option selected='selected' value='Casement Window'>Casement Window</option>");
    document.write("          <option value='Awning Window'>Awning Window</option>");
    document.write("          <option value='Double Hung Window'>Double Hung Window</option>");
    document.write("          <option value='Double Sliding Window'>Double Sliding Window</option>");
    document.write("          <option value='Bay Window'>Bay Window</option>");
    document.write("          <option value='Bow Window'>Bow Window</option>");
    document.write("          <option value='Hopper Window'>Hopper Window</option>");
    document.write("          <option value='Fixed Window'>Fixed Window</option>");
    document.write("          <option value='Fixed (Small Profile) Window'>Fixed (Small Profile) Window</option>");
    document.write("          <option value='Patio Door'>Patio Door</option>");
    document.write("          <option value='Tilt & Turn Window/Door'>Tilt &amp; Turn Window/Door</option>");
    document.write("          <option value='Tilt & Glide Patio Door'>Tilt &amp; Glide Patio Door</option>");
    document.write("          <option value='Garden Door'>Garden Door</option>");
    document.write("          <option value='Single Entry Door'>Single Entry Door</option>");
    document.write("          <option value='Single Hung window'>Single Hung window</option>");
    document.write("          <option value='Single Sliding Window'>Single Sliding Window</option>");
    document.write("          <option value='Double Entry Door'>Double Entry Door</option>");
    document.write("          <option value='Sidelites'>Sidelites</option>");
    document.write("          <option value='Transom'>Transom</option>");
    document.write("        </select>");
    document.write("      </td>");
    document.write("    </tr>");
    document.write("    <tr>");
    document.write("      <td align='right' style='width: 205px; font-weight: bold;'>");
    document.write("        Colour:</td>");
    document.write("      <td style='width: 10px'>");
    document.write("      </td>");
    document.write("      <td align='left' colspan='2'>");
    document.write("        <select id='ddl_colour" + i + "' name='ddl_colour" + i + "' style='width: 230px'>");
    document.write("          <option selected='selected' value='White'>White</option>");
    document.write("          <option value='Sandalwood'>Sandalwood</option>");
    document.write("          <option value='Prestige Beige'>Prestige Beige</option>");
    document.write("          <option value='Ivory'>Ivory</option>");
    document.write("          <option value='Pearl Grey'>Pearl Grey</option>");
    document.write("          <option value='Slate Grey'>Slate Grey</option>");
    document.write("          <option value='Matchcoat Linen'>Matchcoat Linen</option>");
    document.write("          <option value='Matchcoat Beige'>Matchcoat Beige</option>");
    document.write("          <option value='Mocha'>Mocha</option>");
    document.write("          <option value='Ivy Green'>Ivy Green</option>");
    document.write("          <option value='Mist Blue'>Mist Blue</option>");
    document.write("          <option value='Chocolate Brown'>Chocolate Brown</option>");
    document.write("          <option value='Matchcoat Flagstone'>Matchcoat Flagstone</option>");
    document.write("          <option value='Matchcoat'>Matchcoat</option>");
    document.write("          <option value='Charcoal Grey'>Charcoal Grey</option>");
    document.write("          <option value='Commercial Brown'>Commercial Brown</option>");
    document.write("          <option value='Custom'>Custom: Please Specify</option>");
    document.write("        </select>");
    document.write("      </td>");
    document.write("    </tr>");
    document.write("    <tr>");
    document.write("      <td align='right' style='font-weight: bold; width: 205px'>");
    document.write("        Glass Options:</td>");
    document.write("      <td style='width: 10px'>");
    document.write("      </td>");
    document.write("      <td align='left' colspan='2'>");
    document.write("        <input id='nogrill" + i + "' name='rad_glass" + i + "' type='radio' checked='checked' onclick='javascript:hidediv(\"row" + i + "\")' />");
    document.write("        No Grill");
    document.write("        <br />");
    document.write("        <input id='withgrill" + i + "' name='rad_glass" + i + "' type='radio' onclick='javascript:showdiv(\"row" + i + "\")' />");
    document.write("        With Grill</td>");
    document.write("    </tr>");
    document.write("    <tr style='visibility: collapse' id='row" + i + "'>");
    document.write("      <td align='right' style='width: 205px; font-weight: bold;'>");
    document.write("      </td>");
    document.write("      <td style='width: 10px'>");
    document.write("      </td>");
    document.write("      <td align='right' style='width: 105px'>");
    document.write("        Grill Patterns:");
    document.write("          <br />");
    document.write("          Grill Types:");
    document.write("      </td>");
    document.write("      <td align='left'>");
    document.write("        <select id='ddl_gPattern" + i + "' name='ddl_gPattern" + i + "' size='1' style='width: 120px'>");
    document.write("          <option selected='selected' value='Prairie Style'>Prairie Style</option>");
    document.write("          <option value='Colonial'>Colonial</option>");
    document.write("          <option value='Angled Prairie'>Angled Prairie</option>");
    document.write("          <option value='Custom Pattern'>Custom Pattern</option>");
    document.write("        </select>");
    document.write("        <br />");
    document.write("        <select id='ddl_gType" + i + "' name='ddl_gType" + i + "' size='1' style='width: 120px'>");
    document.write("          <option selected='selected' value='Pewter Pencil'>Pewter Pencil</option>");
    document.write("          <option value='Brass Pencil'>Brass Pencil</option>");
    document.write("          <option value='White Pencil'>White Pencil</option>");
    document.write("          <option value='Colonial'>Colonial</option>");
    document.write("          <option value='Georgian'>Georgian</option>");
    document.write("          <option value='Surface Mounted'>Surface Mounted</option>");
    document.write("          <option value='Other'>Other</option>");
    document.write("        </select>");
    document.write("      </td>");
    document.write("    </tr>");
    document.write("    <tr>");
    document.write("      <td align='right' colspan='4'>");
    document.write("        <span style='font-size: 0.8em'><em>(Low-e and argon gas are standard on all our windows)</em></span></td>");
    document.write("    </tr>");
    document.write("    <tr>");
    document.write("      <td align='right' style='width: 205px; font-weight: bold;'>");
    document.write("        Comments:</td>");
    document.write("      <td style='width: 10px'>");
    document.write("      </td>");
    document.write("      <td align='left' colspan='2'>");
    document.write("        <textarea id='ta_comments" + i + "' name='ta_comments" + i + "' style='width: 225px' rows='2' cols='20' ></textarea></td>");
    document.write("    </tr>");
    document.write("  </table>");
    document.write("  <input id='hid" + i + "' type='hidden' name='hid' value='false' />");
    document.write("  <br />");
    document.write("  </div>");
  }
  showdiv("it1");
  showdiv("prod1");
  includeItem("hid1");
}

function submitQuote() {
	var errors = validate();
	if( errors == "" ) {//page was valid
		email = document.getElementById("txt_email").value;
		prepareEmail("fromether@gmail.com", email, "Quote Requested", formatDetails() );
		document.quote_form.submit();
	} else { //page is not valid. Relay errors to the user.
		alert("The following errors were encountered: \n" + errors); //this is temporary
	}	
	
}

function validate() {
	var errors = "";
	var primer = true;
	var isValid = false;
  	var mandatoryFields= ["txt_name", "txt_city",  "txt_tele", "txt_email", "txt_heard"];
	var i;
	var errorStyle = "WIDTH:210px; BORDER-RIGHT:red thin solid; BORDER-TOP:red thin solid; BORDER-LEFT:red thin solid; BORDER-BOTTOM:red thin solid";
	var origStyle  = "WIDTH:210px;";
	var elemID = "";
	var element = "";
	
	//check for mandatory fields
	for ( i = 0; i < mandatoryFields.length; i++ ) {
    	if (isValid || primer ) { //if it has not been set to false already 
		//(do not set to true if error was encountered earlier)
			primer = false;
			isValid = !showEmpty(mandatoryFields[i], origStyle, errorStyle ); //it IS valid if it's NOT empty
		} else {
			showEmpty(mandatoryFields[i], origStyle, errorStyle ); //just show which fields are invalid, dont record it.
		}
	}
	if (!isValid) {
		errors += "  - Please fill in all mandatory fields\n";
	}

	//check postal field for presence, then validity if its present.
	elemID = "txt_postal";
	element = document.getElementById(elemID);
	if( !isEmpty(elemID) ) {
		if( !checkPostal(elemID) ) {
			errors += "  - Please delete or enter a valid Postal or Zip Code\n";
			element.setAttribute("style", errorStyle );
		} else {
			element.setAttribute("style", origStyle );
		}
	}

	//check telephone field for validity
	elemID = "txt_tele";
	element = document.getElementById(elemID);
	if( !checkTelephone(elemID) ) {
		errors += "  - Please enter a valid 10-Digit Telephone Number\n";
		element.setAttribute("style", errorStyle );
	} else {
		element.setAttribute("style", origStyle );
	}
		
	//check email field for validity
	elemID = "txt_email";
	element = document.getElementById(elemID);
	if( !checkEmail(elemID) ) {
		errors += "  - Please enter a valid Email Address\n";
		element.setAttribute("style", errorStyle );
	} else {
		element.setAttribute("style", origStyle );
	}
		
	//check postal field for presence, then validity if its present.
	elemID = "txt_teleAlt";
	element = document.getElementById(elemID);
	if( !isEmpty(elemID) ) {
		if( !checkTelephone(elemID) ) {
			errors += "  - Please delete or enter a valid Alternate Telephone Number\n";
			element.setAttribute("style", errorStyle );
		} else {
			element.setAttribute("style", origStyle );
		}
	}
	return errors;//return error string. check for length on the other end
}

function formatDetails() {
	var Details =  "Quote Requested\n" + getOrderType();
	Details	+= getProducts() + "\n";
	Details	+= getInfo();
	return Details;
}

function prepareEmail( to, from, subject, bodyContent) {
	var message =  bodyContent ;
//	alert( message );
	document.getElementById("content").value = message;
}

function getOrderType() {
	type = "Order Type: \t";
	if( document.getElementById("rad_supply").checked ) {
		type += "Supply Only\n\n";
	} else {
		type += "Supply With Installation: ";
		index = document.getElementById("inst").selectedIndex;
		type += document.getElementById("inst")[index].value + "\n";
	}
	return type;
}

function getProducts() {
	var amt = itemNo; //the number of 'created' products
	var i;
	var count=0;//actual count of products (amt - 'deleted' items)
	var products = "";
		
	for (i = 1; i < amt + 1; i++ ) {
		if( document.getElementById("hid" + i).value == "true" ) { //if the product is 'kept'
			count++;
			
			products += "Product #" + count + ": \n";
			products += "Location:\t";
			index = document.getElementById( "ddl_loc" + i ).selectedIndex;
			products += document.getElementById( "ddl_loc" + i )[index].value + "\n";

			//width & height
			products += document.getElementById( "txt_width" + i ).value + "\"w x "
			products += document.getElementById( "txt_height" + i ).value + "\"h\n"
			
			//style
			products += "Style:\t";
			index = document.getElementById( "ddl_style" + i ).selectedIndex;
			products += document.getElementById( "ddl_style" + i )[index].value + "\n";
			
			//colour
			products += "Colour:\t";
			index = document.getElementById( "ddl_colour" + i ).selectedIndex;
			products += document.getElementById( "ddl_colour" + i )[index].value + "\n";
			
			//glass options
			products += "Glass Options:\t";			
			if( document.getElementById("nogrill" + i).checked ) {
				products += "No Grill\n";
			} else {
				//the two glass drop downs
				type += "With Grill\n";
				products += "\tPattern:\t";
				index = document.getElementById( "ddl_gPattern" + i ).selectedIndex;
				products += document.getElementById( "ddl_gPattern" + i )[index].value + "\n";
				products += "\tType:\t";
				index = document.getElementById( "ddl_gType" + i ).selectedIndex;
				products += document.getElementById( "ddl_gType" + i )[index].value + "\n";
			}
			products += "Comments:\n";
			products += document.getElementById( "ta_comments" + i ).value + "\n\n";
		}
	}
	return products;
}

function getInfo() {
	var info ="Quote Requested By:\n";
	info += document.getElementById( "txt_name" ).value + "\n";
	info += document.getElementById( "txt_addr" ).value + "\n";
	info += document.getElementById( "txt_city" ).value + "\n";
	info += document.getElementById( "txt_postal" ).value + "\n\n";
	info += "Phone:\t";
	info += document.getElementById( "txt_tele" ).value + "\n";
	info += "Alternate Phone:\t";
	info += document.getElementById( "txt_teleAlt" ).value + "\n";
	info += "Email:\t";
	info += document.getElementById( "txt_email" ).value + "\n";
	info += "How did you hear about us?\t";
	info += document.getElementById( "txt_heard" ).value + "\n";
	return info;
}

function startOver() {
	window.location = document.location.href;
}