-Put new selection tool icons in the options bar

-Styled the selection tool options bar

20 files changed, 151 insertions, 75 deletions

diff --git a/css/ninja.css b/css/ninja.css
index 0a74acf8..d309b34e 100755
--- a/css/ninja.css
+++ b/css/ninja.css
@@ -681,9 +681,7 @@ nav.menuBar ul li:hover ul, nav.menuBar ul ul li:hover ul, nav.menuBar ul ul ul
 
 .subToolHolderPanel .toolbutton:hover, .subToolHolderPanel .toolbutton.active { -webkit-transform: scale(0.75); }
 
-.subOption { float: left; margin-top: 0px; margin-left: 1px; margin-right: 0px; }
-
-.subOptionSpacer { margin-right: 16px; }
+.toolOptionsSpacer { margin-right: 9px; }
 
 .toolSeparator { height: 1px; width: 30px; }
 
@@ -835,29 +833,41 @@ input[type="radio"]:disabled { opacity: .3; background: #282828; border-width: 1
 
 .optionsSelectionTool > * { float: left; }
 
-.topAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -240px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+.optionsSelectionTool button { padding-top: 0px; }
+
+.selectionToolIcon { width: 16px; height: 16px; background-repeat: no-repeat; background-position: 1px 2px; }
+
+.alignTopIcon { background-image: url("../images/tools/AlignTop.png"); }
+
+.alignMiddleIcon { background-image: url("../images/tools/AlignMiddle.png"); }
+
+.alignBottomIcon { background-image: url("../images/tools/AlignBottom.png"); }
+
+.alignLeftIcon { background-image: url("../images/tools/AlignLeft.png"); }
+
+.alignCenterIcon { background-image: url("../images/tools/AlignCenter.png"); }
 
-.rightAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -270px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+.alignRightIcon { background-image: url("../images/tools/AlignRight.png"); }
 
-.bottomAlignUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -300px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+.arrangeBringForwardIcon { background-image: url("../images/tools/ArrangeBringForward.png"); }
 
-.verticalLeftUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -330px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+.arrangeSendBackwardIcon { background-image: url("../images/tools/ArrangeSendBackward.png"); }
 
-.verticalCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -360px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+.arrangeBringToFrontIcon { background-image: url("../images/tools/ArrangeBringToFront.png"); }
 
-.verticalRightUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -390px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+.arrangeSendToBackIcon { background-image: url("../images/tools/ArrangeSendToBack.png"); }
 
-.distRightUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: 0px -81px; background-repeat: no-repeat; height: 23px; width: 26px; }
+.distTopIcon { background-image: url("../images/tools/DistTop.png"); }
 
-.distLeftUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -420px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+.distMiddleIcon { background-image: url("../images/tools/DistMiddle.png"); }
 
-.distCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -60px -81px; background-repeat: no-repeat; height: 23px; width: 26px; }
+.distBottomIcon { background-image: url("../images/tools/DistBottom.png"); }
 
-.distTopUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -30px -81px; background-repeat: no-repeat; height: 23px; width: 26px; }
+.distLeftIcon { background-image: url("../images/tools/DistLeft.png"); }
 
-.distBottomUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -90px -81px; background-repeat: no-repeat; height: 23px; width: 26px; }
+.distCenterIcon { background-image: url("../images/tools/DistCenter.png"); }
 
-.distVCenterUp { background-image: url("../images/SpriteSheets/NinjaSpriteSheet2_5.png"); background-position: -450px -54px; background-repeat: no-repeat; height: 23px; width: 26px; }
+.distRightIcon { background-image: url("../images/tools/DistRight.png"); }
 
 #toolsPanelContent { width: 40px; }
 
