addLoadEvent(setupGalleryNav);
addLoadEvent(setupThumbNav);
addLoadEvent(showFirstPic);

// Section Navigation
function setupGalleryNav()
{	
	//display first set of thumbnails
	showOrHide('thumbnails', 'div', 'first', 'showIt', 'hide');
	
	// Get all anchors on section Nav
	var nav = document.getElementById('gallNav');
	var links = nav.getElementsByTagName('A');
	
	for(var i=0, j=links.length; i < j; i++)
	{
		//Stops the default behavior
		//Calls function from utils.js for cross-browser access
		addEvent(links[i], 'click', stopDefault);
		
		// Calls function to change status indication
		addEvent(links[i], 'click', setupLink);
	}
};

// Thumbnails Gallery Nav (displayed below picture placeholder)
function setupThumbNav()
{ 
	// Get all anchors on Thumbnails Gallery Nav
	var thumbNav = document.getElementById('thumbnails');
	var thumbLinks = thumbNav.getElementsByTagName('A');

	for(var i=0, j=thumbLinks.length; i < j; i++)
	{
		addEvent(thumbLinks[i], 'click', stopDefault);
		addEvent(thumbLinks[i], 'click', showPic);
	}
}

//Used to change status indication using classes created through CSS
function setupLink(e)
{
	var target = e.target || window.event.srcElement;
	
	var itemName = target.getAttribute('href').substring(1);
	//var itemName = target.firstChild.nodeValue.toLowerCase();
	showOrHide('thumbnails', 'div', itemName, 'showIt', 'hide');
	
	//set status indicator for selected link
	var nav = document.getElementById('gallNav');
	var links = nav.getElementsByTagName('A');
	
	for(var i=0, j=links.length; i < j; i++)
	{
		changeClassName('remove',links[i],'statusOn');
	}
	
	//...then, only turn on the one we need
	changeClassName('add',target,'statusOn');
}

//Show or hide thumbnails according to link clicked on section Nav
function showOrHide(parent, type, myElement, classOn, classOff) 
{
	var main = document.getElementById(parent);
	var items = main.getElementsByTagName(type);
	var myEl = document.getElementById(myElement);
	
	//turn 'em all off...
	for(var i=0; i < items.length; i++)
	{
		changeClassName('remove',items[i],classOn);
		changeClassName('add',items[i],classOff);
	}
	
	//...then, only turn on the one we need
	changeClassName('swap',myEl,classOn,classOff);
}

//Show pic depending on click on Thumbnails Nav
function showPic(e)
{
	//determine if browser can support this function
	if(!document.getElementById) return false;
	if(!document.getElementsByTagName) return false;
	
	//if elements not available then bail
	if(!document.getElementById("currentPicHolder")) return false;
	if(!document.getElementById("description")) return false;
	
	//create a cross-browser reference to object clicked on
	if (window.event)//IE event model
	{
		var target = window.event.srcElement;
	}
	else if(e)//W3C event model
	{
		var target = e.target;
	}
	
	//Get href from A tag
	var url = target.parentNode.getAttribute("href");
	
	//check if any title text exists
	if(target.parentNode.getAttribute("title"))
	{
		var capText = target.parentNode.getAttribute("title");
	}
	else
	{
		var capText = "";
	}
	
	// Vars for picture placeholder and description of each picture
	var pic = document.getElementById('currentPicHolder');	
	var caption = document.getElementById('description');
	
	//Place the picture on placeholder using the DOM
	pic.setAttribute('src', url);
	
	if(caption.firstChild.nodeType == 3)
	{
		caption.firstChild.nodeValue = capText;
	}
}

//Tweaked showPic function to have first thumbnail show on picture placeholder at first load
function showFirstPic()
{
	//determine if browser can support this function
	if(!document.getElementById) return false;
	if(!document.getElementsByTagName) return false;
	var links = document.getElementById("first").getElementsByTagName('A');
	var url = links[0].getAttribute("href");
	
	//check if any title text exists
	if(links[0].getAttribute("title"))
	{
		var capText = links[0].getAttribute("title");
	}
	else
	{
		var capText = "";
	}
	
	// Vars for picture placeholder and description of each picture
	var pic = document.getElementById('currentPicHolder');	
	var caption = document.getElementById('description');
	
	//Place the picture on placeholder using the DOM
	pic.setAttribute('src', url);
	
	if(caption.firstChild.nodeType == 3)
	{
		caption.firstChild.nodeValue = capText;
	}
}