oData = new Array(); // containing all data from static table
packageOrder = new Array(); // available packages (in order)
areaRowCounter = 0;   // keep track of row number for switching row-color 
totalRows  = 0;   // keep track of total number of rows containing data 
aHeaders  = new Array(); // list of all areas 

function createDynamicTable(){
// find columns and order for packages 
oTableInit = document.getElementById("packages");
oTheadInit = oTableInit.getElementsByTagName("thead");
oTrHeadInit = oTableInit.getElementsByTagName("tr"); 
oPackages = oTheadInit[0].getElementsByTagName("th");
oTbodyInit = oTableInit.getElementsByTagName("tbody");
OTrInit = oTbodyInit[0].getElementsByTagName("tr");

for(t=1;t<oPackages.length;t++){
	if(oPackages[t].innerHTML!=""){
		packageOrder[t] = oPackages[t].innerHTML;
		oData[packageOrder[t]] = new Array();
	}
}
//Create Table 
oTABLE = document.createElement("table");

//Create Table->HEAD
oTHEAD = document.createElement("thead");
oTABLE.appendChild(oTHEAD);

//Create Table->HEAD->TR
oHeadTR = oTrHeadInit[0].cloneNode(false);
oTHEAD.appendChild(oHeadTR);

//Create Table->HEAD->TR->TH
oHeadTH = document.createElement("th");
oHeadTR.appendChild(oHeadTH);


if(packageOrder.length>4){
	//Create Dynamic select-boxes
	for(i=0; i<3; i++){
		oHeadTH = document.createElement("th");
	    	oHeadTH.style.padding = "6px 9px 6px 9px";
	    	oHeadTH.style.width = "25%";
		oHeadTR.appendChild(oHeadTH);
		oDropdown = document.createElement("select");
		oDropdown.id = "packageSel" + (i+1);
		oDropdown.name = "packageSel" + (i+1); 
		oDropdown.setAttribute("class","mossSelect01");
		oDropdown.style.fontSize="10px";
	
		switch (i){
			case 0:
				oDropdown.setAttribute("onchange","selectAccount(1, this.value);");
				break;
			case 1:
				oDropdown.setAttribute("onchange","selectAccount(2, this.value);");
				break;
			case 2:
				oDropdown.setAttribute("onchange","selectAccount(3, this.value);");
				break;
		} 
	
		for (t=1; t<packageOrder.length; t++){
			oSelect = document.createElement("option");
			oSelect.value=packageOrder[t];
			if ((i==0 & t==1)||(i==1 & t==2)||(i==2 & t==3)){
				// set dynamic selected option in select-boxes, select first 3 products
				oSelect.setAttribute('selected',true);
			}
			oSelect.innerHTML = packageOrder[t];
			oDropdown.appendChild(oSelect);
		}
	oHeadTH.appendChild(oDropdown);
	}
}
else{
	for (t=1; t<packageOrder.length; t++){
		oHeadTH = document.createElement("th");
	    	oHeadTH.style.padding = "6px 9px 6px 9px";
	    	oHeadTH.style.width = "25%";
		var theTextOfTheHeader = document.createTextNode(packageOrder[t]);
		oHeadTH.appendChild(theTextOfTheHeader);
		oHeadTR.appendChild(oHeadTH);
	}
}

//Create Table->TBODY
oTBODY = document.createElement("tbody");

//loop through all rows in static table 
for(i=0; i<OTrInit.length; i++){
  
	//if TH is not filled out with property-name, it should not be shown 
	if (OTrInit[i].getElementsByTagName('th')[0].innerHTML != "") { 

		//Create Table->TBODY->TR 
		oBodyTR = OTrInit[i].cloneNode(false);
		if(i%2) oBodyTR.className = "ms-rteTableEvenRow-1";
		else oBodyTR.className = "ms-rteTableOddRow-1";

		oTABLE.appendChild(oBodyTR); 
	
		oBodyTH =document.createElement("td"); 
	
		if(i%2) theClass="ms-rteTableOddCol-1";
		else theClass = "ms-rteTableEvenCol-1";
	
		oBodyTH.setAttribute("class",theClass);
		oBodyTH.style.fontWeight = "bold";
		oBodyTH.style.color = "#4C7891";
		oBodyTH.innerHTML=OTrInit[i].getElementsByTagName('th')[0].innerHTML; 
	
		oBodyTR.appendChild(oBodyTH); 
	
		//If Element is a '<td>' then it is part of the data and should be stored in array 
		if (OTrInit[i].getElementsByTagName('td').length > 0) { 
	
			//copy 3 first products data to dynamic table-cells 
			for (j=1; j<4; j++){
				//Create Table->TBODY->TR->TD
				oBodyTD = OTrInit[i].getElementsByTagName('td')[j-1].cloneNode(true); 
				oBodyTD.id = "cell_" + (i+1) + "_" + (j); //Asign ID to cell, to allow easy update
	
				if(j%2) oBodyTD.className = "ms-rteTableOddCol-1";
				else oBodyTD.className = "ms-rteTableEvenCol-1";

				oBodyTR.appendChild(oBodyTD);
			} 

			// create dynamic row cells 
			numberDataRows = OTrInit[i].getElementsByTagName('td').length;
	
			totalRows++;
	
			//store data for packages in Array
			for(t=1; t<packageOrder.length; t++){
				oData[packageOrder[t]][oData[packageOrder[t]].length] = OTrInit[i].getElementsByTagName('td')[t-1].innerHTML;
		   	} 
		} else{
			areaRowCounter = 0;
			// create area header 
	    	}
	}
}
oTABLE.appendChild(oTBODY);
/* output */
document.getElementById("dynpackages").innerHTML = "<table class=\"ms-rteTable-1\" style=\"width:100%\">" + oTABLE.innerHTML + "</table>";
} 

function selectAccount(nr, txt){
	for (i=0; i<oData[txt].length; i++){
		document.getElementById("cell_" + (i+1) + "_" + nr).innerHTML = oData[txt][i];
	}
}

//womAdd('createDynamicTable()');
createDynamicTable();