From 8022cff0419709b6d8b49d80a1b71903d9fb55d9 Mon Sep 17 00:00:00 2001
From: Matthias BUSSONNIER <bussonniermatthias@gmail.com>
Date: Sun, 29 Jul 2012 21:43:17 +0200
Subject: [PATCH 01/26] Add a per cell toolbar.

This add a per-cell globally toggleable toolbar
the main purpouse is to easily edit metadata.

this come with a few example like adding checkbox,
dropdown list, simple button, button with icon...

please see the js-doc of
IPython/frontend/html/notebook/static/js/MetaUI.js
for more info
---
 .../html/notebook/static/css/metaui.css       |  54 +++
 .../html/notebook/static/css/notebook.css     |   2 +
 .../frontend/html/notebook/static/js/cell.js  |   1 +
 .../html/notebook/static/js/codecell.js       |   3 +
 .../html/notebook/static/js/maintoolbar.js    |  10 +
 .../html/notebook/static/js/metaui.js         | 359 ++++++++++++++++++
 .../html/notebook/static/js/textcell.js       |   4 +-
 .../html/notebook/static/js/toolbar.js        |   2 +-
 .../html/notebook/templates/notebook.html     |   2 +
 9 files changed, 435 insertions(+), 2 deletions(-)
 create mode 100644 IPython/frontend/html/notebook/static/css/metaui.css
 create mode 100644 IPython/frontend/html/notebook/static/js/metaui.js

diff --git a/IPython/frontend/html/notebook/static/css/metaui.css b/IPython/frontend/html/notebook/static/css/metaui.css
new file mode 100644
index 000000000..1e1e6c01f
--- /dev/null
+++ b/IPython/frontend/html/notebook/static/css/metaui.css
@@ -0,0 +1,54 @@
+/*Css for the metadata edit area*/
+
+.metaedit{
+    border:thin solid #DDD;
+    margin-left:81px;
+    border-bottom:none;
+    background : #EEE;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
+    display:none;
+}
+
+.code_cell .metaedit{
+    margin-left:81px;
+}
+
+.text_cell .metaedit{
+    margin-left:0px;
+}
+
+.editmetaon div.input_area , .editmetaon div.text_cell_input{
+    border-top-right-radius: 0px;
+    border-top-left-radius: 0px;
+}
+
+.editmetaon .metaedit {
+    display:block;
+}
+
+.metaedit ui-button {
+    border :none;
+}
+
+.button_container {
+ float:right;
+ /*width:60px;*/
+}
+
+.button_container .ui-state-default, .button_container .ui-state-hover, .button_container .ui-state-hover span{
+    border-radius : 0 0 0 0;
+    border : none;
+}
+
+.metaedit select {
+    margin:10px;
+    margin-top:0px;
+    margin-bottom:0px;
+}
+
+.metaedit input[type=checkbox] {
+    margin-bottom:1px;
+
+}
+
diff --git a/IPython/frontend/html/notebook/static/css/notebook.css b/IPython/frontend/html/notebook/static/css/notebook.css
index 83f55775f..2e50b0823 100644
--- a/IPython/frontend/html/notebook/static/css/notebook.css
+++ b/IPython/frontend/html/notebook/static/css/notebook.css
@@ -29,6 +29,7 @@ span#notebook_name {
     font-size: 146.5%;
 }
 
