// when the document is ready:
	$(document).ready(function(){
		// add the roll over pointer class to the thumbnails
		$("div#imgThumbs ul li, a#enlargeLink").hover(function() {
			$(this).addClass("pointer");
		},function(){
			// remove it on roll off
			$(this).removeClass("pointer");
		});	
		// give the li containing the thumbnails a function
		$("div#imgThumbs ul li").click(function() {	
			// get the html of the li to see what img it is									
			var clickedImg = $(this).html();
			// the name of the dirs containing the image
			var thumbLocation = "sm-imgDir";
			var mediumLocation = "md-imgDir";
			// search and replace function defined below
			var imageToMedium = replaceAll(clickedImg,thumbLocation,mediumLocation);
			// time now to change the medium image
			// fade it out and then do the following stuff
			// also fade out the image link
			$("#enlargeLink").fadeOut("fast");
			$("#imageMedium").fadeOut("fast",function(){
				// empty the content of #imageMedium
				// (as jquery doesnt have innerHTML like javascript does (well I dont think it does lol)
				$(this).empty();
				// now put the new html in the tag
				$(this).append(imageToMedium);
				// and fade back in
				$(this).fadeIn("fast",function() {
					// some action on fade in complete
				});
				// and fade image link back in
				$("#enlargeLink").fadeIn("fast");
			 });
		});
		
		// now give the image link a function
		$("a#enlargeLink").click(function() {
			// so basically get the filename of the image from the souce
			var theImageSrc = $("#imageMedium img").attr('src');
			var imagePath;
			var imageFile;
			// then use this neat bit of javascript to extract the name and path from the source string
			var m = theImageSrc.match(/(.*)[\/\\]([^\/\\]+\.\w+)$/);
			imagePath = m[1];
			imageFile = m[2];
			// grab the project title
			var projectTitle = $("#projectTitle").html();			
			var pageToLoad = $("div#left ul li ul li.current a").attr('href');			
			pageToLoad = replaceAll(pageToLoad,".htm","");			
			// and make the large image page load with a querystring thing in place
			var urlToLoad = pageToLoad+"-lgImg.htm?imageSelection="+imageFile+"&projectTitle="+projectTitle;
			window.location = urlToLoad;
		});
		// this checks the query string to see if the targeted variable exists
		if ($.getURLParam("imageSelection")!=null) {
			// if so
			var imageSelection = $.getURLParam("imageSelection");
			// set what you want the target image to be
			var imgHtmlString = '<img src="images/projects/lg-imgDir/' + imageSelection + '" />'
			$("#targetImage").html(imgHtmlString);
		};
		
		if ($.getURLParam("projectTitle")!=null) {
			var projectTitle = $.getURLParam("projectTitle")
			// search and replace function defined below
			var projectTitle = replaceAll(projectTitle,"%20"," ");
			$("#projectTitle").html(projectTitle);
		};
	});


// this function search and replaces a string and returns the new string
// http://www.daveshuck.com/blog/index.cfm/2006/12/13/Javascript-examples--removeElement-and-replaceAll
function replaceAll( str, searchTerm, replaceWith, ignoreCase )   {
   var regex = "/"+searchTerm+"/g";
   if( ignoreCase ) regex += "i";
   return str.replace( eval(regex), replaceWith );
}


// rel = external to open in new window
$(function(){
	// fix for target=”_blank”
	$("a[@rel~=’external’]").click(function(){
		window.open($(this).attr("href"));
		return false;
	});
});


function toggleLayer( whichLayer )
{
  var elem, vis;
  if( document.getElementById ) // this is the way the standards work
    elem = document.getElementById( whichLayer );
  else if( document.all ) // this is the way old msie versions work
      elem = document.all[whichLayer];
  else if( document.layers ) // this is the way nn4 works
    elem = document.layers[whichLayer];
  vis = elem.style;
  // if the style.display value is blank we try to figure it out here
  if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)
    vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none';
  vis.display = (vis.display==''||vis.display=='block')?'none':'block';
}


function initiateLayers()
{
	toggleLayer('otherProjs');
}