Add tooltips to the notebook via 'title' attr.

All buttons, show/hide clickable areas, etc. should have some tooltip describing
what they do.  There are jQuery plugins for enhanced tooltips, but this gets
the lightest version working.

closes  #436

IPython/frontend/html/notebook/static/js/kernelstatus.js

@@ -1,60 +1,63 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 2008-2011  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.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // Kernel Status widget
 //============================================================================
 
 var IPython = (function (IPython) {
 
     var utils = IPython.utils;
 
     var KernelStatusWidget = function (selector) {
         this.selector = selector;
         if (this.selector !== undefined) {
             this.element = $(selector);
             this.style();
         }
     };
 
 
     KernelStatusWidget.prototype.style = function () {
         this.element.addClass('ui-widget');
+        this.element.attr('title', "The kernel execution status." +
+        " If 'Busy', the kernel is currently running code." +
+        " If 'Idle', it is available for execution.")
     };
 
 
     KernelStatusWidget.prototype.status_busy = function () {
         this.element.removeClass("status_idle");
         this.element.removeClass("status_restarting");
         this.element.addClass("status_busy");
         this.element.text("Busy");
     };
 
 
     KernelStatusWidget.prototype.status_idle = function () {
         this.element.removeClass("status_busy");
         this.element.removeClass("status_restarting");
         this.element.addClass("status_idle");
         this.element.text("Idle");
     };
 
     KernelStatusWidget.prototype.status_restarting = function () {
         this.element.removeClass("status_busy");
         this.element.removeClass("status_idle");
         this.element.addClass("status_restarting");
         this.element.text("Restarting");
     };
 
 
 
 
     IPython.KernelStatusWidget = KernelStatusWidget;
 
     return IPython;
 
 }(IPython));
 

IPython/frontend/html/notebook/static/js/leftpanel.js

@@ -1,101 +1,102 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 2008-2011  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.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // LeftPanel
 //============================================================================
 
 
 var IPython = (function (IPython) {
 
     var utils = IPython.utils;
 
     var LeftPanel = function (left_panel_selector, left_panel_splitter_selector) {
         this.left_panel_element = $(left_panel_selector);
         this.left_panel_splitter_element = $(left_panel_splitter_selector);
         this.expanded = true;
         this.width = 300;
         this.style();
         this.bind_events();
         this.create_children();
     };
 
 
     LeftPanel.prototype.style = function () {
         this.left_panel_splitter_element.addClass('border-box-sizing ui-widget ui-state-default');
         this.left_panel_element.addClass('border-box-sizing ui-widget');
         this.left_panel_element.width(this.width);
         this.left_panel_splitter_element.css({left : this.width});
+        this.left_panel_splitter_element.attr('title', 'Click to Show/Hide left panel');
     };
 
 
     LeftPanel.prototype.bind_events = function () {
         var that = this;
 
         this.left_panel_element.bind('collapse_left_panel', function () {
             that.left_panel_element.hide('fast');
             that.left_panel_splitter_element.animate({left : 0}, 'fast');
         });
 
         this.left_panel_element.bind('expand_left_panel', function () {
             that.left_panel_element.show('fast');
             that.left_panel_splitter_element.animate({left : that.width}, 'fast');
         });
 
         this.left_panel_splitter_element.hover(
             function () {
                 that.left_panel_splitter_element.addClass('ui-state-hover');
             },
             function () {
                 that.left_panel_splitter_element.removeClass('ui-state-hover');
             }
         );
 
         this.left_panel_splitter_element.click(function () {
             that.toggle();
         });
 
     };
 
 
     LeftPanel.prototype.create_children = function () {
         this.notebook_section = new IPython.NotebookSection('div#notebook_section');
         this.cell_section = new IPython.CellSection('div#cell_section');
         this.kernel_section = new IPython.KernelSection('div#kernel_section');
         this.help_section = new IPython.HelpSection('div#help_section');
     }
 
     LeftPanel.prototype.collapse = function () {
         if (this.expanded === true) {
             this.left_panel_element.add($('div#notebook')).trigger('collapse_left_panel');
             this.expanded = false;
         };
     };
 
 
     LeftPanel.prototype.expand = function () {
         if (this.expanded !== true) {
             this.left_panel_element.add($('div#notebook')).trigger('expand_left_panel');
             this.expanded = true;
         };
     };
 
 
     LeftPanel.prototype.toggle = function () {
         if (this.expanded === true) {
             this.collapse();
         } else {
             this.expand();
         };
     };
 
     IPython.LeftPanel = LeftPanel;
 
     return IPython;
 
 }(IPython));
 

