// zoomio jquery in-place image zoom script
// by dynamic drive: http://www.dynamicdrive.com

;(function($){
	var defaults = {fadeduration:500}
	var $zoomiocontainer
	var currentzoominfo = { $zoomimage:null, offset:[,], settings:null, multiplier:[,] }
	var ismobile = navigator.useragent.match(/(ipad)|(iphone)|(ipod)|(android)|(webos)/i) != null //boolean check for popular mobile browsers

	function getdimensions($target){
		return {w:$target.width(), h:$target.height()}
	}

	function getoffset(what, offsettype){ // custom get element offset from document (since jquery version is whack in mobile browsers
		return (what.offsetparent)? what[offsettype]+getoffset(what.offsetparent, offsettype) : what[offsettype]
	}

	function zoomio($img, settings){ // zoomio plugin function
		var s = settings || defaults
		var trigger = ismobile? 'touchstart' : 'mouseenter'
		$img.off('touchstart mouseenter').on(trigger, function(e){ // on 'touchstart' or 'mouseenter'
			var jqueryevt = e // remember jquery event object (for use to call e.stoppropagation())
			var e = jqueryevt.originalevent.changedtouches? jqueryevt.originalevent.changedtouches[0] : jqueryevt
			var offset = {left:getoffset($img.get(0), 'offsetleft'), top:getoffset($img.get(0), 'offsettop') }
			var mousecoord = [e.pagex - offset.left, e.pagey - offset.top]
			var $zoomimage
			var zoomdfd = $.deferred()
			var imgdimensions = {imgw:null, imgh:null, zoomimgw:null, zoomimgh:null}
			$zoomiocontainer.html( '<img src="' + $img.attr('src') + '" />' ) // add image inside zoom container
			$zoomimage = $zoomiocontainer.find('img')
			if ($zoomimage.get(0).complete){
				zoomdfd.resolve()
			}
			else{
				$zoomimage.on('load', function(){
					zoomdfd.resolve()
				})
			}
			zoomdfd.done(function(){
				var imgdimensions = getdimensions($img)
				var containerwidth = s.w || imgdimensions.w
				var containerheight = s.h || imgdimensions.h
				$zoomiocontainer.css({width:containerwidth, height:containerheight, left:offset.left, top:offset.top}) // set zoom container dimensions and position
				var zoomiocontainerdimensions = getdimensions($zoomiocontainer)
				var zoomimgdimensions = getdimensions($zoomimage)
				$zoomiocontainer.stop().css({visibility:'visible', opacity:0}).animate({opacity:1}, s.fadeduration) // fade zoom container into view
				if (ismobile){ // scroll to point where user tapped on
					var scrollleftpos = (mousecoord[0] / imgdimensions.w) * (zoomimgdimensions.w - zoomiocontainerdimensions.w)
					var scrolltoppos = (mousecoord[1] / imgdimensions.h) * (zoomimgdimensions.h - zoomiocontainerdimensions.h)
					$zoomiocontainer.scrollleft( scrollleftpos )
					$zoomiocontainer.scrolltop( scrolltoppos )
				}
				currentzoominfo = {$zoomimage:$zoomimage, offset:offset, settings:s, multiplier:[zoomimgdimensions.w/zoomiocontainerdimensions.w, zoomimgdimensions.h/zoomiocontainerdimensions.h]}
			})
			jqueryevt.stoppropagation() // stoppropagation() works on jquery evt object (versus jqueryevt.originalevent.changedtouches[0]
		})		
	}

	$.fn.zoomio = function(options){ // set up jquery zoomio plugin
		var s = $.extend({}, defaults, options)

		return this.each(function(){ //return jquery obj
			var $target = $(this)

			$target = ($target.is('img'))? $target : $target.find('img:eq(0)')
			if ($target.length == 0){
				return true
			}
			zoomio($target, s)
		}) // end return this.each

	}

	$(function(){ // on dom load
		$zoomiocontainer = $('<div id="zoomiocontainer" />').appendto(document.body)
		if (!ismobile){
			$zoomiocontainer.on('mousemove', function(e){
				var $zoomimage = currentzoominfo.$zoomimage
				var imgoffset = currentzoominfo.offset
				var mousecoord = [e.pagex-imgoffset.left, e.pagey-imgoffset.top]
				var multiplier = currentzoominfo.multiplier
				$zoomimage.css({left: -mousecoord[0] * multiplier[0] + mousecoord[0] , top: -mousecoord[1] * multiplier[1] + mousecoord[1]})
			})
			$zoomiocontainer.on('mouseleave', function(){
				$zoomiocontainer.stop().animate({opacity:0}, currentzoominfo.settings.fadeduration, function(){
					$(this).css({visibility:'hidden'})
				})
			})
		}
		else{ // is mobile
			$zoomiocontainer.addclass('mobileclass')
			$zoomiocontainer.on('touchstart', function(e){
				e.stoppropagation() // stoppropagation() works on jquery evt object (versus e.originalevent.changedtouches[0]
			})
			$(document).on('touchstart', function(e){
				if (currentzoominfo.$zoomimage){ // if $zoomimage defined
					$zoomiocontainer.stop().animate({opacity:0}, currentzoominfo.settings.fadeduration, function(){
						$(this).css({visibility:'hidden'})
					})
				}
			})
		} // end else
	})

})(jquery);