* settings.js stores settings in localStorage

* settings object emits an event when any key changes
* hide/showCertified moved from settings.js to ui.js

kitchensink-app/js/app.js

@@ -9,8 +9,7 @@ define(function(require) {
   require('elements/attributes');   // .html() in utils.js
   require('elements/insertion');    // .insert() in logger and models.js
   require('elements/traversal');    // $ searches elements using Slick
-  require('./settings');
-  var setStripes = require('./ui').setStripes;
+  var renderCertified = require('./ui').renderCertified;
   var apis = require('./apis/index');
   var log = require('logger');
 
@@ -29,7 +28,7 @@ define(function(require) {
     api.runTests();
   }
 
-  setStripes();
+  renderCertified();
 
   if ('MozActivity' in window) {
     // change all links to webactivities

kitchensink-app/js/lib/settings.js

@@ -0,0 +1,38 @@
+define(function(require) {
+  var prime = require('prime');
+  var Emitter = require('prime/emitter');
+
+  var Settings = prime({
+    inherits: Emitter,
+
+    options: {
+      'certifiedVisible': false
+    },
+
+    constructor: function() {
+      // update settings from localStorage
+      var localSettings = JSON.parse(localStorage.settings || '{}');
+      for (var key in localSettings) {
+        this.options[key] = localSettings[key];
+      } 
+      this.store();
+    },
+
+    get: function(key) {
+      return this.options[key];
+    },
+
+    set: function(key, value) {
+      this.options[key] = value;
+      this.store();
+      this.emit(key);
+    },
+
+    store: function() {
+      localStorage.settings = JSON.stringify(this.options);
+    }
+
+  });
+
+  return new Settings();
+});

kitchensink-app/js/ui.js

@@ -1,5 +1,7 @@
 define(function(require) {
+  var settings = require('settings');
   var $ = require('elements');
+  require('elements/events');
   require('elements/traversal');
 
   /**
@@ -15,9 +17,61 @@ define(function(require) {
         $(element).addClass('even');
       }
     });
-  };
+  }
+
+  /**
+   * hides all certified dt and closes dd if opened
+   */
+  function hideCertified() {
+    $('dt.certified').forEach(function(element) {
+      element = $(element);
+      element.addClass('hidden');
+      // hide description if opened
+      var model = element._model;
+      if (model.visible) {
+        model.visible = false;
+        // XXX this will need to be changed if any animation will be
+        // implemented to hide
+        model.hide();
+      }
+    });
+    setStripes();
+  }
+
+  /**
+   * show all certified dt
+   */
+  function showCertified() {
+    $('dt.certified').removeClass('hidden');
+    setStripes();
+  } 
+
+  /**
+   * toggles certified dt's
+   */
+  function toggleCeritified() {
+    settings.set('certifiedVisible', !settings.get('certifiedVisible'));
+  }
+
+  /**
+   * show hide certified regarding the setting
+   */
+  function renderCertified() {
+    if (settings.get('certifiedVisible')) {
+      showCertified();
+    } else {
+      hideCertified();
+    }
+  }
+
+  // TODO: make it a proper setting
+  $('#header-settings').on('click', toggleCeritified);
+
+  // render certified on change of the setting
+  settings.on('certifiedVisible', renderCertified);
 
   return {
-    setStripes: setStripes
+    setStripes: setStripes,
+    renderCertified: renderCertified
   };
 });