+
 .ui-menubar-item .ui-button .ui-button-text {
     padding: 0.4em 1.0em;
     font-size: 100%;
@@ -145,6 +146,7 @@ div.ui-widget-content {
 
 .cell {
     border: 1px solid transparent;
+    position: relative;
 }
 
 div.cell {
diff --git a/IPython/frontend/html/notebook/static/js/cell.js b/IPython/frontend/html/notebook/static/js/cell.js
index e33f221c1..1092b5b87 100644
--- a/IPython/frontend/html/notebook/static/js/cell.js
+++ b/IPython/frontend/html/notebook/static/js/cell.js
@@ -163,6 +163,7 @@ var IPython = (function (IPython) {
         if (data.metadata !== undefined) {
             this.metadata = data.metadata;
         }
+        this.metaui.rebuild();
     };
 
 
diff --git a/IPython/frontend/html/notebook/static/js/codecell.js b/IPython/frontend/html/notebook/static/js/codecell.js
index 9cf2ba9b2..0f80c0f0a 100644
--- a/IPython/frontend/html/notebook/static/js/codecell.js
+++ b/IPython/frontend/html/notebook/static/js/codecell.js
@@ -58,7 +58,10 @@ var IPython = (function (IPython) {
 
     /** @method create_element */
     CodeCell.prototype.create_element = function () {
+        this.metaui = new IPython.MetaUI(this);
+
         var cell =  $('<div></div>').addClass('cell border-box-sizing code_cell vbox');
+        cell.append(this.metaui.element);
         cell.attr('tabindex','2');
         var input = $('<div></div>').addClass('input hbox');
         input.append($('<div/>').addClass('prompt input_prompt'));
diff --git a/IPython/frontend/html/notebook/static/js/maintoolbar.js b/IPython/frontend/html/notebook/static/js/maintoolbar.js
index c82a4667b..cbe5440e5 100644
--- a/IPython/frontend/html/notebook/static/js/maintoolbar.js
+++ b/IPython/frontend/html/notebook/static/js/maintoolbar.js
@@ -116,6 +116,16 @@ var IPython = (function (IPython) {
                 }
             ],'run_int');
 
+        this.add_buttons_group([
+                {
+                    id : 'show_meta',
+                    label : 'Show Per Cell Toolbar',
+                    icon : 'ui-icon-image',
+                    callback : function () {
+                    $('body').toggleClass('editmetaon');
+                        }
+                }
+            ],'meta_on');
 
     };
 
diff --git a/IPython/frontend/html/notebook/static/js/metaui.js b/IPython/frontend/html/notebook/static/js/metaui.js
new file mode 100644
index 000000000..8bb7b93ef
--- /dev/null
+++ b/IPython/frontend/html/notebook/static/js/metaui.js
@@ -0,0 +1,359 @@
+//----------------------------------------------------------------------------
+//  Copyright (C) 2012  The IPython Development Team
+//
+//  Distributed under the terms of the BSD License.  The full license is in
+//  the file COPYING, distributed as part of this software.
+//----------------------------------------------------------------------------
+
+//============================================================================
+// MetaUI
+//============================================================================
+
+
+/**
+ * A Module to control the per-cell toolbar.
+ * @module IPython
+ * @namespace IPython
+ * @submodule MetaUI
+ */
+var IPython = (function (IPython) {
+    "use strict";
+
+
+    /**
+     * @constructor
+     * @class MetaUI
+     * @param {The cell to attach the metadata UI to} cell
+     */
+    var MetaUI = function (cell) {
+        MetaUI._instances.push(this);
+        this.metainner = $('<div/>');
+        this.cell = cell;
+        this.element = $('<div/>').addClass('metaedit')
+                .append(this.metainner)
+        this.rebuild();
+        return this;
+    };
+
+    /**
+     * Class variable that should contain a dict of all availlable callback
+     * we need to think of wether or not we allow nested namespace
+     * @property _callback_dict
+     * @private
+     */
+    MetaUI._callback_dict = {};
+
+    /**
+     * Class variable that should contain the reverse order list of the button
+     * to add to the toolbar of each cell
+     * @property _button_list
+     * @private
+     */
+    MetaUI._button_list = [];
+
+    /**
+     * keep a list of all instances to
+     * be able to llop over them...
+     * but how to 'destroy' them ?
+     * have to think about it...
+     * or loop over the cells, and find their MetaUI instances.
+     * @private
+     * @property _instances
+     */
+    MetaUI._instances =[]
+
+    /**
+     * keep a list of all the availlabel presets for the toolbar
+     * @private
+     * @property _presets
+     */
+    MetaUI._presets ={}
+
+    // this is by design not a prototype.
+    /**
+     * Register a callback to create an UI element in a cell toolbar.
+     * @method register_callback
+     * @param name {String} name to use to refer to the callback. It is advised to use a prefix with the name
+     * for easier sorting and avoid collision
+     * @param  callback {function(div, cell)} callback that will be called to generate the ui element
+     *
+     *
+     * The callback will receive the following element :
+     *
+     *    * a div in which to add element.
+     *    * the cell it is responsable from
+     *
+     * @example
+     *
+     * Example that create callback for a button that toggle between `true` and `false` label,
+     * with the metadata under the key 'foo' to reflect the status of the button.
+     *
+     *      // first param reference to a DOM div
+     *      // second param reference to the cell.
+     *      var toggle =  function(div, cell) {
+     *          var button_container = $(div)
+     *
+     *          // let's create a button that show the  current value of the metadata
+     *          var button = $('<div/>').button({label:String(cell.metadata.foo)});
+     *
+     *          // On click, change the metadata value and update the button label
+     *          button.click(function(){
+     *                      var v = cell.metadata.foo;
+     *                      cell.metadata.foo = !v;
+     *                      button.button("option","label",String(!v));
+     *                  })
+     *
+     *          // add the button to the DOM div.
+     *          button_container.append(button);
+     *      }
+     *
+     *      // now we register the callback under the name `foo` to give the
+     *      // user the ability to use it later
+     *      MetaUI.register_callback('foo',toggle);
+     */
+    MetaUI.register_callback = function(name, callback){
+        // what do we do if name already exist ?
+        MetaUI._callback_dict[name] = callback;
+    };
+
+    /**
+     * Register a preset of UI element in a cell toolbar.
+     * Not supported Yet.
+     * @method register_preset
+     * @param name {String} name to use to refer to the preset. It is advised to use a prefix with the name
+     * for easier sorting and avoid collision
+     * @param  preset_list {List of String} reverse order of the button in the toolbar. Each String of the list
+     *          should correspond to a name of a registerd callback.
+     *
+     * @private
+     * @example
+     *
+     *      MetaUI.register_callback('foo.c1',function(div,cell){...});
+     *      MetaUI.register_callback('foo.c2',function(div,cell){...});
+     *      MetaUI.register_callback('foo.c3',function(div,cell){...});
+     *      MetaUI.register_callback('foo.c4',function(div,cell){...});
+     *      MetaUI.register_callback('foo.c5',function(div,cell){...});
+     *
+     *      MetaUI.register_preset('foo.foo_preset1',['foo.c1','foo.c2','foo.c5'])
+     *      MetaUI.register_preset('foo.foo_preset2',['foo.c4','foo.c5'])
+     */
+    MetaUI.register_preset = function(name, preset_list){
+        MetaUI._presets[name] = preset_list
+    }
+    /**
+     * set an UI preset from `register_preset`
+     * @method set_preset
+     * @param preset_name {String} string corresponding to the preset name
+     *
+     * @static
+     * @private
+     * @example
+     *
+     *      MetaUI.set_preset('foo.foo_preset1');
+     */
+    MetaUI.set_preset= function(preset_name){
+        var preset = MetaUI._presets[preset_name];
+
+        if(preset != undefined){
+            MetaUI._button_list = preset;
+            MetaUI.rebuild_all();
+        }
+    }
+
+    // this is by design not a prototype.
+    /**
+     * This should be called on the class and not on a instance as it will trigger
+     * rebuild of all the instances.
+     * @method rebuild_all
+     * @static
+     *
+     */
+    MetaUI.rebuild_all = function(){
+        for(var i in MetaUI._instances){
+            MetaUI._instances[i].rebuild();
+        }
+    }
+
+    /**
+     * Rebuild all the button on the toolbar to update it's state.
+     * @method rebuild
+     */
+    MetaUI.prototype.rebuild = function(){
+        // strip evrything from the div
+        // which is probabli metainner.
+        // or this.element.
+        this.metainner.empty();
+        //this.add_raw_edit_button()
+
+
+        var cdict = MetaUI._callback_dict;
+        var preset = MetaUI._button_list;
+        // Yes we iterate on the class varaible, not the instance one.
+        for ( var index in MetaUI._button_list){
+            var local_div = $('<div/>').addClass('button_container');
+            this.metainner.append(local_div)
+            cdict[preset[index]](local_div,this.cell)
+        }
+
+    }
+
+    var raw_edit = function(cell){
+
+        var md = cell.metadata
+
+        var textarea = $('<textarea/>')
+            .attr('rows','13')
+            .attr('cols','75')
+            .attr('name','metadata')
+            .text(JSON.stringify(md, null,4)||'');
+        var dialogform = $('<div/>').attr('title','Edit the metadata')
+            .append(
+                $('<form/>').append(
+                    $('<fieldset/>').append(
+                        $('<label/>')
+                        .attr('for','metadata')
+                        .text("Metadata (I know what I'm dooing and I won't complain if it breaks my notebook)")
+                        )
+                        .append($('<br/>'))
+                        .append(
+                            textarea
+                        )
+                    )
+            );
+        var editor = CodeMirror.fromTextArea(textarea[0], {
+            lineNumbers: true,
+            matchBrackets: true,
+        });
+        $(dialogform).dialog({
+                autoOpen: true,
+                height: 300,
+                width: 650,
+                modal: true,
+                buttons: {
+                    "Ok": function() {
+                        //validate json and set it
+                        try {
+                           var json = JSON.parse(editor.getValue());
+                           cell.metadata = json;
+                           $( this ).dialog( "close" );
+                        }
+                        catch(e)
+                        {
+                           alert('invalid json');
+                        }
+                    },
+                    Cancel: function() {
+                        $( this ).dialog( "close" );
+                    }
+                },
+                close: function() {
+                    //cleanup on close
+                    $(this).remove();
+                }
+        });
+        editor.refresh();
+    }
+
+    var add_raw_edit_button = function(div, cell) {
+        var button_container = $(div)
+        var button = $('<div/>').button({label:'Raw Edit'})
+                .click(function(){raw_edit(cell); return false;})
+        button_container.append(button);
+    }
+
+    MetaUI.register_callback('example.rawedit',add_raw_edit_button);
+    var example_preset = []
+    example_preset.push('example.rawedit');
+
+
+    var simple_button = function(div, cell) {
+        var button_container = $(div);
+        var button = $('<div/>').button({icons:{primary:'ui-icon-locked'}});
+        var fun = function(value){
+                try{
+                    if(value){
+                        cell.code_mirror.setOption('readOnly','nocursor')
+                        button.button('option','icons',{primary:'ui-icon-locked'})
+                    } else {
+                        cell.code_mirror.setOption('readOnly','false')
+                        button.button('option','icons',{primary:'ui-icon-unlocked'})
+                    }
+                } catch(e){}
+
+        }
+            fun(cell.metadata.ro)
+            button.click(function(){
+                    var v = cell.metadata.ro;
+                    var locked = !v;
+                    cell.metadata.ro = locked;
+                    fun(locked)
+                    })
+                .css('height','16px')
+                .css('width','35px');
+        button_container.append(button);
+    }
+
+    MetaUI.register_callback('example.lock',simple_button);
+    example_preset.push('example.lock');
+
+    var toggle_test =  function(div, cell) {
+        var button_container = $(div)
+        var button = $('<div/>').button({label:String(cell.metadata.foo)});
+        button.click(function(){
+                    var v = cell.metadata.foo;
+                    cell.metadata.foo = !v;
+                    button.button("option","label",String(!v));
+                })
+       button_container.append(button);
+    }
+
+    MetaUI.register_callback('example.toggle',toggle_test);
+    example_preset.push('example.toggle');
+
+    var checkbox_test =  function(div, cell) {
+        var button_container = $(div)
+
+        var chkb = $('<input/>').attr('type','checkbox');
+        var lbl = $('<label/>').append($('<span/>').text('bar :').css('font-size','77%'));
+        lbl.append(chkb);
+        chkb.attr("checked",cell.metadata.bar);
+        chkb.click(function(){
+                    var v = cell.metadata.bar;
+                    cell.metadata.bar = !v;
+                    chkb.attr("checked",!v);
+                })
+       button_container.append($('<div/>').append(lbl));
+
+    }
+
+    MetaUI.register_callback('example.checkbox',checkbox_test);
+    example_preset.push('example.checkbox');
+
+    var select_test =  function(div, cell) {
+        var button_container = $(div)
+
+        var select = $('<select/>');
+
+        select.append($('<option/>').attr('value','foo').text('foo'));
+        select.append($('<option/>').attr('value','bar').text('bar'));
+        select.append($('<option/>').attr('value','qux').text('qux'));
+        select.append($('<option/>').attr('value','zip').text('zip'));
+        select.val(cell.metadata.option);
+        select.change(function(){
+                cell.metadata.option = select.val();
+                });
+       button_container.append($('<div/>').append(select));
+
+    }
+
+    MetaUI.register_callback('example.select',select_test);
+    example_preset.push('example.select');
+
+    MetaUI.register_preset('example',example_preset);
+    MetaUI.register_preset('foo',['example.select','example.select']);
+    MetaUI.set_preset('example');
+
+    IPython.MetaUI = MetaUI;
+
+    return IPython;
+}(IPython));
diff --git a/IPython/frontend/html/notebook/static/js/textcell.js b/IPython/frontend/html/notebook/static/js/textcell.js
index 2a76e2316..f9c8c3e28 100644
--- a/IPython/frontend/html/notebook/static/js/textcell.js
+++ b/IPython/frontend/html/notebook/static/js/textcell.js
@@ -42,7 +42,9 @@ var IPython = (function (IPython) {
      * @private
      */
     TextCell.prototype.create_element = function () {
-        var cell = $("<div>").addClass('cell text_cell border-box-sizing');
+        var cell = $("<div>").addClass('cell text_cell border-box-sizing vbox');
+        this.metaui = new IPython.MetaUI(this);
+        cell.append(this.metaui.element);
         cell.attr('tabindex','2');
         var input_area = $('<div/>').addClass('text_cell_input border-box-sizing');
         this.code_mirror = CodeMirror(input_area.get(0), {
diff --git a/IPython/frontend/html/notebook/static/js/toolbar.js b/IPython/frontend/html/notebook/static/js/toolbar.js
index 1362b87bb..2bc9fcdaa 100644
--- a/IPython/frontend/html/notebook/static/js/toolbar.js
+++ b/IPython/frontend/html/notebook/static/js/toolbar.js
@@ -36,7 +36,7 @@ var IPython = (function (IPython) {
      *
      *  @example
      *
-     *      IPython.toolbar.add_button_group([
+     *      IPython.toolbar.add_buttons_group([
      *          {
      *            label:'my button',
      *            icon:'ui-icon-disk',
diff --git a/IPython/frontend/html/notebook/templates/notebook.html b/IPython/frontend/html/notebook/templates/notebook.html
index e5ec19119..fdd769cb3 100644
--- a/IPython/frontend/html/notebook/templates/notebook.html
+++ b/IPython/frontend/html/notebook/templates/notebook.html
@@ -17,6 +17,7 @@ window.mathjax_url = "{{mathjax_url}}";
 <link rel="stylesheet" href="{{ static_url("prettify/prettify.css") }}"/>
 
 <link rel="stylesheet" href="{{ static_url("css/notebook.css") }}" type="text/css" />
+<link rel="stylesheet" href="{{ static_url("css/metaui.css") }}" type="text/css" />
 <link rel="stylesheet" href="{{ static_url("css/tooltip.css") }}" type="text/css" />
 <link rel="stylesheet" href="{{ static_url("css/renderedhtml.css") }}" type="text/css" />
 
@@ -203,6 +204,7 @@ data-notebook-id={{notebook_id}}
 <script src="{{ static_url("js/mathjaxutils.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/outputarea.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/cell.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("js/metaui.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/codecell.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/completer.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/textcell.js") }}" type="text/javascript" charset="utf-8"></script>

From 1ae472cf1c32327d747fe928d19a18caea6eaaa3 Mon Sep 17 00:00:00 2001
From: Matthias BUSSONNIER <bussonniermatthias@gmail.com>
Date: Mon, 10 Dec 2012 13:45:23 +0100
Subject: [PATCH 02/26] add utils and docs for metadata UI

add aconvenient utils to generate UI for checkboxes

and use it to generate 3 checkboxes for
new_section
new_subsection
new_fragment
---
 .../html/notebook/static/js/metaui.js         | 90 +++++++++++++++++++
 1 file changed, 90 insertions(+)

diff --git a/IPython/frontend/html/notebook/static/js/metaui.js b/IPython/frontend/html/notebook/static/js/metaui.js
index 8bb7b93ef..aa74b2d4b 100644
--- a/IPython/frontend/html/notebook/static/js/metaui.js
+++ b/IPython/frontend/html/notebook/static/js/metaui.js
@@ -191,6 +191,8 @@ var IPython = (function (IPython) {
         // Yes we iterate on the class varaible, not the instance one.
         for ( var index in MetaUI._button_list){
             var local_div = $('<div/>').addClass('button_container');
+            // Note,
+            // do this the other way, wrap in try/catch and don't append if any errors.
             this.metainner.append(local_div)
             cdict[preset[index]](local_div,this.cell)
         }
@@ -310,6 +312,94 @@ var IPython = (function (IPython) {
     MetaUI.register_callback('example.toggle',toggle_test);
     example_preset.push('example.toggle');
 
+    /**
+     */
+    MetaUI.utils = {};
+
+    /**
+     * A utility function to generate bindings between a checkbox and metadata
+     * @method utils.checkbox_ui_generator
+     * @static
+     *
+     * @param name {string} Label in front of the checkbox
+     * @param setter {function( metadata_dict, newValue )} A setter method to set the newValue of the metadata dictionnary
+     * @param getter {function( metadata )} A getter methods which return the current value of the metadata.
+     *
+     * @return callback {function( div, cell )} Callback to be passed to `register_callback`
+     *
+     * @example
+     *
+     * An exmple that bind the subkey `slideshow.isSectionStart` to a checkbox with a `New Slide` label
+     *
+     *     var newSlide = MetaUI.utils.checkbox_ui_generator('New Slide',
+     *          // setter
+     *          function(metadata,value){
+     *              // we check that the slideshow namespace exist and create it if needed
+     *              if (metadata.slideshow == undefined){metadata.slideshow = {}}
+     *              // set the value
+     *              metadata.slideshow.isSectionStart = value
+     *              },
+     *          //geter
+     *          function(metadata){ var ns = metadata.slideshow;
+     *              // if the slideshow namespace does not exist return `undefined`
+     *              // (will be interpreted as `false` by checkbox) otherwise
+     *              // return the value
+     *              return (ns == undefined)? undefined: ns.isSectionStart
+     *              }
+     *      );
+     *
+     *      MetaUI.register_callback('newSlide', newSlide);
+     *
+     */
+    MetaUI.utils.checkbox_ui_generator = function(name,setter,getter){
+         return function(div, cell) {
+            var button_container = $(div)
+
+            var chkb = $('<input/>').attr('type','checkbox');
+            var lbl = $('<label/>').append($('<span/>').text(name).css('font-size','77%'));
+            lbl.append(chkb);
+            chkb.attr("checked",getter(cell.metadata));
+
+            chkb.click(function(){
+                        var v = getter(cell.metadata);
+                        setter(cell.metadata,!v);
+                        chkb.attr("checked",!v);
+                    })
+           button_container.append($('<div/>').append(lbl));
+
+        }
+    }
+    var hslide = MetaUI.utils.checkbox_ui_generator('New Section',
+            function(md,value){
+                if (md.slideshow == undefined){md.slideshow = {}}
+                return md.slideshow.new_section = value},
+            function(md){ var ns = md.slideshow;
+                return (ns == undefined)? undefined: ns.new_section});
+
+    var vslide = MetaUI.utils.checkbox_ui_generator('New Subsection',
+            function(md,value){
+                if (md.slideshow == undefined){md.slideshow = {}}
+                return md.slideshow.new_subsection = value},
+            function(md){ var ns = md.slideshow;
+                return (ns == undefined)? undefined: ns.new_subsection});
+
+    var fragment = MetaUI.utils.checkbox_ui_generator('New Fragment',
+            function(md,value){
+                if (md.slideshow == undefined){md.slideshow = {}}
+                return md.slideshow.new_fragment = value},
+            function(md){ var ns = md.slideshow;
+                return (ns == undefined)? undefined: ns.new_fragment});
+
+
+    MetaUI.register_callback('slideshow.hslide',hslide);
+    MetaUI.register_callback('slideshow.vslide',vslide);
+    MetaUI.register_callback('slideshow.fragment',fragment);
+
+    example_preset.push('slideshow.fragment');
+    example_preset.push('slideshow.vslide');
+    example_preset.push('slideshow.hslide');
+
+
     var checkbox_test =  function(div, cell) {
         var button_container = $(div)
 

From 70f8001b14a489502d1737ec3a841a5eaf763c86 Mon Sep 17 00:00:00 2001
From: Matthias BUSSONNIER <bussonniermatthias@gmail.com>
Date: Mon, 10 Dec 2012 20:36:53 +0100
Subject: [PATCH 03/26] Split metadataui into multiple file

Add example metadata UI into multiple categorized files.
And document how to load it using custom.js.
---
 .../html/notebook/static/js/custom.js         |  12 ++
 .../static/js/examples/metaui.example.js      | 184 ++++++++++++++++++
 .../html/notebook/static/js/metaui.js         |  73 -------
 3 files changed, 196 insertions(+), 73 deletions(-)
 create mode 100644 IPython/frontend/html/notebook/static/js/examples/metaui.example.js

diff --git a/IPython/frontend/html/notebook/static/js/custom.js b/IPython/frontend/html/notebook/static/js/custom.js
index e94e291a0..d1f01b616 100644
--- a/IPython/frontend/html/notebook/static/js/custom.js
+++ b/IPython/frontend/html/notebook/static/js/custom.js
@@ -28,6 +28,18 @@
  *            ]);
  *    });
  *
+ * Example :
+ *
+ *  Use `jQuery.getScript(url [, success(script, textStatus, jqXHR)] );`
+ *  to load custom script into the notebook.
+ *
+ *    // to load the metadata ui extension example.
+ *    $.getScript('/static/js/examples/metaui.example.js');
+ *    // or
+ *    // to load the metadata ui extension to control slideshow mode / reveal js for nbconvert
+ *    $.getScript('/static/js/examples/metaui.slideshow.js');
+ *
+ *
  * @module IPython
  * @namespace IPython
  * @class customjs
diff --git a/IPython/frontend/html/notebook/static/js/examples/metaui.example.js b/IPython/frontend/html/notebook/static/js/examples/metaui.example.js
new file mode 100644
index 000000000..414d05af4
--- /dev/null
+++ b/IPython/frontend/html/notebook/static/js/examples/metaui.example.js
@@ -0,0 +1,184 @@
+//----------------------------------------------------------------------------
+//  Copyright (C) 2012  The IPython Development Team
+//
+//  Distributed under the terms of the BSD License.  The full license is in
+//  the file COPYING, distributed as part of this software.
+//----------------------------------------------------------------------------
+
+//============================================================================
+// MetaUI Example
+//============================================================================
+
+/**
+ * Example Use for the MetaUI library
+ * add the following to your custom.js to load
+ * metadata UI for slideshow
+ *
+ * ```
+ * $.getScript('/static/js/examples/metaui.example.js');
+ * ```
+ */
+ // IIFE without asignement, we don't modifiy the IPython namespace
+(function (IPython) {
+    "use strict";
+
+    var MetaUI = IPython.MetaUI;
+
+
+    var raw_edit = function(cell){
+
+        var md = cell.metadata
+
+        var textarea = $('<textarea/>')
+            .attr('rows','13')
+            .attr('cols','75')
+            .attr('name','metadata')
+            .text(JSON.stringify(md, null,4)||'');
+        var dialogform = $('<div/>').attr('title','Edit the metadata')
+            .append(
+                $('<form/>').append(
+                    $('<fieldset/>').append(
+                        $('<label/>')
+                        .attr('for','metadata')
+                        .text("Metadata (I know what I'm dooing and I won't complain if it breaks my notebook)")
+                        )
+                        .append($('<br/>'))
+                        .append(
+                            textarea
+                        )
+                    )
+            );
+        var editor = CodeMirror.fromTextArea(textarea[0], {
+            lineNumbers: true,
+            matchBrackets: true,
+        });
+        $(dialogform).dialog({
+                autoOpen: true,
+                height: 300,
+                width: 650,
+                modal: true,
+                buttons: {
+                    "Ok": function() {
+                        //validate json and set it
+                        try {
+                           var json = JSON.parse(editor.getValue());
+                           cell.metadata = json;
+                           $( this ).dialog( "close" );
+                        }
+                        catch(e)
+                        {
+                           alert('invalid json');
+                        }
+                    },
+                    Cancel: function() {
+                        $( this ).dialog( "close" );
+                    }
+                },
+                close: function() {
+                    //cleanup on close
+                    $(this).remove();
+                }
+        });
+        editor.refresh();
+    }
+
+    var add_raw_edit_button = function(div, cell) {
+        var button_container = $(div)
+        var button = $('<div/>').button({label:'Raw Edit'})
+                .click(function(){raw_edit(cell); return false;})
+        button_container.append(button);
+    }
+
+    MetaUI.register_callback('example.rawedit',add_raw_edit_button);
+    var example_preset = []
+    example_preset.push('example.rawedit');
+
+
+    var simple_button = function(div, cell) {
+        var button_container = $(div);
+        var button = $('<div/>').button({icons:{primary:'ui-icon-locked'}});
+        var fun = function(value){
+                try{
+                    if(value){
+                        cell.code_mirror.setOption('readOnly','nocursor')
+                        button.button('option','icons',{primary:'ui-icon-locked'})
+                    } else {
+                        cell.code_mirror.setOption('readOnly','false')
+                        button.button('option','icons',{primary:'ui-icon-unlocked'})
+                    }
+                } catch(e){}
+
+        }
+            fun(cell.metadata.ro)
+            button.click(function(){
+                    var v = cell.metadata.ro;
+                    var locked = !v;
+                    cell.metadata.ro = locked;
+                    fun(locked)
+                    })
+                .css('height','16px')
+                .css('width','35px');
+        button_container.append(button);
+    }
+
+    MetaUI.register_callback('example.lock',simple_button);
+    example_preset.push('example.lock');
+
+    var toggle_test =  function(div, cell) {
+        var button_container = $(div)
+        var button = $('<div/>').button({label:String(cell.metadata.foo)});
+        button.click(function(){
+                    var v = cell.metadata.foo;
+                    cell.metadata.foo = !v;
+                    button.button("option","label",String(!v));
+                })
+       button_container.append(button);
+    }
+
+    MetaUI.register_callback('example.toggle',toggle_test);
+    example_preset.push('example.toggle');
+
+    var checkbox_test =  function(div, cell) {
+        var button_container = $(div)
+
+        var chkb = $('<input/>').attr('type','checkbox');
+        var lbl = $('<label/>').append($('<span/>').text('bar :').css('font-size','77%'));
+        lbl.append(chkb);
+        chkb.attr("checked",cell.metadata.bar);
+        chkb.click(function(){
+                    var v = cell.metadata.bar;
+                    cell.metadata.bar = !v;
+                    chkb.attr("checked",!v);
+                })
+       button_container.append($('<div/>').append(lbl));
+
+    }
+
+    MetaUI.register_callback('example.checkbox',checkbox_test);
+    example_preset.push('example.checkbox');
+
+    var select_test =  function(div, cell) {
+        var button_container = $(div)
+
+        var select = $('<select/>');
+
+        select.append($('<option/>').attr('value','foo').text('foo'));
+        select.append($('<option/>').attr('value','bar').text('bar'));
+        select.append($('<option/>').attr('value','qux').text('qux'));
+        select.append($('<option/>').attr('value','zip').text('zip'));
+        select.val(cell.metadata.option);
+        select.change(function(){
+                cell.metadata.option = select.val();
+                });
+       button_container.append($('<div/>').append(select));
+
+    }
+
+    MetaUI.register_callback('example.select',select_test);
+    example_preset.push('example.select');
+
+    MetaUI.register_preset('example',example_preset);
+    MetaUI.set_preset('example');
+    console.log('Example extension for metadata editting loaded.');
+
+}(IPython));
diff --git a/IPython/frontend/html/notebook/static/js/metaui.js b/IPython/frontend/html/notebook/static/js/metaui.js
index aa74b2d4b..2f58a160b 100644
--- a/IPython/frontend/html/notebook/static/js/metaui.js
+++ b/IPython/frontend/html/notebook/static/js/metaui.js
@@ -369,79 +369,6 @@ var IPython = (function (IPython) {
 
         }
     }
-    var hslide = MetaUI.utils.checkbox_ui_generator('New Section',
-            function(md,value){
-                if (md.slideshow == undefined){md.slideshow = {}}
-                return md.slideshow.new_section = value},
-            function(md){ var ns = md.slideshow;
-                return (ns == undefined)? undefined: ns.new_section});
-
-    var vslide = MetaUI.utils.checkbox_ui_generator('New Subsection',
-            function(md,value){
-                if (md.slideshow == undefined){md.slideshow = {}}
-                return md.slideshow.new_subsection = value},
-            function(md){ var ns = md.slideshow;
-                return (ns == undefined)? undefined: ns.new_subsection});
-
-    var fragment = MetaUI.utils.checkbox_ui_generator('New Fragment',
-            function(md,value){
-                if (md.slideshow == undefined){md.slideshow = {}}
-                return md.slideshow.new_fragment = value},
-            function(md){ var ns = md.slideshow;
-                return (ns == undefined)? undefined: ns.new_fragment});
-
-
-    MetaUI.register_callback('slideshow.hslide',hslide);
-    MetaUI.register_callback('slideshow.vslide',vslide);
-    MetaUI.register_callback('slideshow.fragment',fragment);
-
-    example_preset.push('slideshow.fragment');
-    example_preset.push('slideshow.vslide');
-    example_preset.push('slideshow.hslide');
-
-
-    var checkbox_test =  function(div, cell) {
-        var button_container = $(div)
-
-        var chkb = $('<input/>').attr('type','checkbox');
-        var lbl = $('<label/>').append($('<span/>').text('bar :').css('font-size','77%'));
-        lbl.append(chkb);
-        chkb.attr("checked",cell.metadata.bar);
-        chkb.click(function(){
-                    var v = cell.metadata.bar;
-                    cell.metadata.bar = !v;
-                    chkb.attr("checked",!v);
-                })
-       button_container.append($('<div/>').append(lbl));
-
-    }
-
-    MetaUI.register_callback('example.checkbox',checkbox_test);
-    example_preset.push('example.checkbox');
-
-    var select_test =  function(div, cell) {
-        var button_container = $(div)
-
-        var select = $('<select/>');
-
-        select.append($('<option/>').attr('value','foo').text('foo'));
-        select.append($('<option/>').attr('value','bar').text('bar'));
-        select.append($('<option/>').attr('value','qux').text('qux'));
-        select.append($('<option/>').attr('value','zip').text('zip'));
-        select.val(cell.metadata.option);
-        select.change(function(){
-                cell.metadata.option = select.val();
-                });
-       button_container.append($('<div/>').append(select));
-
-    }
-
-    MetaUI.register_callback('example.select',select_test);
-    example_preset.push('example.select');
-
-    MetaUI.register_preset('example',example_preset);
-    MetaUI.register_preset('foo',['example.select','example.select']);
-    MetaUI.set_preset('example');
 
     IPython.MetaUI = MetaUI;
 

From d18d975a5091dcd5b7bc3d8a82e29ed2bb420fd0 Mon Sep 17 00:00:00 2001
From: Matthias BUSSONNIER <bussonniermatthias@gmail.com>
Date: Sat, 15 Dec 2012 20:36:32 +0100
Subject: [PATCH 04/26] create metadata-dropdowm-menu generator

---
 .../html/notebook/static/js/metaui.js         | 71 ++++++++++++++++++-
 1 file changed, 69 insertions(+), 2 deletions(-)

diff --git a/IPython/frontend/html/notebook/static/js/metaui.js b/IPython/frontend/html/notebook/static/js/metaui.js
index 2f58a160b..e3f2c9a1b 100644
--- a/IPython/frontend/html/notebook/static/js/metaui.js
+++ b/IPython/frontend/html/notebook/static/js/metaui.js
@@ -322,8 +322,10 @@ var IPython = (function (IPython) {
      * @static
      *
      * @param name {string} Label in front of the checkbox
-     * @param setter {function( metadata_dict, newValue )} A setter method to set the newValue of the metadata dictionnary
-     * @param getter {function( metadata )} A getter methods which return the current value of the metadata.
+     * @param setter {function( metadata_dict, newValue )}
+     *        A setter method to set the newValue of the metadata dictionnary
+     * @param getter {function( metadata )}
+     *        A getter methods which return the current value of the metadata.
      *
      * @return callback {function( div, cell )} Callback to be passed to `register_callback`
      *
@@ -370,6 +372,71 @@ var IPython = (function (IPython) {
         }
     }
 
+    /**
+     * A utility function to generate bindings between a dropdown list and metadata
+     * @method utils.select_ui_generator
+     * @static
+     *
+     * @param list_list {list of sublist} List of sublist of metadata value and name in the dropdown list.
+     *        subslit shoud contain 2 element each, first a string that woul be displayed in the dropdown list,
+     *        and second the corresponding value for the metadata to be passed to setter/return by getter.
+     * @param setter {function( metadata_dict, newValue )}
+     *        A setter method to set the newValue of the metadata dictionnary
+     * @param getter {function( metadata )}
+     *        A getter methods which return the current value of the metadata.
+     * @param [label=""] {String} optionnal label for the dropdown menu
+     *
+     * @return callback {function( div, cell )} Callback to be passed to `register_callback`
+     *
+     * @example
+     *
+     *      var select_type = MetaUI.utils.select_ui_generator([
+     *              ["-"            ,undefined      ],
+     *              ["Header Slide" ,"header_slide" ],
+     *              ["Slide"        ,"slide"        ],
+     *              ["Fragment"     ,"fragment"     ],
+     *              ["Skip"         ,"skip"         ],
+     *              ],
+     *              // setter
+     *              function(metadata,value){
+     *                  // we check that the slideshow namespace exist and create it if needed
+     *                  if (metadata.slideshow == undefined){metadata.slideshow = {}}
+     *                  // set the value
+     *                  metadata.slideshow.slide_type = value
+     *                  },
+     *              //geter
+     *              function(metadata){ var ns = metadata.slideshow;
+     *                  // if the slideshow namespace does not exist return `undefined`
+     *                  // (will be interpreted as `false` by checkbox) otherwise
+     *                  // return the value
+     *                  return (ns == undefined)? undefined: ns.slide_type
+     *                  }
+     *      MetaUI.register_callback('slideshow.select',select_type);
+     *
+     */
+    MetaUI.utils.select_ui_generator = function(list_list,setter, getter, label){
+        label= label? label: "";
+        return function(div, cell) {
+            var button_container = $(div)
+            var lbl = $("<label/>").append($('<span/>').text(label).css('font-size','77%'));
+            var select = $('<select/>');
+            for(var itemn in list_list){
+                var opt = $('<option/>');
+                        opt.attr('value',list_list[itemn][1])
+                        opt.text(list_list[itemn][0])
+                select.append(opt);
+            }
+            select.val(getter(cell.metadata));
+
+            select.change(function(){
+                        setter(cell.metadata,select.val());
+                    });
+            button_container.append($('<div/>').append(lbl).append(select));
+
+        }
+    };
+
+
     IPython.MetaUI = MetaUI;
 
     return IPython;

From 040a27cacc57a2e094b7f2253c9aa512de632a4b Mon Sep 17 00:00:00 2001
From: Matthias BUSSONNIER <bussonniermatthias@gmail.com>
Date: Sat, 5 Jan 2013 12:26:12 +0100
Subject: [PATCH 05/26] add a small default metaui-toolbar

just a question mark which pop-up a small text
---
 .../html/notebook/static/js/metaui.js         | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/IPython/frontend/html/notebook/static/js/metaui.js b/IPython/frontend/html/notebook/static/js/metaui.js
index e3f2c9a1b..8ece4ee1a 100644
--- a/IPython/frontend/html/notebook/static/js/metaui.js
+++ b/IPython/frontend/html/notebook/static/js/metaui.js
@@ -256,6 +256,7 @@ var IPython = (function (IPython) {
         editor.refresh();
     }
 
+
     var add_raw_edit_button = function(div, cell) {
         var button_container = $(div)
         var button = $('<div/>').button({label:'Raw Edit'})
@@ -267,6 +268,38 @@ var IPython = (function (IPython) {
     var example_preset = []
     example_preset.push('example.rawedit');
 
+    var simple_dialog = function(title,text){
+        var dlg = $('<div/>').attr('title',title)
+            .append($('<p/>').text(text))
+        $(dlg).dialog({
+                autoOpen: true,
+                height: 300,
+                width: 650,
+                modal: true,
+                close: function() {
+                    //cleanup on close
+                    $(this).remove();
+                }
+        });
+    }
+
+    var add_simple_dialog_button = function(div, cell) {
+        var help_text = ["This is the Metadata editting UI.",
+                         "It heavily rely on plugin to work ",
+                         "and is still under developpement. You shouldn't wait too long before",
+                         " seeing some customisable buttons in those toolbar."
+                        ].join('\n')
+        var button_container = $(div)
+        var button = $('<div/>').button({label:'?'})
+                .click(function(){simple_dialog('help',help_text); return false;})
+        button_container.append(button);
+    }
+
+    MetaUI.register_callback('default.help',add_simple_dialog_button)
+    var default_preset = []
+    default_preset.push('default.help')
+    MetaUI.register_preset('default',default_preset)
+    MetaUI.set_preset('default')
 
     var simple_button = function(div, cell) {
         var button_container = $(div);

From 1c97a7232ff3dd89a7175aee2dcfa1ea27d2a3f5 Mon Sep 17 00:00:00 2001
From: Matthias BUSSONNIER <bussonniermatthias@gmail.com>
Date: Sat, 5 Jan 2013 15:47:50 +0100
Subject: [PATCH 06/26] enable dropdown preset change

---
 .../html/notebook/static/js/maintoolbar.js    | 15 +++-----------
 .../html/notebook/static/js/metaui.js         | 20 +++++++++++++++++++
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/IPython/frontend/html/notebook/static/js/maintoolbar.js b/IPython/frontend/html/notebook/static/js/maintoolbar.js
index cbe5440e5..96ba391ca 100644
--- a/IPython/frontend/html/notebook/static/js/maintoolbar.js
+++ b/IPython/frontend/html/notebook/static/js/maintoolbar.js
@@ -17,6 +17,9 @@ var IPython = (function (IPython) {
         this.construct();
         this.add_drop_down_list();
         this.bind_events();
+        $(this.selector)
+        .append($('<label/>').text('MetaUI'))
+        .append(IPython.MetaUI.dropdown_preset_selector)
     };
 
     MainToolBar.prototype = new IPython.ToolBar(); 
@@ -115,18 +118,6 @@ var IPython = (function (IPython) {
                         }
                 }
             ],'run_int');
-
-        this.add_buttons_group([
-                {
-                    id : 'show_meta',
-                    label : 'Show Per Cell Toolbar',
-                    icon : 'ui-icon-image',
-                    callback : function () {
-                    $('body').toggleClass('editmetaon');
-                        }
-                }
-            ],'meta_on');
-
     };
 
     MainToolBar.prototype.add_drop_down_list = function () {
diff --git a/IPython/frontend/html/notebook/static/js/metaui.js b/IPython/frontend/html/notebook/static/js/metaui.js
index 8ece4ee1a..da07361a6 100644
--- a/IPython/frontend/html/notebook/static/js/metaui.js
+++ b/IPython/frontend/html/notebook/static/js/metaui.js
@@ -35,6 +35,22 @@ var IPython = (function (IPython) {
         return this;
     };
 
+    MetaUI.dropdown_preset_selector = $('<select/>')
+        .attr('id','metaui_selector')
+        .append($('<option/>').attr('value','').text('-'))
+
+    MetaUI.dropdown_preset_selector.change(function(){
+        var val = MetaUI.dropdown_preset_selector.val()
+        if(val ==''){
+            $('body').removeClass('editmetaon')
+        } else {
+            $('body').addClass('editmetaon')
+            MetaUI.set_preset(val)
+        }
+    })
+
+
+
     /**
      * Class variable that should contain a dict of all availlable callback
      * we need to think of wether or not we allow nested namespace
@@ -139,6 +155,9 @@ var IPython = (function (IPython) {
      */
     MetaUI.register_preset = function(name, preset_list){
         MetaUI._presets[name] = preset_list
+        MetaUI.dropdown_preset_selector.append(
+           $('<option/>').attr('value',name).text(name)
+        )
     }
     /**
      * set an UI preset from `register_preset`
@@ -160,6 +179,7 @@ var IPython = (function (IPython) {
         }
     }
 
+
     // this is by design not a prototype.
     /**
      * This should be called on the class and not on a instance as it will trigger

From 3cc81dbb8f3e7e289c7a1773609d9905879886de Mon Sep 17 00:00:00 2001
From: Matthias BUSSONNIER <bussonniermatthias@gmail.com>
Date: Sat, 5 Jan 2013 15:51:12 +0100
Subject: [PATCH 07/26] convention, jQuery variable start with $

all this.xxxx = $(...) change to
    this.$xxxx

I'm thinking of potentially doing it also in parameters that are
expected to be jQuery enabled.
---
 .../html/notebook/static/js/codecell.js       |  2 +-
 .../html/notebook/static/js/maintoolbar.js    |  2 +-
 .../html/notebook/static/js/metaui.js         | 20 +++++++++----------
 .../html/notebook/static/js/textcell.js       |  2 +-
 4 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/IPython/frontend/html/notebook/static/js/codecell.js b/IPython/frontend/html/notebook/static/js/codecell.js
index 0f80c0f0a..450da1ca9 100644
--- a/IPython/frontend/html/notebook/static/js/codecell.js
+++ b/IPython/frontend/html/notebook/static/js/codecell.js
@@ -61,7 +61,7 @@ var IPython = (function (IPython) {
         this.metaui = new IPython.MetaUI(this);
 
         var cell =  $('<div></div>').addClass('cell border-box-sizing code_cell vbox');
-        cell.append(this.metaui.element);
+        cell.append(this.metaui.$element);
         cell.attr('tabindex','2');
         var input = $('<div></div>').addClass('input hbox');
         input.append($('<div/>').addClass('prompt input_prompt'));
diff --git a/IPython/frontend/html/notebook/static/js/maintoolbar.js b/IPython/frontend/html/notebook/static/js/maintoolbar.js
index 96ba391ca..a73e12d8c 100644
--- a/IPython/frontend/html/notebook/static/js/maintoolbar.js
+++ b/IPython/frontend/html/notebook/static/js/maintoolbar.js
@@ -19,7 +19,7 @@ var IPython = (function (IPython) {
         this.bind_events();
         $(this.selector)
         .append($('<label/>').text('MetaUI'))
-        .append(IPython.MetaUI.dropdown_preset_selector)
+        .append(IPython.MetaUI.$dropdown_preset_selector)
     };
 
     MainToolBar.prototype = new IPython.ToolBar(); 
diff --git a/IPython/frontend/html/notebook/static/js/metaui.js b/IPython/frontend/html/notebook/static/js/metaui.js
index da07361a6..3c171f1e5 100644
--- a/IPython/frontend/html/notebook/static/js/metaui.js
+++ b/IPython/frontend/html/notebook/static/js/metaui.js
@@ -27,20 +27,20 @@ var IPython = (function (IPython) {
      */
     var MetaUI = function (cell) {
         MetaUI._instances.push(this);
-        this.metainner = $('<div/>');
+        this.$metainner = $('<div/>');
         this.cell = cell;
-        this.element = $('<div/>').addClass('metaedit')
-                .append(this.metainner)
+        this.$element = $('<div/>').addClass('metaedit')
+                .append(this.$metainner)
         this.rebuild();
         return this;
     };
 
-    MetaUI.dropdown_preset_selector = $('<select/>')
+    MetaUI.$dropdown_preset_selector = $('<select/>')
         .attr('id','metaui_selector')
         .append($('<option/>').attr('value','').text('-'))
 
-    MetaUI.dropdown_preset_selector.change(function(){
-        var val = MetaUI.dropdown_preset_selector.val()
+    MetaUI.$dropdown_preset_selector.change(function(){
+        var val = MetaUI.$dropdown_preset_selector.val()
         if(val ==''){
             $('body').removeClass('editmetaon')
         } else {
@@ -155,7 +155,7 @@ var IPython = (function (IPython) {
      */
     MetaUI.register_preset = function(name, preset_list){
         MetaUI._presets[name] = preset_list
-        MetaUI.dropdown_preset_selector.append(
+        MetaUI.$dropdown_preset_selector.append(
            $('<option/>').attr('value',name).text(name)
         )
     }
@@ -201,8 +201,8 @@ var IPython = (function (IPython) {
     MetaUI.prototype.rebuild = function(){
         // strip evrything from the div
         // which is probabli metainner.
-        // or this.element.
-        this.metainner.empty();
+        // or this.$element.
+        this.$metainner.empty();
         //this.add_raw_edit_button()
 
 
@@ -213,7 +213,7 @@ var IPython = (function (IPython) {
             var local_div = $('<div/>').addClass('button_container');
             // Note,
             // do this the other way, wrap in try/catch and don't append if any errors.
-            this.metainner.append(local_div)
+            this.$metainner.append(local_div)
             cdict[preset[index]](local_div,this.cell)
         }
 
diff --git a/IPython/frontend/html/notebook/static/js/textcell.js b/IPython/frontend/html/notebook/static/js/textcell.js
index f9c8c3e28..d84f892f0 100644
--- a/IPython/frontend/html/notebook/static/js/textcell.js
+++ b/IPython/frontend/html/notebook/static/js/textcell.js
@@ -44,7 +44,7 @@ var IPython = (function (IPython) {
     TextCell.prototype.create_element = function () {
         var cell = $("<div>").addClass('cell text_cell border-box-sizing vbox');
         this.metaui = new IPython.MetaUI(this);
-        cell.append(this.metaui.element);
+        cell.append(this.metaui.$element);
         cell.attr('tabindex','2');
         var input_area = $('<div/>').addClass('text_cell_input border-box-sizing');
         this.code_mirror = CodeMirror(input_area.get(0), {

From f55a0a05b8a9bb7ff44594b54c2c8c709e4db403 Mon Sep 17 00:00:00 2001
From: Matthias BUSSONNIER <bussonniermatthias@gmail.com>
Date: Sat, 12 Jan 2013 12:11:11 +0100
Subject: [PATCH 08/26] rename metaui -> celltoolbar

---
 .../html/notebook/static/css/metaui.css       |  16 +--
 .../frontend/html/notebook/static/js/cell.js  |   2 +-
 .../html/notebook/static/js/codecell.js       |   4 +-
 .../html/notebook/static/js/custom.js         |   4 +-
 ...taui.example.js => celltoolbar.example.js} |  24 ++--
 .../html/notebook/static/js/maintoolbar.js    |   4 +-
 .../html/notebook/static/js/metaui.js         | 124 +++++++++---------
 .../html/notebook/static/js/textcell.js       |   4 +-
 8 files changed, 91 insertions(+), 91 deletions(-)
 rename IPython/frontend/html/notebook/static/js/examples/{metaui.example.js => celltoolbar.example.js} (90%)

diff --git a/IPython/frontend/html/notebook/static/css/metaui.css b/IPython/frontend/html/notebook/static/css/metaui.css
index 1e1e6c01f..c44268997 100644
--- a/IPython/frontend/html/notebook/static/css/metaui.css
+++ b/IPython/frontend/html/notebook/static/css/metaui.css
@@ -1,6 +1,6 @@
 /*Css for the metadata edit area*/
 
-.metaedit{
+.celltoolbar{
     border:thin solid #DDD;
     margin-left:81px;
     border-bottom:none;
@@ -10,24 +10,24 @@
     display:none;
 }
 
-.code_cell .metaedit{
+.code_cell .celltoolbar{
     margin-left:81px;
 }
 
-.text_cell .metaedit{
+.text_cell .celltoolbar{
     margin-left:0px;
 }
 
-.editmetaon div.input_area , .editmetaon div.text_cell_input{
+.celltoolbar-on div.input_area , .celltoolbar-on div.text_cell_input{
     border-top-right-radius: 0px;
     border-top-left-radius: 0px;
 }
 
-.editmetaon .metaedit {
+.celltoolbar-on .celltoolbar {
     display:block;
 }
 
-.metaedit ui-button {
+.celltoolbar ui-button {
     border :none;
 }
 
@@ -41,13 +41,13 @@
     border : none;
 }
 
-.metaedit select {
+.celltoolbar select {
     margin:10px;
     margin-top:0px;
     margin-bottom:0px;
 }
 
-.metaedit input[type=checkbox] {
+.celltoolbar input[type=checkbox] {
     margin-bottom:1px;
 
 }
diff --git a/IPython/frontend/html/notebook/static/js/cell.js b/IPython/frontend/html/notebook/static/js/cell.js
index 1092b5b87..0006a914a 100644
--- a/IPython/frontend/html/notebook/static/js/cell.js
+++ b/IPython/frontend/html/notebook/static/js/cell.js
@@ -163,7 +163,7 @@ var IPython = (function (IPython) {
         if (data.metadata !== undefined) {
             this.metadata = data.metadata;
         }
-        this.metaui.rebuild();
+        this.celltoolbar.rebuild();
     };
 
 
diff --git a/IPython/frontend/html/notebook/static/js/codecell.js b/IPython/frontend/html/notebook/static/js/codecell.js
index 450da1ca9..0c57d3d51 100644
--- a/IPython/frontend/html/notebook/static/js/codecell.js
+++ b/IPython/frontend/html/notebook/static/js/codecell.js
@@ -58,10 +58,10 @@ var IPython = (function (IPython) {
 
     /** @method create_element */
     CodeCell.prototype.create_element = function () {
-        this.metaui = new IPython.MetaUI(this);
+        this.celltoolbar = new IPython.CellToolbar(this);
 
         var cell =  $('<div></div>').addClass('cell border-box-sizing code_cell vbox');
-        cell.append(this.metaui.$element);
+        cell.append(this.celltoolbar.element);
         cell.attr('tabindex','2');
         var input = $('<div></div>').addClass('input hbox');
         input.append($('<div/>').addClass('prompt input_prompt'));
diff --git a/IPython/frontend/html/notebook/static/js/custom.js b/IPython/frontend/html/notebook/static/js/custom.js
index d1f01b616..c56575369 100644
--- a/IPython/frontend/html/notebook/static/js/custom.js
+++ b/IPython/frontend/html/notebook/static/js/custom.js
@@ -34,10 +34,10 @@
  *  to load custom script into the notebook.
  *
  *    // to load the metadata ui extension example.
- *    $.getScript('/static/js/examples/metaui.example.js');
+ *    $.getScript('/static/js/examples/celltoolbar.example.js');
  *    // or
  *    // to load the metadata ui extension to control slideshow mode / reveal js for nbconvert
- *    $.getScript('/static/js/examples/metaui.slideshow.js');
+ *    $.getScript('/static/js/examples/celltoolbar.slideshow.js');
  *
  *
  * @module IPython
diff --git a/IPython/frontend/html/notebook/static/js/examples/metaui.example.js b/IPython/frontend/html/notebook/static/js/examples/celltoolbar.example.js
similarity index 90%
rename from IPython/frontend/html/notebook/static/js/examples/metaui.example.js
rename to IPython/frontend/html/notebook/static/js/examples/celltoolbar.example.js
index 414d05af4..e190a62d2 100644
--- a/IPython/frontend/html/notebook/static/js/examples/metaui.example.js
+++ b/IPython/frontend/html/notebook/static/js/examples/celltoolbar.example.js
@@ -6,23 +6,23 @@
 //----------------------------------------------------------------------------
 
 //============================================================================
-// MetaUI Example
+// CellToolbar Example
 //============================================================================
 
 /**
- * Example Use for the MetaUI library
+ * Example Use for the CellToolbar library
  * add the following to your custom.js to load
- * metadata UI for slideshow
+ * Celltoolbar UI for slideshow
  *
  * ```
- * $.getScript('/static/js/examples/metaui.example.js');
+ * $.getScript('/static/js/examples/celltoolbar.example.js');
  * ```
  */
  // IIFE without asignement, we don't modifiy the IPython namespace
 (function (IPython) {
     "use strict";
 
-    var MetaUI = IPython.MetaUI;
+    var CellToolbar = IPython.CellToolbar;
 
 
     var raw_edit = function(cell){
@@ -89,7 +89,7 @@
         button_container.append(button);
     }
 
-    MetaUI.register_callback('example.rawedit',add_raw_edit_button);
+    CellToolbar.register_callback('example.rawedit',add_raw_edit_button);
     var example_preset = []
     example_preset.push('example.rawedit');
 
@@ -121,7 +121,7 @@
         button_container.append(button);
     }
 
-    MetaUI.register_callback('example.lock',simple_button);
+    CellToolbar.register_callback('example.lock',simple_button);
     example_preset.push('example.lock');
 
     var toggle_test =  function(div, cell) {
@@ -135,7 +135,7 @@
        button_container.append(button);
     }
 
-    MetaUI.register_callback('example.toggle',toggle_test);
+    CellToolbar.register_callback('example.toggle',toggle_test);
     example_preset.push('example.toggle');
 
     var checkbox_test =  function(div, cell) {
@@ -154,7 +154,7 @@
 
     }
 
-    MetaUI.register_callback('example.checkbox',checkbox_test);
+    CellToolbar.register_callback('example.checkbox',checkbox_test);
     example_preset.push('example.checkbox');
 
     var select_test =  function(div, cell) {
@@ -174,11 +174,11 @@
 
     }
 
-    MetaUI.register_callback('example.select',select_test);
+    CellToolbar.register_callback('example.select',select_test);
     example_preset.push('example.select');
 
-    MetaUI.register_preset('example',example_preset);
-    MetaUI.set_preset('example');
+    CellToolbar.register_preset('example',example_preset);
+    CellToolbar.set_preset('example');
     console.log('Example extension for metadata editting loaded.');
 
 }(IPython));
diff --git a/IPython/frontend/html/notebook/static/js/maintoolbar.js b/IPython/frontend/html/notebook/static/js/maintoolbar.js
index a73e12d8c..a58c1e403 100644
--- a/IPython/frontend/html/notebook/static/js/maintoolbar.js
+++ b/IPython/frontend/html/notebook/static/js/maintoolbar.js
@@ -18,8 +18,8 @@ var IPython = (function (IPython) {
         this.add_drop_down_list();
         this.bind_events();
         $(this.selector)
-        .append($('<label/>').text('MetaUI'))
-        .append(IPython.MetaUI.$dropdown_preset_selector)
+        .append($('<label/>').text('CellToolbar'))
+        .append(IPython.CellToolbar.dropdown_preset_element)
     };
 
     MainToolBar.prototype = new IPython.ToolBar(); 
diff --git a/IPython/frontend/html/notebook/static/js/metaui.js b/IPython/frontend/html/notebook/static/js/metaui.js
index 3c171f1e5..970e924af 100644
--- a/IPython/frontend/html/notebook/static/js/metaui.js
+++ b/IPython/frontend/html/notebook/static/js/metaui.js
@@ -6,7 +6,7 @@
 //----------------------------------------------------------------------------
 
 //============================================================================
-// MetaUI
+// CellToolbar
 //============================================================================
 
 
@@ -14,7 +14,7 @@
  * A Module to control the per-cell toolbar.
  * @module IPython
  * @namespace IPython
- * @submodule MetaUI
+ * @submodule CellToolbar
  */
 var IPython = (function (IPython) {
     "use strict";
@@ -22,30 +22,30 @@ var IPython = (function (IPython) {
 
     /**
      * @constructor
-     * @class MetaUI
+     * @class CellToolbar
      * @param {The cell to attach the metadata UI to} cell
      */
-    var MetaUI = function (cell) {
-        MetaUI._instances.push(this);
-        this.$metainner = $('<div/>');
+    var CellToolbar = function (cell) {
+        CellToolbar._instances.push(this);
+        this.inner_element = $('<div/>');
         this.cell = cell;
-        this.$element = $('<div/>').addClass('metaedit')
-                .append(this.$metainner)
+        this.element = $('<div/>').addClass('celltoolbar')
+                .append(this.inner_element)
         this.rebuild();
         return this;
     };
 
-    MetaUI.$dropdown_preset_selector = $('<select/>')
-        .attr('id','metaui_selector')
+    CellToolbar.dropdown_preset_element = $('<select/>')
+        .attr('id','celltoolbar_selector')
         .append($('<option/>').attr('value','').text('-'))
 
-    MetaUI.$dropdown_preset_selector.change(function(){
-        var val = MetaUI.$dropdown_preset_selector.val()
+    CellToolbar.dropdown_preset_element.change(function(){
+        var val = CellToolbar.dropdown_preset_element.val()
         if(val ==''){
-            $('body').removeClass('editmetaon')
+            $('body').removeClass('celltoolbar-on')
         } else {
-            $('body').addClass('editmetaon')
-            MetaUI.set_preset(val)
+            $('body').addClass('celltoolbar-on')
+            CellToolbar.set_preset(val)
         }
     })
 
@@ -57,7 +57,7 @@ var IPython = (function (IPython) {
      * @property _callback_dict
      * @private
      */
-    MetaUI._callback_dict = {};
+    CellToolbar._callback_dict = {};
 
     /**
      * Class variable that should contain the reverse order list of the button
@@ -65,25 +65,25 @@ var IPython = (function (IPython) {
      * @property _button_list
      * @private
      */
-    MetaUI._button_list = [];
+    CellToolbar._button_list = [];
 
     /**
      * keep a list of all instances to
      * be able to llop over them...
      * but how to 'destroy' them ?
      * have to think about it...
-     * or loop over the cells, and find their MetaUI instances.
+     * or loop over the cells, and find their CellToolbar instances.
      * @private
      * @property _instances
      */
-    MetaUI._instances =[]
+    CellToolbar._instances =[]
 
     /**
      * keep a list of all the availlabel presets for the toolbar
      * @private
      * @property _presets
      */
-    MetaUI._presets ={}
+    CellToolbar._presets ={}
 
     // this is by design not a prototype.
     /**
@@ -125,11 +125,11 @@ var IPython = (function (IPython) {
      *
      *      // now we register the callback under the name `foo` to give the
      *      // user the ability to use it later
-     *      MetaUI.register_callback('foo',toggle);
+     *      CellToolbar.register_callback('foo',toggle);
      */
-    MetaUI.register_callback = function(name, callback){
+    CellToolbar.register_callback = function(name, callback){
         // what do we do if name already exist ?
-        MetaUI._callback_dict[name] = callback;
+        CellToolbar._callback_dict[name] = callback;
     };
 
     /**
@@ -144,18 +144,18 @@ var IPython = (function (IPython) {
      * @private
      * @example
      *
-     *      MetaUI.register_callback('foo.c1',function(div,cell){...});
-     *      MetaUI.register_callback('foo.c2',function(div,cell){...});
-     *      MetaUI.register_callback('foo.c3',function(div,cell){...});
-     *      MetaUI.register_callback('foo.c4',function(div,cell){...});
-     *      MetaUI.register_callback('foo.c5',function(div,cell){...});
+     *      CellToolbar.register_callback('foo.c1',function(div,cell){...});
+     *      CellToolbar.register_callback('foo.c2',function(div,cell){...});
+     *      CellToolbar.register_callback('foo.c3',function(div,cell){...});
+     *      CellToolbar.register_callback('foo.c4',function(div,cell){...});
+     *      CellToolbar.register_callback('foo.c5',function(div,cell){...});
      *
-     *      MetaUI.register_preset('foo.foo_preset1',['foo.c1','foo.c2','foo.c5'])
-     *      MetaUI.register_preset('foo.foo_preset2',['foo.c4','foo.c5'])
+     *      CellToolbar.register_preset('foo.foo_preset1',['foo.c1','foo.c2','foo.c5'])
+     *      CellToolbar.register_preset('foo.foo_preset2',['foo.c4','foo.c5'])
      */
-    MetaUI.register_preset = function(name, preset_list){
-        MetaUI._presets[name] = preset_list
-        MetaUI.$dropdown_preset_selector.append(
+    CellToolbar.register_preset = function(name, preset_list){
+        CellToolbar._presets[name] = preset_list
+        CellToolbar.dropdown_preset_element.append(
            $('<option/>').attr('value',name).text(name)
         )
     }
@@ -168,14 +168,14 @@ var IPython = (function (IPython) {
      * @private
      * @example
      *
-     *      MetaUI.set_preset('foo.foo_preset1');
+     *      CellToolbar.set_preset('foo.foo_preset1');
      */
-    MetaUI.set_preset= function(preset_name){
-        var preset = MetaUI._presets[preset_name];
+    CellToolbar.set_preset= function(preset_name){
+        var preset = CellToolbar._presets[preset_name];
 
         if(preset != undefined){
-            MetaUI._button_list = preset;
-            MetaUI.rebuild_all();
+            CellToolbar._button_list = preset;
+            CellToolbar.rebuild_all();
         }
     }
 
@@ -188,9 +188,9 @@ var IPython = (function (IPython) {
      * @static
      *
      */
-    MetaUI.rebuild_all = function(){
-        for(var i in MetaUI._instances){
-            MetaUI._instances[i].rebuild();
+    CellToolbar.rebuild_all = function(){
+        for(var i in CellToolbar._instances){
+            CellToolbar._instances[i].rebuild();
         }
     }
 
@@ -198,22 +198,22 @@ var IPython = (function (IPython) {
      * Rebuild all the button on the toolbar to update it's state.
      * @method rebuild
      */
-    MetaUI.prototype.rebuild = function(){
+    CellToolbar.prototype.rebuild = function(){
         // strip evrything from the div
         // which is probabli metainner.
-        // or this.$element.
-        this.$metainner.empty();
+        // or this.element.
+        this.inner_element.empty();
         //this.add_raw_edit_button()
 
 
-        var cdict = MetaUI._callback_dict;
-        var preset = MetaUI._button_list;
+        var cdict = CellToolbar._callback_dict;
+        var preset = CellToolbar._button_list;
         // Yes we iterate on the class varaible, not the instance one.
-        for ( var index in MetaUI._button_list){
+        for ( var index in CellToolbar._button_list){
             var local_div = $('<div/>').addClass('button_container');
             // Note,
             // do this the other way, wrap in try/catch and don't append if any errors.
-            this.$metainner.append(local_div)
+            this.inner_element.append(local_div)
             cdict[preset[index]](local_div,this.cell)
         }
 
@@ -284,7 +284,7 @@ var IPython = (function (IPython) {
         button_container.append(button);
     }
 
-    MetaUI.register_callback('example.rawedit',add_raw_edit_button);
+    CellToolbar.register_callback('example.rawedit',add_raw_edit_button);
     var example_preset = []
     example_preset.push('example.rawedit');
 
@@ -315,11 +315,11 @@ var IPython = (function (IPython) {
         button_container.append(button);
     }
 
-    MetaUI.register_callback('default.help',add_simple_dialog_button)
+    CellToolbar.register_callback('default.help',add_simple_dialog_button)
     var default_preset = []
     default_preset.push('default.help')
-    MetaUI.register_preset('default',default_preset)
-    MetaUI.set_preset('default')
+    CellToolbar.register_preset('default',default_preset)
+    CellToolbar.set_preset('default')
 
     var simple_button = function(div, cell) {
         var button_container = $(div);
@@ -348,7 +348,7 @@ var IPython = (function (IPython) {
         button_container.append(button);
     }
 
-    MetaUI.register_callback('example.lock',simple_button);
+    CellToolbar.register_callback('example.lock',simple_button);
     example_preset.push('example.lock');
 
     var toggle_test =  function(div, cell) {
@@ -362,12 +362,12 @@ var IPython = (function (IPython) {
        button_container.append(button);
     }
 
-    MetaUI.register_callback('example.toggle',toggle_test);
+    CellToolbar.register_callback('example.toggle',toggle_test);
     example_preset.push('example.toggle');
 
     /**
      */
-    MetaUI.utils = {};
+    CellToolbar.utils = {};
 
     /**
      * A utility function to generate bindings between a checkbox and metadata
@@ -386,7 +386,7 @@ var IPython = (function (IPython) {
      *
      * An exmple that bind the subkey `slideshow.isSectionStart` to a checkbox with a `New Slide` label
      *
-     *     var newSlide = MetaUI.utils.checkbox_ui_generator('New Slide',
+     *     var newSlide = CellToolbar.utils.checkbox_ui_generator('New Slide',
      *          // setter
      *          function(metadata,value){
      *              // we check that the slideshow namespace exist and create it if needed
@@ -403,10 +403,10 @@ var IPython = (function (IPython) {
      *              }
      *      );
      *
-     *      MetaUI.register_callback('newSlide', newSlide);
+     *      CellToolbar.register_callback('newSlide', newSlide);
      *
      */
-    MetaUI.utils.checkbox_ui_generator = function(name,setter,getter){
+    CellToolbar.utils.checkbox_ui_generator = function(name,setter,getter){
          return function(div, cell) {
             var button_container = $(div)
 
@@ -443,7 +443,7 @@ var IPython = (function (IPython) {
      *
      * @example
      *
-     *      var select_type = MetaUI.utils.select_ui_generator([
+     *      var select_type = CellToolbar.utils.select_ui_generator([
      *              ["-"            ,undefined      ],
      *              ["Header Slide" ,"header_slide" ],
      *              ["Slide"        ,"slide"        ],
@@ -464,10 +464,10 @@ var IPython = (function (IPython) {
      *                  // return the value
      *                  return (ns == undefined)? undefined: ns.slide_type
      *                  }
-     *      MetaUI.register_callback('slideshow.select',select_type);
+     *      CellToolbar.register_callback('slideshow.select',select_type);
      *
      */
-    MetaUI.utils.select_ui_generator = function(list_list,setter, getter, label){
+    CellToolbar.utils.select_ui_generator = function(list_list,setter, getter, label){
         label= label? label: "";
         return function(div, cell) {
             var button_container = $(div)
@@ -490,7 +490,7 @@ var IPython = (function (IPython) {
     };
 
 
-    IPython.MetaUI = MetaUI;
+    IPython.CellToolbar = CellToolbar;
 
     return IPython;
 }(IPython));
diff --git a/IPython/frontend/html/notebook/static/js/textcell.js b/IPython/frontend/html/notebook/static/js/textcell.js
index d84f892f0..b50188fdc 100644
--- a/IPython/frontend/html/notebook/static/js/textcell.js
+++ b/IPython/frontend/html/notebook/static/js/textcell.js
@@ -43,8 +43,8 @@ var IPython = (function (IPython) {
      */
     TextCell.prototype.create_element = function () {
         var cell = $("<div>").addClass('cell text_cell border-box-sizing vbox');
-        this.metaui = new IPython.MetaUI(this);
-        cell.append(this.metaui.$element);
+        this.celltoolbar = new IPython.CellToolbar(this);
+        cell.append(this.celltoolbar.element);
         cell.attr('tabindex','2');
         var input_area = $('<div/>').addClass('text_cell_input border-box-sizing');
         this.code_mirror = CodeMirror(input_area.get(0), {

From c313127651e3b7322a4279bb94cdba3880eb3c73 Mon Sep 17 00:00:00 2001
From: Matthias BUSSONNIER <bussonniermatthias@gmail.com>
Date: Sat, 12 Jan 2013 12:14:58 +0100
Subject: [PATCH 09/26] rename file metaui->celltoolbar

---
 .../html/notebook/static/css/{metaui.css => celltoolbar.css}  | 0
 .../html/notebook/static/js/{metaui.js => celltoolbar.js}     | 0
 IPython/frontend/html/notebook/templates/notebook.html        | 4 ++--
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename IPython/frontend/html/notebook/static/css/{metaui.css => celltoolbar.css} (100%)
 rename IPython/frontend/html/notebook/static/js/{metaui.js => celltoolbar.js} (100%)

diff --git a/IPython/frontend/html/notebook/static/css/metaui.css b/IPython/frontend/html/notebook/static/css/celltoolbar.css
similarity index 100%
rename from IPython/frontend/html/notebook/static/css/metaui.css
rename to IPython/frontend/html/notebook/static/css/celltoolbar.css
diff --git a/IPython/frontend/html/notebook/static/js/metaui.js b/IPython/frontend/html/notebook/static/js/celltoolbar.js
similarity index 100%
rename from IPython/frontend/html/notebook/static/js/metaui.js
rename to IPython/frontend/html/notebook/static/js/celltoolbar.js
diff --git a/IPython/frontend/html/notebook/templates/notebook.html b/IPython/frontend/html/notebook/templates/notebook.html
index fdd769cb3..0573939a6 100644
--- a/IPython/frontend/html/notebook/templates/notebook.html
+++ b/IPython/frontend/html/notebook/templates/notebook.html
@@ -17,7 +17,7 @@ window.mathjax_url = "{{mathjax_url}}";
 <link rel="stylesheet" href="{{ static_url("prettify/prettify.css") }}"/>
 
 <link rel="stylesheet" href="{{ static_url("css/notebook.css") }}" type="text/css" />
-<link rel="stylesheet" href="{{ static_url("css/metaui.css") }}" type="text/css" />
+<link rel="stylesheet" href="{{ static_url("css/celltoolbar.css") }}" type="text/css" />
 <link rel="stylesheet" href="{{ static_url("css/tooltip.css") }}" type="text/css" />
 <link rel="stylesheet" href="{{ static_url("css/renderedhtml.css") }}" type="text/css" />
 
@@ -204,7 +204,7 @@ data-notebook-id={{notebook_id}}
 <script src="{{ static_url("js/mathjaxutils.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/outputarea.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/cell.js") }}" type="text/javascript" charset="utf-8"></script>
-<script src="{{ static_url("js/metaui.js") }}" type="text/javascript" charset="utf-8"></script>
+<script src="{{ static_url("js/celltoolbar.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/codecell.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/completer.js") }}" type="text/javascript" charset="utf-8"></script>
 <script src="{{ static_url("js/textcell.js") }}" type="text/javascript" charset="utf-8"></script>

From a16c361a4bf193dd218dfb27df43fbf9faad9723 Mon Sep 17 00:00:00 2001
From: Matthias BUSSONNIER <bussonniermatthias@gmail.com>
Date: Sat, 12 Jan 2013 12:26:07 +0100
Subject: [PATCH 10/26] rename _button_list to _ui_controls_list

---
 .../frontend/html/notebook/static/js/celltoolbar.js    | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/IPython/frontend/html/notebook/static/js/celltoolbar.js b/IPython/frontend/html/notebook/static/js/celltoolbar.js
index 970e924af..70c28ee66 100644
--- a/IPython/frontend/html/notebook/static/js/celltoolbar.js
+++ b/IPython/frontend/html/notebook/static/js/celltoolbar.js
@@ -62,10 +62,10 @@ var IPython = (function (IPython) {
     /**
      * Class variable that should contain the reverse order list of the button
      * to add to the toolbar of each cell
-     * @property _button_list
+     * @property _ui_controls_list
      * @private
      */
-    CellToolbar._button_list = [];
+    CellToolbar._ui_controls_list = [];
 
     /**
      * keep a list of all instances to
@@ -174,7 +174,7 @@ var IPython = (function (IPython) {
         var preset = CellToolbar._presets[preset_name];
 
         if(preset != undefined){
-            CellToolbar._button_list = preset;
+            CellToolbar._ui_controls_list = preset;
             CellToolbar.rebuild_all();
         }
     }
@@ -207,9 +207,9 @@ var IPython = (function (IPython) {
 
 
         var cdict = CellToolbar._callback_dict;
-        var preset = CellToolbar._button_list;
+        var preset = CellToolbar._ui_controls_list;
         // Yes we iterate on the class varaible, not the instance one.
-        for ( var index in CellToolbar._button_list){
+        for ( var index in CellToolbar._ui_controls_list){
             var local_div = $('<div/>').addClass('button_container');
             // Note,
             // do this the other way, wrap in try/catch and don't append if any errors.

From 4b957111ed8cbabb9a74e44a1def3e9bb77780f0 Mon Sep 17 00:00:00 2001
From: Matthias BUSSONNIER <bussonniermatthias@gmail.com>
Date: Sat, 12 Jan 2013 12:35:00 +0100
Subject: [PATCH 11/26] remove most of the duplicate example

---
 .../html/notebook/static/js/celltoolbar.js    | 146 +-----------------
 .../static/js/examples/celltoolbar.example.js |  31 +++-
 2 files changed, 31 insertions(+), 146 deletions(-)

diff --git a/IPython/frontend/html/notebook/static/js/celltoolbar.js b/IPython/frontend/html/notebook/static/js/celltoolbar.js
index 70c28ee66..3a712a8d9 100644
--- a/IPython/frontend/html/notebook/static/js/celltoolbar.js
+++ b/IPython/frontend/html/notebook/static/js/celltoolbar.js
@@ -203,8 +203,6 @@ var IPython = (function (IPython) {
         // which is probabli metainner.
         // or this.element.
         this.inner_element.empty();
-        //this.add_raw_edit_button()
-
 
         var cdict = CellToolbar._callback_dict;
         var preset = CellToolbar._ui_controls_list;
@@ -219,151 +217,9 @@ var IPython = (function (IPython) {
 
     }
 
-    var raw_edit = function(cell){
-
-        var md = cell.metadata
-
-        var textarea = $('<textarea/>')
-            .attr('rows','13')
-            .attr('cols','75')
-            .attr('name','metadata')
-            .text(JSON.stringify(md, null,4)||'');
-        var dialogform = $('<div/>').attr('title','Edit the metadata')
-            .append(
-                $('<form/>').append(
-                    $('<fieldset/>').append(
-                        $('<label/>')
-                        .attr('for','metadata')
-                        .text("Metadata (I know what I'm dooing and I won't complain if it breaks my notebook)")
-                        )
-                        .append($('<br/>'))
-                        .append(
-                            textarea
-                        )
-                    )
-            );
-        var editor = CodeMirror.fromTextArea(textarea[0], {
-            lineNumbers: true,
-            matchBrackets: true,
-        });
-        $(dialogform).dialog({
-                autoOpen: true,
-                height: 300,
-                width: 650,
-                modal: true,
-                buttons: {
-                    "Ok": function() {
-                        //validate json and set it
-                        try {
-                           var json = JSON.parse(editor.getValue());
-                           cell.metadata = json;
-                           $( this ).dialog( "close" );
-                        }
-                        catch(e)
-                        {
-                           alert('invalid json');
-                        }
-                    },
-                    Cancel: function() {
-                        $( this ).dialog( "close" );
-                    }
-                },
-                close: function() {
-                    //cleanup on close
-                    $(this).remove();
-                }
-        });
-        editor.refresh();
-    }
-
-
-    var add_raw_edit_button = function(div, cell) {
-        var button_container = $(div)
-        var button = $('<div/>').button({label:'Raw Edit'})
-                .click(function(){raw_edit(cell); return false;})
-        button_container.append(button);
-    }
-
-    CellToolbar.register_callback('example.rawedit',add_raw_edit_button);
-    var example_preset = []
-    example_preset.push('example.rawedit');
-
-    var simple_dialog = function(title,text){
-        var dlg = $('<div/>').attr('title',title)
-            .append($('<p/>').text(text))
-        $(dlg).dialog({
-                autoOpen: true,
-                height: 300,
-                width: 650,
-                modal: true,
-                close: function() {
-                    //cleanup on close
-                    $(this).remove();
-                }
-        });
-    }
+    
 
-    var add_simple_dialog_button = function(div, cell) {
-        var help_text = ["This is the Metadata editting UI.",
-                         "It heavily rely on plugin to work ",
-                         "and is still under developpement. You shouldn't wait too long before",
-                         " seeing some customisable buttons in those toolbar."
-                        ].join('\n')
-        var button_container = $(div)
-        var button = $('<div/>').button({label:'?'})
-                .click(function(){simple_dialog('help',help_text); return false;})
-        button_container.append(button);
-    }
-
-    CellToolbar.register_callback('default.help',add_simple_dialog_button)
-    var default_preset = []
-    default_preset.push('default.help')
-    CellToolbar.register_preset('default',default_preset)
-    CellToolbar.set_preset('default')
-
-    var simple_button = function(div, cell) {
-        var button_container = $(div);
-        var button = $('<div/>').button({icons:{primary:'ui-icon-locked'}});
-        var fun = function(value){
-                try{
-                    if(value){
-                        cell.code_mirror.setOption('readOnly','nocursor')
-                        button.button('option','icons',{primary:'ui-icon-locked'})
-                    } else {
-                        cell.code_mirror.setOption('readOnly','false')
-                        button.button('option','icons',{primary:'ui-icon-unlocked'})
-                    }
-                } catch(e){}
-
-        }
-            fun(cell.metadata.ro)
-            button.click(function(){
-                    var v = cell.metadata.ro;
-                    var locked = !v;
-                    cell.metadata.ro = locked;
-                    fun(locked)
-                    })
-                .css('height','16px')
-                .css('width','35px');
-        button_container.append(button);
-    }
-
-    CellToolbar.register_callback('example.lock',simple_button);
-    example_preset.push('example.lock');
-
-    var toggle_test =  function(div, cell) {
-        var button_container = $(div)
-        var button = $('<div/>').button({label:String(cell.metadata.foo)});
-        button.click(function(){
-                    var v = cell.metadata.foo;
-                    cell.metadata.foo = !v;
-                    button.button("option","label",String(!v));
-                })
-       button_container.append(button);
-    }
 
-    CellToolbar.register_callback('example.toggle',toggle_test);
-    example_preset.push('example.toggle');
 
     /**
      */
diff --git a/IPython/frontend/html/notebook/static/js/examples/celltoolbar.example.js b/IPython/frontend/html/notebook/static/js/examples/celltoolbar.example.js
index e190a62d2..c98f0c337 100644
--- a/IPython/frontend/html/notebook/static/js/examples/celltoolbar.example.js
+++ b/IPython/frontend/html/notebook/static/js/examples/celltoolbar.example.js
@@ -177,8 +177,37 @@
     CellToolbar.register_callback('example.select',select_test);
     example_preset.push('example.select');
 
+    var simple_dialog = function(title,text){
+        var dlg = $('<div/>').attr('title',title)
+            .append($('<p/>').text(text))
+        $(dlg).dialog({
+                autoOpen: true,
+                height: 300,
+                width: 650,
+                modal: true,
+                close: function() {
+                    //cleanup on close
+                    $(this).remove();
+                }
+        });
+    }
+
+    var add_simple_dialog_button = function(div, cell) {
+        var help_text = ["This is the Metadata editting UI.",
+                         "It heavily rely on plugin to work ",
+                         "and is still under developpement. You shouldn't wait too long before",
+                         " seeing some customisable buttons in those toolbar."
+                        ].join('\n')
+        var button_container = $(div)
+        var button = $('<div/>').button({label:'?'})
+                .click(function(){simple_dialog('help',help_text); return false;})
+        button_container.append(button);
+    }
+
+    CellToolbar.register_callback('example.help',add_simple_dialog_button)
+    example_preset.push('example.help')
+
     CellToolbar.register_preset('example',example_preset);
-    CellToolbar.set_preset('example');
     console.log('Example extension for metadata editting loaded.');
 
 }(IPython));

From ffa1cf20a3918c3d9076722986476e10b448e0e7 Mon Sep 17 00:00:00 2001
From: Matthias BUSSONNIER <bussonniermatthias@gmail.com>
Date: Sat, 12 Jan 2013 12:38:01 +0100
Subject: [PATCH 12/26] remove relative position

---
 IPython/frontend/html/notebook/static/css/notebook.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/IPython/frontend/html/notebook/static/css/notebook.css b/IPython/frontend/html/notebook/static/css/notebook.css
index 2e50b0823..6c68de747 100644
--- a/IPython/frontend/html/notebook/static/css/notebook.css
+++ b/IPython/frontend/html/notebook/static/css/notebook.css
@@ -146,7 +146,6 @@ div.ui-widget-content {
 
 .cell {
     border: 1px solid transparent;
-    position: relative;
 }
 
 div.cell {

From 1e4eb5c5271aa7d8a3500f1ce8b6039ffb513525 Mon Sep 17 00:00:00 2001
From: Matthias BUSSONNIER <bussonniermatthias@gmail.com>
Date: Sat, 12 Jan 2013 12:51:41 +0100
Subject: [PATCH 13/26] do not use alert on invalid json

---
 .../html/notebook/static/js/examples/celltoolbar.example.js   | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/IPython/frontend/html/notebook/static/js/examples/celltoolbar.example.js b/IPython/frontend/html/notebook/static/js/examples/celltoolbar.example.js
index c98f0c337..56d1c996e 100644
--- a/IPython/frontend/html/notebook/static/js/examples/celltoolbar.example.js
+++ b/IPython/frontend/html/notebook/static/js/examples/celltoolbar.example.js
@@ -28,6 +28,7 @@
     var raw_edit = function(cell){
 
         var md = cell.metadata
+        var error_div = $('<div/>').css('color','red')
 
         var textarea = $('<textarea/>')
             .attr('rows','13')
@@ -42,6 +43,7 @@
                         .attr('for','metadata')
                         .text("Metadata (I know what I'm dooing and I won't complain if it breaks my notebook)")
                         )
+                        .append(error_div)
                         .append($('<br/>'))
                         .append(
                             textarea
@@ -67,7 +69,7 @@
                         }
                         catch(e)
                         {
-                           alert('invalid json');
+                           error_div.text('Warning, invalid json, not saved');
                         }
                     },
                     Cancel: function() {

From f88001f481098cdf7d710c48491f729d2b86d00d Mon Sep 17 00:00:00 2001
From: Matthias BUSSONNIER <bussonniermatthias@gmail.com>
Date: Sat, 12 Jan 2013 13:02:02 +0100
Subject: [PATCH 14/26] fix css size

---
 IPython/frontend/html/notebook/static/css/notebook.css        | 2 +-
 IPython/frontend/html/notebook/static/js/celltoolbar.js       | 1 +
 .../html/notebook/static/js/examples/celltoolbar.example.js   | 4 +++-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/IPython/frontend/html/notebook/static/css/notebook.css b/IPython/frontend/html/notebook/static/css/notebook.css
index 6c68de747..aa7a12ec9 100644
--- a/IPython/frontend/html/notebook/static/css/notebook.css
+++ b/IPython/frontend/html/notebook/static/css/notebook.css
@@ -81,7 +81,7 @@ span#notebook_name {
     padding: 3px 15px;
 }
 
-#cell_type {
+#maintoolbar > select, #maintoolbar label {
     font-size: 85%;
 }
 
diff --git a/IPython/frontend/html/notebook/static/js/celltoolbar.js b/IPython/frontend/html/notebook/static/js/celltoolbar.js
index 3a712a8d9..a2bf6f637 100644
--- a/IPython/frontend/html/notebook/static/js/celltoolbar.js
+++ b/IPython/frontend/html/notebook/static/js/celltoolbar.js
@@ -36,6 +36,7 @@ var IPython = (function (IPython) {
     };
 
     CellToolbar.dropdown_preset_element = $('<select/>')
+        .addClass('ui-widget ui-widget-content')
         .attr('id','celltoolbar_selector')
         .append($('<option/>').attr('value','').text('-'))
 
diff --git a/IPython/frontend/html/notebook/static/js/examples/celltoolbar.example.js b/IPython/frontend/html/notebook/static/js/examples/celltoolbar.example.js
index 56d1c996e..21495e46d 100644
--- a/IPython/frontend/html/notebook/static/js/examples/celltoolbar.example.js
+++ b/IPython/frontend/html/notebook/static/js/examples/celltoolbar.example.js
@@ -128,7 +128,9 @@
 
     var toggle_test =  function(div, cell) {
         var button_container = $(div)
-        var button = $('<div/>').button({label:String(cell.metadata.foo)});
+        var button = $('<div/>')
+            .button({label:String(cell.metadata.foo)}).
+            css('width','65px');
         button.click(function(){
                     var v = cell.metadata.foo;
                     cell.metadata.foo = !v;

From 8b7db8d6da6642f921886fa962f46fa809c0de8a Mon Sep 17 00:00:00 2001
From: Matthias BUSSONNIER <bussonniermatthias@gmail.com>
Date: Sat, 12 Jan 2013 13:03:19 +0100
Subject: [PATCH 15/26] remove useless jquery selector

---
 .../html/notebook/static/js/examples/celltoolbar.example.js     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/IPython/frontend/html/notebook/static/js/examples/celltoolbar.example.js b/IPython/frontend/html/notebook/static/js/examples/celltoolbar.example.js
index 21495e46d..ed4ca1c9c 100644
--- a/IPython/frontend/html/notebook/static/js/examples/celltoolbar.example.js
+++ b/IPython/frontend/html/notebook/static/js/examples/celltoolbar.example.js
@@ -85,7 +85,7 @@
     }
 
     var add_raw_edit_button = function(div, cell) {
-        var button_container = $(div)
+        var button_container = div
         var button = $('<div/>').button({label:'Raw Edit'})
                 .click(function(){raw_edit(cell); return false;})
         button_container.append(button);

From 08225b2ed49f36551d9a398ce51bb6ffaa941f58 Mon Sep 17 00:00:00 2001
From: Matthias BUSSONNIER <bussonniermatthias@gmail.com>
Date: Sat, 12 Jan 2013 13:25:22 +0100
Subject: [PATCH 16/26] slightly generalize utils generator

---
 .../html/notebook/static/js/celltoolbar.js    | 102 +++++++++---------
 .../static/js/examples/celltoolbar.example.js |  65 ++++++-----
 2 files changed, 85 insertions(+), 82 deletions(-)

diff --git a/IPython/frontend/html/notebook/static/js/celltoolbar.js b/IPython/frontend/html/notebook/static/js/celltoolbar.js
index a2bf6f637..533ce3e2e 100644
--- a/IPython/frontend/html/notebook/static/js/celltoolbar.js
+++ b/IPython/frontend/html/notebook/static/js/celltoolbar.js
@@ -37,8 +37,8 @@ var IPython = (function (IPython) {
 
     CellToolbar.dropdown_preset_element = $('<select/>')
         .addClass('ui-widget ui-widget-content')
-        .attr('id','celltoolbar_selector')
-        .append($('<option/>').attr('value','').text('-'))
+        .attr('id', 'celltoolbar_selector')
+        .append($('<option/>').attr('value', '').text('-'))
 
     CellToolbar.dropdown_preset_element.change(function(){
         var val = CellToolbar.dropdown_preset_element.val()
@@ -117,7 +117,7 @@ var IPython = (function (IPython) {
      *          button.click(function(){
      *                      var v = cell.metadata.foo;
      *                      cell.metadata.foo = !v;
-     *                      button.button("option","label",String(!v));
+     *                      button.button("option", "label", String(!v));
      *                  })
      *
      *          // add the button to the DOM div.
@@ -126,7 +126,7 @@ var IPython = (function (IPython) {
      *
      *      // now we register the callback under the name `foo` to give the
      *      // user the ability to use it later
-     *      CellToolbar.register_callback('foo',toggle);
+     *      CellToolbar.register_callback('foo', toggle);
      */
     CellToolbar.register_callback = function(name, callback){
         // what do we do if name already exist ?
@@ -145,19 +145,19 @@ var IPython = (function (IPython) {
      * @private
      * @example
      *
-     *      CellToolbar.register_callback('foo.c1',function(div,cell){...});
-     *      CellToolbar.register_callback('foo.c2',function(div,cell){...});
-     *      CellToolbar.register_callback('foo.c3',function(div,cell){...});
-     *      CellToolbar.register_callback('foo.c4',function(div,cell){...});
-     *      CellToolbar.register_callback('foo.c5',function(div,cell){...});
+     *      CellToolbar.register_callback('foo.c1', function(div, cell){...});
+     *      CellToolbar.register_callback('foo.c2', function(div, cell){...});
+     *      CellToolbar.register_callback('foo.c3', function(div, cell){...});
+     *      CellToolbar.register_callback('foo.c4', function(div, cell){...});
+     *      CellToolbar.register_callback('foo.c5', function(div, cell){...});
      *
-     *      CellToolbar.register_preset('foo.foo_preset1',['foo.c1','foo.c2','foo.c5'])
-     *      CellToolbar.register_preset('foo.foo_preset2',['foo.c4','foo.c5'])
+     *      CellToolbar.register_preset('foo.foo_preset1', ['foo.c1', 'foo.c2', 'foo.c5'])
+     *      CellToolbar.register_preset('foo.foo_preset2', ['foo.c4', 'foo.c5'])
      */
     CellToolbar.register_preset = function(name, preset_list){
         CellToolbar._presets[name] = preset_list
         CellToolbar.dropdown_preset_element.append(
-           $('<option/>').attr('value',name).text(name)
+           $('<option/>').attr('value', name).text(name)
         )
     }
     /**
@@ -213,29 +213,26 @@ var IPython = (function (IPython) {
             // Note,
             // do this the other way, wrap in try/catch and don't append if any errors.
             this.inner_element.append(local_div)
-            cdict[preset[index]](local_div,this.cell)
+            cdict[preset[index]](local_div, this.cell)
         }
 
     }
 
-    
-
-
 
     /**
      */
     CellToolbar.utils = {};
 
     /**
-     * A utility function to generate bindings between a checkbox and metadata
+     * A utility function to generate bindings between a checkbox and cell/metadata
      * @method utils.checkbox_ui_generator
      * @static
      *
      * @param name {string} Label in front of the checkbox
-     * @param setter {function( metadata_dict, newValue )}
-     *        A setter method to set the newValue of the metadata dictionnary
-     * @param getter {function( metadata )}
-     *        A getter methods which return the current value of the metadata.
+     * @param setter {function( cell, newValue )}
+     *        A setter method to set the newValue
+     * @param getter {function( cell )}
+     *        A getter methods which return the current value.
      *
      * @return callback {function( div, cell )} Callback to be passed to `register_callback`
      *
@@ -245,14 +242,14 @@ var IPython = (function (IPython) {
      *
      *     var newSlide = CellToolbar.utils.checkbox_ui_generator('New Slide',
      *          // setter
-     *          function(metadata,value){
+     *          function(cell, value){
      *              // we check that the slideshow namespace exist and create it if needed
-     *              if (metadata.slideshow == undefined){metadata.slideshow = {}}
+     *              if (cell.metadata.slideshow == undefined){cell.metadata.slideshow = {}}
      *              // set the value
-     *              metadata.slideshow.isSectionStart = value
+     *              cell.metadata.slideshow.isSectionStart = value
      *              },
      *          //geter
-     *          function(metadata){ var ns = metadata.slideshow;
+     *          function(cell){ var ns = cell.metadata.slideshow;
      *              // if the slideshow namespace does not exist return `undefined`
      *              // (will be interpreted as `false` by checkbox) otherwise
      *              // return the value
@@ -263,19 +260,19 @@ var IPython = (function (IPython) {
      *      CellToolbar.register_callback('newSlide', newSlide);
      *
      */
-    CellToolbar.utils.checkbox_ui_generator = function(name,setter,getter){
+    CellToolbar.utils.checkbox_ui_generator = function(name, setter, getter){
          return function(div, cell) {
             var button_container = $(div)
 
-            var chkb = $('<input/>').attr('type','checkbox');
-            var lbl = $('<label/>').append($('<span/>').text(name).css('font-size','77%'));
+            var chkb = $('<input/>').attr('type', 'checkbox');
+            var lbl = $('<label/>').append($('<span/>').text(name).css('font-size', '77%'));
             lbl.append(chkb);
-            chkb.attr("checked",getter(cell.metadata));
+            chkb.attr("checked", getter(cell));
 
             chkb.click(function(){
-                        var v = getter(cell.metadata);
-                        setter(cell.metadata,!v);
-                        chkb.attr("checked",!v);
+                        var v = getter(cell);
+                        setter(cell, !v);
+                        chkb.attr("checked", !v);
                     })
            button_container.append($('<div/>').append(lbl));
 
@@ -283,16 +280,16 @@ var IPython = (function (IPython) {
     }
 
     /**
-     * A utility function to generate bindings between a dropdown list and metadata
+     * A utility function to generate bindings between a dropdown list cell
      * @method utils.select_ui_generator
      * @static
      *
      * @param list_list {list of sublist} List of sublist of metadata value and name in the dropdown list.
      *        subslit shoud contain 2 element each, first a string that woul be displayed in the dropdown list,
-     *        and second the corresponding value for the metadata to be passed to setter/return by getter.
-     * @param setter {function( metadata_dict, newValue )}
-     *        A setter method to set the newValue of the metadata dictionnary
-     * @param getter {function( metadata )}
+     *        and second the corresponding value to  be passed to setter/return by getter.
+     * @param setter {function( cell, newValue )}
+     *        A setter method to set the newValue
+     * @param getter {function( cell )}
      *        A getter methods which return the current value of the metadata.
      * @param [label=""] {String} optionnal label for the dropdown menu
      *
@@ -301,45 +298,44 @@ var IPython = (function (IPython) {
      * @example
      *
      *      var select_type = CellToolbar.utils.select_ui_generator([
-     *              ["-"            ,undefined      ],
-     *              ["Header Slide" ,"header_slide" ],
-     *              ["Slide"        ,"slide"        ],
-     *              ["Fragment"     ,"fragment"     ],
-     *              ["Skip"         ,"skip"         ],
+     *              ["-"            , undefined      ],
+     *              ["Header Slide" , "header_slide" ],
+     *              ["Slide"        , "slide"        ],
+     *              ["Fragment"     , "fragment"     ],
+     *              ["Skip"         , "skip"         ],
      *              ],
      *              // setter
-     *              function(metadata,value){
+     *              function(cell, value){
      *                  // we check that the slideshow namespace exist and create it if needed
-     *                  if (metadata.slideshow == undefined){metadata.slideshow = {}}
+     *                  if (cell.metadata.slideshow == undefined){cell.metadata.slideshow = {}}
      *                  // set the value
-     *                  metadata.slideshow.slide_type = value
+     *                  cell.metadata.slideshow.slide_type = value
      *                  },
      *              //geter
-     *              function(metadata){ var ns = metadata.slideshow;
+     *              function(cell){ var ns = cell.metadata.slideshow;
      *                  // if the slideshow namespace does not exist return `undefined`
      *                  // (will be interpreted as `false` by checkbox) otherwise
      *                  // return the value
      *                  return (ns == undefined)? undefined: ns.slide_type
      *                  }
-     *      CellToolbar.register_callback('slideshow.select',select_type);
+     *      CellToolbar.register_callback('slideshow.select', select_type);
      *
      */
-    CellToolbar.utils.select_ui_generator = function(list_list,setter, getter, label){
+    CellToolbar.utils.select_ui_generator = function(list_list, setter, getter, label){
         label= label? label: "";
         return function(div, cell) {
             var button_container = $(div)
-            var lbl = $("<label/>").append($('<span/>').text(label).css('font-size','77%'));
+            var lbl = $("<label/>").append($('<span/>').text(label).css('font-size', '77%'));
             var select = $('<select/>');
             for(var itemn in list_list){
                 var opt = $('<option/>');
-                        opt.attr('value',list_list[itemn][1])
+                        opt.attr('value', list_list[itemn][1])
                         opt.text(list_list[itemn][0])
                 select.append(opt);
             }
-            select.val(getter(cell.metadata));
-
+            select.val(getter(cell));
             select.change(function(){
-                        setter(cell.metadata,select.val());
+                        setter(cell, select.val());
                     });
             button_container.append($('<div/>').append(lbl).append(select));
 
diff --git a/IPython/frontend/html/notebook/static/js/examples/celltoolbar.example.js b/IPython/frontend/html/notebook/static/js/examples/celltoolbar.example.js
index ed4ca1c9c..b5aa77ac8 100644
--- a/IPython/frontend/html/notebook/static/js/examples/celltoolbar.example.js
+++ b/IPython/frontend/html/notebook/static/js/examples/celltoolbar.example.js
@@ -142,41 +142,48 @@
     CellToolbar.register_callback('example.toggle',toggle_test);
     example_preset.push('example.toggle');
 
-    var checkbox_test =  function(div, cell) {
-        var button_container = $(div)
+    var checkbox_test = CellToolbar.utils.checkbox_ui_generator('Yes/No',
+         // setter
+         function(cell, value){
+             // we check that the slideshow namespace exist and create it if needed
+             if (cell.metadata.yn_test == undefined){cell.metadata.yn_test = {}}
+             // set the value
+             cell.metadata.yn_test.value = value
+             },
+         //geter
+         function(cell){ var ns = cell.metadata.yn_test;
+             // if the slideshow namespace does not exist return `undefined`
+             // (will be interpreted as `false` by checkbox) otherwise
+             // return the value
+             return (ns == undefined)? undefined: ns.value
+             }
+    );
 
-        var chkb = $('<input/>').attr('type','checkbox');
-        var lbl = $('<label/>').append($('<span/>').text('bar :').css('font-size','77%'));
-        lbl.append(chkb);
-        chkb.attr("checked",cell.metadata.bar);
-        chkb.click(function(){
-                    var v = cell.metadata.bar;
-                    cell.metadata.bar = !v;
-                    chkb.attr("checked",!v);
-                })
-       button_container.append($('<div/>').append(lbl));
-
-    }
 
     CellToolbar.register_callback('example.checkbox',checkbox_test);
     example_preset.push('example.checkbox');
 
-    var select_test =  function(div, cell) {
-        var button_container = $(div)
-
-        var select = $('<select/>');
-
-        select.append($('<option/>').attr('value','foo').text('foo'));
-        select.append($('<option/>').attr('value','bar').text('bar'));
-        select.append($('<option/>').attr('value','qux').text('qux'));
-        select.append($('<option/>').attr('value','zip').text('zip'));
-        select.val(cell.metadata.option);
-        select.change(function(){
-                cell.metadata.option = select.val();
+    var select_test = CellToolbar.utils.select_ui_generator([
+            ["-"            ,undefined      ],
+            ["Header Slide" ,"header_slide" ],
+            ["Slide"        ,"slide"        ],
+            ["Fragment"     ,"fragment"     ],
+            ["Skip"         ,"skip"         ],
+            ],
+            // setter
+            function(cell,value){
+                // we check that the slideshow namespace exist and create it if needed
+                if (cell.metadata.test == undefined){cell.metadata.test = {}}
+                // set the value
+                cell.metadata.test.slide_type = value
+                },
+            //geter
+            function(cell){ var ns = cell.metadata.test;
+                // if the slideshow namespace does not exist return `undefined`
+                // (will be interpreted as `false` by checkbox) otherwise
+                // return the value
+                return (ns == undefined)? undefined: ns.slide_type
                 });
-       button_container.append($('<div/>').append(select));
-
-    }
 
     CellToolbar.register_callback('example.select',select_test);
     example_preset.push('example.select');

From eb5911a3c15e405abd2caf301d616fc7c9e70f6a Mon Sep 17 00:00:00 2001
From: Matthias BUSSONNIER <bussonniermatthias@gmail.com>
Date: Sat, 12 Jan 2013 13:32:26 +0100
Subject: [PATCH 17/26] create celltoolbar in cell.js and inherit

---
 IPython/frontend/html/notebook/static/js/cell.js     | 4 +++-
 IPython/frontend/html/notebook/static/js/codecell.js | 2 +-
 IPython/frontend/html/notebook/static/js/textcell.js | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/IPython/frontend/html/notebook/static/js/cell.js b/IPython/frontend/html/notebook/static/js/cell.js
index 0006a914a..f1ea1328f 100644
--- a/IPython/frontend/html/notebook/static/js/cell.js
+++ b/IPython/frontend/html/notebook/static/js/cell.js
@@ -50,7 +50,9 @@ var IPython = (function (IPython) {
      * and will be called by Base Class constructor.
      * @method create_element
      */
-    Cell.prototype.create_element = function () {};
+    Cell.prototype.create_element = function () {
+        this.celltoolbar = new IPython.CellToolbar(this);
+    };
 
 
     /**
diff --git a/IPython/frontend/html/notebook/static/js/codecell.js b/IPython/frontend/html/notebook/static/js/codecell.js
index 0c57d3d51..2fd80ce56 100644
--- a/IPython/frontend/html/notebook/static/js/codecell.js
+++ b/IPython/frontend/html/notebook/static/js/codecell.js
@@ -58,7 +58,7 @@ var IPython = (function (IPython) {
 
     /** @method create_element */
     CodeCell.prototype.create_element = function () {
-        this.celltoolbar = new IPython.CellToolbar(this);
+        IPython.Cell.prototype.create_element.apply(this, arguments);
 
         var cell =  $('<div></div>').addClass('cell border-box-sizing code_cell vbox');
         cell.append(this.celltoolbar.element);
diff --git a/IPython/frontend/html/notebook/static/js/textcell.js b/IPython/frontend/html/notebook/static/js/textcell.js
index b50188fdc..86500681e 100644
--- a/IPython/frontend/html/notebook/static/js/textcell.js
+++ b/IPython/frontend/html/notebook/static/js/textcell.js
@@ -42,8 +42,8 @@ var IPython = (function (IPython) {
      * @private
      */
     TextCell.prototype.create_element = function () {
+        IPython.Cell.prototype.create_element.apply(this, arguments);
         var cell = $("<div>").addClass('cell text_cell border-box-sizing vbox');
-        this.celltoolbar = new IPython.CellToolbar(this);
         cell.append(this.celltoolbar.element);
         cell.attr('tabindex','2');
         var input_area = $('<div/>').addClass('text_cell_input border-box-sizing');

From c236253e8052cbb597d04c0acdbe839b9a1a72d5 Mon Sep 17 00:00:00 2001
From: Matthias BUSSONNIER <bussonniermatthias@gmail.com>
Date: Sat, 12 Jan 2013 13:40:20 +0100
Subject: [PATCH 18/26] change - to Hidden

---
 IPython/frontend/html/notebook/static/js/celltoolbar.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/IPython/frontend/html/notebook/static/js/celltoolbar.js b/IPython/frontend/html/notebook/static/js/celltoolbar.js
index 533ce3e2e..95e275861 100644
--- a/IPython/frontend/html/notebook/static/js/celltoolbar.js
+++ b/IPython/frontend/html/notebook/static/js/celltoolbar.js
@@ -38,7 +38,7 @@ var IPython = (function (IPython) {
     CellToolbar.dropdown_preset_element = $('<select/>')
         .addClass('ui-widget ui-widget-content')
         .attr('id', 'celltoolbar_selector')
-        .append($('<option/>').attr('value', '').text('-'))
+        .append($('<option/>').attr('value', '').text('None'))
 
     CellToolbar.dropdown_preset_element.change(function(){
         var val = CellToolbar.dropdown_preset_element.val()
@@ -298,7 +298,7 @@ var IPython = (function (IPython) {
      * @example
      *
      *      var select_type = CellToolbar.utils.select_ui_generator([
-     *              ["-"            , undefined      ],
+     *              ["<None>"            , undefined      ],
      *              ["Header Slide" , "header_slide" ],
      *              ["Slide"        , "slide"        ],
      *              ["Fragment"     , "fragment"     ],

From 28e90b40d29e57de1765047bc14686efc24be592 Mon Sep 17 00:00:00 2001
From: Matthias BUSSONNIER <bussonniermatthias@gmail.com>
Date: Mon, 14 Jan 2013 08:16:38 +0100
Subject: [PATCH 19/26] fix lock cell button

'flase' is true while false is false
---
 .../html/notebook/static/js/examples/celltoolbar.example.js     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/IPython/frontend/html/notebook/static/js/examples/celltoolbar.example.js b/IPython/frontend/html/notebook/static/js/examples/celltoolbar.example.js
index b5aa77ac8..d39cc18ec 100644
--- a/IPython/frontend/html/notebook/static/js/examples/celltoolbar.example.js
+++ b/IPython/frontend/html/notebook/static/js/examples/celltoolbar.example.js
@@ -105,7 +105,7 @@
                         cell.code_mirror.setOption('readOnly','nocursor')
                         button.button('option','icons',{primary:'ui-icon-locked'})
                     } else {
-                        cell.code_mirror.setOption('readOnly','false')
+                        cell.code_mirror.setOption('readOnly',false)
                         button.button('option','icons',{primary:'ui-icon-unlocked'})
                     }
                 } catch(e){}

From f76279d858c52228d74de0f6de1a25c2e6e663e4 Mon Sep 17 00:00:00 2001
From: Matthias BUSSONNIER <bussonniermatthias@gmail.com>
Date: Mon, 14 Jan 2013 08:17:44 +0100
Subject: [PATCH 20/26] remove commented css

---
 IPython/frontend/html/notebook/static/css/celltoolbar.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/IPython/frontend/html/notebook/static/css/celltoolbar.css b/IPython/frontend/html/notebook/static/css/celltoolbar.css
index c44268997..d9650aebe 100644
--- a/IPython/frontend/html/notebook/static/css/celltoolbar.css
+++ b/IPython/frontend/html/notebook/static/css/celltoolbar.css
@@ -33,7 +33,6 @@
 
 .button_container {
  float:right;
- /*width:60px;*/
 }
 
 .button_container .ui-state-default, .button_container .ui-state-hover, .button_container .ui-state-hover span{

From 69859c105788607e2c00e5a5a3a4c3c9081de1fd Mon Sep 17 00:00:00 2001
From: Matthias BUSSONNIER <bussonniermatthias@gmail.com>
Date: Mon, 14 Jan 2013 08:29:39 +0100
Subject: [PATCH 21/26] change set_preset to activate_preset

update docs
---
 .../html/notebook/static/js/celltoolbar.js    | 33 ++++++++++++-------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/IPython/frontend/html/notebook/static/js/celltoolbar.js b/IPython/frontend/html/notebook/static/js/celltoolbar.js
index 95e275861..3e741317e 100644
--- a/IPython/frontend/html/notebook/static/js/celltoolbar.js
+++ b/IPython/frontend/html/notebook/static/js/celltoolbar.js
@@ -46,7 +46,7 @@ var IPython = (function (IPython) {
             $('body').removeClass('celltoolbar-on')
         } else {
             $('body').addClass('celltoolbar-on')
-            CellToolbar.set_preset(val)
+            CellToolbar.activate_preset(val)
         }
     })
 
@@ -57,6 +57,8 @@ var IPython = (function (IPython) {
      * we need to think of wether or not we allow nested namespace
      * @property _callback_dict
      * @private
+     * @static
+     * @type Dict
      */
     CellToolbar._callback_dict = {};
 
@@ -65,17 +67,19 @@ var IPython = (function (IPython) {
      * to add to the toolbar of each cell
      * @property _ui_controls_list
      * @private
+     * @static
+     * @type List
      */
     CellToolbar._ui_controls_list = [];
 
     /**
-     * keep a list of all instances to
-     * be able to llop over them...
-     * but how to 'destroy' them ?
-     * have to think about it...
-     * or loop over the cells, and find their CellToolbar instances.
+     * Class variable that should contains the CellToolbar instances for each
+     * cell of the notebook
+     *
      * @private
      * @property _instances
+     * @static
+     * @type List
      */
     CellToolbar._instances =[]
 
@@ -83,6 +87,8 @@ var IPython = (function (IPython) {
      * keep a list of all the availlabel presets for the toolbar
      * @private
      * @property _presets
+     * @static
+     * @type Dict
      */
     CellToolbar._presets ={}
 
@@ -98,7 +104,7 @@ var IPython = (function (IPython) {
      * The callback will receive the following element :
      *
      *    * a div in which to add element.
-     *    * the cell it is responsable from
+     *    * the cell it is responsible from
      *
      * @example
      *
@@ -129,7 +135,7 @@ var IPython = (function (IPython) {
      *      CellToolbar.register_callback('foo', toggle);
      */
     CellToolbar.register_callback = function(name, callback){
-        // what do we do if name already exist ?
+        // Overwrite if it already exists.
         CellToolbar._callback_dict[name] = callback;
     };
 
@@ -161,17 +167,20 @@ var IPython = (function (IPython) {
         )
     }
     /**
-     * set an UI preset from `register_preset`
-     * @method set_preset
+     * Activate an UI preset from `register_preset`
+     *
+     * This does not update the selection UI.
+     *
+     * @method activate_preset
      * @param preset_name {String} string corresponding to the preset name
      *
      * @static
      * @private
      * @example
      *
-     *      CellToolbar.set_preset('foo.foo_preset1');
+     *      CellToolbar.activate_preset('foo.foo_preset1');
      */
-    CellToolbar.set_preset= function(preset_name){
+    CellToolbar.activate_preset= function(preset_name){
         var preset = CellToolbar._presets[preset_name];
 
         if(preset != undefined){

From 4e3f8edb88c72c2455059640b89974b29b0ed0bf Mon Sep 17 00:00:00 2001
From: Matthias BUSSONNIER <bussonniermatthias@gmail.com>
Date: Mon, 14 Jan 2013 08:35:04 +0100
Subject: [PATCH 22/26] add default celltoolbar UI

---
 .../static/js/celltoolbarpresets/default.js   | 94 +++++++++++++++++++
 .../example.js}                               | 72 --------------
 2 files changed, 94 insertions(+), 72 deletions(-)
 create mode 100644 IPython/frontend/html/notebook/static/js/celltoolbarpresets/default.js
 rename IPython/frontend/html/notebook/static/js/{examples/celltoolbar.example.js => celltoolbarpresets/example.js} (70%)

diff --git a/IPython/frontend/html/notebook/static/js/celltoolbarpresets/default.js b/IPython/frontend/html/notebook/static/js/celltoolbarpresets/default.js
new file mode 100644
index 000000000..da1e55864
--- /dev/null
+++ b/IPython/frontend/html/notebook/static/js/celltoolbarpresets/default.js
@@ -0,0 +1,94 @@
+//----------------------------------------------------------------------------
+//  Copyright (C) 2012  The IPython Development Team
+//
+//  Distributed under the terms of the BSD License.  The full license is in
+//  the file COPYING, distributed as part of this software.
+//----------------------------------------------------------------------------
+
+//============================================================================
+// CellToolbar Default
+//============================================================================
+
+/**
+ * Example Use for the CellToolbar library
+ */
+ // IIFE without asignement, we don't modifiy the IPython namespace
+(function (IPython) {
+    "use strict";
+
+    var CellToolbar = IPython.CellToolbar;
+
+    var raw_edit = function(cell){
+
+        var md = cell.metadata
+        var error_div = $('<div/>').css('color','red')
+
+        var textarea = $('<textarea/>')
+            .attr('rows','13')
+            .attr('cols','75')
+            .attr('name','metadata')
+            .text(JSON.stringify(md, null,4)||'');
+        var dialogform = $('<div/>').attr('title','Edit the metadata')
+            .append(
+                $('<form/>').append(
+                    $('<fieldset/>').append(
+                        $('<label/>')
+                        .attr('for','metadata')
+                        .text("Metadata (I know what I'm dooing and I won't complain if it breaks my notebook)")
+                        )
+                        .append(error_div)
+                        .append($('<br/>'))
+                        .append(
+                            textarea
+                        )
+                    )
+            );
+        var editor = CodeMirror.fromTextArea(textarea[0], {
+            lineNumbers: true,
+            matchBrackets: true,
+        });
+        $(dialogform).dialog({
+                autoOpen: true,
+                height: 300,
+                width: 650,
+                modal: true,
+                buttons: {
+                    "Ok": function() {
+                        //validate json and set it
+                        try {
+                           var json = JSON.parse(editor.getValue());
+                           cell.metadata = json;
+                           $( this ).dialog( "close" );
+                        }
+                        catch(e)
+                        {
+                           error_div.text('Warning, invalid json, not saved');
+                        }
+                    },
+                    Cancel: function() {
+                        $( this ).dialog( "close" );
+                    }
+                },
+                close: function() {
+                    //cleanup on close
+                    $(this).remove();
+                }
+        });
+        editor.refresh();
+    }
+
+    var add_raw_edit_button = function(div, cell) {
+        var button_container = div
+        var button = $('<div/>').button({label:'Raw Edit'})
+                .click(function(){raw_edit(cell); return false;})
+        button_container.append(button);
+    }
+
+    CellToolbar.register_callback('default.rawedit',add_raw_edit_button);
+    var example_preset = []
+    example_preset.push('default.rawedit');
+
+    CellToolbar.register_preset('default',example_preset);
+    console.log('Default extension for metadata editting loaded.');
+
+}(IPython));
diff --git a/IPython/frontend/html/notebook/static/js/examples/celltoolbar.example.js b/IPython/frontend/html/notebook/static/js/celltoolbarpresets/example.js
similarity index 70%
rename from IPython/frontend/html/notebook/static/js/examples/celltoolbar.example.js
rename to IPython/frontend/html/notebook/static/js/celltoolbarpresets/example.js
index d39cc18ec..f9b9d622f 100644
--- a/IPython/frontend/html/notebook/static/js/examples/celltoolbar.example.js
+++ b/IPython/frontend/html/notebook/static/js/celltoolbarpresets/example.js
@@ -24,78 +24,6 @@
 
     var CellToolbar = IPython.CellToolbar;
 
-
-    var raw_edit = function(cell){
-
-        var md = cell.metadata
-        var error_div = $('<div/>').css('color','red')
-
-        var textarea = $('<textarea/>')
-            .attr('rows','13')
-            .attr('cols','75')
-            .attr('name','metadata')
-            .text(JSON.stringify(md, null,4)||'');
-        var dialogform = $('<div/>').attr('title','Edit the metadata')
-            .append(
-                $('<form/>').append(
-                    $('<fieldset/>').append(
-                        $('<label/>')
-                        .attr('for','metadata')
-                        .text("Metadata (I know what I'm dooing and I won't complain if it breaks my notebook)")
-                        )
-                        .append(error_div)
-                        .append($('<br/>'))
-                        .append(
-                            textarea
-                        )
-                    )
-            );
-        var editor = CodeMirror.fromTextArea(textarea[0], {
-            lineNumbers: true,
-            matchBrackets: true,
-        });
-        $(dialogform).dialog({
-                autoOpen: true,
-                height: 300,
-                width: 650,
-                modal: true,
-                buttons: {
-                    "Ok": function() {
-                        //validate json and set it
-                        try {
-                           var json = JSON.parse(editor.getValue());
-                           cell.metadata = json;
-                           $( this ).dialog( "close" );
-                        }
-                        catch(e)
-                        {
-                           error_div.text('Warning, invalid json, not saved');
-                        }
-                    },
-                    Cancel: function() {
-                        $( this ).dialog( "close" );
-                    }
-                },
-                close: function() {
-                    //cleanup on close
-                    $(this).remove();
-                }
-        });
-        editor.refresh();
-    }
-
-    var add_raw_edit_button = function(div, cell) {
-        var button_container = div
-        var button = $('<div/>').button({label:'Raw Edit'})
-                .click(function(){raw_edit(cell); return false;})
-        button_container.append(button);
-    }
-
-    CellToolbar.register_callback('example.rawedit',add_raw_edit_button);
-    var example_preset = []
-    example_preset.push('example.rawedit');
-
-
     var simple_button = function(div, cell) {
         var button_container = $(div);
         var button = $('<div/>').button({icons:{primary:'ui-icon-locked'}});

From 4e201889686034679987b4f18c4a974c7fed4868 Mon Sep 17 00:00:00 2001
From: Matthias BUSSONNIER <bussonniermatthias@gmail.com>
Date: Mon, 14 Jan 2013 08:38:27 +0100
Subject: [PATCH 23/26] Load default.js (for celltoolbar) by default

And change text.
---
 .../html/notebook/static/js/celltoolbarpresets/default.js     | 2 +-
 IPython/frontend/html/notebook/templates/notebook.html        | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/IPython/frontend/html/notebook/static/js/celltoolbarpresets/default.js b/IPython/frontend/html/notebook/static/js/celltoolbarpresets/default.js
index da1e55864..a76b66d3e 100644
--- a/IPython/frontend/html/notebook/static/js/celltoolbarpresets/default.js
+++ b/IPython/frontend/html/notebook/static/js/celltoolbarpresets/default.js
@@ -34,7 +34,7 @@
                     $('<fieldset/>').append(
                         $('<label/>')
                         .attr('for','metadata')
-                        .text("Metadata (I know what I'm dooing and I won't complain if it breaks my notebook)")
+                        .text("Manually edit the JSON below to manipulate the metadata for this cell. This assumes you know what you are doing and won't complain if it breaks your notebook. We also recommend putting your metadata attributes in an appropriately named sub-structure, so they don't conflict with those of others.")
                         )
                         .append(error_div)
                         .append($('<br/>'))
diff --git a/IPython/frontend/html/notebook/templates/notebook.html b/IPython/frontend/html/notebook/templates/notebook.html
index 0573939a6..c9fdd4c9f 100644
--- a/IPython/frontend/html/notebook/templates/notebook.html
+++ b/IPython/frontend/html/notebook/templates/notebook.html
@@ -223,7 +223,7 @@ data-notebook-id={{notebook_id}}
 <script src="{{ static_url("js/notebookmain.js") }}" type="text/javascript" charset="utf-8"></script>
 
 <script src="{{ static_url("js/contexthint.js") }}" charset="utf-8"></script>
-{% endblock %}
-
 
+<script src="{{ static_url("js/celltoolbarpresets/default.js") }}" type="text/javascript" charset="utf-8"></script>
 
+{% endblock %}

From 33b810fe53b713dbd514bbe1c260eb05726ec9aa Mon Sep 17 00:00:00 2001
From: Matthias BUSSONNIER <bussonniermatthias@gmail.com>
Date: Mon, 14 Jan 2013 08:48:38 +0100
Subject: [PATCH 24/26] fix celltoolbar select css

---
 IPython/frontend/html/notebook/static/css/notebook.css  | 3 +++
 IPython/frontend/html/notebook/static/js/maintoolbar.js | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/IPython/frontend/html/notebook/static/css/notebook.css b/IPython/frontend/html/notebook/static/css/notebook.css
index aa7a12ec9..4c5b6f8b0 100644
--- a/IPython/frontend/html/notebook/static/css/notebook.css
+++ b/IPython/frontend/html/notebook/static/css/notebook.css
@@ -83,6 +83,9 @@ span#notebook_name {
 
 #maintoolbar > select, #maintoolbar label {
     font-size: 85%;
+    margin-left:0.3em;
+    margin-right:0.3em;
+
 }
 
 
diff --git a/IPython/frontend/html/notebook/static/js/maintoolbar.js b/IPython/frontend/html/notebook/static/js/maintoolbar.js
index a58c1e403..8d5479c29 100644
--- a/IPython/frontend/html/notebook/static/js/maintoolbar.js
+++ b/IPython/frontend/html/notebook/static/js/maintoolbar.js
@@ -18,7 +18,7 @@ var IPython = (function (IPython) {
         this.add_drop_down_list();
         this.bind_events();
         $(this.selector)
-        .append($('<label/>').text('CellToolbar'))
+        .append($('<label/>').text('Cell Toolbar:'))
         .append(IPython.CellToolbar.dropdown_preset_element)
     };
 

From 7401054c94dfdbaf16c5ee2311fd0d32b5cee282 Mon Sep 17 00:00:00 2001
From: Matthias BUSSONNIER <bussonniermatthias@gmail.com>
Date: Mon, 14 Jan 2013 19:10:55 +0100
Subject: [PATCH 25/26] Capitalize

---
 .../html/notebook/static/js/celltoolbarpresets/default.js       | 2 +-
 .../html/notebook/static/js/celltoolbarpresets/example.js       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/IPython/frontend/html/notebook/static/js/celltoolbarpresets/default.js b/IPython/frontend/html/notebook/static/js/celltoolbarpresets/default.js
index a76b66d3e..6daa23a12 100644
--- a/IPython/frontend/html/notebook/static/js/celltoolbarpresets/default.js
+++ b/IPython/frontend/html/notebook/static/js/celltoolbarpresets/default.js
@@ -88,7 +88,7 @@
     var example_preset = []
     example_preset.push('default.rawedit');
 
-    CellToolbar.register_preset('default',example_preset);
+    CellToolbar.register_preset('Default',example_preset);
     console.log('Default extension for metadata editting loaded.');
 
 }(IPython));
diff --git a/IPython/frontend/html/notebook/static/js/celltoolbarpresets/example.js b/IPython/frontend/html/notebook/static/js/celltoolbarpresets/example.js
index f9b9d622f..ccd91e9b5 100644
--- a/IPython/frontend/html/notebook/static/js/celltoolbarpresets/example.js
+++ b/IPython/frontend/html/notebook/static/js/celltoolbarpresets/example.js
@@ -146,7 +146,7 @@
     CellToolbar.register_callback('example.help',add_simple_dialog_button)
     example_preset.push('example.help')
 
-    CellToolbar.register_preset('example',example_preset);
+    CellToolbar.register_preset('Example',example_preset);
     console.log('Example extension for metadata editting loaded.');
 
 }(IPython));

From 3e52d29b612c33db84b1624b7ae9ad3b78adaaac Mon Sep 17 00:00:00 2001
From: Matthias BUSSONNIER <bussonniermatthias@gmail.com>
Date: Mon, 14 Jan 2013 19:28:04 +0100
Subject: [PATCH 26/26] fix example.js

---
 .../html/notebook/static/js/celltoolbarpresets/example.js     | 4 +++-
 IPython/frontend/html/notebook/static/js/custom.js            | 4 ++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/IPython/frontend/html/notebook/static/js/celltoolbarpresets/example.js b/IPython/frontend/html/notebook/static/js/celltoolbarpresets/example.js
index ccd91e9b5..46224edb2 100644
--- a/IPython/frontend/html/notebook/static/js/celltoolbarpresets/example.js
+++ b/IPython/frontend/html/notebook/static/js/celltoolbarpresets/example.js
@@ -15,7 +15,7 @@
  * Celltoolbar UI for slideshow
  *
  * ```
- * $.getScript('/static/js/examples/celltoolbar.example.js');
+ * $.getScript('/static/js/celltoolbarpresets/example.js');
  * ```
  */
  // IIFE without asignement, we don't modifiy the IPython namespace
@@ -24,6 +24,8 @@
 
     var CellToolbar = IPython.CellToolbar;
 
+    var example_preset = [];
+
     var simple_button = function(div, cell) {
         var button_container = $(div);
         var button = $('<div/>').button({icons:{primary:'ui-icon-locked'}});
diff --git a/IPython/frontend/html/notebook/static/js/custom.js b/IPython/frontend/html/notebook/static/js/custom.js
index c56575369..8375f39f6 100644
--- a/IPython/frontend/html/notebook/static/js/custom.js
+++ b/IPython/frontend/html/notebook/static/js/custom.js
@@ -34,10 +34,10 @@
  *  to load custom script into the notebook.
  *
  *    // to load the metadata ui extension example.
- *    $.getScript('/static/js/examples/celltoolbar.example.js');
+ *    $.getScript('/static/js/celltoolbarpresets/example.js');
  *    // or
  *    // to load the metadata ui extension to control slideshow mode / reveal js for nbconvert
- *    $.getScript('/static/js/examples/celltoolbar.slideshow.js');
+ *    $.getScript('/static/js/celltoolbarpresets/slideshow.js');
  *
  *
  * @module IPython