function SAPDocument ()
	{
		var docnum;	
		var docCurrency = null;
		var docRate = null;
		var docDate = null;
		var docDueDate = null;
		var postingDate = null;
		var cardCode = null;
		var cardName = null;
		var docStatus = null;
		var comments = null;
		//this array would store as object Array
		var docItemAr = null;
	}
	//---------------------------------------------------------------------------------------------------------	
	function SAPDocumentItem()
	{
		var lineNum = null;
		var quantity = null;
		var warehouse = null;
		var salePrice = null;
		var itemCode = null;
	}
	//---------------------------------------------------------------------------------------------------------	
	function loadSAPDocument(docXML) {
		var getNameH;
		var getNameLI;
		
		if (docXML.documentElement.tagName != "sapDocument")
		{	
			return false;
		}
		
		//Draw Dynamic Div to display the SAP Document Information
		drawSAPDocument();
		
		//check header tag value is null, to avoid xmlobj null error
		//alert(document.getElementByTag('header');            
		if (docXML.documentElement.childNodes[0].tagName == null) {
			getNameH = "";
		}
		else {
			getNameH = docXML.documentElement.childNodes[0].tagName;
		}
		//check lineItem tag value is null, to avoid xmlobj nullerror            
		if(docXML.documentElement.childNodes[1].tagName == null) {
			getNameLI = ""
		}
		else {
			getNameLI = docXML.documentElement.childNodes[1].tagName;
		}
		//for every XML node, create new SAPDocument object
		var displayDocument = new SAPDocument();	
		if (getNameH == "header") {
			var baseElement = docXML.documentElement.childNodes[0];                
			displayDocument.docnum = URLDecode(baseElement.childNodes[0].childNodes[0].nodeValue);
			displayDocument.docCurrency = URLDecode(baseElement.childNodes[1].childNodes[0].nodeValue);
			displayDocument.docRate = URLDecode(baseElement.childNodes[2].childNodes[0].nodeValue);
			displayDocument.docDate = URLDecode(baseElement.childNodes[3].childNodes[0].nodeValue);
			displayDocument.docDueDate = URLDecode(baseElement.childNodes[4].childNodes[0].nodeValue);
			displayDocument.postingDate = URLDecode(baseElement.childNodes[5].childNodes[0].nodeValue);
			displayDocument.cardCode = URLDecode(baseElement.childNodes[6].childNodes[0].nodeValue);
			displayDocument.cardName = URLDecode(baseElement.childNodes[7].childNodes[0].nodeValue);
			displayDocument.docStatus = URLDecode(baseElement.childNodes[8].childNodes[0].nodeValue);
			if (baseElement.childNodes[9].childNodes[0] == null)
			{
				displayDocument.comments = "";
			}
			else
			{
				displayDocument.comments = URLDecode(baseElement.childNodes[9].childNodes[0].nodeValue);
			}			
		  }	 
		  //for every XML node, create new SAPDocumentItem object	  
		  //getting all lineItem from LineItems tag into a object array
		  displayDocument.docItemAr = new Array ();
		  if (getNameLI == "lineItems") {
			  var baseElement = docXML.documentElement.childNodes[1];
			  var lineItemLength = baseElement.childNodes.length;		  

			  for (var counter = 0; counter < lineItemLength; counter++) {	
				var displayDocumentItem = new SAPDocumentItem();
				displayDocumentItem.lineNum = URLDecode(baseElement.childNodes[counter].childNodes[0].childNodes[0].nodeValue);
				displayDocumentItem.itemCode = URLDecode(baseElement.childNodes[counter].childNodes[1].childNodes[0].nodeValue);
				displayDocumentItem.quantity = URLDecode(baseElement.childNodes[counter].childNodes[2].childNodes[0].nodeValue);
				displayDocumentItem.warehouse = URLDecode(baseElement.childNodes[counter].childNodes[3].childNodes[0].nodeValue);
				displayDocumentItem.salePrice = URLDecode(baseElement.childNodes[counter].childNodes[4].childNodes[0].nodeValue);
				//assign array to displayDocumentItem object
				displayDocument.docItemAr[counter]= displayDocumentItem;
			}
		}
		//pass object and object array
		displaySAPDocument(displayDocument);
	}
	//---------------------------------------------------------------------------------------------------------	
	//draw dynamic Div for SAP Document
	function drawSAPDocument(){
			
		if (document.getElementById('divSAPDocument')) {
			document.getElementById('divSAPDocument').parentNode.removeChild(document.getElementById('divSAPDocument'));
		}
		//create dyanmic div with position
		var divSAPDocument = document.createElement("div");
		divSAPDocument.setAttribute('id','divSAPDocument');
		divSAPDocument.setAttribute('style','position:fixed;z-index:99; border:1px solid #0079c2;font-size:12px;');
		divSAPDocument.style.bottom="5%";
		divSAPDocument.style.right="5%";
		
		var tabSAPDocument = document.createElement("table");
		tabSAPDocument.setAttribute('id','tabSAPDocument');
		tabSAPDocument.setAttribute('class','prodTableWhite');
		tabSAPDocument.setAttribute('style','border:1px;color:black;');
			//close Div
			var tr = document.createElement("tr");
			tr.setAttribute('style','text-align:right;color:red;font-weight:bold;');
				var td = document.createElement("td");
				td.setAttribute('onclick','closeSAPDocumentDiv();');
				td.setAttribute('style','padding:5px;');
				var a = document.createElement("a");
				a.setAttribute('style','color:red;font-weight:bold;cursor:pointer;');
				a.appendChild(document.createTextNode("Close"));
				td.appendChild(a);
				tr.appendChild(td);
			tabSAPDocument.appendChild(tr);
			//title
			var tr = document.createElement("tr");
			tr.setAttribute('style','height:50px;');
				var td = document.createElement("td");
				td.setAttribute('id','titleName');
				tr.appendChild(td);
			tabSAPDocument.appendChild(tr);
			//info
			var tr = document.createElement("tr");
			tr.setAttribute('style','height:50px;');
				var td = document.createElement("td");
				td.setAttribute('id','info');
				tr.appendChild(td);
			tabSAPDocument.appendChild(tr);
			//detail
			var tr = document.createElement("tr");
			tr.setAttribute('style','height:80px;');
				var td = document.createElement("td");
				td.setAttribute('id','detail');
				tr.appendChild(td);
			tabSAPDocument.appendChild(tr);
			//item
			var tr = document.createElement("tr");
			tr.setAttribute('style','height:70px;');
				var td = document.createElement("td");
				td.setAttribute('id','item');
				tr.appendChild(td);
			tabSAPDocument.appendChild(tr);
			//comment
			var tr = document.createElement("tr");
			tr.setAttribute('style','height:50px;');
				var td = document.createElement("td");
				td.setAttribute('id','comment');
				tr.appendChild(td);
			tabSAPDocument.appendChild(tr);
			
		divSAPDocument.appendChild(tabSAPDocument);
		document.body.appendChild(divSAPDocument);
		
	}
	//---------------------------------------------------------------------------------------------------------
	function closeSAPDocumentDiv()
	{
		if (document.getElementById('divSAPDocument')) {
				document.getElementById('divSAPDocument').parentNode.removeChild(document.getElementById('divSAPDocument'));
			}
	}
	//---------------------------------------------------------------------------------------------------------
	//insert SAP data to dynamic div
	function displaySAPDocument (displayDocument){
		var docNum =  displayDocument.docnum;
		var docCurrency = displayDocument.docCurrency;
		var docRate = displayDocument.docRate;
		var docDate = displayDocument.docDate;
		var docDueDate = displayDocument.docDueDate;
		var postingDate = displayDocument.postingDate;
		var cardCode =displayDocument.cardCode;
		var cardName = displayDocument.cardName;
		var docStatus = displayDocument.docStatus;
		var comments = displayDocument.comments;
		
		//title Row --> company logo, document Number
		var div = document.createElement("div");
		div.setAttribute('id','title1');
		div.setAttribute('style','float:left;padding:5px;width:210px;color:#0079c2;font-weight:bold;');
		var span= document.createElement("span");
		span.appendChild(document.createTextNode("Convergent Systems"));
		div.appendChild(span);
		document.getElementById("titleName").appendChild(div);	
		
		var div = document.createElement("div");
		div.setAttribute('id','title2');
		div.setAttribute('style','padding:5px;float:left;width:210px;');
		var span= document.createElement("span");
		span.setAttribute('class','boldTitleSAP');	
		span.appendChild(document.createTextNode("NO.: " + docNum));
		div.appendChild(span);
		document.getElementById("titleName").appendChild(div);
		
		var div = document.createElement("div");
		div.setAttribute('id','title2');
		div.setAttribute('style','padding:5px;float:left;width:200px;');
		var span= document.createElement("span");		
		span.appendChild(document.createTextNode("Document Date " + docDate));
		div.appendChild(span);
		document.getElementById("titleName").appendChild(div);
		
		//info Row --> staff contact, customer contact
		var div = document.createElement("div");
		div.setAttribute('id','title1');
		div.setAttribute('style','float:left;padding:5px;width:320px;');
		var span= document.createElement("span");
		span.setAttribute('class','boldTitleSAP');	
		span.appendChild(document.createTextNode("Staff Contact: "));
		div.appendChild(span);
		document.getElementById("info").appendChild(div);	
		
		var div = document.createElement("div");
		div.setAttribute('id','title2');
		div.setAttribute('style','padding:5px;');
		var span= document.createElement("span");
		span.setAttribute('class','boldTitleSAP');	
		span.appendChild(document.createTextNode("Customer Contact: "));
		div.appendChild(span);
		document.getElementById("info").appendChild(div);
		
		//details Row --> invoice detail
		var div = document.createElement("div");
		div.setAttribute('id','info');	
		div.setAttribute('style','float:left;padding:5px;');	
		var tab = document.createElement("table");	
		var tr = document.createElement("tr");		
		tr.setAttribute('style','background-color:#dfecfe;');
			var td = document.createElement("td");		
			td.setAttribute('style','width:120px;padding:3px;float:left;position:relative;border:1px solid #999999;');
			td.appendChild(document.createTextNode("Company Code"));
			tr.appendChild(td);
				
			var td = document.createElement("td");		
			td.setAttribute('style','width:190px;padding:3px;float:left;position:relative;border:1px solid #999999;');
			td.appendChild(document.createTextNode("Company Name"));
			tr.appendChild(td);
				
			var td = document.createElement("td");		
			td.setAttribute('style','width:50px;padding:3px;float:left;position:relative;border:1px solid #999999;');
			td.appendChild(document.createTextNode("Status"));
			tr.appendChild(td);
				
			var td= document.createElement("td");		
			td.setAttribute('style','width:120px;padding:3px;float:left;position:relative;border:1px solid #999999;');
			td.appendChild(document.createTextNode("Posting Date"));
			tr.appendChild(td);
				
			var td = document.createElement("td");		
			td.setAttribute('style','width:120px;padding:3px;float:left;position:relative;border:1px solid #999999;');
			td.appendChild(document.createTextNode("Due Date"));
		tr.appendChild(td);		
		tab.appendChild(tr);
		
		var tr = document.createElement("tr");	
			var td = document.createElement("td");
			td.setAttribute('class','boldTitleSAP');
			td.setAttribute('style','width:120px;padding:3px;float:left;position:relative;border:1px solid #999999;height:30px;');
			td.appendChild(document.createTextNode(cardCode));
			tr.appendChild(td);
				
			var td = document.createElement("td");
			td.setAttribute('class','boldTitleSAP');
			td.setAttribute('style','width:190px;padding:3px;float:left;position:relative;border:1px solid #999999;height:30px;');
			td.appendChild(document.createTextNode(cardName));
			tr.appendChild(td);
				
			var td = document.createElement("td");
			td.setAttribute('class','boldTitleSAP');
			td.setAttribute('style','width:50px;padding:3px;float:left;position:relative;border:1px solid #999999;height:30px;');
			td.appendChild(document.createTextNode(docStatus));
			tr.appendChild(td);
				
			var td= document.createElement("td");
			td.setAttribute('class','boldTitleSAP');
			td.setAttribute('style','width:120px;padding:3px;float:left;position:relative;border:1px solid #999999;height:30px;');
			td.appendChild(document.createTextNode(postingDate));
			tr.appendChild(td);
				
			var td = document.createElement("td");
			td.setAttribute('class','boldTitleSAP');
			td.setAttribute('style','width:120px;padding:3px;float:left;position:relative;border:1px solid #999999;height:30px;');
			td.appendChild(document.createTextNode(docDueDate));
			tr.appendChild(td);		
		tab.appendChild(tr);
		div.appendChild(tab);
		document.getElementById("detail").appendChild(div);

		//item Row --> all line itmes	
		var div = document.createElement("div");
		div.setAttribute('id','info');
		div.setAttribute('style','float:left;padding:5px; height:100px;overflow:auto;overflow-style:scrollbar;width:635px;');
		//div.setAttribute.style.overflowStyle="scrollbar";
		var tab = document.createElement("table");	
		var tr = document.createElement("tr");		
		tr.setAttribute('style','background-color:#0079c2;color:#ffffff;');
			var td = document.createElement("td");		
			td.setAttribute('style','width:50px;padding:3px;float:left;position:relative;border:1px solid #999999;');
			td.appendChild(document.createTextNode("NO."));
			tr.appendChild(td);
				
			var td = document.createElement("td");		
			td.setAttribute('style','width:230px;padding:3px;float:left;position:relative;border:1px solid #999999;');
			td.appendChild(document.createTextNode("Stock Code"));
			tr.appendChild(td);
						
			var td= document.createElement("td");		
			td.setAttribute('style','width:50px;padding:3px;float:left;position:relative;border:1px solid #999999;');
			td.appendChild(document.createTextNode("Quantity"));
			tr.appendChild(td);
				
			var td = document.createElement("td");		
			td.setAttribute('style','width:120px;padding:3px;float:left;position:relative;border:1px solid #999999;');
			td.appendChild(document.createTextNode("Unit Price"));
			tr.appendChild(td);		
			
			var td = document.createElement("td");		
			td.setAttribute('style','width:120px;padding:3px;float:left;position:relative;border:1px solid #999999;');
			td.appendChild(document.createTextNode("Warehouse"));
			tr.appendChild(td);		
		tab.appendChild(tr);
		var tempArr = displayDocument.docItemAr;
		//one single document may contain one or more line items
		for (var counter = 0; counter < tempArr.length; counter++)
		{
			var tr = document.createElement("tr");
				var td = document.createElement("td");
				td.setAttribute('class','boldTitleSAP');
				td.setAttribute('style','width:50px;padding:3px;float:left;position:relative;border:1px solid #999999;');
				//original value is starting from zero, beside array as string so need to convert its value to Integer
				td.appendChild(document.createTextNode(parseInt(tempArr[counter].lineNum) + 1)); 
				tr.appendChild(td);
					
				var td = document.createElement("td");
				td.setAttribute('class','boldTitleSAP');
				//td.style.width = "120px";
				//td.style.cssFloat = "left";
				//td.style.position = "relative";
				//td.style.border = "1px solid #999999";
				//td.style.padding = "3px";
				td.setAttribute('style','width:230px;padding:3px;float:left;position:relative;border:1px solid #999999;');			
				td.appendChild(document.createTextNode(tempArr[counter].itemCode));
				tr.appendChild(td);
					
				var td = document.createElement("td");
				td.setAttribute('class','boldTitleSAP');
				td.setAttribute('style','width:50px;padding:3px;float:left;position:relative;border:1px solid #999999;text-align:center;');
				td.appendChild(document.createTextNode(tempArr[counter].quantity));
				tr.appendChild(td);
					
				var td= document.createElement("td");
				td.setAttribute('class','boldTitleSAP');
				td.setAttribute('style','width:120px;padding:3px;float:left;position:relative;border:1px solid #999999;');
				td.appendChild(document.createTextNode(tempArr[counter].salePrice));
				tr.appendChild(td);
					
				var td = document.createElement("td");
				td.setAttribute('class','boldTitleSAP');
				td.setAttribute('style','width:120px;padding:3px;float:left;position:relative;border:1px solid #999999;');
				td.appendChild(document.createTextNode(tempArr[counter].warehouse));
				tr.appendChild(td);		
			tab.appendChild(tr);
		}
		div.appendChild(tab);
		document.getElementById("item").appendChild(div);
		
		//comment Row --> 
		var div = document.createElement("div");
		div.setAttribute('id','comment');
		div.setAttribute('style','float:left;padding:5px;');
		var span= document.createElement("span");
		span.appendChild(document.createTextNode(comments));
		div.appendChild(span);
		document.getElementById("comment").appendChild(div);	
	}
	//---------------------------------------------------------------------------------------------------------