IPython/frontend/html/notebook/static/js/pager.js

@@ -1,101 +1,102 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 2008-2011  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.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // Pager
 //============================================================================
 
 var IPython = (function (IPython) {
 
     var utils = IPython.utils;
 
     var Pager = function (pager_selector, pager_splitter_selector) {
         this.pager_element = $(pager_selector);
         this.pager_splitter_element = $(pager_splitter_selector);
         this.expanded = true;
         this.percentage_height = 0.40;
         this.style();
         this.bind_events();
     };
 
 
     Pager.prototype.style = function () {
         this.pager_splitter_element.addClass('border-box-sizing ui-widget ui-state-default');
         this.pager_element.addClass('border-box-sizing ui-widget');
+        this.pager_splitter_element.attr('title', 'Click to Show/Hide pager area');
     };
 
 
     Pager.prototype.bind_events = function () {
         var that = this;
 
         this.pager_element.bind('collapse_pager', function () {
             that.pager_element.hide('fast');
         });
 
         this.pager_element.bind('expand_pager', function () {
             that.pager_element.show('fast');
         });
 
         this.pager_splitter_element.hover(
             function () {
                 that.pager_splitter_element.addClass('ui-state-hover');
             },
             function () {
                 that.pager_splitter_element.removeClass('ui-state-hover');
             }
         );
 
         this.pager_splitter_element.click(function () {
             that.toggle();
         });
 
     };
 
 
     Pager.prototype.collapse = function () {
         if (this.expanded === true) {
             this.pager_element.add($('div#notebook')).trigger('collapse_pager');
             this.expanded = false;
         };
     };
 
 
     Pager.prototype.expand = function () {
         if (this.expanded !== true) {
             this.pager_element.add($('div#notebook')).trigger('expand_pager');
             this.expanded = true;
         };
     };
 
 
     Pager.prototype.toggle = function () {
         if (this.expanded === true) {
             this.collapse();
         } else {
             this.expand();
         };
     };
 
 
     Pager.prototype.clear = function (text) {
         this.pager_element.empty();
     };
 
 
     Pager.prototype.append_text = function (text) {
         var toinsert = $("<div/>").addClass("output_area output_stream");
         toinsert.append($('<pre/>').html(utils.fixConsole(text)));
         this.pager_element.append(toinsert);
     };   
 
 
     IPython.Pager = Pager;
 
     return IPython;
 
 }(IPython));
 

IPython/frontend/html/notebook/static/js/panelsection.js

