// JavaScript Document
	/*										GLOBAL VARIABLES								*/
	var categoryTitles  = new Array();
	var projects		= new Array();


	/*										WINDOW ONLOAD FUNCTION							*/
window.addEvent('domready', function() {
	
	/*										MAIN LINKS										*/
	/*										MAIN LINKS VARIABLES							*/
	var homeLink 		= document.getElementById("home");
	var bioLink 		= document.getElementById("bio");
	//var workLink 		= document.getElementById("work");
	var blogLink 		= document.getElementById("blog");
	var resumeLink 		= document.getElementById("resume");
	var contactLink 	= document.getElementById("contact");
	
	/*										MAIN LINKS EVENTS								*/
	homeLink.onmouseover 		= rollOver;
	homeLink.onmouseout 		= rollOut;
	
	bioLink.onmouseover			= rollOver;
	bioLink.onmouseout 			= rollOut;
	
	//workLink.onmouseover 		= rollOver;
	//workLink.onmouseout 		= rollOut;
	
	blogLink.onmouseover 		= rollOver;
	blogLink.onmouseout 		= rollOut;
	
	resumeLink.onmouseover 		= rollOver;
	resumeLink.onmouseout 		= rollOut;
	
	contactLink.onmouseover 	= rollOver;
	contactLink.onmouseout 		= rollOut;
	
	
	/*										THUMB LINKS									*/
	var myXML = "xml/work.xml";
	loadXMLDoc(myXML);

	/*										SLIDING INFO								*/
	/*										SLIDING INFO VARIABLES						*/
	var slidingInfoBox = new Fx.Slide('currentWorkDescrip', {mode: 'horizontal', duration:300});
	
	/*										SLIDING INFO HIDDEN START					*/
	slidingInfoBox.hide();
	
	/*										SLIDING INFO TOGGLE FUNCTION				*/
	$('toggle').addEvent('click', function(e) {
		e = new Event(e);
		
	/*										SLIDING INFO VISIBLE						*/
		if($('open')) {
			slidingInfoBox.slideIn();
			e.stop();
			$('toggle').innerHTML = '<div class="currentWorkToggle" id="close"><!-- --></div>';
	/*										SLIDING INFO HIDDEN							*/
		} else {
			slidingInfoBox.slideOut();
			e.stop();
			$('toggle').innerHTML = '<div class="currentWorkToggle" id="open"><!-- --></div>'
		}
	});
	

	/*										WINDOW ONLOAD CLOSE							*/
});



	/*										MAIN LINKS									*/
	/*										MAIN LINKS ROLLOVER FUNCTION				*/
function rollOver() {
	this.style.borderBottom = "#FFB500 solid 3px";
	this.style.color 		= "#FFB500";
}

	/*										MAIN LINKS ROLLOUT FUNCTION					*/
function rollOut() {
	this.style.borderBottom = "#d3d3d3 solid 3px";
	this.style.color 		= "#808080";
}




	/*										THUMB LINKS									*/
	/*										THUMB LINKS FUNCTIONS						*/
var xmlhttp;
var xmlResponse;
var images = new Array();
var nextImage;
var previousImage;

