var portfolio = new Array();
    var currentPortfolioPosition = 0;
    var currentImage = 0;
    var THUMBS_PER_PAGE = 12;
    var THUMBS_PER_ROW = 3;
    var nextThumb = 0;
    var lastThumb = null;
    
	
	var Project = new Class
    ({
	    initialize: function(id, client, thumbnail, name, caption, livelink, services) 
	    {
	        this.id = id;
		    this.client = (client || " ");
		    this.thumbnail = (thumbnail || " ");
		    this.name = (name) ? " <span class=\"pipe\">|</span> " + name : "";
		    this.caption = (caption || "&nbsp;");
		    this.livelink = (livelink) ? " <span class=\"pipe\">|</span> <a href=\"" + livelink + "\" target=\"_blank\">View Live Site</a>" : "";
		    this.services = (services || "");

		    this.images = new Array();
		    this.relatedLinks = new Array();
	    },
	    getId: function()
	    {
	        return this.id;
	    },
	    getClient: function() 
	    {
		    return this.client;
	    },
	    getThumbnail: function() 
	    {
		    return this.thumbnail;
	    },
	    getName: function() 
	    {
		    return this.name;
	    },
	    getCaption: function() 
	    {
		    return this.caption;
	    },
	    getLiveLink: function() 
	    {
		    return this.livelink;
	    },
	    getServices: function() 
	    {
		    return this.services;
	    },
	    addImage: function(filename) 
	    {
	        if(!this.images)
	            this.images = new Array();
	            
	        this.images[this.images.length] = filename;
	    },
	    getImages: function() 
	    {
		    return this.images;
	    },
	    addRelatedLink: function(link)
	    {
	        this.relatedLinks[this.relatedLinks.length] = link;
	    },
	    getRelatedLinks: function()
	    {
	        return this.relatedLinks;
	    }
    }); 
	
	function loadImage()
    {   
        if(this.id && this.id.indexOf("prev") != -1)
            currentImage--;
        else if(this.id && this.id.indexOf("next") != -1)
            currentImage++;  
                
        var myFx = new Fx.Style("current-image", "opacity", {duration: 500, onComplete: 
            function() 
            {
                var scrollerString = "";
                
                var imgArray = portfolio[currentPortfolioPosition].getImages();
                          
                if(imgArray.length > 1)
                {
					scrollerString += "<span class=\"pipe\">|</span> ";
				
                    if(currentImage != 0)
                        scrollerString += "<span id=\"prev-link\" ><a href=\"javascript:void(0);\" id=\"prev-link-hover\" class=\"scroller-button\">&nbsp;</a></span>";
                    else
                        scrollerString += "<span id=\"link-place-holder\"></span>";
                                      
                    scrollerString += (currentImage + 1) + " of " + imgArray.length;
                                 
                    if(currentImage != (imgArray.length - 1))
                       scrollerString += "<span id=\"next-link\" ><a href=\"javascript:void(0);\" id=\"next-link-hover\" class=\"scroller-button\">&nbsp;</a></span>";
                }
                            
                $("scroller").innerHTML = scrollerString; 
                
                if($("image"))
                    $("current-image").removeChild($("image"));

//		        var img = new Element("img");
//		        img.onload = function(){ var myFx = new Fx.Style("current-image", "opacity").custom(0,1); $("scroller").style.display = ""; };
//		        img.setProperty("src", "gallery/images/" + imgArray[currentImage]);
//		        img.setProperty("id", "image");
//		        img.setProperty("class", "image");
//		        
//		        $("current-image").appendChild(img);

                $("current-image").style.backgroundImage = "url(gallery/images/" + imgArray[currentImage] + ")";
                $("current-image").style.height = "349px";
		        
		        // set next object link
		        if(imgArray[currentImage + 1])
		        {
		            $("next-obj").onclick = loadImage;
		            $("next-obj").style.display = "";
		        }
		        else if(portfolio[currentPortfolioPosition + 1])
		        {
		            $("next-obj").onclick = new Function("fixThumbsLoadProject(\"" + portfolio[currentPortfolioPosition + 1].getId() + "\");"); 
		            $("next-obj").style.display = "";
		        }
		        else
		            $("next-obj").style.display = "none";
		        
		        // set previous object link
		        if(imgArray[currentImage - 1])
		        {
		            $("prev-obj").onclick = loadImage;
		            $("prev-obj").style.display = "";
		        }
		        else if(portfolio[currentPortfolioPosition - 1])
		        {
		            $("prev-obj").onclick = new Function("fixThumbsLoadProject(\"" + portfolio[currentPortfolioPosition - 1].getId() + "\");"); 		            
                    $("prev-obj").style.display = "";
                }
                else
                    $("prev-obj").style.display = "none";
               
                if($("prev-link"))
                    $("prev-link").onclick = loadImage;
                    
                if($("next-link"))
                    $("next-link").onclick = loadImage;
                    
                    var myFx = new Fx.Style("current-image", "opacity").custom(0,1); $("scroller").style.display = "";
		    }
        }).custom(1,0);
    }
    
    function fixThumbsLoadProject(projectId)
    {
        loadProject(projectId);
    
        if(currentPortfolioPosition > lastThumb)
        {
            loadThumbs();
        }
        else if(currentPortfolioPosition == (lastThumb - THUMBS_PER_PAGE) ||
               (currentPortfolioPosition == (portfolio.length - (portfolio.length % THUMBS_PER_PAGE)) - 1))
        {
            prevThumbs();
        }
    }
    
    function getPortfolioPosition(id)
    {
        for(var i = 0; i < portfolio.length; i++)
        {
            if(portfolio[i].getId() == id)
                return i;
        }
        return null;
    }
    
    function loadProject(projectId)
    {
        currentPortfolioPosition = (getPortfolioPosition(projectId)) ? getPortfolioPosition(projectId) : 0;
        currentImage = 0;
        loadImage();
        
        $("scroller").style.display = "none";
        $("client").innerHTML = portfolio[currentPortfolioPosition].getClient();
        $("name").innerHTML = portfolio[currentPortfolioPosition].getName();
        $("caption").innerHTML = portfolio[currentPortfolioPosition].getCaption();
        $("link").innerHTML = portfolio[currentPortfolioPosition].getLiveLink();
        
        if(portfolio[currentPortfolioPosition].getServices().length > 0)
            $("services").innerHTML = "<span id=\"services-title\">Services:</span> " + portfolio[currentPortfolioPosition].getServices();
        else
            $("services").innerHTML = "";
        
        if(portfolio[currentPortfolioPosition].getRelatedLinks().length > 0)
            $("related-projects").innerHTML = "<span class=\"pipe\">|</span> Related projects: " + portfolio[currentPortfolioPosition].getRelatedLinks().join(", ");
        else
            $("related-projects").innerHTML = "";

        selectCurrentThumb();
    }
    
    function selectCurrentThumb()
    {            
        portfolio.each(function(project){
            var id =  project.getId();
            if($("thumb" + getPortfolioPosition(id)))
                $("thumb" + getPortfolioPosition(id)).className = "";
        });
                
        if($("thumb" + currentPortfolioPosition)) 
            $("thumb" + currentPortfolioPosition).className = "selected-thumb";
    }

    function loadThumbs()
    {
        if($("thumb-table"))
            $("thumb-table").remove();
    
        var thumbTable = new Element("table");
        thumbTable.id = "thumb-table";
		var thumbTbody = new Element("tbody");	
		
		var spaceHolder = new Element("td");
        spaceHolder.innerHTML = "&nbsp;";	
        
        if(nextThumb < 0)
			nextThumb = 0;
    
        var ROWS_PER_PAGE = THUMBS_PER_PAGE / THUMBS_PER_ROW;
    
        for(var i = 0; i < ROWS_PER_PAGE; i++)
        {
            var tr = new Element("tr");
            for(var j = 0; j < THUMBS_PER_ROW; j++)
            {
                if(portfolio[nextThumb])
                {
                    lastThumb = nextThumb;
                
                    var td = new Element("td");
                    td.id = "thumb" + lastThumb;
                    td.innerHTML = "<a href=\"javascript:void(0);\" class=\"thumb-link\"><img src=\"gallery/thumbs/" + portfolio[nextThumb].getThumbnail() + "\" /></a>";
                    td.onclick = new Function("loadProject(\"" + portfolio[nextThumb].getId() + "\");");
                    tr.appendChild(td);
                    
                    nextThumb++;
                }
                else
                {
                    tr.appendChild(spaceHolder.clone());
                }
            }
            thumbTbody.appendChild(tr);
        }

        var arrows = new Element("tr");

        if((lastThumb - (THUMBS_PER_PAGE - 1)) != 0)
        {
            var prevArrow = new Element("td");
            prevArrow.innerHTML = "<img src=\"images/big-arrow-left.gif\" \>";
            prevArrow.className = "thumb-nav-arrow";
            prevArrow.onclick = prevThumbs;       
            arrows.appendChild(prevArrow);
        }
        else
            arrows.appendChild(spaceHolder.clone());

        arrows.appendChild(spaceHolder.clone());

        if(lastThumb < (portfolio.length - 1))
        {
            var nextArrow = new Element("td");
            nextArrow.innerHTML = "<img src=\"images/big-arrow-right.gif\" \>";
            nextArrow.className = "thumb-nav-arrow";
            nextArrow.onclick = loadThumbs;
            arrows.appendChild(nextArrow);
        }
        else
            arrows.appendChild(spaceHolder.clone());
        
        thumbTbody.appendChild(arrows);
        thumbTable.appendChild(thumbTbody);
        $("thumbnails").appendChild(thumbTable);

        selectCurrentThumb();
    }
    
    function prevThumbs()
    {
        if(lastThumb == portfolio.length - 1)
            nextThumb -= ((portfolio.length % THUMBS_PER_PAGE) + THUMBS_PER_PAGE);
        else
            nextThumb -= (2 * THUMBS_PER_PAGE);

	    loadThumbs();
    }
    
    function createProjects(xml)
    {
        var projects = xml.getElementsByTagName("PROJECT");
        var tempArray = new Array();

	    for (var i = 0; i < projects.length; i++) 
	    {
            var tempProject = new Project(getNodeValue(projects[i], "ID"),
                                          getNodeValue(projects[i], "CLIENT"), 
                                          getNodeValue(projects[i], "THUMBNAIL"), 
                                          getNodeValue(projects[i], "NAME"), 
                                          getNodeValue(projects[i], "CAPTION"), 
                                          getNodeValue(projects[i], "LIVELINK"), 
                                          getNodeValue(projects[i], "SERVICES")
                                         );
            //validate ID
            for (var j = 0; j < tempArray.length; j++)
                if(tempArray[j].getId() == tempProject.getId())
                    throw {message: "Duplicate project IDs!"};        
                          
	        // Add images
	        var imageTags = projects[i].getElementsByTagName("IMAGE");
	        for (var j = 0; j < imageTags.length; j++)
	            if(imageTags[j].firstChild != null)
	                tempProject.addImage(imageTags[j].firstChild.nodeValue);
	                
	        // Add related project links        
	        var relatedProjs = projects[i].getElementsByTagName("RELATEDPROJECT");
	        for (var j = 0; j < relatedProjs.length; j++)
                if(getNodeValue(relatedProjs[j], "TYPE") && getNodeValue(relatedProjs[j], "ID"))
                    tempProject.addRelatedLink("<a href=\"gallery.htm?type=" + getNodeValue(relatedProjs[j], "TYPE") + "&project=" + getNodeValue(relatedProjs[j], "ID") + "\">" + getNodeValue(relatedProjs[j], "TYPE") + "</a>");

	        tempArray[i] = tempProject;
		}
		return tempArray;
    }
    
    function getNodeValue(object,tag)
    {
        var node = object.getElementsByTagName(tag)[0]; 
         
        if(node && node.firstChild)
           return node.firstChild.nodeValue;
        else
           return null;
}