VerticalShapes toggle button

js/buttonbehaviors.js

@@ -1,7 +1,7 @@
 var twistIncrement = Math.PI/1800;
 
 var btnNew, btnPrevious, btnNext, btnOops, btnStop, btnInfo, btnRotate;
-var btnSettings, btnWordArt, btnZoom, btnMove, btnUpDown, btnTwist, btnShape, btnEditClosed, btnEditOpen;
+var btnSettings, btnWordArt, btnZoom, btnMove, btnUpDown, btnTwist, btnShape, btnEditClosed, btnEditOpen; btnToggleVerticalShapes;
 var btnDiv,btnConv,btnStraight,btnSine, buttonGroupAdd, popupWordArt;
 
 var state;
@@ -41,7 +41,7 @@ function initButtonBehavior() {
   btnConv = $("#btnConv");
   btnSine = $("#btnSine");
   btnAdd = $("#btnAdd");
-  btnToggleVertical = $("#btnToggleVertical");
+  btnToggleVerticalShapes = $("#btnToggleVerticalShapes");
   buttonGroupAdd = $("#buttonGroupAdd");
   buttonGroupVerticalShapes = $("#buttonGroupVerticalShapes");
   popupWordArt = $("#popupWordArt");
@@ -67,18 +67,29 @@ function initButtonBehavior() {
   btnConv.on("onButtonClick", onBtnConv);
   btnSine.on("onButtonClick", onBtnSine);
   btnAdd.on("onButtonClick", onBtnAdd);
-  btnToggleVertical.on("onButtonClick", onBtnToggleVertical);
+  btnToggleVerticalShapes.on("onButtonClick", onBtnToggleVerticalShapes);
   
 
   getSavedSketchStatus();
   setSketchModified(false);
 
-  function onBtnToggleVertical() {
+  function onBtnToggleVerticalShapes() {
-  	buttonGroupVerticalShapes.toggle();
+  	console.log("onBtnToggleVerticalShapes");
+  	
+  	var btnImg;
+  	if(buttonGroupVerticalShapes.is(":hidden")) {
+  		btnImg = "img/buttons/btnArrowClose.png";
+  	} else {
+  		btnImg = "img/buttons/btnArrowOpen.png";
+  	}
+  	btnToggleVerticalShapes.attr("src",btnImg);
+  	
+  	buttonGroupVerticalShapes.fadeToggle(BUTTON_GROUP_SHOW_DURATION);
+  	
   }
 
   function onBtnAdd() {
-    buttonGroupAdd.fadeToggle(POPUP_SHOW_DURATION);
+    buttonGroupAdd.fadeToggle(BUTTON_GROUP_SHOW_DURATION);
   }
 
   function onBtnStraight() {

js/main.js

@@ -23,6 +23,7 @@ var showOrHide = false;
 var clientInfo = {};
 
 var POPUP_SHOW_DURATION = 175;
+var BUTTON_GROUP_SHOW_DURATION = 80;
 
 $(function() {
   console.log("ready");

less/buttons.less

@@ -165,8 +165,8 @@
 }
 
 #buttonGroupVerticalShapes {
-  top: 10px;
+  top: 7px;
-  left: 10px;
+  left: 8px;
   padding-top: 20px;
   width: 65px;
 
@@ -175,10 +175,10 @@
   }
 }
 
-#btnToggleVertical {
+#btnToggleVerticalShapes {
   position: absolute;
-  top: 0;
+	top: 3px;
-  left: 10px;
+  left: 6px;
 }
 
 

www/index.html

@@ -105,7 +105,7 @@
             <img id="btnSine" class="btn" src="img/buttons/btnSine.png" />
             <img id="btnStraight" class="btn" src="img/buttons/btnStraight.png" />
           </div>
-          <img id="btnToggleVertical" class="btn" src="img/buttons/btnArrowOpen.png" />      
+          <img id="btnToggleVerticalShapes" class="btn" src="img/buttons/btnArrowClose.png" />      
         </div>
       
       </div>
@@ -114,6 +114,17 @@
       <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>
     </div>  
   </div>