diff --git a/images/tools/AlignBottom.png b/images/tools/AlignBottom.png
new file mode 100644
index 00000000..f68d62c8
--- /dev/null
+++ b/images/tools/AlignBottom.png
diff --git a/images/tools/AlignCenter.png b/images/tools/AlignCenter.png
new file mode 100644
index 00000000..64bb4014
--- /dev/null
+++ b/images/tools/AlignCenter.png
diff --git a/images/tools/AlignLeft.png b/images/tools/AlignLeft.png
new file mode 100644
index 00000000..822c5243
--- /dev/null
+++ b/images/tools/AlignLeft.png
diff --git a/images/tools/AlignMiddle.png b/images/tools/AlignMiddle.png
new file mode 100644
index 00000000..03dffad5
--- /dev/null
+++ b/images/tools/AlignMiddle.png
diff --git a/images/tools/AlignRight.png b/images/tools/AlignRight.png
new file mode 100644
index 00000000..07d6d7ef
--- /dev/null
+++ b/images/tools/AlignRight.png
diff --git a/images/tools/AlignTop.png b/images/tools/AlignTop.png
new file mode 100644
index 00000000..378d8aab
--- /dev/null
+++ b/images/tools/AlignTop.png
diff --git a/images/tools/ArrangeBringForward.png b/images/tools/ArrangeBringForward.png
new file mode 100644
index 00000000..55861b5a
--- /dev/null
+++ b/images/tools/ArrangeBringForward.png
diff --git a/images/tools/ArrangeBringToFront.png b/images/tools/ArrangeBringToFront.png
new file mode 100644
index 00000000..1344e618
--- /dev/null
+++ b/images/tools/ArrangeBringToFront.png
diff --git a/images/tools/ArrangeSendBackward.png b/images/tools/ArrangeSendBackward.png
new file mode 100644
index 00000000..2e8ea0ad
--- /dev/null
+++ b/images/tools/ArrangeSendBackward.png
diff --git a/images/tools/ArrangeSendToBack.png b/images/tools/ArrangeSendToBack.png
new file mode 100644
index 00000000..699ae5ba
--- /dev/null
+++ b/images/tools/ArrangeSendToBack.png
diff --git a/images/tools/DistBottom.png b/images/tools/DistBottom.png
new file mode 100644
index 00000000..c7ed75ce
--- /dev/null
+++ b/images/tools/DistBottom.png
diff --git a/images/tools/DistCenter.png b/images/tools/DistCenter.png
new file mode 100644
index 00000000..cf8f2bf5
--- /dev/null
+++ b/images/tools/DistCenter.png
diff --git a/images/tools/DistLeft.png b/images/tools/DistLeft.png
new file mode 100644
index 00000000..3849e9e6
--- /dev/null
+++ b/images/tools/DistLeft.png
diff --git a/images/tools/DistMiddle.png b/images/tools/DistMiddle.png
new file mode 100644
index 00000000..bb32a441
--- /dev/null
+++ b/images/tools/DistMiddle.png
diff --git a/images/tools/DistRight.png b/images/tools/DistRight.png
new file mode 100644
index 00000000..e350b53e
--- /dev/null
+++ b/images/tools/DistRight.png
diff --git a/images/tools/DistTop.png b/images/tools/DistTop.png
new file mode 100644
index 00000000..1d474b3c
--- /dev/null
+++ b/images/tools/DistTop.png
diff --git a/js/components/tools-properties/selection-properties.reel/selection-properties.html b/js/components/tools-properties/selection-properties.reel/selection-properties.html
index 2a791542..a05bb7a1 100755
--- a/js/components/tools-properties/selection-properties.reel/selection-properties.html
+++ b/js/components/tools-properties/selection-properties.reel/selection-properties.html
@@ -16,31 +16,66 @@
                 "prototype": "js/components/tools-properties/selection-properties.reel",
                 "properties": {
                     "element": {"#": "selectionProperties"},
-                    "transform": {"#": "transformCheck"}
+                    "transform": {"#": "transformCheck"},
+                    
+                    "topAlign": {"#": "topAlignBtn"},
+                    "middleAlign": {"#": "middleAlignBtn"},
+                    "bottomAlign": {"#": "bottomAlignBtn"},
+
+                    "leftAlign": {"#": "leftAlignBtn"},
+                    "centerAlign": {"#": "centerAlignBtn"},
+                    "rightAlign": {"#": "rightAlignBtn"},
+
+                    "distTop": {"#": "distTopBtn"},
+                    "distMiddle": {"#": "distMiddleBtn"},
+                    "distBottom": {"#": "distBottomBtn"},
+
+                    "distLeft": {"#": "distLeftBtn"},
+                    "distCenter": {"#": "distCenterBtn"},
+                    "distRight": {"#": "distRightBtn"},
+
+                    "arrangeBringForward": {"#": "arrangeBringForwardBtn"},
+                    "arrangeSendBackward": {"#": "arrangeSendBackwardBtn"},
+                    "arrangeBringToFront": {"#": "arrangeBringToFrontBtn"},
+                    "arrangeSendToBack": {"#": "arrangeSendToBackBtn"}
                 }
             }
         }
