jQuery.noConflict()

var bigimagepanner={

	init:function($, $img, options){
		var s=options;
		$img.removeAttr("width") 
           .removeAttr("height") 
           .css({ width: "", height: "" });
		s.imagesize=[$img.width(), $img.height()]
		s.oimagesize=[s.imagesize[0], s.imagesize[1]] //always remember image's original size
		s.pos=[-(s.imagesize[0]/2-s.wrappersize[0]/2), -(s.imagesize[1]/2-s.wrappersize[1]/2)] //initial coords of image - centered
		s.pos=[Math.floor(s.pos[0]), Math.floor(s.pos[1])]
		$img.css({position:'absolute', left:s.pos[0], top:s.pos[1], width:s.imagesize[0], height:s.imagesize[1]})
		if (s.imagesize[0] > s.wrappersize[0] || s.imagesize[1] > s.wrappersize[1])
		{
		    $img.css({cursor:'move'})
            this.dragimage($, $img, s)
            $('#divPanMessage').show();
        }
        else
        {
            $img.css({cursor:'default'})
            $('#divPanMessage').hide();
        }
	},
	
	dragimage:function($, $img, s){
		$img.mousedown(function(e){
			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, imagesize=s.imagesize, wrappersize=s.wrappersize
				var dx=e.clientX-xypos[0] //distance to move horizontally
				var dy=e.clientY-xypos[1] //vertically
				s.dragcheck={h: (wrappersize[0]>imagesize[0])? false:true, v:(wrappersize[1]>imagesize[1])? false:true}
				if (s.dragcheck.h==true) //allow dragging horizontally?
					var newx=(dx>0)? Math.min(0, pos[0]+dx) : Math.max(-imagesize[0]+wrappersize[0], pos[0]+dx) //Set horizonal bonds. dx>0 indicates drag right versus left
				if (s.dragcheck.v==true) //allow dragging vertically?
					var newy=(dy>0)? Math.min(0, s.pos[1]+dy) : Math.max(-imagesize[1]+wrappersize[1], pos[1]+dy) //Set vertical bonds. dy>0 indicates drag downwards versus up
				$img.css({left:(typeof newx!="undefined")? newx : pos[0], top:(typeof newy!="undefined")? newy : pos[1]})
				return false //cancel default drag action
			})
			return false //cancel default drag action
		})
		$(document).bind('mouseup', function(e){
			$img.unbind('mousemove.dragstart')
		})
	}
}

var mainimagesizer={
	init:function($img, options){
	    $img.sizetofit($img, options);
	}
}

jQuery.fn.imgsizer=function(options){
	var $=jQuery
	return this.each(function(){ //return jQuery obj
		if (this.tagName!="IMG")
			return true //skip to next matched element 
		var $img=$(this);
		$img.sizetofit($img,options);
		$img.bind('load', function(){
			mainimagesizer.init($img, options)
		})
	})
}



jQuery.fn.imgthumbsizer=function(options){
	var $=jQuery
	return this.each(function(){ //return jQuery obj
		if (this.tagName!="IMG")
			return true //skip to next matched element 
		var $img=$(this)
		if (parseInt($img.width())>0 && parseInt($img.height())>0) //if image has explicit CSS width/height defined
		    $img.sizetofit($img, options);
		else if (this.complete){ //account for IE not firing image.onload
			$img.sizetofit($img, options);
		}		
	})
}

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(){
				bigimagepanner.init($, $imgref, options)
			})
//		}
	})
}

jQuery.fn.sizetofit=function($img, options){
        var s=options;
		$img.removeAttr("width") 
           .removeAttr("height") 
           .css({ width: "", height: "" });
        var max=s.wrappersize[0];
		var wd = $img[0].width;
		var ht = $img[0].height;
		if (wd > 0 && ht > 0)
		{
	        if (wd > ht)
	        {
	            if (wd > max)
	            {
	                var shrinkPercent = max / wd;
	                wd = wd * shrinkPercent;
	                ht = ht * shrinkPercent; 
	            }
	        }
	        else
	        {
	            if (ht > max)
	            {
	                var shrinkPercent = max / ht;
	                ht = ht * shrinkPercent;
	                wd = wd * shrinkPercent;  
	            }
	        }	
	        s.imagesize=[Math.floor(wd), Math.floor(ht)];    
		    s.pos=[-(s.imagesize[0]/2-s.wrappersize[0]/2), -(s.imagesize[1]/2-s.wrappersize[1]/2)] //initial coords of image - centered
		    s.pos=[Math.floor(s.pos[0]), Math.floor(s.pos[1])]
		    $img.css({position:'absolute', left:s.pos[0], top:s.pos[1], width:s.imagesize[0], height:s.imagesize[1]})		        
		}
}



jQuery(document).ready(function($){
    //handles centering and allowing panning (if images is bigger than div) on big pop up image
	var $imagecontainer=$('div.imagecontainer')
	$imagecontainer.each(function(){
		var $this=$(this).css({position:'relative', overflow:'hidden'})
		var $img=$this.find('img:eq(0)') //image to pan
		var options={$imagecontainer:$this, wrappersize:[598,598]}
		$img.imgmover(options)
	})
	
	//handles centering and not stretching main image, no panning, shrink to fit
	var $imagecontainer=$('div.mainImageDisplay')
	$imagecontainer.each(function(){
		var $this=$(this).css({position:'relative', overflow:'hidden'})
		var $img=$this.find('img:eq(0)') //image to pan
		var options={$imagecontainer:$this, wrappersize:[300,300]}
		$img.imgsizer(options)
	})
	
	var $imagecontainer=$('div.thumbwrapper')
	$imagecontainer.each(function(){
	    var $this = $(this);
	    var $img=$this.find('img:eq(0)') //image to pan
	    if ($img[0].parentNode.innerHTML.indexOf('_ts.') == -1)
	    {
		    $this.css({position:'relative', overflow:'hidden'})
		    var options={$imagecontainer:$this, wrappersize:[60,60]}
		    $img.imgthumbsizer(options)
		}
		else
		{
		    $img[0].parentNode.innerHTML = "<table height=\"60px\" width=\"60px\" style=\"border-collapse:collapse;\"><tr><td style='vertical-align:middle'>" + $img[0].parentNode.innerHTML + "</td></tr></table>";
		}
	})
})