/**
 * --------------------------------------------------------------------
 * WDP zoomer - jQuery image zoomer
 * Version: 1.0, 14/11/2008
 * by Carl Codling, info@webdesignpro.co.uk
 *                      http://www.webdesignpro.co.uk
 *
 * Copyright (c) 2008 Carl Codling
 * Licensed under GPL (http://www.opensource.org/licenses/gpl-2.0.php)
 * Developed with jQuery 1.2.6
 *
 * --------------------------------------------------------------------
 * @example 
 *	$(document).ready(function(){
 *		wdpZoomer(300,200,2,2,15,"im.jpg", "imId");
 *	});
 * @desc Adds a zoomer to the HTML image with id="imId". ARGS: viewer width:300px, viewer height:200px, initial zoom:x2, min zoom:x2, max zoom:x15, zoom image:im.jpg
 * --------------------------------------------------------------------
 */

// set the image directory
var imageDir = "img/";
var infoBtn = "img/info.gif";

// add the zoomer css rules
$("head").append(
	'<style type="text/css">'+
		'.zoom,.zoom *{padding:0;margin:0;}'+
		'.zoom{font-family:arial;font-size:16px;position:absolute;display:none;overflow:hidden;border:4px solid black;z-index:5;top:-2000px;float:left;cursor:crosshair;}'+
		'.zoomShadow{position:absolute;background-color:#000;display:none;margin:6px;}'+
		'.zoomShadow2{position:absolute;background-color:#000;display:none;margin:7px;}'+
		'.zoomShadow3{position:absolute;background-color:#000;display:none;margin:8px;}'+
		'.zoom span{font-size:0%;color:white;background-color:black;position:absolute;z-index:25;font-weight:bold;width:100%;padding:1px;}'+
		'.zoom div{font-size:90%;color:gold;background-color:#666;position:absolute;padding:2px;width:inherit;height:inherit;z-index:15;text-align:center;padding-top:30px;}'+
		'.zoomEdit{width:200px;background-color:#666;color:yellow;font-size:60%;font-weight:bold;position:absolute;margin-top:12px;margin-left:12px;font-family:arial;z-index:20;display:none;}'+
		'.zoomEditToggle{color:gold;font-size:110%;font-weight:bold;font-family:times;position:absolute;padding-top:2px;padding-left:2px;z-index:25;display:none;width:20px;height:20px;}'+
		'.zoomEdit table{width:100%;border:1px solid gold;}'+
		'.zoomEdit table td{text-align:center;border:1px solid #444;padding:2px;}'+
		'.zoomEdit a:link,.zoomEdit a:visited{color:gold;font-size:95%;font-weight:normal;text-decoration:none;}'+
		'.zoomEdit a:hover{color:#ccf;text-decoration:underline;}'+
		'.zoomEdit table td.keyDescr{text-align:left;font-weight:normal;color:#ffe;}'+		
	'</style>'
);

