$.fn.imgpan = function(width,height,align) {
	$(this).wrap('<div id="viepwport" style="width: ' + width + 'px; height: ' + height + 'px; overflow: hidden; position: absolute;"><div id="imagecanvas"></div></div>');
		$(this).load(function() {
					$(this).fadeIn("slow");
					
					var overflow_x = 0;
					var overflow_y = 0;
					var viewportWidth = width;
					var viewportHeight = height;
					var imageWidth = $(this).width() + 1;
					var imageHeight = $(this).height() + 1;
					// uses custom align if specified in coords attribute 
					var customAlign = $(this).attr('coords');
					if(customAlign!=undefined) align = customAlign.toUpperCase();
					
					// align image
					var mid_x = viewportWidth/-2 + imageWidth/2;
					var mid_y = imageHeight - viewportHeight;
					switch(align){
						case "CENTER":
							mid_x = viewportWidth/-2 +  imageWidth/2;
							mid_y = viewportHeight/-2 +  imageHeight/2;
							break;
						case "LEFT":
							mid_x =  imageWidth - viewportWidth;
							mid_y = viewportHeight/-2 +  imageHeight/2;
							break;
						case "RIGHT":
							mid_x = 0;
							mid_y = viewportHeight/-2 +  imageHeight/2;
							break;
						case "TL":
							mid_x =  imageWidth - viewportWidth;
							mid_y = imageHeight - viewportHeight;
							break;
						case "TC":
							mid_y = imageHeight - viewportHeight;
							break;
						case "TR":
							mid_x = 0;
							mid_y = imageHeight - viewportHeight;
							break;
						case "BL":
							mid_x =  imageWidth - viewportWidth;
							mid_y = 0;
							break;
						case "BC":
							mid_y = 0;
							break;
						case "BR":
							mid_x = 0;
							mid_y = 0;
							break;
					}

					if( imageWidth > viewportWidth ){
						$(this).css('left', mid_x + 'px');
						overflow_x = imageWidth;
					}
					if( imageHeight > viewportHeight){
						$(this).css('top', mid_y + 'px');
						overflow_y = imageHeight;
					}
					if( overflow_x && overflow_y ){
						$('#imagecanvas').css(
							{
								height: (overflow_y * 2 - viewportHeight), 
								width: ( overflow_x * 2 - viewportWidth ), 
								'margin-top' : -( overflow_y - viewportHeight),
								'margin-left': -( overflow_x - viewportWidth)
							}
							);
						
						$(this).draggable({containment: '#imagecanvas'}).css({ cursor: 'all-scroll'});
					} else{
						if( overflow_x ){
							$('#imagecanvas').css({width: ( overflow_x*2-viewportWidth ), 'margin-left': -(overflow_x - viewportWidth) });
							$(this).draggable({ axis: 'x', containment: '#imagecanvas' }).css({ cursor: 'e-resize'});
						}
						if( overflow_y ){
							$('#imagecanvas').css({ height: (overflow_y*2-viewportHeight),  'margin-top': -(overflow_y - viewportHeight)});
							$(this).draggable({ axis: 'y', containment: '#imagecanvas' }).css({ cursor: 'n-resize'});
						}
					}
			});

};