/******************* 
 *    variables    * 
 *******************/ 

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 dynamic table from static table 
 The following structure is created: 

TABLE 
  +-THEAD 
+-TR 
  +-TH 
    +-TH 
+-SELECT 
+-TH 
+-SELECT 
    +-TH 
+-SELECT 
+-TR 
  +-TH 
  +-TH 
+- #Product 1 
+-TH 
+- #Product 2 
+-TH 
+- #Product 3 
  +-TBODY 
+-TR 
  +-TH 
+- # Property 1 
  +-TD 
+- # Product 1 Property Data 1 
  +-TD 
+- # Product 2 Property Data 1 
  +-TD 
+- # Product 3 Property Data 1 
+-TR 
  +-TH 
+- # Property 2 
  +-TD 
+- # Product 1 Property Data 2 
  +-TD 
+- # Product 2 Property Data 2 
  +-TD 
+- # Product 3 Property Data 2 
+-TR 
  +-TH 
+- # Property ... 
  +-TD 
+- # Product 1 Property Data ... 
  +-TD 
+- # Product 2 Property Data ... 
  +-TD 
+- # Product 3 Property Data ... 
*/ 


//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); 
//oHeadTR    = document.createElement("tr"); 
oTHEAD.appendChild(oHeadTR); 

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


//Create Dynamic select-boxes 
for (i=0; i<3; i++) { 
  oHeadTH    = document.createElement("th"); 
  oHeadTR.appendChild(oHeadTH); 

oDropdown = document.createElement("select"); 
oDropdown.id = "packageSel" + (i+1); 
oDropdown.name = "packageSel" + (i+1); 
oDropdown.setAttribute("class","mossSelect01");    // FF + ? 
oDropdown.setAttribute("className","mossSelect01"); // IE + ? 

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); 
} 


//oHeadTRBlank = document.createElement("tr"); 
//oHeadTRBlank.innerHTML = "<td>&nbsp;</td>"; 
//oTHEAD.appendChild(oHeadTRBlank); 

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

//Create Table->HEAD->TR->TH with Product-names 
for (t=0; t<4; t++) { 
  oHeadTH    =oPackages[t].cloneNode(true); 
oHeadTH.setAttribute("scope","col"); 
oHeadTH.id = "th_" + t; 
oHeadTH.style.width = "25%"; 
  oHeadTR.appendChild(oHeadTH); 
} 

//Create Table->TBODY 
oTBODY    = document.createElement("tbody"); 
oTABLE.appendChild(oTBODY); 
  
 // 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); 
oTABLE.appendChild(oBodyTR); 
  
  //Create Table->TBODY->TR->TH 
  //oBodyTH    = OTrInit[i].getElementsByTagName('th')[0].cloneNode(true); 
//oBodyTH.setAttribute("scope","row"); 
oBodyTH    =document.createElement("td"); 
oBodyTH.setAttribute("class",OTrInit[i].getElementsByTagName('th')[0].getAttribute("class")); 
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 
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 
    
  } 
 } 
 } 

    document.getElementById("dynpackages").innerHTML = "<table class=ms-rteTable-1 style='WIDTH: 100%'>" + oTABLE.innerHTML + "</table>"; 
} 

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

createDynamicTable();