   /********
   * calcTotals.js
   * Joel Richards joelr@j-3media.com
   * As user selects product options and add ons will re-calculate the product price and
   * display the updated price on the screen
   *
   *********/

   var total = 0;
   var resultsDiv = "putOrderTotals";//the name of the div to write the new total to
   var outputDiv = "";
   var container = "orderbox";// the name of the div containing the order box
   var rootDiv = "";
   var optionFieldRoot = "Option";// the root of the options form field
   var addOnFieldRoot = "Addon"; //the root for the add on field
   var qtyFieldName = "Quantity"; // the name of the form field which holds the quantity
   var prodPriceFieldRoot = "prodPrice";// the root of the hidden form field which contains the price
   var qty = 0;
   
   function init() {
     // will initiialize global variables needed by this script
      if(!document.getElementById) return;
	  
	   getQty(); //get the current quantity
	   getProductPrice();//will initialize total to the current product price
	   outputDiv = document.getElementById(resultsDiv);// write the new total to this div
	   
	   rootDiv = document.getElementById(container);
	   
   }
   
   function calcTotals() {
	 
      if(!document.getElementById ||
	     !document.getElementsByTagName) return;
	   init();//initialize global variables
	   
	   var txtNode = "";
	   
	   //calculate additional cost for options
	   var subtotal = calOptionTotals();
	   total  += subtotal;
	   //calculate additional cost for addons 
	   subtotal = calcAddOnTotals();
	   total += subtotal;
	   total = total * qty;
	   //write the new total to the screen
	   txtNode = document.createTextNode("$" + total);
	     if (!outputDiv.hasChildNodes()) {
	      outputDiv.appendChild(txtNode);
		 } else { 
		   outputDiv.replaceChild(txtNode,outputDiv.firstChild);
		 }
		 
   }//eof

   
   function calOptionTotals() {
    // will recalculate totals based upon priced options
    if(!document.getElementById ||
	     !document.getElementsByTagName) return;
	   
	   
	   var re = "";
	   var subtotal = 0;
	   var amtToAdd = 0;
	   var formFieldValue = "";
	   
      // get all form fields contained within the div 'orderBox'
	   
	   var formFields = rootDiv.getElementsByTagName('select');
		
	 //loop through formFields and get all fields that begin with Option
       re = new RegExp(optionFieldRoot + "\[0-9]");
	   for ( var i=0; i < formFields.length; i++ ) {
	    if(formFields[i].name.match(re) &&
		   formFields[i].options.selectedIndex ) {
		 //get the value of to add to the total
		 // the value of a selected option will look like this:
		 //Har-Blasy^3^0^NA^35^1
		 // the second item in the list is what we want to get. This is the amount to add to the total
		 formFieldValue = formFields[i].options[formFields[i].selectedIndex].value;
		 formFieldValue = formFieldValue.split("^");
		 amtToAdd = parseInt(formFieldValue[1]);
		 
		 subtotal += amtToAdd;
		// alert( formFields[i].name + " " + formFields[i].name.match(re));  
		 //alert(formFields[i].options[formFields[i].selectedIndex].value);
		 
		 }//if(formFields[i].name.match(re) &&
	   }//for ( var i=0; i < formFields.length; i++ )
	   return subtotal;
   }//eof
   
   function calcAddOnTotals() {
     /****
	 * will add addon costs to the total cost of a product.
	 * looks for fields with the name addon#int#
	 * checks to see what type of field it is and if it is either checked, or has value
	 * parses the field price_Addonextra#int#"  to find out 
	 * 1. if the addon price should be multiplied by quantity and
	 * 2. the add on price.
	 * the field's value will be thus:  value="0^50", with the first number being a boolean, and the second the amt(which could be a  
	 *	float)to add to the total
	 ****/
	 if(!document.getElementById ||
	     !document.getElementsByTagName) return;
		 
	   var formFields = rootDiv.getElementsByTagName('input');
	   var subt = 0;
	   var re = new RegExp(addOnFieldRoot + "\[0-9]");
	   var reAddonExtra = new RegExp("[0-9]");
	   
	   // loop through fields looking for addon#Int#
	   for (var i = 0; i < formFields.length; i++) {
	   //if addon is found, test to see if it is either checked, or, if a text field, has value, 
	    if( formFields[i].name.match(re) ) {
		  //get the last digit from addon
		  var addonDigit = formFields[i].name.match(reAddonExtra);
		  //use that digit to get  price_Addonextra associated with this field
		  var theFormField = "price_Addonextra" + addonDigit;
		  
		  //check to see if this is check box or radio button and then check to see if it is checked or
		  // if a text field has a 
		  if( ( formFields[i].getAttribute("type") == "radio" ||
		      formFields[i].getAttribute("type") == "checkbox"  &&
			  formFields[i].checked ) ||
			  ( formFields[i].getAttribute("type") == "text" &&
			   formFields[i].value.length) ) {
			  
			returnAmt = getAddonValues(theFormField);
			subt += returnAmt;
			
		  } // if( formFields[i].getAttribute("type") == "radio" ||
		 }//for (var i = 0; i < formFields.length; i++) 
		}//formFields[i].name.match(re)
	    
		//now get all textarea addons
		var textAreaFormField = rootDiv.getElementsByTagName('textarea');
		if(textAreaFormField.length) {
		 for (i=0; i < textAreaFormField.length; i++) {
		    //check to see if textarea has childnoded
			//alert(textAreaFormField[i].value.length);
			if (textAreaFormField[i].value.length) {
				// if it does, then grab the price from the price_Addonextra field
				addonDigit = textAreaFormField[i].name.match(reAddonExtra);
			    //use that digit to get  price_Addonextra associated with this field
			    theFormField = "price_Addonextra" + addonDigit;
				
				returnAmt = getAddonValues(theFormField);
				subt += returnAmt;
			}
			
		 }//i=0; i < textAreaFormField.length; i+
		}//if(textAreaFormField.length)
	   return subt;
   }//eof
   
   function getAddonValues(formField) {
    var theFormField = formField;
	var amt = 0;
	  if( document.getElementById(theFormField) ) {
	  
		     var theFieldToSplit = document.getElementById(theFormField).value
			 var formFieldSplit = theFieldToSplit.split("^"); 
			 
			 //split the value of price_Addonextra into two fields the first field is the addon multiplier, the second
		     //is the amount to add to the total
		    // if the the addon multiplier is 1, then set the addon price to the addon amt X qty
		    var addonAmt =  parseFloat(formFieldSplit[1]);
			//alert(theFieldToSplit);
			//alert (addonAmt);
		   if ( formFieldSplit[0] == 1 )
		      amt +=  ( qty * addonAmt );  
		   else //otherwise, just add the amount to the subtotal
		     amt += addonAmt;
		   //( formFieldSplit[0] == 1 )
		   
	   }//if( document.getElementById(theFormField) )  
	     
     return amt;
   }//eof
   
   function getQty() {
    //will get the quantity field
	if(!document.getElementById) return;
	var qtyField = document.getElementById(qtyFieldName);
	qty =  qtyField.value;
	 
	return qty;
   }//eof
   
   function getProductPrice() {
   //will get the product price from a hidden field
   // the field's name has the following format:prodPrice#int#
   //where int is the product id
	   if(!document.getElementById) return;
	   
		   var prodPrice = 0;
		   var re = new RegExp(prodPriceFieldRoot +"\[0-9]");
		   var formFields = rootDiv.getElementsByTagName('input');
		   
		   for (var i = 0; i < formFields.length; i++) {
			    if ( formFields[i].name.match(re) ) {
				    total =  parseInt(formFields[i].value);
				}
	        }//for (var i = 0; i < formFields.length; i++)
	   
   }//eof
   
   function attachListeners() {
	    //will attach events to all form fields within a specified div
		
		if(!document.getElementById ||
		     !document.getElementsByTagName) return;
		 
		var theEvent = "change";
		rootDiv = document.getElementById( container );
		
		//loop through all input fields and attach an event listener
		var theFormElm = rootDiv.getElementsByTagName('input');
		for ( var i = 0; i < theFormElm.length; i++) {
		   if( theFormElm[i].getAttribute("type") == "text" ||
		       theFormElm[i].getAttribute("type") == "radio" ||
			   theFormElm[i].getAttribute("type") == "checkbox" )
			   addEvent(theFormElm[i],theEvent,calcTotals,false);
			   
		}//for ( var i = 0; i < theFormElm.length; i++)
		
		//attach listeners to select boxes
		theFormElm = rootDiv.getElementsByTagName('select');
		for (  i = 0; i < theFormElm.length; i++) {
		  addEvent(theFormElm[i],theEvent,calcTotals,false);
		}
		
		//attach listeners to textareas
		theFormElm = rootDiv.getElementsByTagName('textarea');
		for (  i = 0; i < theFormElm.length; i++) {
		  addEvent(theFormElm[i],theEvent,calcTotals,false);
		}
   }//eof
  
   addEvent(window,'load',attachListeners,false);