//PORTFOLIO VIEW
function portfolioView(url) {
	window.open(url, 'portfolioView', 'width=500,height=570,resizable=0,scrollbars=0');
}

//PRELOAD SPINNER IMAGE
headStartSpin = new Image(); 
headStartSpin.src = "i/spin_portfolio.gif";

//PORTFOLIO AJAX
var portfolio = {
	myConn: false, 
	body: false,
	target1: false,
	target2: false,
	target3: false,
	loader: false,
	init: function(target1id, target2id, target3id) {
		//TEST FOR METHODS AND ELEMENTS
		if(!document.getElementById ||
		!document.getElementsByTagName ||
		!document.getElementById(target1id) ||
		!document.getElementById(target2id) ||
		!document.getElementById(target3id)) return;
	
		//SET AND TEST XHCONN, QUIT IF IT DOESN'T WORK
		portfolio.myConn = new XHConn();
		if(!portfolio.myConn) return;

		//GET THE BODY AND TARGETS
		portfolio.body = document.getElementsByTagName('body')[0];
		portfolio.target1 = document.getElementById(target1id);
		portfolio.target2 = document.getElementById(target2id);
		portfolio.target3 = document.getElementById(target3id);
	},
	
	//AJAX CALL
	getContent: function(reqId) {
		//START THE LOADER
		portfolio.buildLoader();
		
		//DO AFTER CALL IS COMPLETE
		var fnWhenDone = function(oXML) {
			
			xml = oXML.responseXML;
			
			var xmlId = portfolio.getNodeValue(xml, 'id');
			var xmlTitle = portfolio.getNodeValue(xml, 'title');
			var xmlClient = portfolio.getNodeValue(xml, 'client');
			var xmlURL = portfolio.getNodeValue(xml, 'url');
			var xmlURL_display = portfolio.getNodeValue(xml, 'url_display');
			var xmlMedium = portfolio.getNodeValue(xml, 'medium');
			var xmlThumb = portfolio.getNodeValue(xml, 'thumb');
			
			// format incase of empty optional nods
			if(xmlURL == "BLANK") {
				var optionalURL = "&nbsp";
			} else {
				var optionalURL = "<a href=\"http://" + xmlURL + "\" target=\"_blank\">" + xmlURL_display + "</a></li>";
			}
			
			// pause for smooth transition and give image loading a headstart
			var paused = function() {
				portfolio.target1.innerHTML = "<a href=\"javascript:portfolioView(\'portfolio_view.php?id=" + xmlId + "\')\"><img src=\"i/portfolio/" + xmlThumb + "\" width=\"274\" height=\"195\" alt=\"View Project\" /></a>" +
											  "<div id=\"permalink\"><a href=\"portfolio.php?id=" + xmlId + "\">Permalink</a> &lsaquo;</div>";
				portfolio.target2.innerHTML = "<li id=\"project_title\">" + xmlTitle + "</li>" +
											  "<li><strong>Client:</strong> " + xmlClient + "</li>" +
											  "<li><strong>URL:</strong> " + optionalURL +
											  "<li><strong>Medium:</strong> " + xmlMedium + "</li>";
				portfolio.target3.innerHTML = "<a href=\"javascript:portfolioView(\'portfolio_view.php?id=" + xmlId + "\')\"><span>View Project</span></a>";
			}
			
			headStart = new Image(); 
			headStart.src = "i/portfolio/" + xmlThumb;
			setTimeout(paused, 600);
		}; 
    	
		//USE XHCONN'S CONNECT METHOD
		portfolio.myConn.connect('portfolio.php', 'POST', 'reqId=' + reqId, fnWhenDone);
	},
	
	//BUILD THE LOADER
	buildLoader: function() { //
		portfolio.loader = portfolio.target1.innerHTML = "<img src=\"i/spin_portfolio.gif\" width=\"274\" height=\"195\" alt=\"Loading\" />" +
														 "<div id=\"permalink\">Permalink &lsaquo;</div>";
		portfolio.target2.innerHTML = "<li id=\"project_title\">Loading...</li>" +
									  "<li><strong>Client:</strong> &nbsp;</li>" +
									  "<li><strong>URL:</strong> &nbsp;</li>" +
									  "<li><strong>Medium:</strong> &nbsp;</li>";
		portfolio.target3.innerHTML = "<a href=\"#\"><span>View Project</span></a>";
	},
	
	//NODE VALUE RETRIEVER
	getNodeValue: function(tree, el) {
		return tree.getElementsByTagName(el)[0].firstChild.nodeValue;
	},
	
	//THE ADD EVENT FUNCTION
	addEvent: function(obj, type, fn) {
		if (obj.addEventListener) obj.addEventListener(type, fn, false);
		else if (obj.attachEvent) {
			obj["e"+type+fn] = fn;
			obj[type+fn] = function() {
				obj["e"+type+fn](window.event);
			};
			obj.attachEvent("on"+type, obj[type+fn]);
		}
	}
};

//PORTFOLIO AJAX, RUN INIT ON PAGE LOAD
portfolio.addEvent(window, 'load',
	function(){ portfolio.init('column_1', 'project', 'view_project'); }
);