$(document).ready(function(){
	/*** content > inside,outside,safety,performance (onmouseover effect) ***/
	$("div#thumnail_list img").bind("mouseover" ,function () {
		var $base_obj = $("div#image_frame");

		// old image
		var $old_img_obj = $base_obj.find("img");
		$old_img_obj.css("z-index", 2).fadeOut("fast", function(){$(this).remove();});
		// new image
		var $new_img_obj = $("<img onload='$(this).trigger(\"click\")' />")
		//var $new_img_obj = $("<img onload='$(this).trigger(\"mouseover\")' />")
			.css("visibility", "hidden")
			.bind("click", (function(){
				var $this_obj= $(this);
				var width	= $this_obj.width();
				var height	= $this_obj.height();

				var parent	= $this_obj.parent();
				var parent_width	= parent.width();
				var parent_height	= parent.height();

				// resize
				if(width/height > parent_width/parent_height)
				{
					if(width > parent_width)
					{
						height	= Math.floor(height*parent_width/width);
						width	= parent_width;
					}
				}
				else
				{
					if(height > parent_height)
					{
						width	= Math.floor(width*parent_height/height);
						height	= parent_height;
					}
				}

				// reposition
				var top		= (height == parent_height) ? 0 : Math.floor((parent_height-height)/2)+"px";
				var left	= (width == parent_width) ? 0 : Math.floor((parent_width-width)/2)+"px";

				$this_obj
					.width(width)
					.height(height)
					.css({"top": top, "left": left})
					.css("visibility", "visible")
					;
				}))
			.appendTo($base_obj)
			.attr("src", $(this).attr("src"))
			;
		});
	// show first image
	$("#thumnail_list img:first").trigger("mouseover");
});