Update actions, highlight modes

css/app.css

@@ -123,6 +123,10 @@ table td {
     color:#000;
 }
 
+#modebuttons button.active {
+    background:#fff;
+}
+
 #modebuttons button.mini,
 #modebuttons button.mini {
     width:50px;

index.html

@@ -48,7 +48,7 @@
         <script type='text/javascript' src='js/iD/ui/Inspector.js'></script>
 
         <script type='text/javascript' src='js/iD/actions/actions.js'></script>
-        <script type='text/javascript' src='js/iD/actions/CreatePOI.js'></script>
+        <script type='text/javascript' src='js/iD/actions/AddPlace.js'></script>
 
         <script type='text/javascript' src='js/iD/format/GeoJSON.js'></script>
         <script type='text/javascript' src='js/iD/format/XML.js'></script>
@@ -83,6 +83,8 @@
                 });
             }
 
+            for (var a in iD.actions) iD.actions[a].bind();
+
             d3.select('#geocode-form').on('submit', function() {
                 d3.event.preventDefault();
                 var val = d3.select('#geocode-location').node().value;

js/iD/UI.js

@@ -1,13 +1,9 @@
 iD.UI = {};
 
 iD.UI.bind = function() {
-    var buttons = {
+    this.buttons = {
         place: d3.select('button#place'),
         area: d3.select('button#area'),
         road: d3.select('button#road')
     };
-
-    for (var mode in buttons) {
-
-    }
 };

js/iD/actions/AddPlace.js

@@ -0,0 +1 @@
+

js/iD/actions/CreatePOI.js

@@ -1,3 +0,0 @@
-iD.actions.createPoi = function() {
-    
-};

js/iD/actions/actions.js

@@ -1 +1,46 @@
 iD.actions = {};
+
+iD.actions.AddPlace = {
+    bind: function() {
+        d3.selectAll('button#place').on('click', function() {
+            iD.actions.AddPlace.enter();
+        });
+    },
+    enter: function() {
+        d3.selectAll('button').classed('active', false);
+        d3.selectAll('button#place').classed('active', true);
+    },
+    exit: function() {
+        d3.selectAll('button#place').classed('active', false);
+    }
+};
+
+iD.actions.AddRoad = {
+    bind: function() {
+        d3.selectAll('button#road').on('click', function() {
+            iD.actions.AddRoad.enter();
+        });
+    },
+    enter: function() {
+        d3.selectAll('button').classed('active', false);
+        d3.selectAll('button#road').classed('active', true);
+    },
+    exit: function() {
+        d3.selectAll('button#road').classed('active', false);
+    }
+};
+
+iD.actions.AddArea = {
+    bind: function() {
+        d3.selectAll('button#area').on('click', function() {
+            iD.actions.AddArea.enter();
+        });
+    },
+    enter: function() {
+        d3.selectAll('button').classed('active', false);
+        d3.selectAll('button#area').classed('active', true);
+    },
+    exit: function() {
+        d3.selectAll('button#area').classed('active', false);
+    }
+};