// portfolio


$(document).ready( function() {

	// draw navigation
	var navString = "<ul class='navList'>";
	navString += "<li class='navOn'><a class='nav' href='index.php'>work</a></li>";
	navString += "<li class='navOff'><a class='nav' href='news.php'>news</a></li>";
	navString += "<li class='navOff'><a class='nav' href='https://mikelay.speedprojects.net' target='_blank'>client access</a></li>";
	navString += "<li class='navOff'><a class='nav' href='contact.php'>contact</a></li>";
	navString += "</ul>";
	
	$("#nav").append(navString);


	// Open the xml file
	
	var output = "";
	
	$.get("xml/portfolio.xml",{},function(xml){
      		
	  	
		// Run the function for each tag in the XML file
		$('project',xml).each(function(i) {
			
			output += "<div class='portfolioItem'>";
			
			output += "<div class='portfolioImage'><img alt='"+$(this).find("image").attr("alt")+"' src='images/"+$(this).find("image").text()+"'></div>";
			output += "<h1>"+$(this).attr("title")+"</h1>";
			output += "<p class='portfolioDescription'>"+$(this).find("description").text()+"</p>";
			
			if ($(this).find("youTube").text() != "") {
				output += "<div class='watchButton'><a class='watch' href='"+$(this).find("youTube").text()+"' target='_blank'>> watch video</a></div>";
			}
			
			output += "<div class='spaceroo' style='height:25px'></div>";			
			output += "</div><!--end pItem-->";
			
		});
		
		
		
		// Update the DIV
		$("#pageContent").append(output);
		
		
	}); // end read xml

}) // end ready function