flipper-ui 0.2.0.beta1

data/lib/flipper/ui/public/css/jquery-ui-1.10.3.slider.min.css

@@ -0,0 +1,5 @@
+/*! jQuery UI - v1.10.3 - 2013-05-21
+* http://jqueryui.com
+* Includes: jquery.ui.core.css, jquery.ui.slider.css
+* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Trebuchet%20MS%2CTahoma%2CVerdana%2CArial%2Csans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=f6a828&bgTextureHeader=gloss_wave&bgImgOpacityHeader=35&borderColorHeader=e78f08&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=eeeeee&bgTextureContent=highlight_soft&bgImgOpacityContent=100&borderColorContent=dddddd&fcContent=333333&iconColorContent=222222&bgColorDefault=f6f6f6&bgTextureDefault=glass&bgImgOpacityDefault=100&borderColorDefault=cccccc&fcDefault=1c94c4&iconColorDefault=ef8c08&bgColorHover=fdf5ce&bgTextureHover=glass&bgImgOpacityHover=100&borderColorHover=fbcb09&fcHover=c77405&iconColorHover=ef8c08&bgColorActive=ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=fbd850&fcActive=eb8f00&iconColorActive=ef8c08&bgColorHighlight=ffe45c&bgTextureHighlight=highlight_soft&bgImgOpacityHighlight=75&borderColorHighlight=fed22f&fcHighlight=363636&iconColorHighlight=228ef1&bgColorError=b81900&bgTextureError=diagonals_thick&bgImgOpacityError=18&borderColorError=cd0a0a&fcError=ffffff&iconColorError=ffd27a&bgColorOverlay=666666&bgTextureOverlay=diagonals_thick&bgImgOpacityOverlay=20&opacityOverlay=50&bgColorShadow=000000&bgTextureShadow=flat&bgImgOpacityShadow=10&opacityShadow=20&thicknessShadow=5px&offsetTopShadow=-5px&offsetLeftShadow=-5px&cornerRadiusShadow=5px
+* Copyright 2013 jQuery Foundation and other contributors Licensed MIT */.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ui-helper-reset{margin:0;padding:0;border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style:none}.ui-helper-clearfix:before,.ui-helper-clearfix:after{content:"";display:table;border-collapse:collapse}.ui-helper-clearfix:after{clear:both}.ui-helper-clearfix{min-height:0}.ui-helper-zfix{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0;filter:Alpha(Opacity=0)}.ui-front{z-index:100}.ui-state-disabled{cursor:default!important}.ui-icon{display:block;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat}.ui-widget-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ui-slider{position:relative;text-align:left}.ui-slider .ui-slider-handle{position:absolute;z-index:2;width:1.2em;height:1.2em;cursor:default}.ui-slider .ui-slider-range{position:absolute;z-index:1;font-size:.7em;display:block;border:0;background-position:0 0}.ui-slider.ui-state-disabled .ui-slider-handle,.ui-slider.ui-state-disabled .ui-slider-range{filter:inherit}.ui-slider-horizontal{height:.8em}.ui-slider-horizontal .ui-slider-handle{top:-.3em;margin-left:-.6em}.ui-slider-horizontal .ui-slider-range{top:0;height:100%}.ui-slider-horizontal .ui-slider-range-min{left:0}.ui-slider-horizontal .ui-slider-range-max{right:0}.ui-slider-vertical{width:.8em;height:100px}.ui-slider-vertical .ui-slider-handle{left:-.3em;margin-left:0;margin-bottom:-.6em}.ui-slider-vertical .ui-slider-range{left:0;width:100%}.ui-slider-vertical .ui-slider-range-min{bottom:0}.ui-slider-vertical .ui-slider-range-max{top:0}.ui-widget{font-family:Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;font-size:1.1em}.ui-widget .ui-widget{font-size:1em}.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button{font-family:Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;font-size:1em}.ui-widget-content{border:1px solid #ddd;background:#eee url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x;color:#333}.ui-widget-content a{color:#333}.ui-widget-header{border:1px solid #396;background:#396;color:#fff;font-weight:bold}.ui-widget-header a{color:#fff}.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default{border:1px solid #ccc;background:#f6f6f6 url(images/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x;font-weight:bold;color:#1c94c4}.ui-state-default a,.ui-state-default a:link,.ui-state-default a:visited{color:#1c94c4;text-decoration:none}.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus{border:1px solid #73d0a1;background:#9db;font-weight:bold;color:#c77405}.ui-state-hover a,.ui-state-hover a:hover,.ui-state-hover a:link,.ui-state-hover a:visited{color:#c77405;text-decoration:none}.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active{border:1px solid #b2e5cc;background:#ced;font-weight:bold;color:#eb8f00}.ui-state-active a,.ui-state-active a:link,.ui-state-active a:visited{color:#eb8f00;text-decoration:none}.ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight{border:1px solid #fed22f;background:#ffe45c url(images/ui-bg_highlight-soft_75_ffe45c_1x100.png) 50% top repeat-x;color:#363636}.ui-state-highlight a,.ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a{color:#363636}.ui-state-error,.ui-widget-content .ui-state-error,.ui-widget-header .ui-state-error{border:1px solid #cd0a0a;background:#b81900 url(images/ui-bg_diagonals-thick_18_b81900_40x40.png) 50% 50% repeat;color:#fff}.ui-state-error a,.ui-widget-content .ui-state-error a,.ui-widget-header .ui-state-error a{color:#fff}.ui-state-error-text,.ui-widget-content .ui-state-error-text,.ui-widget-header .ui-state-error-text{color:#fff}.ui-priority-primary,.ui-widget-content .ui-priority-primary,.ui-widget-header .ui-priority-primary{font-weight:bold}.ui-priority-secondary,.ui-widget-content .ui-priority-secondary,.ui-widget-header .ui-priority-secondary{opacity:.7;filter:Alpha(Opacity=70);font-weight:normal}.ui-state-disabled,.ui-widget-content .ui-state-disabled,.ui-widget-header .ui-state-disabled{opacity:.35;filter:Alpha(Opacity=35);background-image:none}.ui-state-disabled .ui-icon{filter:Alpha(Opacity=35)}.ui-icon{width:16px;height:16px}.ui-icon,.ui-widget-content .ui-icon{background-image:url(images/ui-icons_222222_256x240.png)}.ui-widget-header .ui-icon{background-image:url(images/ui-icons_ffffff_256x240.png)}.ui-state-default .ui-icon{background-image:url(images/ui-icons_ef8c08_256x240.png)}.ui-state-hover .ui-icon,.ui-state-focus .ui-icon{background-image:url(images/ui-icons_ef8c08_256x240.png)}.ui-state-active .ui-icon{background-image:url(images/ui-icons_ef8c08_256x240.png)}.ui-state-highlight .ui-icon{background-image:url(images/ui-icons_228ef1_256x240.png)}.ui-state-error .ui-icon,.ui-state-error-text .ui-icon{background-image:url(images/ui-icons_ffd27a_256x240.png)}.ui-icon-blank{background-position:16px 16px}.ui-icon-carat-1-n{background-position:0 0}.ui-icon-carat-1-ne{background-position:-16px 0}.ui-icon-carat-1-e{background-position:-32px 0}.ui-icon-carat-1-se{background-position:-48px 0}.ui-icon-carat-1-s{background-position:-64px 0}.ui-icon-carat-1-sw{background-position:-80px 0}.ui-icon-carat-1-w{background-position:-96px 0}.ui-icon-carat-1-nw{background-position:-112px 0}.ui-icon-carat-2-n-s{background-position:-128px 0}.ui-icon-carat-2-e-w{background-position:-144px 0}.ui-icon-triangle-1-n{background-position:0 -16px}.ui-icon-triangle-1-ne{background-position:-16px -16px}.ui-icon-triangle-1-e{background-position:-32px -16px}.ui-icon-triangle-1-se{background-position:-48px -16px}.ui-icon-triangle-1-s{background-position:-64px -16px}.ui-icon-triangle-1-sw{background-position:-80px -16px}.ui-icon-triangle-1-w{background-position:-96px -16px}.ui-icon-triangle-1-nw{background-position:-112px -16px}.ui-icon-triangle-2-n-s{background-position:-128px -16px}.ui-icon-triangle-2-e-w{background-position:-144px -16px}.ui-icon-arrow-1-n{background-position:0 -32px}.ui-icon-arrow-1-ne{background-position:-16px -32px}.ui-icon-arrow-1-e{background-position:-32px -32px}.ui-icon-arrow-1-se{background-position:-48px -32px}.ui-icon-arrow-1-s{background-position:-64px -32px}.ui-icon-arrow-1-sw{background-position:-80px -32px}.ui-icon-arrow-1-w{background-position:-96px -32px}.ui-icon-arrow-1-nw{background-position:-112px -32px}.ui-icon-arrow-2-n-s{background-position:-128px -32px}.ui-icon-arrow-2-ne-sw{background-position:-144px -32px}.ui-icon-arrow-2-e-w{background-position:-160px -32px}.ui-icon-arrow-2-se-nw{background-position:-176px -32px}.ui-icon-arrowstop-1-n{background-position:-192px -32px}.ui-icon-arrowstop-1-e{background-position:-208px -32px}.ui-icon-arrowstop-1-s{background-position:-224px -32px}.ui-icon-arrowstop-1-w{background-position:-240px -32px}.ui-icon-arrowthick-1-n{background-position:0 -48px}.ui-icon-arrowthick-1-ne{background-position:-16px -48px}.ui-icon-arrowthick-1-e{background-position:-32px -48px}.ui-icon-arrowthick-1-se{background-position:-48px -48px}.ui-icon-arrowthick-1-s{background-position:-64px -48px}.ui-icon-arrowthick-1-sw{background-position:-80px -48px}.ui-icon-arrowthick-1-w{background-position:-96px -48px}.ui-icon-arrowthick-1-nw{background-position:-112px -48px}.ui-icon-arrowthick-2-n-s{background-position:-128px -48px}.ui-icon-arrowthick-2-ne-sw{background-position:-144px -48px}.ui-icon-arrowthick-2-e-w{background-position:-160px -48px}.ui-icon-arrowthick-2-se-nw{background-position:-176px -48px}.ui-icon-arrowthickstop-1-n{background-position:-192px -48px}.ui-icon-arrowthickstop-1-e{background-position:-208px -48px}.ui-icon-arrowthickstop-1-s{background-position:-224px -48px}.ui-icon-arrowthickstop-1-w{background-position:-240px -48px}.ui-icon-arrowreturnthick-1-w{background-position:0 -64px}.ui-icon-arrowreturnthick-1-n{background-position:-16px -64px}.ui-icon-arrowreturnthick-1-e{background-position:-32px -64px}.ui-icon-arrowreturnthick-1-s{background-position:-48px -64px}.ui-icon-arrowreturn-1-w{background-position:-64px -64px}.ui-icon-arrowreturn-1-n{background-position:-80px -64px}.ui-icon-arrowreturn-1-e{background-position:-96px -64px}.ui-icon-arrowreturn-1-s{background-position:-112px -64px}.ui-icon-arrowrefresh-1-w{background-position:-128px -64px}.ui-icon-arrowrefresh-1-n{background-position:-144px -64px}.ui-icon-arrowrefresh-1-e{background-position:-160px -64px}.ui-icon-arrowrefresh-1-s{background-position:-176px -64px}.ui-icon-arrow-4{background-position:0 -80px}.ui-icon-arrow-4-diag{background-position:-16px -80px}.ui-icon-extlink{background-position:-32px -80px}.ui-icon-newwin{background-position:-48px -80px}.ui-icon-refresh{background-position:-64px -80px}.ui-icon-shuffle{background-position:-80px -80px}.ui-icon-transfer-e-w{background-position:-96px -80px}.ui-icon-transferthick-e-w{background-position:-112px -80px}.ui-icon-folder-collapsed{background-position:0 -96px}.ui-icon-folder-open{background-position:-16px -96px}.ui-icon-document{background-position:-32px -96px}.ui-icon-document-b{background-position:-48px -96px}.ui-icon-note{background-position:-64px -96px}.ui-icon-mail-closed{background-position:-80px -96px}.ui-icon-mail-open{background-position:-96px -96px}.ui-icon-suitcase{background-position:-112px -96px}.ui-icon-comment{background-position:-128px -96px}.ui-icon-person{background-position:-144px -96px}.ui-icon-print{background-position:-160px -96px}.ui-icon-trash{background-position:-176px -96px}.ui-icon-locked{background-position:-192px -96px}.ui-icon-unlocked{background-position:-208px -96px}.ui-icon-bookmark{background-position:-224px -96px}.ui-icon-tag{background-position:-240px -96px}.ui-icon-home{background-position:0 -112px}.ui-icon-flag{background-position:-16px -112px}.ui-icon-calendar{background-position:-32px -112px}.ui-icon-cart{background-position:-48px -112px}.ui-icon-pencil{background-position:-64px -112px}.ui-icon-clock{background-position:-80px -112px}.ui-icon-disk{background-position:-96px -112px}.ui-icon-calculator{background-position:-112px -112px}.ui-icon-zoomin{background-position:-128px -112px}.ui-icon-zoomout{background-position:-144px -112px}.ui-icon-search{background-position:-160px -112px}.ui-icon-wrench{background-position:-176px -112px}.ui-icon-gear{background-position:-192px -112px}.ui-icon-heart{background-position:-208px -112px}.ui-icon-star{background-position:-224px -112px}.ui-icon-link{background-position:-240px -112px}.ui-icon-cancel{background-position:0 -128px}.ui-icon-plus{background-position:-16px -128px}.ui-icon-plusthick{background-position:-32px -128px}.ui-icon-minus{background-position:-48px -128px}.ui-icon-minusthick{background-position:-64px -128px}.ui-icon-close{background-position:-80px -128px}.ui-icon-closethick{background-position:-96px -128px}.ui-icon-key{background-position:-112px -128px}.ui-icon-lightbulb{background-position:-128px -128px}.ui-icon-scissors{background-position:-144px -128px}.ui-icon-clipboard{background-position:-160px -128px}.ui-icon-copy{background-position:-176px -128px}.ui-icon-contact{background-position:-192px -128px}.ui-icon-image{background-position:-208px -128px}.ui-icon-video{background-position:-224px -128px}.ui-icon-script{background-position:-240px -128px}.ui-icon-alert{background-position:0 -144px}.ui-icon-info{background-position:-16px -144px}.ui-icon-notice{background-position:-32px -144px}.ui-icon-help{background-position:-48px -144px}.ui-icon-check{background-position:-64px -144px}.ui-icon-bullet{background-position:-80px -144px}.ui-icon-radio-on{background-position:-96px -144px}.ui-icon-radio-off{background-position:-112px -144px}.ui-icon-pin-w{background-position:-128px -144px}.ui-icon-pin-s{background-position:-144px -144px}.ui-icon-play{background-position:0 -160px}.ui-icon-pause{background-position:-16px -160px}.ui-icon-seek-next{background-position:-32px -160px}.ui-icon-seek-prev{background-position:-48px -160px}.ui-icon-seek-end{background-position:-64px -160px}.ui-icon-seek-start{background-position:-80px -160px}.ui-icon-seek-first{background-position:-80px -160px}.ui-icon-stop{background-position:-96px -160px}.ui-icon-eject{background-position:-112px -160px}.ui-icon-volume-off{background-position:-128px -160px}.ui-icon-volume-on{background-position:-144px -160px}.ui-icon-power{background-position:0 -176px}.ui-icon-signal-diag{background-position:-16px -176px}.ui-icon-signal{background-position:-32px -176px}.ui-icon-battery-0{background-position:-48px -176px}.ui-icon-battery-1{background-position:-64px -176px}.ui-icon-battery-2{background-position:-80px -176px}.ui-icon-battery-3{background-position:-96px -176px}.ui-icon-circle-plus{background-position:0 -192px}.ui-icon-circle-minus{background-position:-16px -192px}.ui-icon-circle-close{background-position:-32px -192px}.ui-icon-circle-triangle-e{background-position:-48px -192px}.ui-icon-circle-triangle-s{background-position:-64px -192px}.ui-icon-circle-triangle-w{background-position:-80px -192px}.ui-icon-circle-triangle-n{background-position:-96px -192px}.ui-icon-circle-arrow-e{background-position:-112px -192px}.ui-icon-circle-arrow-s{background-position:-128px -192px}.ui-icon-circle-arrow-w{background-position:-144px -192px}.ui-icon-circle-arrow-n{background-position:-160px -192px}.ui-icon-circle-zoomin{background-position:-176px -192px}.ui-icon-circle-zoomout{background-position:-192px -192px}.ui-icon-circle-check{background-position:-208px -192px}.ui-icon-circlesmall-plus{background-position:0 -208px}.ui-icon-circlesmall-minus{background-position:-16px -208px}.ui-icon-circlesmall-close{background-position:-32px -208px}.ui-icon-squaresmall-plus{background-position:-48px -208px}.ui-icon-squaresmall-minus{background-position:-64px -208px}.ui-icon-squaresmall-close{background-position:-80px -208px}.ui-icon-grip-dotted-vertical{background-position:0 -224px}.ui-icon-grip-dotted-horizontal{background-position:-16px -224px}.ui-icon-grip-solid-vertical{background-position:-32px -224px}.ui-icon-grip-solid-horizontal{background-position:-48px -224px}.ui-icon-gripsmall-diagonal-se{background-position:-64px -224px}.ui-icon-grip-diagonal-se{background-position:-80px -224px}.ui-corner-all,.ui-corner-top,.ui-corner-left,.ui-corner-tl{border-top-left-radius:4px}.ui-corner-all,.ui-corner-top,.ui-corner-right,.ui-corner-tr{border-top-right-radius:4px}.ui-corner-all,.ui-corner-bottom,.ui-corner-left,.ui-corner-bl{border-bottom-left-radius:4px}.ui-corner-all,.ui-corner-bottom,.ui-corner-right,.ui-corner-br{border-bottom-right-radius:4px}.ui-widget-overlay{background:#666 url(images/ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat;opacity:.5;filter:Alpha(Opacity=50)}.ui-widget-shadow{margin:-5px 0 0 -5px;padding:5px;background:#000 url(images/ui-bg_flat_10_000000_40x100.png) 50% 50% repeat-x;opacity:.2;filter:Alpha(Opacity=20);border-radius:5px}

data/lib/flipper/ui/public/js/application.js

@@ -0,0 +1,544 @@
+(function() {
+  var App, Feature, Gate,
+    __hasProp = {}.hasOwnProperty,
+    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
+    __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
+
+  Feature = (function(_super) {
+
+    __extends(Feature, _super);
+
+    Feature.configure("Feature", "id", "name", "state", "description", "gates");
+
+    Feature.extend(Spine.Model.Ajax);
+
+    Feature.extend({
+      url: "" + Flipper.Config.url + "/features"
+    });
+
+    function Feature() {
+      var _this = this;
+      Feature.__super__.constructor.apply(this, arguments);
+      this.gates = this.gates.map(function(data) {
+        data.feature_id = _this.id;
+        return new Gate(data);
+      });
+    }
+
+    Feature.prototype.gate = function(name) {
+      var gates;
+      gates = this.gates.filter(function(gate) {
+        return gate.name === name;
+      });
+      return gates[0];
+    };
+
+    return Feature;
+
+  })(Spine.Model);
+
+  window.Feature = Feature;
+
+  Gate = (function(_super) {
+
+    __extends(Gate, _super);
+
+    Gate.configure("Gate", "feature_id", "key", "name", "value");
+
+    function Gate() {
+      Gate.__super__.constructor.apply(this, arguments);
+    }
+
+    Gate.prototype.url = function() {
+      return "" + Flipper.Config.url + "/features/" + (encodeURIComponent(this.feature_id)) + "/" + (encodeURIComponent(this.name));
+    };
+
+    Gate.prototype.disableSetMember = function(member, success_callback, error_callback) {
+      return this.setMember('disable', member, success_callback, error_callback);
+    };
+
+    Gate.prototype.enableSetMember = function(member, success_callback, error_callback) {
+      return this.setMember('enable', member, success_callback, error_callback);
+    };
+
+    Gate.prototype.setMember = function(operation, member, success_callback, error_callback) {
+      var options,
+        _this = this;
+      options = {
+        type: 'POST',
+        url: this.url(),
+        data: {
+          operation: operation,
+          value: member
+        },
+        success: function(data, status, xhr) {
+          Feature.trigger('reload');
+          _this.value = data.value;
+          if (success_callback) {
+            return success_callback(data, status, xhr);
+          }
+        },
+        error: function(data, status, error) {
+          var response;
+          response = data.responseText ? $.parseJSON(data.responseText) : {
+            message: "Something went wrong..."
+          };
+          alert("ERROR: " + response.message);
+          if (error_callback) {
+            return error_callback(data, status);
+          }
+        }
+      };
+      return $.ajax(options);
+    };
+
+    Gate.prototype.save = function(opts) {
+      var result;
+      result = Gate.__super__.save.apply(this, arguments);
+      this.ajaxSave(opts);
+      Feature.trigger('reload');
+      return result;
+    };
+
+    Gate.prototype.ajaxSave = function(opts) {
+      var options,
+        _this = this;
+      options = {
+        type: 'POST',
+        url: this.url(),
+        data: {
+          value: this.value
+        },
+        error: function(data, status, error) {
+          var response;
+          response = data.responseText ? $.parseJSON(data.responseText) : {
+            message: "Something went wrong..."
+          };
+          return alert("ERROR: " + response.message);
+        }
+      };
+      return $.ajax(options);
+    };
+
+    return Gate;
+
+  })(Spine.Model);
+
+  App = (function(_super) {
+
+    __extends(App, _super);
+
+    function App() {
+      App.__super__.constructor.apply(this, arguments);
+      this.feature_list = new App.FeatureList({
+        el: $('#features')
+      });
+    }
+
+    return App;
+
+  })(Spine.Controller);
+
+  App.FeatureList = (function(_super) {
+
+    __extends(FeatureList, _super);
+
+    function FeatureList() {
+      this.reload = __bind(this.reload, this);
+
+      this.addAll = __bind(this.addAll, this);
+
+      this.addOne = __bind(this.addOne, this);
+
+      var _this = this;
+      FeatureList.__super__.constructor.apply(this, arguments);
+      this.feature_controllers = {};
+      Feature.bind("refresh", this.addAll);
+      Feature.bind("reload", this.reload);
+      Feature.one('refresh', function() {
+        return Spine.Route.setup({
+          history: true
+        });
+      });
+      Feature.fetch();
+      Spine.Route.add(/features\/(.*)\/(.*)\/?/, function(matches) {
+        var controller, params;
+        params = {
+          id: matches.match[1],
+          gate: matches.match[2]
+        };
+        if (controller = _this.feature_controllers[params.id]) {
+          controller.edit();
+          return controller.activateGate(params);
+        }
+      });
+      Spine.Route.add(/features\/(.*)\/?/, function(matches) {
+        var controller, params;
+        params = {
+          id: matches.match[1]
+        };
+        if (controller = _this.feature_controllers[params.id]) {
+          controller.edit();
+          return controller.openDefaultGate();
+        }
+      });
+    }
+
+    FeatureList.prototype.addOne = function(feature) {
+      var controller;
+      controller = new App.Feature({
+        feature: feature
+      });
+      this.feature_controllers[feature.id] = controller;
+      return this.append(controller.render());
+    };
+
+    FeatureList.prototype.addAll = function() {
+      var all_features, feature, _i, _len, _results;
+      this.html('');
+      $('#no_features').hide();
+      all_features = Feature.all();
+      if (all_features.length > 0) {
+        _results = [];
+        for (_i = 0, _len = all_features.length; _i < _len; _i++) {
+          feature = all_features[_i];
+          _results.push(this.addOne(feature));
+        }
+        return _results;
+      } else {
+        return $('#no_features').show();
+      }
+    };
+
+    FeatureList.prototype.reload = function() {
+      Feature.fetch();
+      return this.addAll;
+    };
+
+    return FeatureList;
+
+  })(Spine.Controller);
+
+  App.Feature = (function(_super) {
+
+    __extends(Feature, _super);
+
+    Feature.prototype.elements = {
+      '.feature': 'dom_feature',
+      '.gates': 'dom_gates'
+    };
+
+    Feature.prototype.events = {
+      'click .show-settings': 'openFeature',
+      'click .hide-settings': 'hide',
+      'click [data-tab]': 'clickTab'
+    };
+
+    function Feature() {
+      Feature.__super__.constructor.apply(this, arguments);
+      if (!(this.feature != null)) {
+        throw "@feature required";
+      }
+    }
+
+    Feature.prototype.render = function() {
+      this.html(this.template(this.feature));
+      this.gate_list = new App.GateList({
+        el: this.dom_gates
+      });
+      return this.el;
+    };
+
+    Feature.prototype.openFeature = function(event) {
+      if (event) {
+        event.preventDefault();
+      }
+      return this.navigate("" + Flipper.Config.url + "/features/" + this.feature.id);
+    };
+
+    Feature.prototype.openDefaultGate = function() {
+      return this.navigate("" + Flipper.Config.url + "/features/" + this.feature.id + "/boolean");
+    };
+
+    Feature.prototype.template = function(feature) {
+      var source, template;
+      source = $("#feature-template").html();
+      template = Handlebars.compile(source);
+      return template(feature);
+    };
+
+    Feature.prototype.clickTab = function(event) {
+      var name, tab;
+      event.preventDefault();
+      tab = $(event.currentTarget);
+      name = tab.attr('data-tab');
+      return this.navigate("" + Flipper.Config.url + "/features/" + this.feature.id + "/" + name);
+    };
+
+    Feature.prototype.activateGate = function(params) {
+      var name;
+      name = params.gate;
+      this.gate_list[name].active(params);
+      this.el.find('[data-tab]').removeClass('active');
+      return this.el.find("[data-tab=" + name + "]").addClass('active');
+    };
+
+    Feature.prototype.edit = function(event) {
+      if (event) {
+        event.preventDefault();
+      }
+      return this.dom_feature.addClass('settings');
+    };
+
+    Feature.prototype.hide = function(event) {
+      if (event) {
+        event.preventDefault();
+      }
+      this.dom_feature.removeClass('settings');
+      return this.navigate("" + Flipper.Config.url + "/");
+    };
+
+    return Feature;
+
+  })(Spine.Controller);
+
+  App.Gate = (function(_super) {
+
+    __extends(Gate, _super);
+
+    function Gate() {
+      Gate.__super__.constructor.apply(this, arguments);
+      this.active(this.renderForParams);
+    }
+
+    Gate.prototype.renderForParams = function(params) {
+      this.feature = Feature.find(params.id);
+      this.gate = this.feature.gate(params.gate);
+      return this.render();
+    };
+
+    Gate.prototype.render = function() {
+      var $slider, $slider_value;
+      this.html(this.template("#gate-" + (this.name.replace(/_/g, '-')) + "-template", this.gate));
+      $slider = $(".slider-range");
+      $slider_value = $slider.siblings("input[type='text']");
+      $slider.slider({
+        range: "min",
+        value: this.gate.value,
+        min: 0,
+        max: 100,
+        slide: function(event, ui) {
+          $slider_value.val(ui.value);
+        }
+      });
+      $slider_value.val($slider.slider("value"));
+      return $slider_value.change(function() {
+        $slider.slider("value", $(this).val());
+      });
+    };
+
+    Gate.prototype.template = function(html_id, context) {
+      var source, template;
+      source = $(html_id).html();
+      template = Handlebars.compile(source);
+      return template(context);
+    };
+
+    return Gate;
+
+  })(Spine.Controller);
+
+  App.Gate.Boolean = (function(_super) {
+
+    __extends(Boolean, _super);
+
+    Boolean.prototype.elements = {
+      'input[value=true]': 'input'
+    };
+
+    Boolean.prototype.events = {
+      'submit form': 'submit'
+    };
+
+    function Boolean() {
+      this.name = 'boolean';
+      Boolean.__super__.constructor.apply(this, arguments);
+    }
+
+    Boolean.prototype.submit = function(event) {
+      event.preventDefault();
+      this.gate.value = this.input.is(':checked');
+      this.gate.save();
+      return this.navigate("" + Flipper.Config.url + "/");
+    };
+
+    return Boolean;
+
+  })(App.Gate);
+
+  App.Gate.Set = (function(_super) {
+
+    __extends(Set, _super);
+
+    function Set() {
+      return Set.__super__.constructor.apply(this, arguments);
+    }
+
+    Set.prototype.elements = {
+      '.disable': 'dom_disable',
+      '.members': 'dom_members',
+      '[name=value]': 'dom_input'
+    };
+
+    Set.prototype.events = {
+      'click .disable': 'disable',
+      'submit form': 'submit'
+    };
+
+    Set.prototype.disable = function(event) {
+      var member, value;
+      event.preventDefault();
+      member = $(event.currentTarget).closest('.member');
+      value = member.attr('data-value');
+      return this.gate.disableSetMember(value, function(data, status, xhr) {
+        return member.remove();
+      });
+    };
+
+    Set.prototype.submit = function(event) {
+      var self, value;
+      event.preventDefault();
+      value = this.dom_input.val();
+      self = this;
+      return this.gate.enableSetMember(value, function(data, status, xhr) {
+        var html;
+        html = self.template("#gate-member-template", value);
+        self.dom_members.append(html);
+        return self.dom_input.val('');
+      });
+    };
+
+    return Set;
+
+  })(App.Gate);
+
+  App.Gate.Group = (function(_super) {
+
+    __extends(Group, _super);
+
+    function Group() {
+      this.name = 'group';
+      Group.__super__.constructor.apply(this, arguments);
+    }
+
+    return Group;
+
+  })(App.Gate.Set);
+
+  App.Gate.Actor = (function(_super) {
+
+    __extends(Actor, _super);
+
+    function Actor() {
+      this.name = 'actor';
+      Actor.__super__.constructor.apply(this, arguments);
+    }
+
+    return Actor;
+
+  })(App.Gate.Set);
+
+  App.Gate.Percentage = (function(_super) {
+
+    __extends(Percentage, _super);
+
+    function Percentage() {
+      return Percentage.__super__.constructor.apply(this, arguments);
+    }
+
+    Percentage.prototype.elements = {
+      'input[type=text]': 'input'
+    };
+
+    Percentage.prototype.events = {
+      'submit form': 'submit'
+    };
+
+    Percentage.prototype.validate = function() {
+      var float_value, valid;
+      float_value = parseFloat(this.gate.value);
+      valid = true;
+      if (isNaN(float_value) || float_value < 0 || float_value > 100) {
+        alert("The percentage value provided is not valid");
+        valid = false;
+      }
+      return valid;
+    };
+
+    Percentage.prototype.submit = function(event) {
+      event.preventDefault();
+      this.gate.value = this.input.val();
+      if (!this.validate()) {
+        return;
+      }
+      this.gate.save();
+      return this.navigate("" + Flipper.Config.url + "/");
+    };
+
+    return Percentage;
+
+  })(App.Gate);
+
+  App.Gate.PercentageOfActors = (function(_super) {
+
+    __extends(PercentageOfActors, _super);
+
+    function PercentageOfActors() {
+      this.name = 'percentage_of_actors';
+      PercentageOfActors.__super__.constructor.apply(this, arguments);
+    }
+
+    return PercentageOfActors;
+
+  })(App.Gate.Percentage);
+
+  App.Gate.PercentageOfRandom = (function(_super) {
+
+    __extends(PercentageOfRandom, _super);
+
+    function PercentageOfRandom() {
+      this.name = 'percentage_of_random';
+      PercentageOfRandom.__super__.constructor.apply(this, arguments);
+    }
+
+    return PercentageOfRandom;
+
+  })(App.Gate.Percentage);
+
+  App.GateList = (function(_super) {
+
+    __extends(GateList, _super);
+
+    function GateList() {
+      return GateList.__super__.constructor.apply(this, arguments);
+    }
+
+    GateList.prototype.controllers = {
+      boolean: App.Gate.Boolean,
+      group: App.Gate.Group,
+      actor: App.Gate.Actor,
+      percentage_of_actors: App.Gate.PercentageOfActors,
+      percentage_of_random: App.Gate.PercentageOfRandom
+    };
+
+    return GateList;
+
+  })(Spine.Stack);
+
+  jQuery(function() {
+    return new App({
+      el: $('#app')
+    });
+  });
+
+}).call(this);