Edit button group

js/buttonbehaviors.js

@@ -1,8 +1,10 @@
 var twistIncrement = Math.PI/1800;
 
-var btnNew, btnPrevious, btnNext, btnOops, btnStop, btnInfo, btnRotate;
-var btnSettings, btnWordArt, btnZoom, btnMove, btnUpDown, btnTwist, btnShape, btnEditClosed, btnEditOpen; btnToggleVerticalShapes;
-var btnDiv,btnConv,btnStraight,btnSine, buttonGroupAdd, popupWordArt;
+var btnNew, btnPrevious, btnNext, btnOops, btnStop, btnInfo;
+var btnSettings, btnWordArt;
+var btnToggleEdit, buttonGroupEdit, btnZoom, btnMove, btnRotate;
+var btnToggleVerticalShapes, btnUpDown, btnTwist, btnShape, btnConv, btnStraight, btnSine, btnDiv;
+var buttonGroupAdd, popupWordArt;
 
 var state;
 var prevState;
@@ -34,8 +36,8 @@ function initButtonBehavior() {
   btnTwistRight = $("#btnTwistRight");
   btnShape = $("#btnShape");
   btnRotate = $("#btnRotate");
-  btnEditClosed = $("#btnEditClosed");
-  btnEditOpen = $("#btnEditOpen");
+  btnToggleEdit = $("#btnToggleEdit");
+  buttonGroupEdit = $("#buttonGroupEdit");
   btnStraight = $("#btnStraight");
   btnDiv = $("#btnDiv");
   btnConv = $("#btnConv");
@@ -59,9 +61,7 @@ function initButtonBehavior() {
   btnTwistRight.on("onButtonHold", onBtnTwistRight);
   btnShape.on("onButtonClick", onBtnShape);
   btnRotate.on("onButtonHold", onBtnRotate);
-  btnEditClosed.on("onButtonClick", onBtnEditClosed);
-  btnEditOpen.on("onButtonHold", onBtnEditOpen);
-  btnEditOpen.on("onButtonClick", onBtnEditOpen);
+  btnToggleEdit.on("onButtonClick", onBtnToggleEdit);
   btnStraight.on("onButtonClick", onBtnStraight);
   btnDiv.on("onButtonClick", onBtnDiv);
   btnConv.on("onButtonClick", onBtnConv);
@@ -74,8 +74,6 @@ function initButtonBehavior() {
   setSketchModified(false);
 
   function onBtnToggleVerticalShapes() {
-  	console.log("onBtnToggleVerticalShapes");
-  	
   	var btnImg;
   	if(buttonGroupVerticalShapes.is(":hidden")) {
   		btnImg = "img/buttons/btnArrowClose.png";
@@ -85,7 +83,6 @@ function initButtonBehavior() {
   	btnToggleVerticalShapes.attr("src",btnImg);
   	
   	buttonGroupVerticalShapes.fadeToggle(BUTTON_GROUP_SHOW_DURATION);
-  	
   }
 
   function onBtnAdd() {
@@ -95,29 +92,32 @@ function initButtonBehavior() {
   function onBtnStraight() {
     setVerticalShape(verticalShapes.NONE);
   }
-
   function onBtnDiv() {
     setVerticalShape(verticalShapes.DIVERGING);
   }
-
   function onBtnConv() {
     setVerticalShape(verticalShapes.CONVERGING);
   }
-
   function onBtnSine() {
     setVerticalShape(verticalShapes.SINUS);
   }
 
-  function onBtnEditClosed(e,cursor) {
-    btnEditClosed.hide();
-    btnEditOpen.show();
-  }
-
   function hitTest(cursor,button,radius) {
     return distance(cursor.x,cursor.y,button.x,button.y)<radius;
   }
 
-  function onBtnEditOpen(e,cursor) {
+  function onBtnToggleEdit() {
+  	var btnImg;
+		if(buttonGroupEdit.is(":hidden")) {
+			btnImg = "img/buttons/btnArrowClose.png";
+		} else {
+			btnImg = "img/buttons/btnArrowOpen.png";
+		}
+		btnToggleEdit.attr("src",btnImg);
+		
+		buttonGroupEdit.fadeToggle(BUTTON_GROUP_SHOW_DURATION);
+  }
+  function onBtnEditSomething(e,cursor) {
     // image is shown as 75% of its size (for retina screens)
     cursor.x /= .75;
     cursor.y /= .75;

less/buttons.less

@@ -118,19 +118,25 @@
   display: none;
 }
 
-#btnEditClosed {
-  top: 5px;
-  left: 5px;
-  width: .75*31px;
+#btnToggleEdit {
+  top: 4px;
+  left: 4px;
   position: absolute;
 }
-
-#btnEditOpen {
+#buttonGroupEdit {
   position: absolute;
   top: 5px;
   left: 5px;
-  width: .75*119px;
+  padding: 5px 7px 9px 8px;
   display: none;
+  
+  .btn {
+  	float: left;
+  }
+  #btnZoom {
+  	clear: left;
+  	margin: 0 2px 0 0;
+  }
 }
 
 /*#btnAddOpen {

www/index.html

@@ -111,20 +111,13 @@
       </div>
       <canvas id="preview_tmp"></canvas>
       
-      <img id="btnEditClosed" class="btn" src="img/buttons/btnEditClosed.png" />
-      <img id="btnEditOpen" class="btn" src="img/buttons/btnEditOpen.png" />
-
-      <div id="buttonGroupVerticalShapes" class="buttonGroup">
-        <img id="btnTwistLeft" class="btn" src="img/buttons/btnTwistLeft.png" />
-        <img id="btnTwistRight" class="btn" src="img/buttons/btnTwistRight.png" />
-        <img id="btnUp" class="btn" src="img/buttons/btnUp.png" />
-        <img id="btnDown" class="btn" src="img/buttons/btnDown.png" />
-        <hr>
-        <img id="btnConv" class="btn" src="img/buttons/btnConv.png" />
-        <img id="btnDiv" class="btn" src="img/buttons/btnDiv.png" />
-        <img id="btnSine" class="btn" src="img/buttons/btnSine.png" />
-        <img id="btnStraight" class="btn" src="img/buttons/btnStraight.png" />
+      <div id="buttonGroupEdit" class="buttonGroup">
+        <img id="btnMove" class="btn" src="img/buttons/btnMove.png" />
+        <img id="btnZoom" class="btn" src="img/buttons/btnZoom.png" />
+        <img id="btnRotate" class="btn" src="img/buttons/btnRotate.png" />
       </div>
+      <img id="btnToggleEdit" class="btn" src="img/buttons/btnArrowOpen.png" />
+	  
     </div>  
   </div>