/**********************************************************************************************************
* Author: Zachary Biles
* Date: 10/1/2008
* Filename: popbox.js
* Purpose: Displays an enlarged version of a thumbnail
************************************************************************************************************/			
			
			var popbox = "<div class='popbox'><img src='' ></div>";
			
			$(document).ready(function(){
				$("body").prepend(popbox);	
				
				$("img[name='popbox']").click(function(){
					var offsets = $(this).offset();
					var myobj = $(".popbox").css("display");
					var obj = $(this);

					if(myobj=="none")
						displayPopBox(obj, offsets);
					else if(myobj == "block")
						hidePopBox();
						
				});
			});
			
			function displayPopBox(obj, offsets){
				//based on the src value of the thumbnail, we create the popbox.
				var filename = obj.attr("large");
				$(".popbox img").attr("src", filename);
				
				//The following widths/heights are used to determine where the center
				//of the screen is.
				var docx = $(document).width();
				var docy = $(document).height();
				
				var imgx = $(".popbox").width();
				var imgy = $(".popbox").height();
				
				var top = ((docy/2)-(imgy/2))+"px";
				var margin = ((docx/2)-(imgx/2))+"px";
				
				//Coordinates for the start of the animation
				var x = offsets.left;
				var y = offsets.top;
				
				//Instantiates the popbox
				$(".popbox").css("left", x+"px");
				$(".popbox").css("top", y+"px");
				$(".popbox").css("width", 0);
				$(".popbox").css("height", 0);
				
				var imgx2 = imgx+"px";
				var imgy2 = imgy+"px";
				
				$(".popbox").animate({"opacity": "toggle", "left": margin, "top": top, "width": imgx2, "height": imgy2}, 600);
				$(".popbox").click(hidePopBox);
				
			}
			
			function hidePopBox(){
				$(".popbox").fadeOut("slow");
			}