COSC3325              Program-1A 
                        Dynamic HTML (JavaScript)
		      Input Form and Event Handling		Due: Monday, 3/15/2010
	Task:
	Modify the following HTML document with JavaScript codes so that
	1. each item for sale (4 of them) will have its own quantity
	   text field appear to the right on the same line.
	2. T-Shirt will have, in addition, a Pull-Down menu that shows
	   3 different sizes as options: X-Large, Large, and Medium, 
	   (X-Large:$12, Large:$10, and Medium:$8 now) and
	3. an additional pull-down menu will be included for the users to select a credit
	   card type. so this menu will have the following six options including
		select credit card type
		mastercard
		visa
		discover
		americanexpress
		others
	4. an additional input text box will be included for the users to enter the
	   credit card name when they select the "others" option for the card type.
	5. also two alert messages will be displayed when
	   a. credit card type is not selected when needed, and
	   b. credit card name is not to be entered when it is needed.	
	6. the Text area will show
		sale total (before tax): $10000
		tax:                       $825
		total (after tax):       $10825		
		// (The state must be Texas) //
	////////////////////////////////////////////////////
	// As usual, '<' is replaced by '#'
	#html>	#head>	#title>
	JavaScript: Dynamic HTML with Form Elements and Functions (Event Handlers)
	#/title>
	#Script language="JavaScript">
	#!--	Start of JavaScript code
	function process()
	  {
 	  var items = ["T-shirts", "Baseball Cap", "Football Cap", "Gloves"];
	  var contents = "";
	  var total = 0;
	  with(document.store)	// simplifies property references
	    {
	     if (stateMenu.selectedIndex==0)
		{
		alert ("You Must Select Your State First.\nThank You!!!");
		return;
		}
	     if (item1.checked)
		{ contents += items[0] + "\n";
		  total += parseInt(item1.value)*parseInt(quantity.value);	
		  // price is given in 'value' attribute
		}
	     if (item2.checked)
		{ contents += items[1] + "\n";
		  total += parseInt(item2.value)*parseInt(quantity.value);
		}
	     if (elements[2].checked)	// elements[2] is 'item3'
		{ contents += items[2] + "\n";
		  total += parseInt(elements[2].value)*parseInt(quantity.value);
		}
	     if (elements[3].checked)
		{ contents += items[3] + "\n";
		  total += parseInt(elements[3].value)*parseInt(quantity.value);
		}
	     if (contents == "") 
		{
		  contents = "You did not buy any items";
		  alert (contents);
		}
	     else
		{ contents = "You bought the following items.\n" + contents;
		  contents += "-----------------\n";
		  contents += "Total price without tax: $" + total;
		  contents += "\nThank you very much.\n";
		}
	     elements[8].value = contents;	// to display in text area.
		// same as: result.value = contents;
	    }	// end of 'with'
	  }	// end of function process()
	function showState()
	  {
	    var states = ["TEXAS", "LOUISIANA", "OKLAHOMA", "ARKANSAS"];
	    var select = document.store.stateMenu.selectedIndex;
	    if (select == 0)
	      alert ("You must pick the state you live!!!");
	    else
	      {
		var contents = " Your State is ";
		contents += states[select-1];
		contents += "\n The State has sales tax rate of ";
		contents += document.store.stateMenu.options[select].value;
		contents += "%\n Thank You!!!";
		if ( !window.confirm (contents))
		      alert ("Choose Your State Again!\nThank You!");
	      }
	  }	// end of function showState()
		// end of JavaScript
	//-->
	#/script>
	#/head>	
	#body>	
	#b>	#Center>	#Font color=blue>
	Choose as many as you wish to buy and	#br>
	click SUBMIT Button for purchasing #br>
	or CLEAR to start over. 	#br>
	Thank you.	#br>	#br>
	#/Font>	
	#Form Name=store>
	  T-Shirt
	  #Input Type=checkbox Name=item1 Value=10> #br>
	  Baseball Cap
	  #Input Type=checkbox Name=item2 Value=12> #br>
	  Football Cap
	  #Input Type=checkbox Name=item3 Value=15> #br>
	  Gloves 
	  #input Type=checkbox Name=item4 Value=20> #br> 
	  How many of Each Item?
	  #input Type=Text     Name=quantity Value=1 size=5> #br>
	  #SELECT Name=stateMenu onChange="showState()">
	    #option> Pick Your State
	    #option  Value=8.25> Texas
	    #option  Value=5.0>  Louisiana
	    #option  Value=6.5>  Oklahoma
	    #option  Value=4.0>  Arkansas
	    #/Select>		#br>
	  #Input Type=button   Value="SUBMIT" onClick="process()">
	  #input Type=Reset    Value="CLEAR">	#br>
	  #TextArea Name=result rows=10 cols=60>	  
	  Happy Shopping	#/TextArea>
	  #/Form>	#/center> 	#/b>	
	#/body>		#/html>