// JavaScript Document
$(document).ready( function(){	        
 	var $thumbs = $('#img_list').find('td');
	var $showhere = $('#showhere');
	var $caption = $('#caption');
	
	// mouse moves into one thumbnail image
	$thumbs.mouseenter( function(){
		var $a = $(this).find('a');
		if (!$a.length || $a.hasClass("over")) return;			
		$a.addClass("over").addClass("loading");

		var fname = $a.attr('href');			
		$showhere.fadeTo(25, 0.1, function()
		{
			$caption.empty();
			if (fname.match("Bio") || fname.match("News") || fname.match("Links"))
				showbio(fname, endshow);
			else if (fname.match("index.html"))
			{	
			 // always show the first image from the pointed gallery 
			    var name = fname.replace("_index.html","/Images/work/01.jpg");
				showimg(name, endshow);
			}
			else
				showimg(fname, endshow);
		}); // $showhere.fadeTo
		
	 	function endshow(){
			$a.removeClass("loading");
			$showhere.fadeTo(800, 1.0);					   
		}  // endshow		
		
		
		
	}); // $thumbs.mouseenter
	
	// mouse moves out of one thumbnail image
 	$thumbs.mouseleave( function(){
		$(this.firstChild).removeClass("over");		
	});
	
	function showbio(fname, endshow){
		$.getJSON(fname,function(data) {
			var resume;
			if (fname.match("Bio.json")) 
			{
				var text =  '<div class="p1">' + data['p1']  + '</div>';
				text += '<div class="p2">' + data['p2']  + '</div>';
				text += '<div class="p3">' + data['p3']  + '</div>';
				text += '<div class="p4">' + data['p4']  + '</div>';
				$caption.empty().append(text);
				resume = fname.replace("Bio.json", "Resume.html");
			text = '<div class="item">' + 'Click <a class="loadingText"  target="_blank" href=" '+ resume + '">  here </a> for detailed resume  </div>';
				
			}
			else if (fname.match("News.json")) 
			{
				var text =  '<div class="p1"> <strong>' + data['p1']  + '</strong><br>';
				text +=     					 data['p2']  + '<br>';
				text +=     				     data['p3']  + '</div>';
				text +=     '<div class="p4"> <strong>' + data['p4']  + '</strong><br>';
				text +=     					 data['p5']  + '<br>';
				text +=                          data['p6']  + '</div>';
				text +=     '<div class="p7">' + data['p7']  + '</div>';
				$caption.empty().append(text);
				resume = fname.replace("News.json", "Resume.html");
			text = '<div class="item">' + 'Click <a class="loadingText"  target="_blank" href=" '+ resume + '">  here </a> for detailed resume  </div>';

			}
			else if (fname.match("Links.json")) 
			{
				var text =  '<div class="p1">' + data['p1']  + '</div>';
				$caption.empty().append(text);
				resume = fname.replace("Links.json", "Links.html");
			text = '<div class="item">' + 'Click <a class="loadingText"  target="_blank" href=" '+ resume + '">  here </a> for the websites</div>';
			}
			$caption.append(text);
			$showhere.find('img').remove();
			endshow();												   
		});
	} // showbio
	
	function showimg(fname, endshow){
		// it is an image thumbnail and we want to display the larger image in the viewport
		var img = '<img width=385 src="'+fname+ '" />';
		var title = fname.replace(".jpg", ".json");
		var $oldimg = $showhere.find('img');
		$showhere.prepend(img);
		$oldimg.remove();

		// get the caption for the corresponding image
		$.getJSON(title,function(data) {
			var text =  '<div class="t">' + data['t'] + '</div>';
			text += '<div class="s">' + data['s']  + '<br>' + data['m'] + '<br>' + data['d'] + '</div>' ;
			$caption.empty().append(text);
			endshow();												   
		});
	} // showimg
	
}); // $(document).ready