// JScript File

var selectedProjectType = 0;
var projectTypes;
compileXML = function(){

    projectTypes = xmlDoc.documentElement.getElementsByTagName('projecttype');
    
    var imagename = "";
    document.getElementById("detailLocationHeader").className = "locationHeaderBar0";
    var newLink = document.createElement('a');
     newLink.href = "Index.shtml";
     newLink.className = "locationBar";
     newLink.appendChild(document.createTextNode("Runberg Architecture Group PLLC"));
     document.getElementById("lblLocationHeader").appendChild(newLink);
     document.getElementById("lblLocationHeader").appendChild(document.createTextNode(" > "));
     document.getElementById("lblLocationHeader").appendChild(document.createTextNode('Our Work'));
     var descriptionContainer = document.getElementById('projectTypeDescriptionContainer');
     descriptionContainer.className = "projectTypeDescriptionContainer0";
     var selectedProjectType = projectTypes[0];
    var paragraphs = selectedProjectType.getElementsByTagName('description')[0].getElementsByTagName('paragraph');
   
    //set large images
    var largeimages = selectedProjectType.getElementsByTagName('projecttypelargeimage');
    var largeImageDiv1 = document.getElementById('projectTypeImageContainer1');
    var largeImageDiv2 = document.getElementById('projectTypeImageContainer2');
    //alert(largeimages[1].getAttribute("imagename"));
    largeImageDiv1.style.backgroundImage = "url(./Images/" + largeimages[0].getAttribute("imagename") +")";
    largeImageDiv2.style.backgroundImage = "url(./Images/" + largeimages[1].getAttribute("imagename") +")";
    
    //display the description paragraphs
    for (var i=0; i < paragraphs.length; i++){
        var newParagraph = document.createElement('p');
        newParagraph.innerHTML = paragraphs[i].childNodes[0].nodeValue;
       descriptionContainer.appendChild(newParagraph);
    }
    //display project type images
    for(var i=0; i < projectTypes.length; i++){
       
        imagename = projectTypes[i].getElementsByTagName('projecttypemediumimage')[0].getAttribute('imagename');
        var imageDiv = document.getElementById("divProject" + i);
        imageDiv.style.backgroundImage = "url(./Images/" + imagename +")";
        imageDiv.className = "projectsImageContainer";
        imageDiv.setAttribute("url","Projects.shtml?id=" + i);
        imageDiv.onclick = redirect;
        imageDiv.onmouseover = projectImage_mouseover;
        imageDiv.onmouseout = projectImage_mouseout;
        var textContainerDiv = document.getElementById("divProjectTextContainer" + i);
        //textDiv.class = "projectsNameLabel";
        textContainerDiv.className = "projectsNameLabelContainer" + i;
        var textDiv = document.getElementById("divProjectText" + i);
        textDiv.innerHTML = projectTypes[i].getAttribute("name");
        textDiv.className = "projectsNameLabel";
    }
    
    document.getElementById("divProject0").setAttribute("class", "projectsImageContainerMouseOver"); 
    document.getElementById("divProject0").setAttribute("className", "projectsImageContainerMouseOver");
    
}

function redirect(){
    window.location = this.getAttribute("url");
}

function projectImage_mouseout(){
    var currTabElem = this; 
    
   
        currTabElem.setAttribute("class", "projectsImageContainer"); 
        currTabElem.setAttribute("className", "projectsImageContainer"); 
        
        var descriptionContainer = document.getElementById('projectTypeDescriptionContainer');
     descriptionContainer.className = "projectTypeDescriptionContainer0";
     var selectedProjectType = projectTypes[0];
    var paragraphs = selectedProjectType.getElementsByTagName('description')[0].getElementsByTagName('paragraph');
    //first remove existing paragraphs
    while(descriptionContainer.hasChildNodes()){	descriptionContainer.removeChild(descriptionContainer.lastChild);}
    //display the description paragraphs
    for (var i=0; i < paragraphs.length; i++){
        var newParagraph = document.createElement('p');
        newParagraph.innerHTML = paragraphs[i].childNodes[0].nodeValue;
       descriptionContainer.appendChild(newParagraph);
    }
    //display default images
    var largeimages = selectedProjectType.getElementsByTagName('projecttypelargeimage');
    var largeImageDiv1 = document.getElementById('projectTypeImageContainer1');
    var largeImageDiv2 = document.getElementById('projectTypeImageContainer2');
    largeImageDiv1.style.backgroundImage = "url(./Images/" + largeimages[0].getAttribute("imagename") +")";
    largeImageDiv2.style.backgroundImage = "url(./Images/" + largeimages[1].getAttribute("imagename") +")";
    
    document.getElementById("divProject0").setAttribute("class", "projectsImageContainerMouseOver"); 
    document.getElementById("divProject0").setAttribute("className", "projectsImageContainerMouseOver");
 
}
function projectImage_mouseover(){
    document.getElementById("divProject0").setAttribute("class", "projectsImageContainer"); 
    document.getElementById("divProject0").setAttribute("className", "projectsImageContainer");
    var currTabElem = this; 
    var newProjectTypeID = getIndexFromDivID(this.getAttribute("id"));
    currTabElem.setAttribute("class", "projectsImageContainerMouseOver"); 
    currTabElem.setAttribute("className", "projectsImageContainerMouseOver"); 
    
    var descriptionContainer = document.getElementById('projectTypeDescriptionContainer');
     descriptionContainer.className = "projectTypeDescriptionContainer" +newProjectTypeID ;
    //escriptionContainer.class = "projectTypeDescriptionContainer" +newProjectTypeID ;
     var selectedProjectType = projectTypes[newProjectTypeID];
    var paragraphs = selectedProjectType.getElementsByTagName('description')[0].getElementsByTagName('paragraph');
    //first remove existing paragraphs
    while(descriptionContainer.hasChildNodes()){	descriptionContainer.removeChild(descriptionContainer.lastChild);}
    //display the description paragraphs
    for (var i=0; i < paragraphs.length; i++){
        var newParagraph = document.createElement('p');
        newParagraph.innerHTML = paragraphs[i].childNodes[0].nodeValue;
       descriptionContainer.appendChild(newParagraph);
    }
    //set images
     var largeimages = selectedProjectType.getElementsByTagName('projecttypelargeimage');
    var largeImageDiv1 = document.getElementById('projectTypeImageContainer1');
    var largeImageDiv2 = document.getElementById('projectTypeImageContainer2');
    largeImageDiv1.style.backgroundImage = "url(./Images/" + largeimages[0].getAttribute("imagename") +")";
    largeImageDiv2.style.backgroundImage = "url(./Images/" + largeimages[1].getAttribute("imagename") +")";

}
function getIndexFromDivID(divID){
    var index = divID.substring(divID.length-1, divID.length);
    return index;
}