jQuery.fn.extend({
	draggableImage: function(params){
		return this.each(function(){
			var clicked = false;
			var current_x;
			var current_y;
			var target_x;
			var target_y;
			var backgroundPos_x = 0;
			var backgroundPos_y = 0;
			var drag_div = $(this);
			var animationTimeout = null;
			var animationInterval = 40;
			var trappableMargin = 60;
			var img_height;
			var img_width;
			
			//Set the hidden image as a bg image
			var bgimg = $(this).children('img');
			img_width = bgimg.width();
			img_height = bgimg.height();
			$(this).css('background-position', "0 0");
			$(this).css('background-repeat', "no-repeat");
			$(this).css('background-image', "url('"+bgimg.attr('src')+"')");
			bgimg.css('display', 'none');
			
			//Bind mouse down event
			$(this).mousedown(function(e){
				$(this).css('cursor', 'move');
				clicked = true;
				current_x = Math.round(e.pageX - $(this).eq(0).offset().left);
				current_y = Math.round(e.pageY - $(this).eq(0).offset().top);
				target_x = current_x;
				target_y = current_y;
			});
			
			//Bind the mouse up
			$(this).mouseup(function(e){
				$(this).css('cursor', 'default');
				clicked = false;
			});
			
			//Bind the mouse move
			var animateImageMovement = function() {	
			console.log(movement_y);
				var movement_x = Math.round((target_x - current_x) / 5);
				var movement_y = Math.round((target_y - current_y) / 5);
				backgroundPos_x += movement_x;
				backgroundPos_y += movement_y;
				
				if (img_width > drag_div.width()) {
					if (backgroundPos_x < 0 - (img_width - drag_div.width())) backgroundPos_x = 0 - (img_width - drag_div.width());
					if (backgroundPos_x > 0) backgroundPos_x = 0;
				} else {
					if (backgroundPos_x < 0) backgroundPos_x = 0;
					if (backgroundPos_x > drag_div.width() - img_width) backgroundPos_x = drag_div.width() - img_width;
				}
				if (img_height > drag_div.height()) {
					if (backgroundPos_y < 0 - (img_height - drag_div.height())) backgroundPos_y = 0 - (img_height - drag_div.height());
					if (backgroundPos_y > 0) backgroundPos_y = 0;
				} else {
					if (backgroundPos_y < 0) backgroundPos_y = 0;
					if (backgroundPos_y > drag_div.height() - img_height) backgroundPos_y = drag_div.height() - img_height;
				}
				/*if (x < 0 - (img_width - trappableMargin)) x = 0 - (img_width - trappableMargin);
				if (x > drag_div.width() - trappableMargin) x = drag_div.width() - trappableMargin;
				if (y < 0 - (img_height - trappableMargin)) y = 0 - (img_height - trappableMargin);
				if (y > drag_div.height() - trappableMargin) y = drag_div.height() - trappableMargin;*/
				current_x += movement_x;
				current_y += movement_y;
				
				//drag_div.css('background-position', backgroundPos_x + "px " + backgroundPos_y + "px");
				drag_div.css('background-position', 0 + "px " + backgroundPos_y + "px");
				
				if (movement_x == 0 && movement_y == 0) {
					clearInterval(animationTimeout);
					animationTimeout = null;
				}
			}
			$(this).mousemove(function(e){
				if (clicked) { //as we only want this to work while they have clicked	
					target_x = Math.round(e.pageX - $(this).eq(0).offset().left);
					target_y = Math.round(e.pageY - $(this).eq(0).offset().top);
					if (animationTimeout == null) animationTimeout = setInterval(animateImageMovement, animationInterval);
				}
			});
			
		});
	}
});