function xmlLoader(url){
    if(window.XMLHttpRequest){
        var Loader = new XMLHttpRequest();
        //assyncronous mode to load before the 'return' line
        Loader.open("GET", url ,false); 
        Loader.send(null);
        return Loader.responseXML;
    }else if(window.ActiveXObject){
        var Loader = new ActiveXObject("Msxml2.DOMDocument.3.0");
        //assyncronous mode to load before the 'return' line
        Loader.async = false;
        Loader.load(url);
        return Loader;
    }
}

function CreateList(file, portfolioName)	{
	var xmlDoc = xmlLoader(file);
	var xmlPortfolio = xmlDoc.getElementsByTagName('images');
	
	for(var i=0;i < xmlPortfolio.length;i++){//each child node
		imagesPortfolio = xmlPortfolio.item(i);
	
  		if(imagesPortfolio.getAttribute("portfolio") == portfolioName){
			var xmlImages = xmlPortfolio[i].getElementsByTagName('image');
		}
	}
	
	
	var list = document.createElement('ul');

	//add top arrow to the list
	var listItem = document.createElement('li');
	list.appendChild(listItem);
	var prevImage = new Element("img", { src: '../images/port_nav_up.png', id: 'prevImg',  title: 'View Previous Image' });
	listItem.appendChild(prevImage);

	for (i=0; i < xmlImages.length; i++) {

			// grab the elements from the XML
			var position = xmlImages[i].childNodes[0].firstChild.nodeValue;
			var location = xmlImages[i].childNodes[1].firstChild.nodeValue;
			var name = xmlImages[i].childNodes[2].firstChild.nodeValue;

			//preload images for the portfolio
			var img = new Element("img", { src: location, id: 'img_'+ position,  title: name });
			//set the first image in the list to display by default
			if (position == "1") {
				img.setStyles({"display": "block", "opacity":1});
				img.addClass('selected');
			} else {
				img.setStyles({"display": "none", "opacity":0});
			}

			img.injectInside($("images"));

			//create the link for the list element
			var listItem = document.createElement('li');
			list.appendChild(listItem);

			var link = document.createElement('a');
			link.setAttribute("href", 'javascript:SwapImage('+position+'); void(0);');
			link.setAttribute("id", 'link'+position);
			
			//add selected class to the link
			if (position == "1") {
				link.setAttribute('class','selected');
			}
			
			var link_text = document.createTextNode(position);
			link.appendChild(link_text);

			listItem.appendChild(link);
	}

	//add bottom arrow to the list
	var listItem = document.createElement('li');
	list.appendChild(listItem);
	var nextImage = new Element("img", { src: '../images/port_nav_down.png', id: 'nextImg',  title: 'View Next Image' });
	listItem.appendChild(nextImage);

	document.getElementById('port_nav').appendChild(list);

	$("prevImg").addEvent('click', function(){SwapImage(0)});
	$("prevImg").setStyle("cursor", "pointer");
	$("nextImg").addEvent('click', function(){SwapImage(99)});
	$("nextImg").setStyle("cursor", "pointer");
	if (xmlImages.length == 1) {
		document.getElementById("nav_previous").style.visibility = "hidden";	
		document.getElementById("nav_next").style.visibility = "hidden";
	}
	
}


function SwapImage(img_id) {
	var counter = 0;
	var visible_image;
	var selected_image;
	var name, link_name;
	var id;
	var calc;
	//find the current displayed image
	$('images').getChildren('img').each(function(e,i) {
		//add one to the counter to determine the number
		//of images loaded
		counter++;

		//find the image with the selected class
		if ($(e).hasClass('selected')) { 
			//set the current visible image
			visible_image = e;

			//extract selected id for using arrows
			var getID = visible_image.getProperty("id");
			id = getID.substr(getID.search(/_/i)+1, getID.length);
			id = parseInt(id);
			
			//find and remove the select class from the numbered link
			var link_id = 'link' + id
			$(link_id).removeClass('selected');
		}
	});

	if (img_id == 0) {
		//move back one image from the selected image
		//check for position of current id
		if(id == 1) {
			calc = images;
		} else {
			calc = id - 1;
		}
		name = 'img_'+ calc;
		link_name = 'link' + calc;
		showVisDiv("nav_next");
		if(id == 2) {
			hideVisDiv("nav_previous");
		} else {
			showVisDiv("nav_previous");
		}
	} else if (img_id == 99) {
		//move forward one image
		//check for position of current id		
		if(id == images) {
			calc = 1;
		} else {
			calc = id + 1;
		}
		name = 'img_'+ calc;
		link_name = 'link' + calc;
		showVisDiv("nav_previous");
		if(id == images-1) {
			hideVisDiv("nav_next");
		} else {
			showVisDiv("nav_next");
		}
	} else { 
		//set the new image name to display
		name = 'img_'+ img_id;
		link_name = 'link' + img_id;
	}	
	//select the new image
	selected_image = $(name);

	FadeImages(visible_image, selected_image);
	
	//add selected class to the numbered link
	current_selection = $(link_name);
	current_selection.addClass('selected');
}


function FadeImages(visible_image, selected_image) {
	
	
	fadeOut = new Fx.Style(visible_image, 'opacity', {duration: 500, transition: Fx.Transitions.Quad.easeOut});
	fadeIn = new Fx.Style(selected_image, 'opacity', {duration: 500, transition: Fx.Transitions.Quad.easeIn});

	fadeOut.start(1,0).chain(
		function() { 
			visible_image.setStyles({'display':'none'});
			visible_image.removeClass('selected');

			selected_image.setStyles({'display':'block'});
			selected_image.addClass('selected');

			fadeIn.start(0,1); 
		}
	);
}
/* Added by Wil: 10/05/07 */
var images = 0;
var imageName = new Array;
var imageUrl = new Array;

function parsePortfolio() {
	var xmlDoc = xmlLoader(portfolioFile);
	var xmlPortfolio = xmlDoc.getElementsByTagName('images');
	for(var i=0;i < xmlPortfolio.length;i++){//each child node
		imagesPortfolio = xmlPortfolio.item(i);
	
  		if(imagesPortfolio.getAttribute("portfolio") == portfolioName){
			var xmlImages = xmlPortfolio[i].getElementsByTagName('image');
		}
	}
	for (i=0; i < xmlImages.length; i++) {
			// grab the elements from the XML
			var position = xmlImages[i].childNodes[0].firstChild.nodeValue;
			var location = xmlImages[i].childNodes[1].firstChild.nodeValue;
			var name = xmlImages[i].childNodes[2].firstChild.nodeValue;
			//alert(position+", "+location+", "+name);
			imageName[i] = name;
			imageUrl[i] = location;
	}
	images = xmlImages.length;
}
function nav_goPrevious() {
	// alert("# of images:"+images);
	SwapImage(0); 
	// alert("Total images: "+images);
	//void(0);
}
function nav_goNext() {
//	alert(imageUrl[0]);
	SwapImage(99); 
	// alert("Total images: "+images);
	//void(0);
} 
function showDiv(thisId) {
	document.getElementById(thisId).style.display = "block";
}
function hideDiv(thisId) {
	document.getElementById(thisId).style.display = "none";
	document.getElementById(thisId).blur();
}
function showVisDiv(thisId) {
	document.getElementById(thisId).style.visibility = "visible";
}
function hideVisDiv(thisId) {
	document.getElementById(thisId).style.visibility = "hidden";
	document.getElementById(thisId).blur();
}
function showNav() {
	showDiv("nav_previous");
	showDiv("nav_next");
}
function hideNav() {
	hideDiv("nav_previous");
	hideDiv("nav_next");
}
/* end */