function loadXMLDoc(url) {
	xmlhttp = null;
	if (window.XMLHttpRequest) {
		// IE7,Firefox, Mozilla, etc.
		xmlhttp = new XMLHttpRequest();
	}
	else if (window.ActiveXObject){
		//code for IE5, IE6
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	if (xmlhttp != null) {
		xmlhttp.onreadystatechange = onResponse;
		xmlhttp.open("GET", url, true);
		xmlhttp.send(null);
	} else {
		alert("Your browser does not support XMLHTTP.");
	}
}

function onResponse() {
	if (xmlhttp.readyState != 4) {
		return;
	}
	if (xmlhttp.status != 200) {
		alert("Problem retrieving XML data");
		return;
	}
	
	xmlResponse = xmlhttp.responseXML;
	parseElements(xmlResponse);
}

function parseElements(xmlResponse) {
   		
   	/*	loops through each category of work */
    for (i=0; i < xmlResponse.documentElement.getElementsByTagName("category").length; i++) {
    
    	/*	assigns each categoryTitle array item a name */
    	categoryTitles[i] = xmlResponse.documentElement.getElementsByTagName("categoryTitle")[i].firstChild.nodeValue;
    	/*	assigns each category an array containing a list of projects specific only to that category */
    	projects[i] = new Array();
    	
    	/*	loops through each category's projects one by one */
    	for (j=0; j < xmlResponse.documentElement.getElementsByTagName("category")[i].getElementsByTagName("project").length; j++){
    	
    		/*	assigns each category's projects's individual project's array an array containing all the information about that specific project */
    		
    		projects[i][j] = new Array();
    		
    		projects[i][j]["title"] = xmlResponse.documentElement.getElementsByTagName("category")[i].getElementsByTagName("project")[j].getElementsByTagName("title")[0].firstChild.nodeValue;
    		
    		projects[i][j]["description"] = xmlResponse.documentElement.getElementsByTagName("category")[i].getElementsByTagName("project")[j].getElementsByTagName("description")[0].firstChild.nodeValue;
    		
    		projects[i][j]["date"] = xmlResponse.documentElement.getElementsByTagName("category")[i].getElementsByTagName("project")[j].getElementsByTagName("date")[0].firstChild.nodeValue;
    		
    		projects[i][j]["position"] = xmlResponse.documentElement.getElementsByTagName("category")[i].getElementsByTagName("project")[j].getElementsByTagName("position")[0].firstChild.nodeValue;
    		
    		projects[i][j]["fileName"] = xmlResponse.documentElement.getElementsByTagName("category")[i].getElementsByTagName("project")[j].getElementsByTagName("fileName")[0].firstChild.nodeValue;
    		
    	}
    }
    
    outputThumbs();
}
		
		
function outputThumbs() {
	/*	thumbsWrapper is the div wrapping all dynamic info for thumbnails */
	var thumbsWrapper = document.getElementById("thumbsOutput");
	
	/*	for loop to write in headers, bottom of headers, and div wrapper for thumbnails */
	for (i=0; i < categoryTitles.length; i++){
		thumbsWrapper.innerHTML += '<h3 class="col1Header">' + categoryTitles[i] + '</h3>';
		thumbsWrapper.innerHTML += '<div class="workColumn2"><!-- --></div>';
		thumbsWrapper.innerHTML += '<div class="workBodyWrapper clear workThumbsWrapper" id="' + categoryTitles[i] + '"></div>';     
		
			/*	for loop to write in each project image and respective information */
			for (j=0; j < projects[i].length; j++) {
				/*	imgWrapper is the div wrapping the image and info of each category (that was written in dynamically) */
				var imgWrapper = document.getElementById(categoryTitles[i]);
				
				imgWrapper.innerHTML += '<div class="thumbBox"><img src="workImages/' + projects[i][j]["fileName"] + '.jpg" onclick="changeMovie(' + i + ', ' + j + ');" class="movThumb" /><p class="thumbTitle"><a href="#" onclick="changeMovie(' + i + ', ' + j + ');" >&raquo; ' + projects[i][j]["title"] + '</a></p></div>';
				
				/*	if statement checks if it's the last project and clears the float */
				if (j == (projects[i].length-1) || (projects[i].length == 1)) {
					imgWrapper.innerHTML += '<div class="clear"><!-- --></div>';
				}
			}
    }
    //Loads initial default movie.
  	changeMovie(0, 0);	
}
 

function changeMovie(i , j) {
	var currentWorkDescrip = document.getElementById("currentWorkDescrip");
	var movieFile = 'workFLV/' + projects[i][j]["fileName"] + '.flv';
    var so = new SWFObject("player.swf", "myMovie", "400px", "300px", "7");
    
    so.addVariable("movie", movieFile);
    so.write("movPlayer");
    
    currentWorkDescrip.innerHTML = '<p id="title"><strong>Title: </strong>&ldquo;' + projects[i][j]["fileName"] + '&rdquo;</p>';
    currentWorkDescrip.innerHTML += '<p id="date"><strong>Date: </strong>' + projects[i][j]["date"] + '</p>';
    
    currentWorkDescrip.innerHTML += '<p id="description"><strong>Description: </strong>' + projects[i][j]["description"] + '</p>';
    
    currentWorkDescrip.innerHTML += '<p id="position"><strong>Position: </strong>' + projects[i][j]["position"] + '</p>';
    
}