// JavaScript Document
/* 
** 
** nonintrusive js reads data from page and creates thumbnail and tag navigation
**
*/


//function to return a random dark color:
function getColor(){
	var color_str = "#"+Math.round(32+ Math.random()*32).toString(16)+Math.round(32+ Math.random()*32).toString(16)+Math.round(32+ Math.random()*32).toString(16);
	return color_str;
}

//function to strip undesirable characters from a string
function cleanString(str){

	///kludgy!!!
	
	//split the string at the bad characters
	
	var bad_chars = /[\x00-\x20]+/;
	var string_arr = str.split(bad_chars);
	//initialize your return variables
	var return_str="";
	var return_str_arr = [];
	//build an array of all valid substrings
	for (var s in string_arr){
		if (string_arr[s].charCodeAt(0)!=10&&string_arr[s]!=""){
			return_str_arr.push(string_arr[s]);
		}
	}
	//add each valid substring and a space after each substring but the last one
	for (var ss=0;ss<return_str_arr.length;ss++){
		return_str +=return_str_arr[ss];
		if (ss<(return_str_arr.length-1)){
			return_str+=" ";
		}
	}
	return return_str;
}


/**-----------THUMBNAILS-------------*/

//create an array to hold the thumbnail objects
if (!thumbnail_arr){
	var thumbnail_arr = new Array();
}

//create the TagManager instance if one is not already created
if (!thumbnailManager){
	var thumbnailManager = new ThumbnailManager('thumbnailManager', 'thumbnailContainer', thumbnail_arr, 160, 0,0,800,120);
}

/**-----------TAGS-------------*/

//create an array to hold the tag objects
if (!tag_arr){
	var tag_arr = new Array();
}

//create the TagManager instance if one is not already created
var tagManager = new TagManager('tagManager', tag_arr, 205,10,780,170);
tagManager.onclickHandler = function(arg) {
	thumbnailManager.showThumbnails(arg);
	if (thumbnailManager.getThumbnailPos(thumbnailManager.getSelectedThumbnail())<0){
		pageBuilder.clearContent(contentPanelId);
	}
};

/**----------LISTENER-----------*/

//create an event Listener for the thumbnails to interface with the other objects
var thumbnailListener = new Object();
//create an eventHandler function
thumbnailListener.doEvent = function(eventName, arg){
	switch (eventName){
	case "thumbnailRollover":
		tagManager.hiliteTags(tagManager.getTags(arg));
		break;
	
	case "thumbnailClicked":
		tagManager.hiliteTags(tagManager.getTags(arg));
		break;
	}
}

thumbnailManager.addListener(thumbnailListener);

//get the thumbnail container div
var thumbnailContainer = document.getElementById("thumbnails");

//get the thumbnail divs 
if (thumbnailContainer &&thumbnailContainer.hasChildNodes()){
	var thumbnailDivs = thumbnailContainer.childNodes;
	
	//declare the variables you will fill for each thumbnail
	var thumbnail;
	var thumbnailID;
	var thumbnailName;
	var thumbnailLink;
	var thumbnailFileName;
	var tagsArray;

	//loop through the thumbnail divs
	for (var c in thumbnailDivs){
		thumbnail = thumbnailDivs[c];
		if (!thumbnail.id){
			continue;
		}

		thumbnailID = thumbnail.id;
		thumbnailName = document.getElementById(thumbnailID+"-label").firstChild.nodeValue;
		thumbnailLink = thumbnail.getElementsByTagName("a")[0].href;
		thumbnailFileName = thumbnail.getElementsByTagName("img")[0].src;
		
		//add new thumbnail to the thumbnailManager
		thumbnailManager.addThumbnail(thumbnailName, thumbnailID, thumbnailID+"-label", thumbnailLink, thumbnailFileName, getColor());
		
		//get and add tags to the tagManager
		tagsArray = document.getElementById(thumbnailID+"-tags").childNodes;
		for (var tagIndex in tagsArray){
			if (!tagsArray[tagIndex].firstChild){
				continue;
			}
			tagManager.addTag(tagsArray[tagIndex].firstChild.nodeValue, thumbnailName);			
		}
		
	}
}

//tell the thumbnailManager to do its thing:
thumbnailManager.showThumbnails();

//tell the tagManager to do its thing:
tagManager.showTags();

//check to see if a single project is being displayed, and if so, select the corresponding thumbnail
if (document.getElementById("project")){
	var currentProject = cleanString(document.getElementById("projectTitle").firstChild.nodeValue);
	thumbnailManager.selectThumbnail(currentProject);
}

//create a Slideshow if there are multiple images on the page

//get the slideshow container div
var slideshowContainer = document.getElementById("projectImages");
if (slideshowContainer && slideshowContainer.hasChildNodes()){
	//get the divs holding the images, captions and image thumbails
	var slideshowImageDivs = slideshowContainer.childNodes;
	
	//loop through the slideshow divs to create an array of objects representing each image
	var slides_arr = [];
	//declare variables to be filled for each slide
	var slide;
	var slideChildren;
	var slideChildNode;
	var slideImage;
	var slideCaption;
	var slideThumbnail;
	
	for (var s in slideshowImageDivs){
		slide = slideshowImageDivs[s];
		if (slide.nodeType==1 && slide.hasChildNodes()){
			slideChildren = slide.childNodes;
			slideImage = "";
			slideCaption = "";
			slideThumbnail = "";
			for (var sc in slideChildren){
				slideChildNode = slideChildren[sc];
				if (slideChildNode.nodeType== 1){
					if (slideChildren[sc].getAttribute("id") == "projectImage"){
						slideImage = slideChildren[sc].getElementsByTagName("img")[0].src;
					}
					if (slideChildren[sc].getAttribute("id") == "projectImageCaption"){
						slideCaption = slideChildren[sc].firstChild.nodeValue;
					}
					if (slideChildren[sc].getAttribute("id") == "projectImageThumbnail"){
						slideThumbnail = slideChildren[sc].getElementsByTagName("img")[0].src;
					}
				}
			}
			slides_arr.push({
							src: slideImage,
							caption: slideCaption,
							thumbnail:slideThumbnail
							});
		
		}
	}
	
	if (slides_arr.length > 1){
		showSlideshow("projectImages", 600, 620, slides_arr);
	}
}