jQuery.fn.extend({
  drag: function(params){
    var jQ = jQuery;
    return this.each(function(){
			var clicked = false;
			var start_x;
			var start_y;	
			var drag_div = this;
			
			//hide the image & add as bg image
			bgimg = $('#'+this.id + ' img');
			imgx = bgimg.width();
			imgy = bgimg.height();
			$(this).css('background', "url('"+bgimg.attr('src')+"') no-repeat center center");
			bgimg.css('display', 'none');
			//mouse down
			$(this).mousedown(function(e){
				$(this).css('cursor', 'move');
				clicked = true;
				start_x = Math.round(e.pageX - $(this).eq(0).offset().left);
				start_y = Math.round(e.pageY - $(this).eq(0).offset().top);
			});
			//mouse up
			$(this).mouseup(function(e){
				$(this).css('cursor', 'default');
				clicked = false;
			});
			//mouse move
			$(this).css('background-position','0% 0%');
			$(this).mousemove(function(e){
				if(clicked){ //as we only want this to work while they have clicked	
					
					/*
					** erreur avec internet explorer
					*/
					bg = $(this).css('background-position');
					
					var RefDiv = document.getElementById("draggable");
					
					if(window.getComputedStyle) {
						bg = document.defaultView.getComputedStyle(RefDiv, null).backgroundPosition;
					} else {
						bg = RefDiv.currentStyle.backgroundPositionX + " " + RefDiv.currentStyle.backgroundPositionY;
					}
					if(bg.indexOf('%')>1){
						leftpos = ($(this).width()/2) - (imgx/2);
						toppos = ($(this).height()/2) - (imgy/2);
					}else{
						bg = bg.replace("px", "").replace("px", "").split(" ");
						leftpos = parseInt(bg[0]);
						toppos = parseInt(bg[1]);					
					}
					var mouse_x = Math.round(e.pageX - $(this).eq(0).offset().left) - start_x;
					var mouse_y = Math.round(e.pageY - $(this).eq(0).offset().top) - start_y;					
					var x = leftpos + (mouse_x);
					var y = toppos + (mouse_y);
					start_x = Math.round(e.pageX - $(this).eq(0).offset().left);
					start_y = Math.round(e.pageY - $(this).eq(0).offset().top);	
					
					if((-x) > (bgimg.width() - $(this).width()))//depacement à droite
						x = -(bgimg.width() - $(this).width());
					if((-y) > (bgimg.height() - $(this).height()))//depacement en bas
						y = -(bgimg.height() - $(this).height());
					if((-x) < 0)//depacement à gauche
						x = 0;
					if((-y) < 0)//depacement à droite
						y = 0;
					$(drag_div).css('background-position', x+ "px " + y + "px");
					$("#src_x").val((-x));//passage des coordonnées au fonction de découpage
					$("#src_y").val((-y));
				}
			});			
    });
  }
});