/**
 * Hover Preview
 *
 * Show previews of images linked to by area elements in an image map.
 *
 * @author      Vincent Cheung (vincent@shapecollage.com)
 * @copyright   2009 Shape Collage Inc.
 */
$(document).ready(function() {
	$('<style type="text/css"> div#sc-thumbnail { position: absolute; background: #f2f2f2; border: 1px solid #888; padding: 4px; margin: 0; visibility: hidden; } img#sc-thumbnailImg { margin: 0; padding: 0; border: none; display: none; } div.sc-thumbLoading { width: 15px; height: 15px; } </style>').appendTo("head");
	
	var maxSize = 250;
	
	var defaultX = 15;
	var defaultY = -10;
	
	var xOffset = defaultX;
	var yOffset = defaultY;

	var currX = 0;
	var currY = 0;
	
	$(".shapecollagelink").hover(function(e) {
		currX = e.pageX;
		currY = e.pageY;

		var winWidth = 0, winHeight = 0, scrollLeft = 0, scrollTop = 0;
		if( typeof( window.innerWidth ) == 'number' ) {
			// Non-IE
			winWidth = window.innerWidth;
			winHeight = window.innerHeight;
			scrollLeft = window.pageXOffset;
			scrollTop = window.pageYOffset;
		} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
			// IE 6+ in 'standards compliant mode'
			winWidth = document.documentElement.clientWidth;
			winHeight = document.documentElement.clientHeight;
			scrollLeft = document.documentElement.scrollLeft;
			scrollTop = document.documentElement.scrollTop;
		} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
			// IE 4 compatible
			winWidth = document.body.clientWidth;
			winHeight = document.body.clientHeight;
			scrollLeft = document.body.scrollLeft;
			scrollTop = document.body.scrollTop;
		}

		var link = $(this).attr('rel');
		if (typeof(link) != 'string' || link.length == 0)
			link = this.href;
			
		if (link == "http://www.shapecollage.com/")
			return;

		$("body").append("<div id='sc-thumbnail' class='sc-thumbLoading'><img id='sc-thumbnailImg' /></div>");

		xOffset = defaultX;
		yOffset = defaultY;

		var img = $("#sc-thumbnailImg");
		var div = $("#sc-thumbnail");

		var stop = 0;
		var shown = 0;
		
		img
			.error(function() {
				stop = 1;
				
				xOffset = defaultX;
				yOffset = defaultY;
			})
			.load(function() {
				stop = 1;
			})
			.attr("src", link);

		div
			.css("top", (currY + yOffset) + "px")
			.css("left", (currX + xOffset) + "px");

		// need this for IE instead of just working on the image directly
		imgObj = new Image();
		imgObj.src = link;

		var timerCount = 0;
		
		var timer = setInterval(function() {
			// prevent race condition
			var s = stop;
			
//			if (img.height() != 0 && img.width() != 0) {
			if (imgObj.height != 0 && imgObj.width != 0) {
				s = 1;

//				width = img.width();
//				height = img.height();

				width = imgObj.width;
				height = imgObj.height;
				
				if (height > maxSize || width > maxSize) {
					if (height > width) {
						aspect = maxSize/height;
						img.css("height", maxSize + "px");
					} else {
						aspect = maxSize/width;
						img.css("width", maxSize + "px");
					}
					
					width = Math.round(width*aspect);
					height = Math.round(height*aspect);
				}

//				borderSize = Math.max(Math.round(Math.max(width, height)*0.02), 2);
				borderSize = Math.max(Math.round((width+height)/2.0*0.025), 3);

				if (currY-scrollTop >= winHeight-height+borderSize/2)
					yOffset = -height+10;
				
				if (currX-scrollLeft >= winWidth-width-25+borderSize/2)
					xOffset = -width-20;
				
				div
					.css("top", (currY + yOffset) + "px")
					.css("left", (currX + xOffset) + "px")
					.css("padding", borderSize + "px");
			}

			if (s || timerCount == 4)
				div.css("visibility", "visible");
			
			if (s) {
				div.removeClass("sc-thumbLoading");
				
				// need display block for Strict DTD
				img.fadeIn(75).css("display", "block");
				
				clearInterval(timer);
				timer = null;
				
				stop = 1;
			}

			timerCount++;
		}, 50);
    },
	function() {
		$("#sc-thumbnail").remove();
    });	
	$("area").mousemove(function(e) {
		currX = e.pageX;
		currY = e.pageY;

		$("#sc-thumbnail")
			.css("top",(currY + yOffset) + "px")
			.css("left",(currX + xOffset) + "px");
	});	
});