@@ -1,246 +1,287 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 2008-2011  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.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // PanelSection
 //============================================================================
 
 var IPython = (function (IPython) {
 
     var utils = IPython.utils;
 
     // Base PanelSection class
 
     var PanelSection = function (selector) {
         this.selector = selector;
         if (this.selector !== undefined) {
             this.element = $(selector);
             this.header = this.element.find('h3.section_header');
             this.content = this.element.find('div.section_content');
             this.style();
             this.bind_events();
         }
         this.expanded = true;
     };
 
 
     PanelSection.prototype.style = function () {
         this.header.addClass('ui-widget ui-state-default');
+        this.header.attr('title', "Click to Show/Hide Section");
         this.content.addClass('ui-widget section_content');
     };
 
 
     PanelSection.prototype.bind_events = function () {
         var that = this;
         this.header.click(function () {
             that.toggle();
         });
         this.header.hover(function () {
             that.header.toggleClass('ui-state-hover');
         });
     };
 
 
     PanelSection.prototype.expand = function () {
         if (!this.expanded) {
             this.content.slideDown('fast');
             this.expanded = true;
         };
     };
 
 
     PanelSection.prototype.collapse = function () {
         if (this.expanded) {
             this.content.slideUp('fast');
             this.expanded = false;
         };
     };
 
 
     PanelSection.prototype.toggle = function () {
         if (this.expanded === true) {
             this.collapse();
         } else {
             this.expand();
         };
     };
 
 
     PanelSection.prototype.create_children = function () {};
 
 
     // NotebookSection
 
     var NotebookSection = function () {
         PanelSection.apply(this, arguments);
     };
 
 
     NotebookSection.prototype = new PanelSection();
 
 
     NotebookSection.prototype.style = function () {
         PanelSection.prototype.style.apply(this);
         this.content.addClass('ui-helper-clearfix');
         this.content.find('div.section_row').addClass('ui-helper-clearfix');
         this.content.find('#new_open').buttonset();
+        this.content.find('#new_notebook').attr('title', "Create a new notebook");
+        this.content.find('#open_notebook').attr('title', "Open an existing notebook");
         this.content.find('#download_notebook').button();
+        this.content.find('#download_notebook').attr('title',
+            "Download the notebook in the specified format," +
+            " either full ipynb notebook or as a Python script.");
+        // upload notebook doesn't exist:
         this.content.find('#upload_notebook').button();
         this.content.find('#download_format').addClass('ui-widget ui-widget-content');
         this.content.find('#download_format option').addClass('ui-widget ui-widget-content');
     };
 
 
     NotebookSection.prototype.bind_events = function () {
         PanelSection.prototype.bind_events.apply(this);
         var that = this;
         this.content.find('#new_notebook').click(function () {
             window.open('/new');
         });
         this.content.find('#open_notebook').click(function () {
             window.open('/');
         });
         this.content.find('#download_notebook').click(function () {
             var format = that.content.find('#download_format').val();
             var notebook_id = IPython.save_widget.get_notebook_id();
             var url = '/notebooks/' + notebook_id + '?format=' + format;
             window.open(url,'_newtab');
         });
     };
 
     // CellSection
 
     var CellSection = function () {
         PanelSection.apply(this, arguments);
     };
 
 
     CellSection.prototype = new PanelSection();
 
 
     CellSection.prototype.style = function () {
         PanelSection.prototype.style.apply(this);
         this.content.addClass('ui-helper-clearfix');
         this.content.find('div.section_row').addClass('ui-helper-clearfix');
         this.content.find('#delete_cell').button();
+        this.content.find('#delete_cell').attr('title', "Delete the selected cell");
+
         this.content.find('#insert').buttonset();
+        this.content.find('#insert_cell_above').attr('title', "Insert new cell above selected");
+        this.content.find('#insert_cell_below').attr('title', "Insert new cell below selected");
+
         this.content.find('#move').buttonset();
+        this.content.find('#move_cell_up').attr('title', "Move selected cell up one in the Notebook");
+        this.content.find('#move_cell_down').attr('title', "Move selected cell down one in the Notebook");
+
         this.content.find('#cell_type').buttonset();
+        this.content.find('#to_markdown').attr('title', 'Change selected cell to markdown (for text)')
+        this.content.find('#to_code').attr('title', 'Change selected cell to code (for execution)')
+
         this.content.find('#cell_output').buttonset();
+        this.content.find('#toggle_output').attr('title', 'Toggle visibility of the output of code cells')
+        this.content.find('#clear_all_output').attr('title', 'Clear output of all code cells (actually removes the data, unlike toggle)')
+
         this.content.find('#run_cells').buttonset();
+        this.content.find('#run_selected_cell').attr('title', 'Submit the selected cell for execution')
+        this.content.find('#run_all_cells').attr('title', 'Run *all* code cells in the notebook in order')
+        this.content.find('#autoindent').attr('title', 'Autoindent code as-you-type')
+        this.content.find('#autoindent_label').attr('title', 'Autoindent code as-you-type')
     };
 
 
     CellSection.prototype.bind_events = function () {
         PanelSection.prototype.bind_events.apply(this);
         this.content.find('#toggle_output').click(function () {
             IPython.notebook.toggle_output();
         });
         this.content.find('#clear_all_output').click(function () {
             IPython.notebook.clear_all_output();
         });
         this.content.find('#delete_cell').click(function () {
             IPython.notebook.delete_cell();
         });
         this.content.find('#insert_cell_above').click(function () {
             IPython.notebook.insert_code_cell_above();
         });
         this.content.find('#insert_cell_below').click(function () {
             IPython.notebook.insert_code_cell_below();
         });
         this.content.find('#move_cell_up').click(function () {
             IPython.notebook.move_cell_up();
         });
         this.content.find('#move_cell_down').click(function () {
             IPython.notebook.move_cell_down();
         });
         this.content.find('#to_code').click(function () {
             IPython.notebook.to_code();
         });
         this.content.find('#to_markdown').click(function () {
             IPython.notebook.to_markdown();
         });
         this.content.find('#run_selected_cell').click(function () {
             IPython.notebook.execute_selected_cell();
         });
         this.content.find('#run_all_cells').click(function () {
             IPython.notebook.execute_all_cells();
         });
         this.content.find('#autoindent').change(function () {
             var state = $('#autoindent').prop('checked');
             IPython.notebook.set_autoindent(state);
         });
     };
 
 
     // KernelSection
 
     var KernelSection = function () {
         PanelSection.apply(this, arguments);
     };
 
 
     KernelSection.prototype = new PanelSection();
 
 
     KernelSection.prototype.style = function () {
         PanelSection.prototype.style.apply(this);
         this.content.addClass('ui-helper-clearfix');
         this.content.find('div.section_row').addClass('ui-helper-clearfix');
         this.content.find('#int_restart').buttonset();
+        this.content.find("#int_kernel").attr('title', "Interrupt the kernel with SIGINT/Ctrl-C");
+        this.content.find("#restart_kernel").attr('title',
+            "Restart the kernel. This will shutdown the current kernel," +
+            " and start a new, clean kernel in its place, connected to this Notebook." +
+            " This may break the connection of other clients connected to this kernel." );
+        var kill_tip = "Kill the kernel on exit.  If unchecked, the kernel will remain" +
+        " active after closing the session, allowing you to reconnect and resume later.";
+        this.content.find('#kill_kernel').attr('title', kill_tip);
+        this.content.find('#kill_kernel_label').attr('title', kill_tip);
+
     };
 
 
     KernelSection.prototype.bind_events = function () {
         PanelSection.prototype.bind_events.apply(this);
         this.content.find('#restart_kernel').click(function () {
             IPython.notebook.restart_kernel();
         });
         this.content.find('#int_kernel').click(function () {
             IPython.notebook.kernel.interrupt();
         });
     };
 
 
     // HelpSection
 
     var HelpSection = function () {
         PanelSection.apply(this, arguments);
     };
 
 
     HelpSection.prototype = new PanelSection();
 
 
     HelpSection.prototype.style = function () {
         PanelSection.prototype.style.apply(this);
         PanelSection.prototype.style.apply(this);
         this.content.addClass('ui-helper-clearfix');
         this.content.find('div.section_row').addClass('ui-helper-clearfix');
         this.content.find('#help_buttons0').buttonset();
         this.content.find('#help_buttons1').buttonset();
         this.content.find('#help_buttons2').buttonset();
+        this.content.find('#python_help').attr('title', "Open the online Python documentation in a new tab")
+        this.content.find('#ipython_help').attr('title', "Open the online IPython documentation in a new tab")
+        this.content.find('#numpy_help').attr('title', "Open the online NumPy documentation in a new tab")
+        this.content.find('#scipy_help').attr('title', "Open the online SciPy documentation in a new tab")
+        this.content.find('#matplotlib_help').attr('title', "Open the online Matplotlib documentation in a new tab")
+        this.content.find('#sympy_help').attr('title', "Open the online SymPy documentation in a new tab")
     };
 
 
     HelpSection.prototype.bind_events = function () {
         PanelSection.prototype.bind_events.apply(this);
     };
 
 
     // Set module variables
 
     IPython.PanelSection = PanelSection;
     IPython.NotebookSection = NotebookSection;
     IPython.CellSection = CellSection;
     IPython.KernelSection = KernelSection;
     IPython.HelpSection = HelpSection;
 
     return IPython;
 
 }(IPython));
 

