--- a/src/static/iconolab/js/dist/bundle.js	Tue Jun 07 11:43:56 2016 +0200
+++ b/src/static/iconolab/js/dist/bundle.js	Tue Jun 07 17:57:08 2016 +0200
@@ -89,6 +89,8 @@
 	var config = null;
 	var startPoint = null;
 	var drawing_path = null;
+	var canDraw = false;
+	var rectZone = null;
 	var PATH_COLOR = "#ff00ff";
 	var SELECTED_COLOR = "#ffff00";
 	var FIRST_NODE_COLOR = "#FF0000";
@@ -97,7 +99,9 @@
 	var enablePoint = true;
 	var pathIsClosed = false;
 	var ENABLE_NEW_NODE = true;
-	var mode = "rect"; //free
+	var RECT_MODE ='RECT';
+	var drawingMode = RECT_MODE; //free
+	var FREE_MODE = 'FREE';
 
 	var getId = (function () {
 			var cpt = 0;
@@ -172,9 +176,6 @@
 		jQuery("#action-wrapper").show();
 	};
 
-	var drawRectangle = function () {
-		//draw rectangle point and draw	
-	}
 
 	var onClickOnHandler = function (point, p, e) {
 		//close path
@@ -256,14 +257,9 @@
 		return point;
 	}
 
-	var setPath = function () {
-
-	}
-
 	//create paper
 	var createPoint = function (paper, x, y, pointData) {
 
-		console.log("... Inside createPoint ... ");
 		var point = {x:x, y:y, id: getId()};
 		
 		/**/
@@ -276,42 +272,34 @@
 			enablePoint = true;
 			return false;
 		}
-		
+
 		point = createPointHandler(paper, point);
 		pointData.push(point);
 		updatePath(paper);
 	};
 
-	var createFragment = function () {
-
-	}
-
-	/* remove previous points */
-	var reset = function () {
-		console.log(pathIsClosed);
-		console.log("radical blaze");
-	}
-	var attachEvents = function (paper) {
+
+	var attachRectEvents = function (paper) {
 		var startPosition = {};
 		var currentPosition = {};
-		var zone = null;
-		var canDraw = false;
+		/* add resizer */
 
 		paper.mousedown(function (e) {
+			if (drawingMode === FREE_MODE || pathIsClosed) { return; }
 			startPosition.x = e.offsetX;
 			startPosition.y = e.offsetY;
 			canDraw = true;
-			var startPoint = paper.rect(currentPosition.x, currentPosition.y, 6, 6);
-			startPoint.attr({stroke:'yellow'});
 		});
 
 		paper.mousemove(function (e) {
+			if (drawingMode === FREE_MODE) { return; }
+			if (!canDraw) { return; }
+			var x, y;
 			currentPosition.x = e.offsetX;
 			currentPosition.y = e.offsetY;
-			if (!canDraw) { return; }
 			
-			if (zone) {
-				zone.remove();
+			if (rectZone) {
+				rectZone.remove();
 			}
 
 			/* bas -> droite */
@@ -340,18 +328,76 @@
 				x = currentPosition.x
 				y = currentPosition.y - height;
 			}
-
-			zone = paper.rect(x, y, width, height);
-			zone.attr({opacity: 0.4});
-			zone.drag();
+			if(!x || !y) { return; }		
+			rectZone = paper.rect(x, y, width, height);
+			rectZone.attr({opacity: 0.4});
 		});
 
 
 		paper.mouseup(function () {
+			if ((drawingMode === FREE_MODE) || pathIsClosed || !rectZone) { return false; }
+			rectZone.drag();
 			canDraw = false;
+			pathIsClosed = true;
+		});
+	};
+
+	var attachPointEvents = function (paper) {
+
+		paper.click( function(e) {
+			if (drawingMode === RECT_MODE) {
+				return true;
+			}
+
+			if (!ENABLE_NEW_NODE) { return true; }
+			createPoint(paper, e.offsetX, e.offsetY, pointData);
 		});
-	}
-
+	};
+
+	var API = {
+		
+		setMode: function (mode) {
+			var availableMode = ['RECT', 'FREE'];
+			console.log("undefined", mode);
+			if (availableMode.indexOf(mode) !== -1) {
+				drawingMode = mode;
+			}
+			this.clear();
+		},
+		
+		clear: function () {
+			/* clear previous path, point, handler */
+			pointData.map(function (point) {
+				if (point.handler) {
+					point.handler.remove();
+				}
+			});
+
+			/*clear path is exists*/
+			 if (drawing_path) {
+			 	drawing_path.remove();
+			 }
+
+			 if (rectZone) {
+			 	rectZone.remove();
+			 }
+
+			pointData = [];
+			startPoint = null;
+			drawing_path = null;
+			isDragged = false;
+			enablePoint = true;
+			pathIsClosed = false;
+			ENABLE_NEW_NODE = true;
+			/* clear path */
+
+		},
+
+		getPath: function () {
+			/* retourne le chemin */
+			console.log();
+		}
+	};
 
 	module.exports = {
 
@@ -386,18 +432,11 @@
 
 			paper = new Snap(cutCanvas.get(0));
 
-			/* handleEvents */
-			jQuery(config.actionWrapper).on("click", ".create", function () { alert("Kotew te ye...");});
-			jQuery(config.actionWrapper).on("click", ".delete", function () { alert("delete..."); });
-
-			/* show path, init the drawing module*/
-			paper.click( function(e) {
-				if (!ENABLE_NEW_NODE) { return true; }
-				createPoint(paper, e.offsetX, e.offsetY, pointData);
-			});
-
 			/* handle drawin here */
-			attachEvents(paper);
+			attachPointEvents(paper);
+			attachRectEvents(paper);
+
+			return API;
 		},
 	};