//        Open the portfolio.xml file
//        and get all the items.
//        Each item makes up the portfolio details
//        i.e. directory, desc, image etc. 
function getportfolio() {

    if (window.XMLHttpRequest) {
        xhttp = new XMLHttpRequest();
    }
    else // Internet Explorer 5/6
    {
        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xhttp.open("GET", "portfolio/portfolio.xml", false);
    xhttp.send("");
    if (xhttp.status != 200) {
        document.write("error getting porfolio, Please try later : Status =: " + xhttp.status)
    }
    portfolioDoc = xhttp.responseXML;
    var x = portfolioDoc.getElementsByTagName("item");
    return (x);
}  

// open the XML file under the directory 
// as passed in the paramter portfolioid
// then add each photo & caption to a set of links called image0, image 1 etc
// up to a max of 20 images
/// <reference path="../images/portfolio/2/portfolio.xml" />

function loadimages(portfolioid,portfoliono,callingimage) {
   
    var image;
    var comment;
   

    if (portfolioid != null) { // check to see if we have a valid portfolio id 
        if (window.XMLHttpRequest) {
            xhttp = new XMLHttpRequest();
        }
        else // Internet Explorer 5/6
        {
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xhttp.open("GET", portfolioid + "/" + "images.xml", false);
        xhttp.send("");
        // check if xhttp.status  != 200 ( OK) 

        xmlDoc = xhttp.responseXML;

        
        var xl = xmlDoc.getElementsByTagName("item");
        
                
        for (i = 0; i < xl.length && i < 20 ; i++) {

            image = (xl[i].getElementsByTagName("image")[0].childNodes[0].nodeValue);
            comment = (xl[i].getElementsByTagName("comment")[0].childNodes[0].nodeValue);
            
            // need to make sure we dont have duplicate image 
            if (callingimage != image) {
                imgid = "a#image" + i;
                jq(imgid).attr("rel", "lightbox[portfolio" + portfoliono + "]");
                jq(imgid).attr("href", portfolioid + "/" + image);
                jq(imgid).attr("title", comment);
            }
        }
 
    }
}

function createportfolio(x, id) {
    // id is either "all" for the entire table or the month that sets
    // up the featured project



    if (id == "all") {
         
              document.write("<table style='width:100%'>");


              for (i = 0; i < x.length; i++) {

                  dir = (x[i].getElementsByTagName("dir")[0].childNodes[0].nodeValue);
                  image = (x[i].getElementsByTagName("image")[0].childNodes[0].nodeValue);
                  type = (x[i].getElementsByTagName("type")[0].childNodes[0].nodeValue);
                  loc = (x[i].getElementsByTagName("loc")[0].childNodes[0].nodeValue);
                  desc = (x[i].getElementsByTagName("desc")[0].childNodes[0].nodeValue);

                  document.write("<tr>");
                  document.write("<td class ='bg'>");
                  document.write("<br>");
                  //setup the bookmark to come back to
                  document.write("<h4>Style: " + type + "</h4>");
                  document.write("<br>");
                  document.write("<h2>" + "Location: " + loc + "</h2>");
                  document.write("<br>");
                  document.write("<p>" + "<b>Design notes:</b> " + desc + "</p>");
                  document.write("<br>");
                  document.write("</td>");
                  document.write("<td class ='bg'>");


                  // setup the round corner frame
                  document.write("<br>");
                  document.write("<table class = 'imgframe' cellpadding='0' cellspacing='0' >");
                  document.write("<tr><td class = 'iftopleft'></td><td ></td><td class = 'iftopright'></td></tr>");
                  document.write("<tr><td></td><td >");
                                
                    
                  portid = "portfolio/" + dir;
                  document.write("<a onclick ='loadimages(" + '&#39;' + portid + '&#39;' + "," + i + "," + '&#39;' + image + '&#39;' + ")' href='portfolio/" + dir + "/" + image + " ' title = 'Natural swimming pond " + loc + "'  rel='lightbox[portfolio" + i + "]'>" + "<img  title='Natural swimming pond " + loc + "' alt='Natural swimming pond " + loc + "' src='portfolio/" + dir + '/' + image + "'/></a>");
                  
                  document.write("</td><td ></td></tr>");
                  document.write("<tr><td class = 'ifbotleft'></td><td></td><td class = 'ifbotright'></td></tr>");
                  document.write("</table>");
                  document.write("<br>");
                    
                  document.write("</td>");
                  document.write("</tr>");

              }
              document.write("</table>");
         
    }
    else {
        // if id > 50 then it means we want to force the featured project
        // to be 50 - the id eg, if you want to force project 1 then send 51 
        // get the single portfolio item for the required month
        // need to check that the month we have we enough portfolio items
        // else choose a random portfolio item
        // eg if month = 10 and we have only 5 items we need to change to portfolio
        // item 5.

        i = id;
        buildframe = false; 

        if (i > 50) { // we want to force a specifc image
            i = id - 50 - 1;
            buildframe = true; 
        }
        else {
            if (i == 0) { // we want a random image
                noofitems = x.length - 1;
                c = Math.random() * noofitems;
                i = Math.round(c);
            }
            else {
                noofitems = x.length - 1; // we want to an image based on a date
                if (i > noofitems) { // if we dont have enough itmes choose a random image
                    c = Math.random() * noofitems;
                    i = Math.round(c);
                }   
            }
        }
        dir = (x[i].getElementsByTagName("dir")[0].childNodes[0].nodeValue);
        image = (x[i].getElementsByTagName("image")[0].childNodes[0].nodeValue);
        loc = (x[i].getElementsByTagName("loc")[0].childNodes[0].nodeValue);
        type = (x[i].getElementsByTagName("type")[0].childNodes[0].nodeValue);

        if (!buildframe) {
            document.write("<h3>Featured Project</h3><br>");
        }
        document.write("<div class = 'featureimg'>");
      
        if (!buildframe) {
            document.write("<h5>" + "<a name='item" + i + "'>" + "" + "</a>" + type + "");
            document.write("<br>Location: " + loc + "</h5>");
        }
        if (buildframe) {
            document.write("<table class = 'imgframe' cellpadding='0' cellspacing='0' >");
            document.write("<tr><td class = 'iftopleft'></td><td >");
            document.write("<h5>" + "<a name='item" + i + "'>" + "" + "</a>" + type + "");
            document.write("<br>Location: " + loc + "</h5>");
            document.write("</td><td class = 'iftopright'></td></tr>");
            document.write("<tr><td></td><td >");
        }
        portid = "portfolio/" + dir;


        if (buildframe) {

            document.write("<a href='featureproject.htm' title = 'Natural swimming pond " + loc + "'>" + "<img  title='Natural swimming pond " + loc + "' alt='Natural swimming pond " + loc + "' src='portfolio/" + dir + '/' + image + "'/></a>");
        }
        else {
            document.write("<a onclick ='loadimages(" + '&#039;' + portid + '&#039;' + "," + i + "," + '&#039;' + image + '&#039;' + ")' href='portfolio/" + dir + "/" + image + "' title = 'Natural swimming pond " + loc + "' rel='lightbox[portfolio" + i + "]'>" + "<img  title='Natural swimming pond " + loc + "' alt='Natural swimming pond " + loc + "' src='portfolio/" + dir + '/' + image + "'/></a>");
        }
        if (buildframe) {
            document.write("</td><td ></td></tr>");
            document.write("<tr><td class = 'ifbotleft'></td><td>");
            document.write("<br><h5>Click on the image to see details</h5>");
            document.write("</td><td class = 'ifbotright'></td></tr>");
            document.write("</table>");
        }
        else {
            document.write("<br><h5>Click on the image to view images</h5>");
        }
        document.write("</div>");

       
    }


}

function createimageholders() {
    // need to avoid a conflict with prototype.js
    var jq = jQuery.noConflict();

    // We need to create a place holder for a max 20 images.
    for (i = 0; i < 20; i++) {
        document.write("<a id = 'image" + i + "' href=''  rel=''></a>");
    }
}

function topframe (){
            document.write("<table class = 'imgframe' cellpadding='0' cellspacing='0' >");
            document.write("<tr><td class = 'iftopleft'></td><td >");
            document.write("</td><td class = 'iftopright'></td></tr>");
            document.write("<tr><td></td><td >");
}

function botframe (){
            document.write("</td><td ></td></tr>");
            document.write("<tr><td class = 'ifbotleft'></td><td>");
            document.write("</td><td class = 'ifbotright'></td></tr>");
            document.write("</table>");
}