IPython/frontend/html/notebook/static/js/printwidget.js

@@ -1,54 +1,58 b''
 var IPython = (function (IPython) {
 
     var PrintWidget = function (selector) {
         this.selector = selector;
         if (this.selector !== undefined) {
             this.element = $(selector);
             this.style();
             this.bind_events();
         }
     };
 
     PrintWidget.prototype.style = function () {
         this.element.find('button#print_notebook').button();
+        this.element.find('button#print_notebook').attr('title',
+            "Open a new window with printer-friendly HTML of the Notebook." +
+            " Note that this is incomplete, and may not produce perfect" +
+            " printed output.");
     };
 
     PrintWidget.prototype.bind_events = function () {
         var that = this;
         this.element.find('button#print_notebook').click(function () {
             that.print_notebook();
         });
     };
 
     PrintWidget.prototype.enable = function () {
         this.element.find('button#print_notebook').button('enable');
     };
 
     PrintWidget.prototype.disable = function () {
         this.element.find('button#print_notebook').button('disable');
     };
 
     PrintWidget.prototype.print_notebook = function () {
         var w = window.open('', '_blank', 'scrollbars=1,menubar=1');
         var html = '<html><head>' +
                    $('head').clone().html() +
                    '<style type="text/css">' +
                    '@media print { body { overflow: visible !important; } }' +
                    '.ui-widget-content { border: 0px; }' +
                    '</style>' +
                    '</head><body style="overflow: auto;">' +
                    $('#notebook').clone().html() +
                    '</body></html>';
 
         w.document.open();
         w.document.write(html);
         w.document.close();
 
         return false;
     };
 
     IPython.PrintWidget = PrintWidget;
     
     return IPython;
 
 }(IPython));

