/**
    * In response to the user clicking a project link, makes the
	* associated project elements visible.
	*
    * there are 4 project elements: photo, description, location and links.
    *               photo - each project can have multiple photos.  
    *
    *               description - each photo can have an accompanying description or 
    *               a project can use the same description for all photos.  
    *               
    *               links - a project has one set of links. there is a link for each photo. 
    *               clicking on a link brings up a project's photo.  if there are multiple 
    *               descriptions, clicking a link also brings up the description.
    * 
    *               location - a project has one location.
    *
    * manipulation of the projects elements is based on those elements being assigned
    * IDs that adhere to a naming convention.  for a project named museum, which has 
    * 3 photos and a description for each photo, the html should contain elements 
    * with the following IDs:
    * museumPhoto1, museumPhoto2, museumPhoto3, museumDesc1, museumDesc2, musemDesc3,
    * museumLoc, museumLinks
    * 
    * note that photos and descriptions are associated with each through the naming 
    * convention of the element ids.  museumDescN goes with museumPhotoN.
    **/
                    
    function showProject(projName) {
            showPhoto(projName, 1);
            showDesc(projName, 1);
            showLinks(projName);
            showLocation(projName);
            highlightProjectMenuItem(projName);
            //return false;
    }
    
    function showPhoto(projName, photoNum) {            
            // all photos must be nested in a container with the id below
            photoContainerId = "projPhotos";
            
            // photo elements must have an id which follows the naming convention 
            // shown below
            photoId = projName + "Photo" + photoNum;

            showProjectElement(photoContainerId, photoId);
            
            highlightPhotoLink(projName, photoNum);            
    }
    
    function showDesc(projName, photoNum) {
    
            // all descriptions must be nested in a container with the id below
            containerId = "projDescriptions";

            // description elements must have an id which follows the naming 
            // convention shown below
            descId = projName + "Desc" + photoNum;
            
            showProjectElement(containerId, descId);
    }
                    
    function showLinks(projName) {
    
            // all links must be nested in a container with the id below
			outerContainerId = "projLinks";

            // links for a given project are nested in a container with an id
            // which follows the naming convenction shown below
            innerContainerId = projName + "Links";
            
            showProjectElement(outerContainerId, innerContainerId);
            
            highlightPhotoLink(projName, 1);
    }
    
    function highlightPhotoLink(projName, linkNum) {
            // there is a photo-num link for each photo.  highlight the link
            // for th
            containerId = projName + "Links";
            container = document.getElementById(containerId);
            if (container == null)
				return;

            var children = container.childNodes;
            for (var i=0; i<children.length; i++) {
				if (children[i].style) {
					children[i].style.color = "#999999";
                }
            }
            
            element = document.getElementById(projName + "Link" + linkNum);
            if (element != null && element.style)
				element.style.color = "#330000";
	}
	
    function showLocation(projName) {
    
            // all locations must be nested in a container with the id below
            containerId = "projLocations";

            // location elements must have an id which follows the naming convention 
            // shown below
            locationId = projName + "Loc";

            showProjectElement(containerId, locationId);
    }
    
    function highlightProjectMenuItem(projName) {  
    
		var items = new Array();
		items[0] = "ruth";
		items[2] = "sharpe";
		items[3] = "aldredge";
		items[4] = "ctg";
		items[5] = "suarez";
		items[6] = "appl";
		items[7] = "griffice";
		items[8] = "prefab";
		items[9] = "vogelhaus";
		items[10] = "brown";
		items[11] = "redfeathertyp";
		items[12] = "horne";
		items[13] = "brownresidence";
		items[14] = "zavadil";
		items[15] = "roberts";
		items[16] = "hohengarten";
		items[17] = "fustes";
		items[18] = "shepherd";
		items[19] = "burns";
		
		for (var i=0; i<items.length; i++) {
			element = document.getElementById(items[i]);
			if (element != null && element.style) {
				element.style.color = "#999999";
				element.style.fontWeight = "normal";
			}
		}
					
		element = document.getElementById(projName);
		if (element != null && element.style) {
			element.style.color = "#330000";
			element.name = "selected";
			element.blur();
		}				
    }
    

    /*
    * containerId - the id of the element that contains or is the parent of 
    * the given elementId.
    * elementId - the id of the element to be shown.
    */              
    function showProjectElement(containerId, elementId) {
            // hide all elements in the container, then show the one that was specified
            hideChildren(containerId);
            show(elementId);
    }
    
    function hideChildren(id) {
            var container = document.getElementById(id);
            if (container == null)
                    return;
            var children = container.childNodes;
            for (var i=0; i<children.length; i++) {
                    if (children[i].style)
                            children[i].style.display = "none";
            }                       
    }
    
    function show(id) {
        element = document.getElementById(id);
        if (element != null && element.style)
			element.style.display = "block";
    }