// JavaScript Document
function AddMore(){
	
	var order = document.getElementById('order_form_content');
	//alert(order.innerHTML);
	
	var oldContent = order.innerHTML;
	var newContent = new Array();
	var oldValue = new Array();
	var currentRow = parseInt(document.getElementById('totalrow').value);
	
	var PriorityOption = new Array('1', '2','3','4','5','6','7','8','9','10');
	var PriorityValue = new Array('1', '2','3','4','5','6','7','8','9','10');
	// Increase currentRow
	currentRow++;
	//alert(currentRow);
	
	//Use loop to rewrite current content/ pushing everything in the newContent Array
	//Push in total row first
	newContent.push('<input type="hidden" id="totalrow" name="totalrow" value="'+currentRow+'" />');
	
	//Push the table tag and title 
	newContent.push('<table border="0" cellspacing="0" cellpadding="0">');
    newContent.push('<tr>');
    newContent.push('<td style="padding-bottom:5px;">Date</td>');
    newContent.push('<td style="padding-left:15px;padding-bottom:5px;">Race</td>');
    newContent.push('<td style="padding-left:15px;padding-bottom:5px;">Priority</td>');
    newContent.push('</tr>');
	
	//Loop by currentRow to add the new row
	for(var r=1;r<=currentRow;r++){
		newContent.push('<tr>');
		newContent.push('<td style="padding-bottom:5px;"><input class="textinput" name="Date'+r+'" type="text" id="Date'+r+'" style="width:70px;" align="left" ></td>');
		newContent.push('<td style="padding-left:15px; padding-bottom:5px;"><input class="textinput" name="Race'+r+'" type="text" id="Race'+r+'" style="width:280px;" align="left" ></td>');
		newContent.push('<td style="padding-left:15px; padding-bottom:5px;"><select name="Priority'+r+'" id="Priority'+r+'" class="input" style="width: 60px">');

		// This option value can change when required just add more line after this one if required
		newContent.push('<OPTION VALUE="" selected="selected"></OPTION>');
		newContent.push('<OPTION VALUE="1">1</OPTION>');
		newContent.push('<OPTION VALUE="2">2</OPTION>');
		newContent.push('<OPTION VALUE="3">3</OPTION>');
		newContent.push('<OPTION VALUE="4">4</OPTION>');
		newContent.push('<OPTION VALUE="5">5</OPTION>');
		newContent.push('<OPTION VALUE="6">6</OPTION>');
		newContent.push('<OPTION VALUE="7">7</OPTION>');
		newContent.push('<OPTION VALUE="8">8</OPTION>');
		newContent.push('<OPTION VALUE="9">9</OPTION>');
		newContent.push('<OPTION VALUE="10">10</OPTION>');
		newContent.push('</select></td>');

		newContent.push('</tr>');
		
	}
	
	// Push in closing table
	newContent.push('</table>');
	
	//Get old value from old content
	for(var r=1;r<currentRow; r++){
		
		oldValue["Date"+r] = document.getElementById('Date'+r).value; 
		oldValue["Race"+r] = document.getElementById('Race'+r).value; 
		oldValue["Priority"+r] = document.getElementById('Priority'+r).value; 

	}
	
	//Write the newContent to browser
	//alert(newContent.join(''));
	order.innerHTML = newContent.join('');
	
	//Must attach the new created form to the form so it get posted when the form is posted.
	var f = document.Order_Form;
	
	// This code is for damn Mozilla Firefox to attach the newly created form as hideen field
	if(document.getElementById && !document.all){
		//Create new element and attach to the form
		for(var r=1;r<=currentRow; r++){
			
			//<input class="textinput" name="ImageNo'+r+'" type="text" id="ImageNo'+r+'" style="width:50px;" align="left" tabindex="9">
			var Dates = document.createElement("input");
			image.setAttribute("id", "Date"+r);
			image.setAttribute("name", "Date"+r);
			image.setAttribute("type", "hidden");
			//image.setAttribute("class", "textinput");
			//image.setAttribute("tabindex", "9");
			//image.style.width = "50px";
			//image.style.align = "left";
			f.appendChild(Dates);
	
			var Race = document.createElement("input");
			size.setAttribute("id", "Race"+r);
			size.setAttribute("name", "Race"+r);
			size.setAttribute("type", "hidden");
			//size.setAttribute("class", "textinput");
			//size.setAttribute("tabindex", "9");
			//size.style.width = "50px";
			//size.style.align = "left";
			f.appendChild(Race);
	
	
			/*
			//<select name="Size'+r+'" id="Size'+r+'" class="input" style="width: 65">
			var size = document.createElement("select");
			size.setAttribute("id", "Size"+r);
			size.setAttribute("id", "Size"+r);
			size.setAttribute("class", "input");
			size.style.width = "65px";
			f.appendChild(size);
			
			for(var s=0;s<SizeOption.length; s++){
				var newElem = document.createElement("option");
				newElem.text = SizeOption[s];
				newElem.value = SizeValue[s]
				f.size.options.add(newElem);
			}
			*/
			
			var Priority = document.createElement("input");
			Styles.setAttribute("id", "Priority"+r);
			Styles.setAttribute("name", "Priority"+r);
			Styles.setAttribute("type", "hidden");
			//size.setAttribute("class", "textinput");
			//size.setAttribute("tabindex", "9");
			//size.style.width = "50px";
			//size.style.align = "left";
			f.appendChild(Priority);
			
			
			
			/*
			//<select name="Style'+r+'" class="input" id="Style'+r+'" style="width: 65">
			var Styles = document.createElement("select");
			Styles.setAttribute("id", "Style"+r);
			Styles.setAttribute("id", "Style"+r);
			Styles.setAttribute("class", "input");
			Styles.style.width = "65px";
			f.appendChild(Styles);
			
			for(var s=0;s<SizeOption.length; s++){
				var newElem = document.createElement("option");
				newElem.text = SizeOption[s];
				newElem.value = SizeValue[s]
				f.Styles.options.add(newElem);
			}
			*/
		}
	}
	
	
	//Restore the oldvalue to old input field 
	for(var r=1;r<currentRow; r++){
		
		document.getElementById('Date'+r).value = oldValue["Date"+r];
		document.getElementById('Race'+r).value = oldValue["Race"+r]; 
		document.getElementById('Priority'+r).value = oldValue["Priority"+r]; 
	
		// This code is for damn Mozilla Firefox to attach the newly created form as hidden field
		if(document.getElementById && !document.all){
		
			document.getElementById('Date'+r).value = oldValue["Date"+r];
			document.getElementById('Race'+r).value = oldValue["Race"+r]; 
			document.getElementById('Priority'+r).value = oldValue["Priority"+r]; 
		
		}
	}
	
	
	
}