var xmlhttp;
function loadXMLDoc(url)
{
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)
  {
    var myselect = document.forms[0].elements[0];
    for (var i=0; i<myselect.options.length; i++){
      if (myselect.options[i].selected==true){
        break
      }
    }
  xmlhttp.onreadystatechange=state_Change;
  xmlhttp.open("GET",myselect.options[i].value ,true);
  xmlhttp.send(null);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
}

function state_Change()
{
if (xmlhttp.readyState==4)
  {// 4 = "loaded"
  if (xmlhttp.status==200)
    {// 200 = OK
      makeTable(xmlhttp.responseXML);
    }
  else
    {
    alert("Problem retrieving XML data");
    }
  }
}


// This function builds an HTML table of employees from data it reads from
// the XML document it is passed.
function makeTable(xmldoc) {
	my_div = document.getElementById("wrapper");
	if (my_div.lastChild.nodeName == "TABLE")
	    my_div.removeChild(my_div.lastChild);
    // Create a <table> object and insert it into the document.
    var table = document.createElement("table");
    table.setAttribute("border", "0");
    table.setAttribute("width", "80%");
    table.setAttribute("cellPadding", 10);
    table.setAttribute("cellSpacing", "20");
    //document.body.appendChild(table);

    // Use convenience methods of HTMLTableElement and related interfaces
    // to define a table caption and a header that gives a name to each column.
    var caption = " ";
    table.createCaption().appendChild(document.createTextNode(caption));
    var header = table.createTHead();
    var headerrow = header.insertRow(0);

    // Now find all <Vacancy> elements in our xmldoc document
    var vacancies = xmldoc.getElementsByTagName("Vacancy");

    // Loop through these employee elements
    for(var j = 0; j < vacancies.length; j++) {
		var i = (j*2);
        // For each Vacancy, get data using standard DOM
        // methods.  The name comes from an attribute.  The other values are
        // in Text nodes within <job> and <salary> tags.
        var e = vacancies[j];
//	HÄMTAR STARTDATUM
        var date_start = e.getAttribute("date_start");
//	HÄMTAR TITELN
        var title = '';
        try {
          title = e.getElementsByTagName("Title")[0].firstChild.data;
        } catch(e) {
          //alert(e.message);
        }
//	HÄMTAR ORTEN
        var location = '';
        try {
	      location = e.getElementsByTagName("Location")[0].firstChild.data;
        } catch(e) {
          //alert(e.message);
        }
//	HÄMTAR ADRESSEN TILL LOGGAN
        var LogoURL = '';
        try {
          LogoURL = e.getElementsByTagName("LogoURL")[0].firstChild.data;
        } catch(e) {
          //alert(e.message);
        }
//	HÄMTAR VACANCYURL
        var VacancyURL = '';
        try {
          VacancyURL = e.getElementsByTagName("VacancyURL")[0].firstChild.data;
        } catch(e) {
          //alert(e.message);
        }

        // Now that we have the employee data, use methods of the table to
        // create a new row and then use the methods of the row to create
        // new cells containing the data as text nodes.
        var row = table.insertRow(i+1);

	    // Så här kan du få colspan på varje rad
	    //row.setAttribute("colspan", "3"); // This attribute is required for validity in HTML.

        
        // Create image element for Logo
        var image = document.createElement("img");
	    image.setAttribute("alt", ""); // This attribute is required for validity in HTML.
	    image.setAttribute("align", "middle"); // Placering av bilden
	    image.setAttribute("width", "###"); // This decreases the perceived load time.
	    image.setAttribute("height", "###"); // This decreases the perceived load time.
	    image.setAttribute("src", LogoURL); 
	
	    // Create the href element for vacancy
	    var vacancyURL = document.createElement("a");
	    vacancyURL.setAttribute("id", "Vacancy");
	    vacancyURL.setAttribute("href", VacancyURL);
	    // This is to make sure it is on a new window
	    //vacancyURL.setAttribute("target", "_blank");
	    vacancyURL.appendChild(document.createTextNode(title));

        // Append Logo
        row.insertCell(0).appendChild(image);
        // Add href for Vacancy
        row.insertCell(1).appendChild(vacancyURL);
        // Append Start Date
        //row.insertCell(2).appendChild(document.createTextNode(date_start));
        // Append Location
        // Så här kan du lägga till colSpan på en cell
        var appendCell = row.insertCell(2)
	    appendCell.appendChild(document.createTextNode(location));
	    // Här lägger du till sjävla colSpan
        //appendCell.colSpan = 3;


        // HÄR SKULLE JAG VILJA HA EN RAD (Typ <TR><TD COLSPAN="3">) DÄR JAG KAN ANGE EN BILD SOM SKILJER AV TJÄNSTERNA ("..images/tablebg.gif" har jag använt för labba med)       
	    //Misstänker att det är något i stil med detta du vill ha ?        
        var rowSeparator = table.insertRow(i+2);
        var myCell = rowSeparator.insertCell(0);
        // Create image element for Logo
	    var tblImage = document.createElement("img");
	    tblImage.setAttribute("alt", ""); // This attribute is required for validity in HTML.
	    tblImage.setAttribute("align", "left"); // Placering av bilden
	    //tblImage.setAttribute("width", "###"); // This decreases the perceived load time.
	    //tblImage.setAttribute("height", "###"); // This decreases the perceived load time.
	    tblImage.setAttribute("src", "../images/tablebg.gif"); 
        myCell.appendChild(tblImage);
        myCell.colSpan = 3;
    }
	try {
		my_div = document.getElementById("wrapper");
		my_div.appendChild(table);
	} catch(e) {
	  alert(e.message);
	}
}