/* jquery image magnify script v1.1
* this notice must stay intact for usage 
* author: dynamic drive at http://www.dynamicdrive.com/
* visit http://www.dynamicdrive.com/ for full source code

* nov 16th, 09 (v1.1): adds ability to dynamically apply/reapply magnify effect to an image, plus magnify to a specific width in pixels.
*/

jquery.noconflict()

jquery.imagemagnify={
	dsettings: {
		magnifyby: 1.5, //default increase factor of enlarged image
		duration: 500, //default duration of animation, in millisec
		imgopacity: 0.2 //opacify of original image when enlarged image overlays it
 	},
	cursorcss: 'url(magnify.cur), -moz-zoom-in', //value for css's 'cursor' attribute, added to original image
	zindexcounter: 100,

	refreshoffsets:function($window, $target, warpshell){
		var $offsets=$target.offset()
		var winattrs={x:$window.scrollleft(), y:$window.scrolltop(), w:$window.width(), h:$window.height()}
		warpshell.attrs.x=$offsets.left //update x position of original image relative to page
		warpshell.attrs.y=$offsets.top
		warpshell.newattrs.x=winattrs.x+winattrs.w/2-warpshell.newattrs.w/2
		warpshell.newattrs.y=winattrs.y+winattrs.h/2-warpshell.newattrs.h/2
		if (warpshell.newattrs.x<winattrs.x+5){ //no space to the left?
			warpshell.newattrs.x=winattrs.x+5	
		}
		else if (warpshell.newattrs.x+warpshell.newattrs.w > winattrs.x+winattrs.w){//no space to the right?
			warpshell.newattrs.x=winattrs.x+5
		}
		if (warpshell.newattrs.y<winattrs.y+5){ //no space at the top?
			warpshell.newattrs.y=winattrs.y+5
		}
	},

	magnify:function($, $target, options){
		var setting={} //create blank object to store combined settings
		var setting=jquery.extend(setting, this.dsettings, options)
		var attrs=(options.thumbdimensions)? {w:options.thumbdimensions[0], h:options.thumbdimensions[1]} : {w:$target.outerwidth(), h:$target.outerheight()}
		var newattrs={}
		newattrs.w=(setting.magnifyto)? setting.magnifyto : math.round(attrs.w*setting.magnifyby)
		newattrs.h=(setting.magnifyto)? math.round(attrs.h*newattrs.w/attrs.w) : math.round(attrs.h*setting.magnifyby)
		$target.css('cursor', jquery.imagemagnify.cursorcss)
		if ($target.data('imgshell')){
			$target.data('imgshell').$clone.remove()
			$target.css({opacity:1}).unbind('click.magnify')
		}	
		var $clone=$target.clone().css({position:'absolute', left:0, top:0, visibility:'hidden', border:'1px solid gray', cursor:'pointer'}).appendto(document.body)
		$clone.data('$relatedtarget', $target) //save $target image this enlarged image is associated with
		$target.data('imgshell', {$clone:$clone, attrs:attrs, newattrs:newattrs})
		$target.bind('click.magnify', function(e){ //action when original image is clicked on
			var $this=$(this).css({opacity:setting.imgopacity})
			var imageinfo=$this.data('imgshell')
			jquery.imagemagnify.refreshoffsets($(window), $this, imageinfo) //refresh offset positions of original and warped images
			var $clone=imageinfo.$clone
			$clone.stop().css({zindex:++jquery.imagemagnify.zindexcounter, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h, opacity:0, visibility:'visible'})
			.animate({opacity:1, left:imageinfo.newattrs.x, top:imageinfo.newattrs.y, width:imageinfo.newattrs.w, height:imageinfo.newattrs.h}, setting.duration,
			function(){ //callback function after warping is complete
				//none added		
			}) //end animate
		}) //end click
		$clone.click(function(e){ //action when magnified image is clicked on
			var $this=$(this)
			var imageinfo=$this.data('$relatedtarget').data('imgshell')
			jquery.imagemagnify.refreshoffsets($(window), $this.data('$relatedtarget'), imageinfo) //refresh offset positions of original and warped images
			$this.stop().animate({opacity:0, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h},  setting.duration,
			function(){
				$this.hide()
				$this.data('$relatedtarget').css({opacity:1}) //reveal original image
			}) //end animate
		}) //end click
	}
};

jquery.fn.imagemagnify=function(options){
	var $=jquery
	return this.each(function(){ //return jquery obj
		var $imgref=$(this)
		if (this.tagname!="img")
			return true //skip to next matched element
		if (parseint($imgref.css('width'))>0 && parseint($imgref.css('height'))>0 || options.thumbdimensions){ //if image has explicit width/height attrs defined
			jquery.imagemagnify.magnify($, $imgref, options)
		}
		else if (this.complete){ //account for ie not firing image.onload
			jquery.imagemagnify.magnify($, $imgref, options)
		}
		else{
			$(this).bind('load', function(){
				jquery.imagemagnify.magnify($, $imgref, options)
			})
		}
	})
};

jquery.fn.applymagnifier=function(options){ //dynamic version of imagemagnify() to apply magnify effect to an image dynamically
	var $=jquery
	return this.each(function(){ //return jquery obj
		var $imgref=$(this)
		if (this.tagname!="img")
			return true //skip to next matched element
		
	})	

};


//** the following applies the magnify effect to images with class="magnify" and optional "data-magnifyby" and "data-magnifyduration" attrs
//** it also looks for links with attr rel="magnify[targetimageid]" and makes them togglers for that image

jquery(document).ready(function($){
	var $targets=$('.magnify')
	$targets.each(function(i){
		var $target=$(this)
		var options={}
		if ($target.attr('data-magnifyto'))
			options.magnifyto=parsefloat($target.attr('data-magnifyto'))
		if ($target.attr('data-magnifyby'))
			options.magnifyby=parsefloat($target.attr('data-magnifyby'))
		if ($target.attr('data-magnifyduration'))
			options.duration=parseint($target.attr('data-magnifyduration'))
		$target.imagemagnify(options)
	})
	var $triggers=$('a[rel^="magnify["]')
	$triggers.each(function(i){
		var $trigger=$(this)
		var targetid=$trigger.attr('rel').match(/\[.+\]/)[0].replace(/[\[\]']/g, '') //parse 'id' from rel='magnify[id]'
		$trigger.data('magnifyimageid', targetid)
		$trigger.click(function(e){
			$('#'+$(this).data('magnifyimageid')).trigger('click.magnify')
			e.preventdefault()
		})
	})
})