IPython/frontend/html/notebook/static/js/quickhelp.js

@@ -1,39 +1,40 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 2008-2011  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.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // QuickHelp button
 //============================================================================
 
 var IPython = (function (IPython) {
 
     var QuickHelp = function (selector) {
         this.selector = selector;
         if (this.selector !== undefined) {
             this.element = $(selector);
             this.style();
             this.bind_events();
         }
     };
 
     QuickHelp.prototype.style = function () {
         this.element.find('button#quick_help').button();
+        this.element.find('button#quick_help').attr('title', "Show/Hide the keyboard shortcuts for the IPython Notebook");
     };
 
     QuickHelp.prototype.bind_events = function () {
         var that = this;
         this.element.find("button#quick_help").click(function () {
             IPython.notebook.toggle_keyboard_shortcuts();
         });
     };
 
     // Set module variables
     IPython.QuickHelp = QuickHelp;
 
     return IPython;
 
 }(IPython));

IPython/frontend/html/notebook/static/js/savewidget.js

@@ -1,156 +1,157 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 2008-2011  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.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // SaveWidget
 //============================================================================
 
 var IPython = (function (IPython) {
 
     var utils = IPython.utils;
 
     var SaveWidget = function (selector) {
         this.selector = selector;
         this.notebook_name_blacklist_re = /[\/\\]/
         this.last_saved_name = '';
         if (this.selector !== undefined) {
             this.element = $(selector);
             this.style();
             this.bind_events();
         }
     };
 
 
     SaveWidget.prototype.style = function () {
         this.element.find('input#notebook_name').addClass('ui-widget ui-widget-content');
         this.element.find('input#notebook_name').attr('tabindex','1');
         this.element.find('button#save_notebook').button();
+        this.element.find('button#save_notebook').attr('title', 'Save the Notebook');
         var left_panel_width = $('div#left_panel').outerWidth();
         var left_panel_splitter_width = $('div#left_panel_splitter').outerWidth();
         $('span#save_widget').css({marginLeft:left_panel_width+left_panel_splitter_width});
 
     };
 
 
     SaveWidget.prototype.bind_events = function () {
         var that = this;
         this.element.find('button#save_notebook').click(function () {
             that.save_notebook();
         });
         this.element.find('input#notebook_name').keyup(function () {
             that.is_renaming();
         });
     };
 
 
     SaveWidget.prototype.save_notebook = function () {
         IPython.notebook.save_notebook();
     };
 
 
     SaveWidget.prototype.notebook_saved = function () {
         this.set_document_title();
         this.last_saved_name = this.get_notebook_name();
     };
 
 
     SaveWidget.prototype.is_renaming = function () {
         if (this.get_notebook_name() !== this.last_saved_name) {
             this.status_rename();
         } else {
             this.status_save();
         };
     };
 
 
     SaveWidget.prototype.get_notebook_name = function () {
         return this.element.find('input#notebook_name').attr('value');
     }
 
 
     SaveWidget.prototype.set_notebook_name = function (nbname) {
         this.element.find('input#notebook_name').attr('value',nbname);
         this.set_document_title();
         this.last_saved_name = nbname;
     }
 
 
     SaveWidget.prototype.set_document_title = function () {
         nbname = this.get_notebook_name();
         document.title = 'IPy: ' + nbname;
     };
         
 
     SaveWidget.prototype.get_notebook_id = function () {
         return this.element.find('span#notebook_id').text()
     };
 
 
     SaveWidget.prototype.update_url = function () {
         var notebook_id = this.get_notebook_id();
         if (notebook_id !== '') {
             window.history.replaceState({}, '', notebook_id);
         };
     };
 
 
     SaveWidget.prototype.test_notebook_name = function () {
         var nbname = this.get_notebook_name();
         if (this.notebook_name_blacklist_re.test(nbname) == false) {
             return true;
         } else {
             var bad_name = $('<div/>');
             bad_name.html(
                 "The notebook name you entered (" +
                 nbname +
                 ") is not valid. Notebook names can contain any characters except / and \\."
             );
             bad_name.dialog({title: 'Invalid name', modal: true});
             return false;
         };
     };
 
 
     SaveWidget.prototype.reset_status = function () {
         this.is_renaming();
     };
 
 
     SaveWidget.prototype.status_save = function () {
         this.element.find('button#save_notebook').button('option', 'label', '<u>S</u>ave');
         this.element.find('button#save_notebook').button('enable');
         IPython.print_widget.enable();
     };
 
 
     SaveWidget.prototype.status_saving = function () {
         this.element.find('button#save_notebook').button('option', 'label', 'Saving');
         this.element.find('button#save_notebook').button('disable');
         IPython.print_widget.disable();
     };
 
 
     SaveWidget.prototype.status_loading = function () {
         this.element.find('button#save_notebook').button('option', 'label', 'Loading');
         this.element.find('button#save_notebook').button('disable');
         IPython.print_widget.disable();
     };    
 
 
     SaveWidget.prototype.status_rename = function () {
         this.element.find('button#save_notebook').button('option', 'label', 'Rename');
         this.element.find('button#save_notebook').button('enable');
         IPython.print_widget.enable();
     };
 
 
     IPython.SaveWidget = SaveWidget;
 
     return IPython;
 
 }(IPython));
 

