$(document).ready(function(){
   // add mouseover event handlers for the thumbs to display data in sidebar
   $(".dynamic").bind("mouseover", mouseOverThumb);
   // add on-click handlers to make a nice big pic instead of the thumb nail
  $(".dynamic").bind("click", thumbClick);
 });

 function mouseOverThumb(event){
 	$.getJSON("portfolio_server.php",{site_id:event.currentTarget.id},showDetails);
}
 
 function thumbClick(event){
	event.preventDefault();
 	$.getJSON("portfolio_server.php",{site_id:event.currentTarget.id},showLargeImage);
 }
 
 function showDetails(details){
	$("#sidebar").html(details.display_html);
 }
 
 function showLargeImage(details){
	// change the sidebar details
	showDetails(details);
	// show the larger image
	// width="1024" height="768" - 100%
	// width="768" height="576" - 75%
	// width="614" height="460" - 60%
	// width="512" height="384" - 50%
	// construct a hidden dialog div
	var startContent = '<div id="dialog" title="' +  details.image_alt + '" >';
	var imageContent = '<img style="float:none;margin: 0 0 0 15px;" src="' + details.image_file + '" alt="' +  details.image_alt + '" width="614" height="460" />';
	if(details.site_url){
		var linkContent = '<br/><a href="' + details.site_url + '" >Go to site</a>';
	}else{
		var linkContent = '';
	}
	var endContent = '</div>';
	// fill the contents
	$("#sidebar").after(startContent + imageContent + linkContent + endContent);

	// call the ui bits
		$("#dialog").dialog({
			bgiframe: true,
			modal: true,
			resizable: false,
			draggable: true,
			height:530,
			width:668
		});
		
 }