-            </script>
+        </script>
 
     </head>
 
     <body>
         <div data-montage-id="selectionProperties" class="subToolHolderPanel optionsSelectionTool">
-            <input data-montage-id="transformCheck" type="checkbox" name="transformControl" class="nj-skinned"/><label class="label">Transform Controls&nbsp&nbsp</label>
-            <div id="toolPropertiesPanel-selectionDivOptions">
-                <div class="subOption"><div id="topAlign" class="topAlignUp" title="Top Align"></div></div>
-                <div class="subOption"><div id="rightAlign" class="rightAlignUp" title="Right Align"></div></div>
-                <div class="subOption subOptionSpacer"><div id="bottomAlign" class="bottomAlignUp" title="Bottom Align"></div></div>
-                <div class="subOption"><div id="vLeft" class="verticalLeftUp" title="Vertical Left"></div></div>
-                <div class="subOption"><div id="vRight" class="verticalRightUp" title="Vertical Right"></div></div>
-                <div class="subOption subOptionSpacer"><div id="vCenter" class="verticalCenterUp" title="Vertical Center"></div></div>
-                <div class="subOption"><div id="distTop" class="distTopUp" title="Distance Top"></div></div>
-                <div class="subOption"><div id="distCenter" class="distCenterUp" title="Distance Center"></div></div>
-                <div class="subOption subOptionSpacer"><div id="distBottom" class="distBottomUp" title="Distance Bottom"></div></div>
-                <div class="subOption"><div id="distLeft" class="distLeftUp" title="Distance Left"></div></div>
-                <div class="subOption"><div id="distVCenter" class="distVCenterUp" title="Distance Center"></div></div>
-                <div class="subOption"><div id="distRight" class="distRightUp" title="Distance Right"></div></div>
-            </div>
+            <input data-montage-id="transformCheck" type="checkbox" name="transformControl" class="nj-skinned"/>
+            <label class="label">Transform Control</label>
+            <div class="toolOptionsSpacer">&nbsp</div>
+
+            <button data-montage-id="topAlignBtn" class="nj-skinned" role="button"><div id="topAlign" class="selectionToolIcon alignTopIcon" title="Align Top"/></button>
+            <button data-montage-id="middleAlignBtn" class="nj-skinned" role="button"><div id="middleAlign" class="selectionToolIcon alignMiddleIcon" title="Align Vertical Center"/></button>
+            <button data-montage-id="bottomAlignBtn" class="nj-skinned" role="button"><div id="bottomAlign" class="selectionToolIcon alignBottomIcon" title="Align Bottom"></button>
+            <div class="toolOptionsSpacer">&nbsp</div>
+
+            <button data-montage-id="leftAlignBtn" class="nj-skinned" role="button"><div id="leftAlign" class="selectionToolIcon alignLeftIcon" title="Align Left"/></button>
+            <button data-montage-id="centerAlignBtn" class="nj-skinned" role="button"><div id="centerAlign" class="selectionToolIcon alignCenterIcon" title="Align Horizontal Center"/></button>
+            <button data-montage-id="rightAlignBtn" class="nj-skinned" role="button"><div id="rightAlign" class="selectionToolIcon alignRightIcon" title="Align Right"/></button>
+            <div class="toolOptionsSpacer">&nbsp</div>
+
+            <button data-montage-id="distTopBtn" class="nj-skinned" role="button"><div id="distTop" class="selectionToolIcon distTopIcon" title="Distribute Top"/></button>
+            <button data-montage-id="distMiddleBtn" class="nj-skinned" role="button"><div id="distMiddle" class="selectionToolIcon distMiddleIcon" title="Distribute Vertical Center"/></button>
+            <button data-montage-id="distBottomBtn" class="nj-skinned" role="button"><div id="distBottom" class="selectionToolIcon distBottomIcon" title="Distribute Bottom"/></button>
+            <div class="toolOptionsSpacer">&nbsp</div>
+
+            <button data-montage-id="distLeftBtn" class="nj-skinned" role="button"><div id="distLeft" class="selectionToolIcon distLeftIcon" title="Distribute Left"/></button>
+            <button data-montage-id="distCenterBtn" class="nj-skinned" role="button"><div id="distCenter" class="selectionToolIcon distCenterIcon" title="Distribute Horizontal Center"/></button>
+            <button data-montage-id="distRightBtn" class="nj-skinned" role="button"><div id="distRight" class="selectionToolIcon distRightIcon" title="Distribute Right"/></button>