IPython/frontend/html/notebook/templates/notebook.html

@@ -1,280 +1,280 b''
 <!DOCTYPE HTML>
 <html>
 
 <head>
     <meta charset="utf-8">
 
     <title>IPython Notebook</title>
 
     <link rel="stylesheet" href="static/jquery/css/themes/aristo/jquery-wijmo.css" type="text/css" />
 <!--     <link rel="stylesheet" href="static/jquery/css/themes/rocket/jquery-wijmo.css" type="text/css" /> -->
 <!--    <link rel="stylesheet" href="static/jquery/css/themes/smoothness/jquery-ui-1.8.14.custom.css" type="text/css" />-->
 
     <!-- <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML" charset="utf-8"></script> -->
     <script type='text/javascript' src='static/mathjax/MathJax.js?config=TeX-AMS_HTML' charset='utf-8'></script>
     <script type="text/javascript">
     function CheckMathJax(){
         var div=document.getElementById("MathJaxFetchingWarning")
         if(window.MathJax){
             document.body.removeChild(div)
         }
         else{
            div.style.display = "block";
         }
     }
     if (typeof MathJax == 'undefined') {
         console.log("No local MathJax, loading from CDN");
         document.write(unescape("%3Cscript type='text/javascript' src='http://cdn.mathjax.org/mathjax/latest/MathJax.js%3Fconfig=TeX-AMS_HTML' charset='utf-8'%3E%3C/script%3E"));
     }else{
         console.log("Using local MathJax");
     }
     </script>
 
     <link rel="stylesheet" href="static/codemirror/lib/codemirror.css">
     <link rel="stylesheet" href="static/codemirror/mode/markdown/markdown.css">
     <link rel="stylesheet" href="static/codemirror/mode/rst/rst.css">
     <link rel="stylesheet" href="static/codemirror/theme/ipython.css">
     <link rel="stylesheet" href="static/codemirror/theme/default.css">
 
     <link rel="stylesheet" href="static/prettify/prettify.css"/>
 
     <link rel="stylesheet" href="static/css/boilerplate.css" type="text/css" />
     <link rel="stylesheet" href="static/css/layout.css" type="text/css" />
     <link rel="stylesheet" href="static/css/base.css" type="text/css" />
     <link rel="stylesheet" href="static/css/notebook.css" type="text/css" />
     <link rel="stylesheet" href="static/css/renderedhtml.css" type="text/css" />
 
 
 </head>
 
 <body onload='CheckMathJax();'>
 
 <div id="header">
     <span id="ipython_notebook"><h1>IPython Notebook</h1></span>
     <span id="save_widget">
         <input type="text" id="notebook_name" size="20"></textarea>
         <span id="notebook_id" style="display:none">{{notebook_id}}</span>
         <button id="save_notebook"><u>S</u>ave</button>
     </span>
     <span id="quick_help_area">
       <button id="quick_help">Quick<u>H</u>elp</button>
       </span>
     <span id="kernel_status">Idle</span>
 </div>
 
 <div id="MathJaxFetchingWarning"
       style="width:80%; margin:auto;padding-top:20%;text-align: justify; display:none">
       <p style="font-size:26px;">There was an issue trying to fetch MathJax.js
         from the internet.</p>
 
       <p style="padding:0.2em"> With a working internet connection, you can run
     the following at a Python or IPython prompt, which will install a local
     copy of MathJax:</p>
       
         <pre style="background-color:lightblue;border:thin silver solid;padding:0.4em">
             from IPython.external import mathjax; mathjax.install_mathjax()
         </pre>
         This will try to install MathJax into the directory where you installed
         IPython. If you installed IPython to a location that requires
         administrative privileges to write, you will need to make this call as
         an administrator. On OSX/Linux/Unix, this can be done at the
         command-line via:
         <pre style="background-color:lightblue;border:thin silver solid;padding:0.4em">
             sudo python -c "from IPython.external import mathjax; mathjax.install_mathjax()"
         </pre>
     </p>
 </div>
 
 <div id="main_app">
 
     <div id="left_panel">
 
         <div id="notebook_section">
             <h3 class="section_header">Notebook</h3>
             <div class="section_content">
                 <div class="section_row">
                     <span id="new_open" class="section_row_buttons">
                         <button id="new_notebook">New</button>
                         <button id="open_notebook">Open</button>
                     </span>
                     <span class="section_row_header">Actions</span>
                 </div>
                 <div class="section_row">
                     <span>
                         <select id="download_format">
                             <option value="json">ipynb</option>
                             <option value="py">py</option>
                         </select>
                     </span>
                     <span class="section_row_buttons">
                         <button id="download_notebook">Download</button>
                     </span>
                 </div>
                 <div class="section_row">
                     <span class="section_row_buttons">
                         <span id="print_widget">
                             <button id="print_notebook">Print</button>
                         </span>
                     </span>
                 </div>
             </div>
         </div>
 
         <div id="cell_section">
             <h3 class="section_header">Cell</h3>
             <div class="section_content">
                 <div class="section_row">
                     <span class="section_row_buttons">
                         <button id="delete_cell"><u>D</u>elete</button>
                     </span>
                     <span class="section_row_header">Actions</span>
                 </div>
                 <div class="section_row">
                     <span id="cell_type" class="section_row_buttons">
                         <button id="to_code"><u>C</u>ode</button>
 <!--                        <button id="to_html">HTML</button>-->
                         <button id="to_markdown"><u>M</u>arkdown</button>
                     </span>
                      <span class="button_label">Format</span> 
                 </div>
                 <div class="section_row">
                     <span id="cell_output" class="section_row_buttons">
                         <button id="toggle_output"><u>T</u>oggle</button>
                         <button id="clear_all_output">ClearAll</button>
                     </span>
                     <span class="button_label">Output</span>
                 </div>
                 <div class="section_row">
                     <span id="insert" class="section_row_buttons">
                         <button id="insert_cell_above"><u>A</u>bove</button>
                         <button id="insert_cell_below"><u>B</u>elow</button>
                     </span>
                     <span class="button_label">Insert</span>
                 </div>
                 <div class="section_row">
                     <span id="move" class="section_row_buttons">
                         <button id="move_cell_up">Up</button>
                         <button id="move_cell_down">Down</button>
                     </span>
                     <span class="button_label">Move</span>
                 </div>
                 <div class="section_row">
                     <span id="run_cells" class="section_row_buttons">
                         <button id="run_selected_cell">Selected</button>
                         <button id="run_all_cells">All</button>
                     </span>
                     <span class="button_label">Run</span>
                 </div>
                 <div class="section_row">
                     <span id="autoindent_span">
                         <input type="checkbox" id="autoindent" checked="true"></input>
                     </span>
