/* simple image panner (march 11th, 10)
*/

//jquery.noconflict()

var ddimagepanner={

	init:function($, $img, options){
		var s=options
		s.imagesize=[$img.width(), $img.height()]
		s.pos=(s.pos=="center")? [-(s.imagesize[0]/2-s.wrappersize[0]/2), -(s.imagesize[1]/2-s.wrappersize[1]/2)] : [0, 0] //initial coords of image
		s.pos=[math.floor(s.pos[0]), math.floor(s.pos[1])]
		$img.css({position:'absolute', left:s.pos[0], top:s.pos[1]})
		s.dragcheck={h: (s.wrappersize[0]>s.imagesize[0])? false:true, v:(s.wrappersize[1]>s.imagesize[1])? false:true}
		if (s.dragcheck.h==false && s.dragcheck.v==false) //if image shouldn't be pannable (container larger than image)
			s.$pancontainer.css({cursor:'auto'})
		else
			this.dragimage($, $img, s)
	},

	dragimage:function($, $img, s){
		$img.mousedown(function(e){
			var imgoffset=$img.offset()
			s.pos=[parseint($img.css('left')), parseint($img.css('top'))]
			var xypos=[e.clientx, e.clienty]
			$img.bind('mousemove.dragstart', function(e){
				var pos=s.pos
				var dx=e.clientx-xypos[0] //distance to move horizontally
				var dy=e.clienty-xypos[1] //vertically
				if (s.dragcheck.h==true) //allow dragging horizontally?
//					var newx=(dx>0)? math.min(0, s.pos[0]+dx) : math.max(-s.imagesize[0]+s.wrappersize[0], s.pos[0]+dx) //set horizonal bonds. dx>0 indicates drag right versus left
					var newx=(dx>0)? math.min(0, s.pos[0]+dx) : math.max(-parseint($(this).width())+s.wrappersize[0], s.pos[0]+dx)
				if (s.dragcheck.v==true) //allow dragging vertically?
					var newy=(dy>0)? math.min(0, s.pos[1]+dy) : math.max(-parseint($(this).height())+s.wrappersize[1], s.pos[1]+dy) //set vertical bonds. dy>0 indicates drag downwards versus up
				$img.css({left:(typeof newx!="undefined")? newx : s.pos[0], top:(typeof newy!="undefined")? newy : s.pos[1]})
					movepoint()
				return false //cancel default drag action
			})
			return false //cancel default drag action
		})
		$(document).bind('mouseup', function(e){
			$img.unbind('mousemove.dragstart')
		})
				
//		loadarea()
	}

}


jquery.fn.imgmover=function(options){
	var $=jquery
	return this.each(function(){ //return jquery obj
		if (this.tagname!="img")
			return true //skip to next matched element
		var $imgref=$(this)
		if (parseint(this.style.width)>0 && parseint(this.style.height)>0) //if image has explicit css width/height defined
			ddimagepanner.init($, $imgref, options)
		else if (this.complete){ //account for ie not firing image.onload
			ddimagepanner.init($, $imgref, options)
		}
		else{
			$imgref.bind('load', function(){
				ddimagepanner.init($, $imgref, options)
			})
		}
	})
}
jquery(document).ready(function($){ //by default look for divs with class="pancontainer"
	var $pancontainer=$('div.pancontainer')
	$pancontainer.each(function(){
		var $this=$(this).css({position:'relative', overflow:'hidden', cursor:'move'})
		var $img=$this.find('img:eq(0)') //image to pan
		var options={$pancontainer:$this, pos:$this.attr('data-orient'), wrappersize:[$this.width(), $this.height()]}
		$img.imgmover(options)
	})
})