var xmlhttp;
function loadVersions()
{
var locationString = new String(window.location);
var carFolderNameBeginIndex = locationString.indexOf('/cars/') + 6;
var carFolderFromUrl = locationString.substr(carFolderNameBeginIndex, locationString.indexOf('/', carFolderNameBeginIndex) - carFolderNameBeginIndex);

var url = pathToRoot + pathToCarsData + '/data/cars/' + carFolderFromUrl + '/Specification.xml';

xmlhttp=null;
if (window.XMLHttpRequest)
  {// code for all new browsers
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE5 and IE6
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
}

function state_Change()
{
if (xmlhttp.readyState==4)
  {
	 ParseXml(xmlhttp.responseXML, xmlhttp.responseText);
  }

}


	var versions;
	var versionsData;
	var dropList1;
	var dropList2;
	var dropList3;
	var dropList4;
	var xmlDoc;
	var browser=navigator.appName;
	
function ParseXml(xmlHttp, xmlString) {
        if(browser=="Microsoft Internet Explorer")
        {
            xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.loadXML(xmlString);
            versions = xmlDoc.selectNodes("carversion/versionDefinition/version");
        }
        else
		{
            xmlDoc=xmlHttp;
		    versions=xmlDoc.getElementsByTagName('version');
        }
		
		dropList1=document.getElementById("DropDownListVersions1");
		dropList2=document.getElementById("DropDownListVersions2");
		dropList3=document.getElementById("DropDownListVersions3");
		//dropList4=document.getElementById("DropDownListVersions4");
        //load DropDown list items
        for (i = 0; i < versions.length; i++) {
			itemText = versions[i].getAttribute("description");
			itemValue = versions[i].getAttribute("id");
			isUseVersion = versions[i].attributes[2].value;
			if (isUseVersion == "true") {
				dropList1Item = document.createElement("option");
				dropList1Item.text = itemText;
				dropList1Item.value = itemValue;
				dropList1.options.add(dropList1Item);
				dropList1.options[0].selected = true;
				
				dropList2Item = document.createElement("option");
				dropList2Item.text = itemText;
				dropList2Item.value = itemValue;
				dropList2.options.add(dropList2Item);
				
				dropList3Item = document.createElement("option");
				dropList3Item.text = itemText;
				dropList3Item.value = itemValue;
				dropList3.options.add(dropList3Item);

				/*
				dropList4Item = document.createElement("option");
				dropList4Item.text = itemText;
				dropList4Item.value = itemValue;
				dropList4.options.add(dropList4Item);
				*/
			}
		}

	DisplayData();
 }
  
    
 function DisplayData() {

      var tableBodyElement = document.getElementById('tablebody');
      if(tableBodyElement!=null) {
        while(tableBodyElement.hasChildNodes()){ 
          tableBodyElement.removeChild(tableBodyElement.firstChild);
        }
        }
     
       optionGroupList = xmlDoc.getElementsByTagName('OptionGroup');
		
	   versionToDisplay1 = dropList1[dropList1.selectedIndex].value;	
	   versionToDisplay2 = dropList2[dropList2.selectedIndex].value;
	   versionToDisplay3 = dropList3[dropList3.selectedIndex].value;
	   //versionToDisplay4 = dropList4[dropList4.selectedIndex].value;
       for(a=0; a<optionGroupList.length; a++)
       {
	   		groupName=optionGroupList[a].getAttribute("name");
			groupId=optionGroupList[a].getAttribute("id");
				isUseGroup = optionGroupList[a].attributes[2].value;
			if(isUseGroup=="false")
			{
				continue;
			}
			
			addRowGroup(groupName);
			
			optionList = optionGroupList[a].getElementsByTagName("option");
			for(i=0; i<optionList.length; i++)
			{
				optionName = optionList[i].getAttribute("name");
				valueList = optionList[i].getElementsByTagName("value");
				optionValue1='';
				optionValue2='';
				optionValue3='';
				optionValue4 = '';
				isOptionUse=false;
				for (j = 0; j < valueList.length; j++) {
					
					valueVersion = valueList[j].getAttribute("id");
					isUseValue = valueList[j].attributes[1].value;

					if(versionToDisplay1==valueVersion)
					{
						if (browser == "Microsoft Internet Explorer") {
							optionValue1 = valueList[j].text;
						}
						else{
							optionValue1 = valueList[j].textContent;
						}
						if(isUseValue=="true") {isOptionUse=true;}
					}
					if(versionToDisplay2==valueVersion)
					{
						if (browser == "Microsoft Internet Explorer") {
							optionValue2 = valueList[j].text;
						}
						else{
							optionValue2 = valueList[j].textContent;
						}
						if(isUseValue=="true") {isOptionUse=true;}
					}
					if(versionToDisplay3==valueVersion)
					{
						if (browser == "Microsoft Internet Explorer") {
							optionValue3 = valueList[j].text;
						}
						else{
							optionValue3 = valueList[j].textContent;
						}
						if(isUseValue=="true") {isOptionUse=true;}
					}
					/*
					if (versionToDisplay4 == valueVersion) {
					    if (browser == "Microsoft Internet Explorer") {
					        optionValue4 = valueList[j].text;
					    }
					    else {
					        optionValue4 = valueList[j].textContent;
					    }
					    if (isUseValue == "true") { isOptionUse = true; }
					}
					*/
				}
				
				if (isOptionUse == true) {
				    addDataRow(optionName, optionValue1, optionValue2, optionValue3);
				}
            }
       }
     }


   
 function addRowGroup(text1Val)
{
      var row  = document.createElement('tr');
      var col = document.createElement("th");
      col.className = "SpecificationHeader";
      var elemTextNode = document.createTextNode(text1Val);
      var tableBodyElement  = document.getElementById('tablebody');
      col.appendChild(elemTextNode);
      row.appendChild(col);
      //col = document.createElement("th");
      //col.style.backgroundColor = "#FFFFFF";
      //row.appendChild(col)
      col = document.createElement("th");
      col.colSpan = "3";
      row.appendChild(col);
      tableBodyElement.appendChild(row);
 }
     
function addDataRow(text1Val, text2Val, text3Val, text4Val) {
              
      var row  = document.createElement('tr');
      row.id='trow';
      var col1 = document.createElement('td');
      col1.className = "SpecificationOptionName";
      //var col2 = document.createElement('td');
      //col2.style.backgroundColor = "#FFFFFF";
      var col3 = document.createElement('td');
      var col4 = document.createElement('td');
      var col5 = document.createElement('td');
      //var col6 = document.createElement('td');
      var text1 = document.createTextNode(text1Val);
      var text2 = document.createTextNode(text2Val);
      var text3 = document.createTextNode(text3Val);
      var text4 = document.createTextNode(text4Val);
      //var text5 = document.createTextNode(text5Val);
      var tableBodyElement  = document.getElementById('tablebody');

      col1.appendChild(text1);

      col3.appendChild(text2);
      col4.appendChild(text3);
      col5.appendChild(text4);
      //col6.appendChild(text5);
      
      row.appendChild(col1);
      //row.appendChild(col2);
      row.appendChild(col3);
      row.appendChild(col4);
      row.appendChild(col5);
      //row.appendChild(col6);
      tableBodyElement.appendChild(row);
 }