function wdpZoomer(zoomerX,zoomerY,initialZoomRatio,minZoom,maxZoom,image,id){var leftpos=0;var rightpos=0;$("body").append('<div class="zoom" id="zoom'+
id+'" style="width:'+
(zoomerX-4)+'px;height:'+
(zoomerY-4)+'px;"><span></span><div></div><img src="" style="position:relative" id="zoomIm_'+id+'" /></div><div class="zoomShadow" id="shad_'+id+'" style="width:'+
(zoomerX-4)+'px;height:'+
(zoomerY-4)+'px;"></div><div class="zoomShadow2" id="shad2_'+id+'" style="width:'+
(zoomerX-4)+'px;height:'+
(zoomerY-4)+'px;"></div><div class="zoomShadow3" id="shad3_'+id+'" style="width:'+
(zoomerX-4)+'px;height:'+
(zoomerY-4)+'px;"></div>'+'<div class="zoomEdit" id="zoomEdit'+id+'">'+'<table>'+'<tr><td colspan="2"><br />Keyboard Shortcuts:<br /><br /></td></tr>'+'<tr><td style="width:20px">i</td><td class="keyDescr">ZOOM IN</td></tr>'+'<tr><td style="width:20px">o</td><td class="keyDescr">ZOOM OUT</td></tr>'+'<tr><td style="width:20px">b</td><td class="keyDescr">ENLARGE VIEWER</td></tr>'+'<tr><td style="width:20px">s</td><td class="keyDescr">DECREASE VIEWER</td></tr>'+'<tr><td style="width:20px">mouse</td><td class="keyDescr">click mouse to focus/blur viewer</td></tr>'+'<tr><td colspan="2"><br />Created using<br /><a href="http://www.webdesignpro.co.uk">WDPzoomer</a><br /><br /></td></tr>'+'</table>'+'</div><img src="'+infoBtn+'" class="zoomEditToggle" id="zoomEditToggle'+id+'" />');$("#shad_"+id+", #shad2_"+id).fadeTo("1","0.2");$("#shad3_"+id).fadeTo("1","0.1");text=$("#zoom"+id).html();img=$("#zoomIm_"+id);$("#zoom"+id+" div").html('Loading...').fadeTo("1","0.8");img.load(function(){$("#zoom"+id+" div").fadeOut("slow");});img.attr("src",imageDir+image);var initialZoomWidth=($("#"+id).css("width").replace("px","")*initialZoomRatio)+"px";$("#zoom"+id+" img").css({width:initialZoomWidth});$("#"+id).mouseover(function(){$("#zoom"+id+" span").html("ZOOM: x"+initialZoomRatio);$(".zoom, .zoomShadow, .zoomShadow2, .zoomShadow3, .zoomEditToggle, .zoomEdit").hide();$("#zoom"+id+", #shad_"+id+", #shad2_"+id+", #shad3_"+id+", #zoomEditToggle"+id).show();if($("#zoom"+id+" img").css("opacity")=="0.01"){$("#zoom"+id).click();}
$("#"+id+", #zoom"+id).mousemove(function(e){var pos=$("#"+id).position();var $height=$("#"+id).height();var $width=$("#"+id).width();var $zoomHeight=$("#zoom"+id).height();var $zoomWidth=$("#zoom"+id).width();if(e.pageY>=($height-(zoomerY/2))+pos.top){$top=$height-zoomerY;}
else if(e.pageY<pos.top+(zoomerY/2)){$top=0;}
else{$top=(e.pageY-(zoomerY/2))-pos.top;}
$top=($top+pos.top)+"px";if(e.pageX>=($width-(zoomerX/2))+pos.left){$left=$width-zoomerX;}
else if(e.pageX<pos.left+(zoomerX/2)){$left=0;}
else{$left=(e.pageX-(zoomerX/2))-pos.left;}
$left=($left+pos.left)+"px";$("#zoom"+id+", #shad_"+id+", #shad2_"+id+", #shad3_"+id).css({top:$top,left:$left});$("#zoomEdit"+id+", #zoomEditToggle"+id).css({top:pos.top,left:pos.left});leftpos=e.pageX;rightpos=e.pageY;l=Math.round((((leftpos-pos.left)*initialZoomRatio)-(zoomerX/2)));if(l>(($width*initialZoomRatio)-$zoomWidth)){l=Math.round(($width*initialZoomRatio)-$zoomWidth);}
t=Math.round((((rightpos-pos.top)*initialZoomRatio)-(zoomerY/2)));if(t>($height*initialZoomRatio)-$zoomHeight){t=Math.round(($height*initialZoomRatio)-$zoomHeight);}
$("#zoom"+id+" img").css({left:"-"+l+"px",top:"-"+t+"px"});});$(document).unbind("keypress")
$(document).keypress(function(e){if(e.which==111){if(initialZoomRatio>minZoom){initialZoomRatio--;}}
if(e.which==105){if(initialZoomRatio<maxZoom){initialZoomRatio++;}}
if(e.which==98){zoomerX=zoomerX*1.1;if(zoomerX>$("#"+id).css("width").replace("px","")){zoomerX=$("#"+id).css("width").replace("px","")}
zoomerY=zoomerY*1.1;if(zoomerY>$("#"+id).css("height").replace("px","")){zoomerY=$("#"+id).css("height").replace("px","")}
$("#zoom"+id+", #shad_"+id+", #shad2_"+id+", #shad3_"+id).css({width:zoomerX+"px",height:zoomerY+"px"});}
if(e.which==115){zoomerX=zoomerX*0.9;zoomerY=zoomerY*0.9;$("#zoom"+id+", #shad_"+id+", #shad2_"+id+", #shad3_"+id).css({width:zoomerX+"px",height:zoomerY+"px"});}
$("#zoom"+id+" span").html("ZOOM: x"+initialZoomRatio);var initialZoomWidth=($("#"+id).css("width").replace("px","")*initialZoomRatio)+"px";$("#zoom"+id+" img").css({width:initialZoomWidth});var pos=$("#"+id).position();l=Math.round((((leftpos-pos.left)*initialZoomRatio)-(zoomerX/2)));t=Math.round((((rightpos-pos.top)*initialZoomRatio)-(zoomerY/2)));$("#zoom"+id+" img").css({left:"-"+l+"px",top:"-"+t+"px"});});});$("#zoom"+id).toggle(function(){$("#zoom"+id+" img").fadeTo("1000","0.01");$("#shad_"+id+", #shad2_"+id+", #shad3_"+id).fadeOut("slow");$("#zoom"+id+" span").fadeOut("slow",function(){$(this).html("click again to focus zoom");h=parseInt($("#zoom"+id).height()-$(this).height());$("#zoom"+id).css({borderColor:$(this).css("color")});$(this).css({color:$(this).css("backgroundColor"),backgroundColor:$(this).css("color"),marginTop:h+"px"})
$(this).fadeIn("slow")});},function(){$("#zoom"+id+" img").fadeTo("1000","1");$("#shad_"+id+", #shad2_"+id+", #shad3_"+id).fadeIn("slow");$("#zoom"+id+" span").html("ZOOM: x"+initialZoomRatio);$("#zoom"+id).css({borderColor:$("#zoom"+id+" span").css("color")});$("#zoom"+id+" span").css({color:$("#zoom"+id+" span").css("backgroundColor"),backgroundColor:$("#zoom"+id+" span").css("color"),marginTop:"0px"})});$("#zoomEditToggle"+id).click(function(){$("#zoom"+id+", #shad_"+id+", #shad2_"+id+", #shad3_"+id).fadeOut("normal")
$("#zoomEdit"+id).toggle("normal")});}