var ddimagepanner={

	imageChooser:function(){
			var scroller = $(".scrollable").scrollable({
				// basic settings
			});
			
			window.api = scroller.data("scrollable");
			
			$("#rightButton").click(function(){

				if(currThumb>(numThumbs-2)){
					return;
				}
				index = currThumb+1;
				url = thumbArray[index]
				getNext(url);
				checkScroller("right");
			})
			
			$("#leftButton").click(function(){
				if(currThumb==0){
					return;
				}
				index = currThumb-1;
				url = thumbArray[index]
				getNext(url);
				checkScroller("left");
			})

			$(".pancontainer").hover(
			function(){
				$("#zoomBox").fadeIn();
			},
			function(){
				$("#zoomBox").fadeOut();
			}
			);
			
			function checkScroller(dir){
				if(dir=="right"){
					if(isInteger(currThumb/4)){
						api.next();
					}
				} else {
					if(isInteger((currThumb+1)/4)){
						api.prev();
					}
				}
			}
			
			var thumbArray = new Array();
			$("#scroller .items div img").each(function(e){
				thumbArray.push($(this).attr("src"));
			});
			
			var numThumbs = $("#scroller .items div img").size();
			var currThumb = 0;
			var thumbRowNum = 4;
			
			var $img=$('#largeImg') //image to pan
			var options={$pancontainer:$('.pancontainer'), pos:$('.pancontainer').attr('data-orient'), curzoom:1, canzoom:$('.pancontainer').attr('data-canzoom'), wrappersize:[$('.pancontainer').width(), $('.pancontainer').height()]}
			
			function getNext(url){
				
				//var tempArray = new Array("/img/auctions/estates/061910/001_02th.jpg")
				
				$(".items img").eq(currThumb).removeClass("active");
				currThumb = jQuery.inArray(url, thumbArray)//thumbArray.indexOf("/img/auctions/estates/061910/001_02th.jpg");

				url = url.replace("th.jpg", ".jpg");
				
				//var wrap = $("#box1").fadeTo("fast", .5);
				$('#largeImg').attr('src', url);
				//$('#imgHolder').html($('#largeImg'));
				
				//$('#imgHolder').html($('#largeImg'));
				//wrap.fadeTo("slow", 1);
				
				//var $img = $('div.pancontainer').find('#largeImg') //image to pan
				// activate item
				$(".items img").eq(currThumb).addClass("active");
				

				if (ddimagepanner.zoomtype=="in") {
					$('#largeImg').animate({left:-115, top:-131});
				}
				

			}
			
			$(".items img").click(function() {
			
				// see if same thumb is being clicked
				if ($(this).hasClass("active")) { return; }
				var url = $(this).attr("src");
				getNext(url);

			})//.filter(":first").click();
			
			
			var numItems = $(".items").find('img').length;
			
			if (numItems == 0){
				$('#scroller').css("display","none");
				$('.left').css("opacity",".5");
				$('.right').css("opacity",".5");
			}
			
	},


	magnifyicons: ['magnify.gif','magnify2.gif', 52,50], //set path to zoom in/out images, plus their dimensions
	maxzoom: 2, //set maximum zoom level (from 1x)
	currThumb: 0,
	thumbRowNum: 4,
	zoomtype: 'out',
	
	init:function($, $img, options){
		var s=options
		s.imagesize=[$img.width(), $img.height()]
		s.oimagesize=[$img.width(), $img.height()] //always remember image's original size
		
		s.oimagesize=[380, 380];
		
		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]})
		if (s.canzoom=="yes"){ //enable image zooming?
			s.dragcheck={h: (s.wrappersize[0]>s.imagesize[0])? false:true, v:(s.wrappersize[1]>s.imagesize[1])? false:true} //check if image should be draggable horizon and vertically
			s.$statusdiv=$('<div style="position:absolute;color:white;background:#353535;padding:2px 10px;font-size:12px;visibility:hidden">1x Magnify</div>').appendTo(s.$pancontainer) //create DIV to show current magnify level
			s.$statusdiv = $('#statusdiv');
			s.$statusdiv.css({left:0, top:0, display:'none', visibility:'visible'})
			this.zoomfunct($, $img, s)
		}
		this.dragimage($, $img, s)
	},

	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
			})
			$("#zoomBox").fadeOut("fast");			
				return false //cancel default drag action
		})
		
		$img.bind('mouseup', function(e){
			$("#zoomBox").fadeIn();
			$img.unbind('mousemove.dragstart')
		})
	},


	zoomfunct:function($, $img, s){

		var magnifyicons=this.magnifyicons

		var $zoomimages=$('.magnify')
			.css({	width:magnifyicons[2],
					height:magnifyicons[3],
					cursor:'pointer'
			})
			
		//position "zoom in" image
		$zoomimages.eq(0).css({opacity:1}).attr("title", "Zoom In")
		
		$zoomimages.click(function(e){	//assign click behavior to zoom images
			var $zimg=$(this)			//reference image clicked on
			var curzoom=s.curzoom		//get current zoom level
		
			ddimagepanner.zoomtype = zoomtype = ($zimg.attr("title").indexOf("In")!=-1)? "in" : "out"
			
			if (zoomtype=="in" && s.curzoom==ddimagepanner.maxzoom || zoomtype=="out" && s.curzoom==1) {//exit if user at either ends of magnify levels
				return
			}
			
			var basepos=[s.pos[0]/curzoom, s.pos[1]/curzoom]
			var newzoom=(zoomtype=="out")? Math.max(1, curzoom-1) : Math.min(ddimagepanner.maxzoom, curzoom+1) //get new zoom level
									
			$zoomimages.css("opacity", 1);

			if (zoomtype=="out") {
				
				//$('#scroller').fadeIn();
				
			  	$('#scroller').animate({
					top: '-=220'
			  	});
								
				$('.pancontainer').animate({
			    	width: '-=150',
			    	height: '-=116'
			  	});
			  	
				$('#lotDetail').animate({
			    	left: '+=150',
			    	width: '-=150',
			    	backgroundColor: "#ffffff"
			  	});
				
				$('#zoomBox').animate({
					top: '-=120'
			  	});
				
				$(".pancontainer").css({cursor: 'default'})
				s.wrappersize[0] = s.wrappersize[1] = 380;
				$zoomimages.eq(1).css({display:"none"});
				$zoomimages.eq(0).css({display:"block"});
				
			} else if (zoomtype=="in") {
				
				$('.pancontainer').animate({
			    	width: '+=150',
			    	height: '+=116'
			  	});
			  	
				$('#lotDetail').animate({
					width: '+=150',
			    	left: '-=150',
			    	backgroundColor: "#dcdcdc"
			  	});
			  	
			  	$('#scroller').animate({
					top: '+=220'
			  	});
			  	
				$('#zoomBox').animate({
					top: '+=120'
			  	});

				$(".pancontainer").css({cursor:'move'})			
				s.wrappersize[0] = 530;
				s.wrappersize[1] = 498;
				
				$zoomimages.eq(0).css({display:"none"})
				$zoomimages.eq(1).css({display:"block"})

			}
			
			clearTimeout(s.statustimer)
			s.$statusdiv.html(newzoom+"x Magnify").show() //show current zoom status/level
			
			var nd=[s.oimagesize[0]*newzoom, s.oimagesize[1]*newzoom]
			var newpos=[basepos[0]*newzoom, basepos[1]*newzoom]
			newpos=[(zoomtype=="in" && s.wrappersize[0]>s.imagesize[0] || zoomtype=="out" && s.wrappersize[0]>nd[0])? s.wrappersize[0]/2-nd[0]/2 : Math.max(-nd[0]+s.wrappersize[0], newpos[0]),
				(zoomtype=="in" && s.wrappersize[1]>s.imagesize[1] || zoomtype=="out" && s.wrappersize[1]>nd[1])? s.wrappersize[1]/2-nd[1]/2 : Math.max(-nd[1]+s.wrappersize[1], newpos[1])]
			$img.animate({width:nd[0], height:nd[1], left:newpos[0], top:newpos[1]}, function(){
				s.statustimer=setTimeout(function(){s.$statusdiv.hide()}, 500)
			})
			
			
			s.imagesize=nd
			s.curzoom=newzoom
			s.pos=[0, 0]
			
		})
	}

}

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)
			})
		}
		ddimagepanner.imageChooser();
	})
}