-                    <span class="checkbox_label">Autoindent:</span>
+                    <span class="checkbox_label" id="autoindent_label">Autoindent:</span>
                 </div>
             </div>
         </div>
 
         <div id="kernel_section">
             <h3 class="section_header">Kernel</h3>
             <div class="section_content">
                 <div class="section_row">
                     <span id="int_restart" class="section_row_buttons">
                         <button id="int_kernel"><u>I</u>nterrupt</button>
                         <button id="restart_kernel">Restart</button>
                     </span>
                     <span class="section_row_header">Actions</span>
                 </div>
                 <div class="section_row">
                     <span id="kernel_persist">
                         <input type="checkbox" id="kill_kernel"></input>
                     </span>
-                    <span class="checkbox_label">Kill kernel upon exit:</span>
+                    <span class="checkbox_label" id="kill_kernel_label">Kill kernel upon exit:</span>
                 </div>
             </div>
         </div>
 
         <div id="help_section">
             <h3 class="section_header">Help</h3>
             <div class="section_content">
                 <div class="section_row">
                     <span id="help_buttons0" class="section_row_buttons">
                         <a id="python_help" href="http://docs.python.org" target="_blank">Python</a>
                         <a id="ipython_help" href="http://ipython.org/documentation.html" target="_blank">IPython</a>
                     </span>
                     <span class="section_row_header">Links</span>
                 </div>
                 <div class="section_row">
                     <span id="help_buttons1" class="section_row_buttons">
                         <a id="numpy_help" href="http://docs.scipy.org/doc/numpy/reference/" target="_blank">NumPy</a>
                         <a id="scipy_help" href="http://docs.scipy.org/doc/scipy/reference/" target="_blank">SciPy</a>
                     </span>
                 </div>
                 <div class="section_row">
                     <span id="help_buttons2" class="section_row_buttons">
                         <a id="matplotlib_help" href="http://matplotlib.sourceforge.net/" target="_blank">MPL</a>
                         <a id="sympy_help" href="http://docs.sympy.org/dev/index.html" target="_blank">SymPy</a>
                     </span>
                 </div>
                 <div class="section_row">
                     <span class="help_string">run selected cell</span>
                     <span class="help_string_label">Shift-Enter :</span>
                 </div>
                 <div class="section_row">
                     <span class="help_string">run selected cell in-place</span>
                     <span class="help_string_label">Ctrl-Enter  :</span>
                 </div>
                 <div class="section_row">
                     <span class="help_string">show keyboard shortcuts</span>
                     <span class="help_string_label">Ctrl-m h  :</span>
                 </div>
             </div>
         </div>
 
     </div>
     <div id="left_panel_splitter"></div>
     <div id="notebook_panel">
         <div id="notebook"></div>
         <div id="pager_splitter"></div>
         <div id="pager"></div>
     </div>
 
 </div>
 
 <script src="static/jquery/js/jquery-1.6.2.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/jquery/js/jquery-ui-1.8.14.custom.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/jquery/js/jquery.autogrow.js" type="text/javascript" charset="utf-8"></script>
 
 <script src="static/codemirror/lib/codemirror.js" charset="utf-8"></script>
 <script src="static/codemirror/mode/python/python.js" charset="utf-8"></script>
 <script src="static/codemirror/mode/htmlmixed/htmlmixed.js" charset="utf-8"></script>
 <script src="static/codemirror/mode/xml/xml.js" charset="utf-8"></script>
 <script src="static/codemirror/mode/javascript/javascript.js" charset="utf-8"></script>
 <script src="static/codemirror/mode/css/css.js" charset="utf-8"></script>
 <script src="static/codemirror/mode/rst/rst.js" charset="utf-8"></script>
 <script src="static/codemirror/mode/markdown/markdown.js" charset="utf-8"></script>
 
 <script src="static/pagedown/Markdown.Converter.js" charset="utf-8"></script>
 
 <script src="static/prettify/prettify.js" charset="utf-8"></script>
 
 <script src="static/js/namespace.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/utils.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/cell.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/codecell.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/textcell.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/kernel.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/kernelstatus.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/layout.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/savewidget.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/quickhelp.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/pager.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/panelsection.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/printwidget.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/leftpanel.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/notebook.js" type="text/javascript" charset="utf-8"></script>
 <script src="static/js/notebook_main.js" type="text/javascript" charset="utf-8"></script>
 
 
 </body>
 
 </html>