JasonWoof Got questions, comments, patches, etc.? Contact Jason Woofenden
silence more warnings
[wfpl-cms.git] / admin_pages.html
index 7db5cb7..cc23bfc 100644 (file)
 
 <html>
 <head>
-       <title><!--~$title show {~-->~$host~ Admin: <!--~listings {~-->Pages Listing<!--~}~--><!--~form {~--><!--~id {~-->Add a new page<!--~}~--><!--~id unset {~-->Edit page "~title html~"<!--~}~--><!--~}~--><!--~}~--></title>
-       <!--~$head {~-->
-       <script type="text/javascript" src="code/ckeditor/ckeditor.js"></script>
-       <style>
-               /* icon in cke buttons */
-               .cke_button_icon.cke_button__wfpl_images_icon {
-                       background-image: url(/code/ckeditor/plugins/icons.png?t=D5AC);
-                       background-position: 0 -1504px;
-               }
-               .cke_wfpl_images_dialog * {
-                       white-space: normal !important;
-               }
-               .cke_wfpl_images_dialog h3 {
-                       margin-top: 10px;
-                       font-weight: bold;
-                       font-size: 18px;
-               }
-               .cke_wfpl_images_dialog strong {
-                       color: inherit;
-               }
-               .cke_wfpl_images_dialog p {
-                       font-size: 12px;
-                       line-height: 16px;
-               }
-               .cke_wfpl_images_dialog * + p {
-                       padding-top: 5px;
-               }
-               .cke_wfpl_images_dialog .cke_wfpl_thumbs {
-                       height: 270px;
-                       overflow-y: scroll;
-               }
-               .cke_wfpl_thumbs .cke_wfpl_thumb {
-                       width: 50px;
-                       height: 50px;
-                       padding: 10px;
-                       color: transparent;
-                       font-size: 10px;
-                       font-weight: bold;
-                       display: inline-block;
-                       overflow: hidden;
-                       text-align: center;
-                       background-position: 50% 50%;
-                       background-repeat: no-repeat;
-                       background-color: transparent;
-                       border: 2px solid white;
-               }
-               .cke_wfpl_thumbs .cke_wfpl_thumb:hover, .cke_wfpl_thumbs .cke_wfpl_thumb.selected {
-                       color: white;
-                       text-shadow: 1px 1px 2px #000;
-                       box-shadow: 1px 1px 6px #444;
-                       border: 2px solid #444;
-               }
-       </style>
-       <script type="text/javascript">
-               window.cke_wfpl_images = {
-                       images: {~wfpl_images {~
-                               "~id~": {
-                                       thumb: "~image thumb_src jsdq~",
-                                       image: "~image image_src jsdq~",
-                                       image_width: "~image image_width~",
-                                       image_height: "~image image_height~",
-                                       sizes: "~sizes jsdq~",
-                                       caption: "~caption jsdq~"
-                               }
-                               ~ sep {~,~}~
-                       ~}~},
-                       next_id: 0,
-                       selected: [],
-                       editors: []
-               };
-               function cke_wfpl_images_thumb_click(plugin_id, element, image_id) {
-                       var thumbs = element.parentNode.children;
-                       var i, thumb;
-                       for (i = 0; i < thumbs.length; i++) {
-                               thumb = thumbs[i];
-                               if (thumb === element) {
-                                       if (thumb.className.substr(0, 9) !== 'selected ') {
-                                               thumb.className = 'selected ' + thumb.className;
-                                       }
-                               } else {
-                                       if (thumb.className.substr(0, 9) === 'selected ') {
-                                               thumb.className = thumb.className.substr(9);
-                                       }
-                               }
-                       }
-                       window.cke_wfpl_images.selected[plugin_id] = image_id;
-               }
-               function cke_wfpl_images_insert_click(plugin_id, align) {
-                       var selected = window.cke_wfpl_images.selected[plugin_id];
-                       var editor = window.cke_wfpl_images.editors[plugin_id];
-                       var image;
-                       var code, width, height, src, size, caption;
-                       if (selected == null) {
-                               console.log("no selected picture"); // FIXME
-                               return;
-                       }
-                       image = window.cke_wfpl_images.images[selected];
-                       switch(align) {
-                               case 'left':
-                                       code = '<span class="wfpl_ifl"'
-                               break;
-                               case 'right':
-                                       code = '<span class="wfpl_ifr"'
-                               break;
-                               case 'centered': case 'full':
-                                       code = '<div class="wfpl_ic"'
-                               break;
-                       }
-                       size = image.sizes.replace(/^\s+|\s+$/g, '').split(/\s\+/)[0];
-                       width = image.image_width;
-                       height = image.image_height;
-                       src = image.image;
-                       caption = image.caption;
-                       if (caption == '') {
-                               caption = '&nbsp;';
-                       }
-                       if (align != 'full') {
-                               var wh = size.split('x');
-                               wh[0] = parseInt(wh[0]);
-                               wh[1] = parseInt(wh[1]);
-                               if (width / height > wh[0] / wh[1]) {
-                                       height = Math.round(height * wh[0] / width);
-                                       width = wh[0];
-                               } else {
-                                       width = Math.round(width * wh[1] / height);
-                                       height = wh[1];
-                               }
-                               size = '' + wh[0] + '-' + wh[1]; // dash instead of x
-                               src = src.substr(0, src.length - 4) + '-' + size + src.substr(src.length - 4);
-                       }
-                       code += ' style="background-image: url(/' + src + ');';
-                       code += ' width: ' + width + 'px;';
-                       code += ' padding-top: ' + height + 'px;';
-                       code += '">' + caption;
-                       switch(align) {
-                               case 'left': case 'right':
-                                       code += '</span>'
-                               break;
-                               case 'centered': case 'full':
-                                       code += '</div>'
-                               break;
-                       }
-                       CKEDITOR.dialog.getCurrent().hide(); // FIXME
-                       console.log(code);
-                       editor.insertHtml(code);
-               }
-               CKEDITOR.plugins.add('wfpl_images', {
-                       init: function (editor) {
-                               var plugin_id = window.cke_wfpl_images.editors.length;
-                               window.cke_wfpl_images.editors.push(editor);
-                               window.cke_wfpl_images.selected.push(null);
+    <title><!--~$title show {~-->~$host~ Admin: <!--~listing {~-->Manage Pages<!--~}~--><!--~form {~--><!--~id unset {~-->Add a new page<!--~}~--><!--~id {~-->Edit page "~title html~"<!--~}~--><!--~}~--><!--~}~--></title>
+    <!--~$head {~-->
+    <script src="inc/ckeditor/ckeditor.js?t=F0RD"></script>
+    <style>
+        /* icon in cke buttons */
+        .cke_button_icon.cke_button__wfpl_images_icon {
+            background-image: url(/inc/ckeditor/plugins/icons.png?t=F0RD);
+            background-position: 0 -936px;
+        }
+        .cke_wfpl_images_dialog * {
+            white-space: normal !important;
+        }
+        .cke_wfpl_images_dialog h3 {
+            margin-top: 10px;
+            font-weight: bold;
+            font-size: 18px;
+        }
+        .cke_wfpl_images_dialog strong {
+            color: inherit;
+        }
+        .cke_wfpl_images_dialog p {
+            font-size: 12px;
+            line-height: 16px;
+        }
+        .cke_wfpl_images_dialog * + p {
+            padding-top: 5px;
+        }
+        .cke_wfpl_images_dialog * a {
+            text-decoration: underline;
+            color: blue;
+        }
+        .cke_wfpl_images_dialog .cke_wfpl_thumbs {
+            height: 270px;
+            overflow-y: scroll;
+        }
+        .cke_wfpl_thumbs .cke_wfpl_thumb {
+            width: 50px;
+            height: 50px;
+            padding: 10px;
+            color: transparent;
+            font-size: 10px;
+            font-weight: bold;
+            display: inline-block;
+            overflow: hidden;
+            text-align: center;
+            background-size: contain;
+            background-position: 50% 50%;
+            background-repeat: no-repeat;
+            background-color: transparent;
+            border: 2px solid white;
+        }
+        .cke_wfpl_thumbs .cke_wfpl_thumb:hover, .cke_wfpl_thumbs .cke_wfpl_thumb.selected {
+            color: white;
+            text-shadow: 1px 1px 2px #000;
+            box-shadow: 1px 1px 6px #444;
+            border: 2px solid #444;
+        }
+    </style>
+    <script>
+        window.cke_wfpl_images = {
+            images: ~wfpl_images_json~,
+            full_width: ~wfpl_image_width_full~,
+            small_width: ~wfpl_image_width_small~,
+            thumb_width: ~wfpl_image_width_thumb~,
+            next_id: 0,
+            selected: [],
+            editors: []
+        };
+        var enc_html = function(str) {
+            return str.replace(/[<>&]/g, function(i) { return '&#' + i.charCodeAt(0) + ';'; });
+        };
+        function cke_wfpl_images_thumb_click(plugin_id, element, image_id) {
+            var thumbs = element.parentNode.children;
+            var i, thumb;
+            for (i = 0; i < thumbs.length; i++) {
+                thumb = thumbs[i];
+                if (thumb === element) {
+                    if (thumb.className.substr(0, 9) !== 'selected ') {
+                        thumb.className = 'selected ' + thumb.className;
+                    }
+                } else {
+                    if (thumb.className.substr(0, 9) === 'selected ') {
+                        thumb.className = thumb.className.substr(9);
+                    }
+                }
+            }
+            window.cke_wfpl_images.selected[plugin_id] = image_id;
+        }
+        function cke_wfpl_images_insert_click(plugin_id, align) {
+            var selected = window.cke_wfpl_images.selected[plugin_id];
+            var editor = window.cke_wfpl_images.editors[plugin_id];
+            var image;
+            var code, src, caption;
+            if (selected == null) {
+                CKEDITOR.dialog.getCurrent().hide();
+                return;
+            }
+            image = window.cke_wfpl_images.images[selected];
+            switch(align) {
+                case 'left':
+                    code = '<div class="wfpl_li">'
+                break;
+                case 'centered':
+                    code = '<div class="wfpl_ci">'
+                break;
+                case 'right':
+                    code = '<div class="wfpl_ri">'
+                break;
+                case 'full':
+                    code = '<div class="wfpl_fi">'
+                break;
+            }
+            code += '<div class="wfpl_i"'
+            src =
+                image.src.substr(0, image.src.length - 4)
+                + 'w'
+                + window.cke_wfpl_images[align == 'full' ? 'full_width' : 'small_width']
+                + image.src.substr(image.src.length - 4);
+            if (image.caption == '') {
+                caption = '&nbsp;';
+            } else {
+                caption = enc_html(image.caption);
+            }
+            code += ' style="background-image: url(/' + src + ');';
+            code += ' padding-top: ' + image.aspect;
+            code += '">&nbsp</div>' + caption;
+            code += '</div>'
+            CKEDITOR.dialog.getCurrent().hide();
+            CKEDITOR.currentInstance.insertElement(CKEDITOR.dom.element.createFromHtml(code));
+        }
+        CKEDITOR.plugins.add('wfpl_images', {
+            init: function (editor) {
+                var plugin_id = window.cke_wfpl_images.editors.length;
+                window.cke_wfpl_images.editors.push(editor);
+                window.cke_wfpl_images.selected.push(window.cke_wfpl_images.images.length > 0 ? 0 : null);
 
-                               editor.addCommand('wfpl_images', new CKEDITOR.dialogCommand('wfpl_images_dialog'));
-                               editor.ui.addButton('wfpl_images', {
-                                       label: 'Insert Image',
-                                       command: 'wfpl_images',
-                                       toolbar: 'insert' /* which section to put this button in */
-                               });
-                               CKEDITOR.dialog.add('wfpl_images_dialog', function (api) {
-                                       // CKEDITOR.dialog.definition
-                                       return {
-                                               title: 'Insert Image',
-                                               minWidth: 700,
-                                               minHeight: 350,
-                                               onShow: function() {
-                                                       // FIXME unselect and remove hilight
-                                                       // window.cke_wfpl_images.selected[plugin_id] = null;
-                                               },
-                                               contents: [
-                                                       {
-                                                               id: 'tab1',
-                                                               label: '?not displayed',
-                                                               expand: true,
-                                                               padding: 0,
-                                                               elements: [
-                                                                       {
-                                                                               type: 'html',
-                                                                               html: '<div class="cke_wfpl_images_dialog"><p>Note: If the image you want is not shown below, go to the control panel, then "manage images" and add it there. Next time you load an editor, you\'ll see that new image below.</p>'
-                                                                                       + '<h3>Step 1: Choose an image to insert:</h3>'
-                                                                                       + "<div class=\"cke_wfpl_thumbs\">~wfpl_images {~ <div class=\"cke_wfpl_thumb\" onclick=\"return window.cke_wfpl_images_thumb_click("+plugin_id+", this, ~id~)\" style=\"background-image: url(~image thumb_src attr jsdq~)\">~caption empty {~~name html jsdq~~}~~caption nonempty {~~caption html jsdq~~}~</div>~}~</div>"
-                                                                               + "</div>"
-                                                                       }
-                                                               ]
-                                                       }
-                                               ],
-                                               buttons: [
-                                                       {
-                                                               type: 'button',
-                                                               id: 'left',
-                                                               label: 'Insert on Left',
-                                                               className: 'cke_dialog_ui_button_ok',
-                                                               onClick: function() {
-                                                                       cke_wfpl_images_insert_click(plugin_id, 'left');
-                                                               }
-                                                       },
-                                                       {
-                                                               type: 'button',
-                                                               id: 'center',
-                                                               label: 'Insert Centered',
-                                                               className: 'cke_dialog_ui_button_ok',
-                                                               onClick: function() {
-                                                                       cke_wfpl_images_insert_click(plugin_id, 'centered');
-                                                               }
-                                                       },
-                                                       {
-                                                               type: 'button',
-                                                               id: 'right',
-                                                               label: 'Insert on Right',
-                                                               className: 'cke_dialog_ui_button_ok',
-                                                               onClick: function() {
-                                                                       cke_wfpl_images_insert_click(plugin_id, 'right');
-                                                               }
-                                                       },
-                                                       {
-                                                               type: 'button',
-                                                               id: 'full',
-                                                               label: 'Insert BIG',
-                                                               className: 'cke_dialog_ui_button_ok',
-                                                               onClick: function() {
-                                                                       cke_wfpl_images_insert_click(plugin_id, 'full');
-                                                               }
-                                                       },
-                                                       CKEDITOR.dialog.cancelButton
-                                               ],
-                                               onOk: function () {
-                                                       var image = this.getContentElement('tab1', 'image').getValue();
-                                                       if (image === null) {
-                                                               return;
-                                                       }
-                                                       editor.insertHtml('<img alt="" src="' + window.wfpl_images[image].image + '">');
-                                               }
-                                       };
-                               });
-                       }
-               });
-               function make_wysiwyg(name) {
-                       CKEDITOR.replace(name, {
-                               'contentsCss': 'style.css?m=~style.css mtime~',
-                               'allowedContent': true,
-                               'stylesSet': [
-                                       { name: 'Paragraph', element: 'p'},
-                                       { name: 'Page Headline', element: 'h1'},
-                                       { name: 'Section Headline', element: 'h2'},
-                                       { name: 'Subsection Headline', element: 'h3'},
-                                       { name: 'Tagline (under headline)', element: 'h4', attributes: { class: 'tagline'}},
-                                       { name: 'Quote', element: 'p', attributes: { class: 'quote'}},
-                                       { name: 'Quote Author', element: 'p', attributes: { class: 'attrib'}}
-                               ],
-                               'uiColor': '#ccccff',
-                               'removePlugins': 'forms,templates,smiley,pagebreak,save,newpage,preview,print',
-                               'extraPlugins': 'wfpl_images',
-                               'height': '300px',
-                               'toolbar': [
-                                       ['Source'],
-                                       ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'SpellChecker', 'Scayt'],
-                                       ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
-                                       '/',
-                                       ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript'],
-                                       ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
-                                       ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
-                                       ['Link', 'Unlink', 'Anchor'],
-                                       ['wfpl_images', 'Table', 'HorizontalRule', 'SpecialChar', 'PageBreak'],
-                                       '/',
-                                       ['Styles', 'Font', 'FontSize'],
-                                       ['TextColor', 'BGColor'],
-                                       ['Maximize', 'ShowBlocks']
-                               ]
-                       });
-               }
-       </script>
-       <!--~}~-->
+                editor.addCommand('wfpl_images', new CKEDITOR.dialogCommand('wfpl_images_dialog'));
+                editor.ui.addButton('wfpl_images', {
+                    label: 'Insert Image',
+                    command: 'wfpl_images',
+                    toolbar: 'insert'
+                });
+                CKEDITOR.dialog.add('wfpl_images_dialog', function (api) {
+                    var i, im, selected, thumbs;
+                    selected = 'selected ';
+                    thumbs = '<div class="cke_wfpl_thumbs">'
+                    for (i in window.cke_wfpl_images.images) {
+                        im = window.cke_wfpl_images.images[i];
+                        thumbs += '<div class="'+selected+'cke_wfpl_thumb" onclick="return window.cke_wfpl_images_thumb_click('+plugin_id+', this, '+im.id+')" style="background-image: url('+im.src.substr(0, im.src.length - 4) + 'w' + window.cke_wfpl_images.thumb_width + im.src.substr(im.src.length - 4) + ')">'+ enc_html(im.name.length > 0 ? im.name : im.caption) + '</div>';
+                        selected = '';
+                    }
+                    thumbs += '</div>'
+                    return {
+                        title: 'Insert Image',
+                        minWidth: 700,
+                        minHeight: 350,
+                        contents: [
+                            {
+                                expand: true,
+                                padding: 0,
+                                elements: [
+                                    {
+                                        type: 'html',
+                                        html: '<div class="cke_wfpl_images_dialog">'
+                                            + '<h3>Step 1: Choose an image to insert:</h3>'
+                                            + thumbs
+                                        + '<p>If you\'d like to insert an image not shown above, you can <a href="admin_images?new=1" target="_blank">upload it here</a>. Sorry, it won\'t appear here until you reload this editor page (hit Save below, then "edit this page" again.)</p>'
+                                        + '</div>'
+                                    }
+                                ]
+                            }
+                        ],
+                        buttons: [
+                            {
+                                type: 'button',
+                                label: 'Insert on Left',
+                                className: 'cke_dialog_ui_button_ok',
+                                onClick: function() {
+                                    cke_wfpl_images_insert_click(plugin_id, 'left');
+                                }
+                            },
+                            {
+                                type: 'button',
+                                label: 'Insert Centered',
+                                className: 'cke_dialog_ui_button_ok',
+                                onClick: function() {
+                                    cke_wfpl_images_insert_click(plugin_id, 'centered');
+                                }
+                            },
+                            {
+                                type: 'button',
+                                label: 'Insert on Right',
+                                className: 'cke_dialog_ui_button_ok',
+                                onClick: function() {
+                                    cke_wfpl_images_insert_click(plugin_id, 'right');
+                                }
+                            },
+                            {
+                                type: 'button',
+                                label: 'Insert BIG',
+                                className: 'cke_dialog_ui_button_ok',
+                                onClick: function() {
+                                    cke_wfpl_images_insert_click(plugin_id, 'full');
+                                }
+                            },
+                            CKEDITOR.dialog.cancelButton
+                        ]
+                    };
+                });
+            }
+        });
+        function make_wysiwyg(name, bodyid_postfix) {
+            CKEDITOR.replace(name, {
+                'contentsCss': 'css.css?m=~css.css mtime~',
+                'allowedContent': true,
+                bodyId: '~$basename~' + '_wysiwyg_' + (bodyid_postfix ? bodyid_postfix : name),
+                'stylesSet': [
+                    { name: 'Paragraph', element: 'p'},
+                    { name: 'Page Headline', element: 'h1'},
+                    { name: 'Section Headline', element: 'h2'},
+                    { name: 'Subsection Headline', element: 'h3'},
+                    { name: 'Tagline (under headline)', element: 'h4', attributes: { class: 'tagline'}},
+                    { name: 'Quote', element: 'p', attributes: { class: 'quote'}},
+                    { name: 'Quote Author', element: 'p', attributes: { class: 'attrib'}},
+                    { name: 'div (generic box)', element: 'div'}
+                ],
+                'uiColor': '#ccccff',
+                'removePlugins': 'forms,templates,smiley,pagebreak,save,newpage,preview,print',
+                'extraPlugins': 'wfpl_images',
+                'height': '300px',
+                'toolbar': [
+                    ['Source'],
+                    ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'SpellChecker', 'Scayt'],
+                    ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
+                    '/',
+                    ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript'],
+                    ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
+                    ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
+                    ['Link', 'Unlink', 'Anchor'],
+                    ['wfpl_images', 'Table', 'HorizontalRule', 'SpecialChar', 'PageBreak'],
+                    '/',
+                    ['Styles', 'Font', 'FontSize'],
+                    ['TextColor', 'BGColor'],
+                    ['Maximize', 'ShowBlocks']
+                ]
+            });
+        }
+        window.admin_pages_cur_layout = null
+        function admin_pages_layout(layout) {
+            if (layout === undefined) {
+                layout = document.getElementById('layout').value
+            }
+            if (typeof layout === 'string') {
+                layout = parseInt(layout);
+            }
+            if (layout === window.admin_pages_cur_layout) {
+                return;
+            }
+            // hide/show sidebar editor
+            if (layout === 0) {
+                document.getElementById('sidebar_editor').style.display = 'none'
+            } else {
+                document.getElementById('sidebar_editor').style.display = 'block'
+            }
+            // remove existing ckeditors
+            if (window.admin_pages_cur_layout !== null) {
+                for (name in CKEDITOR.instances) {
+                    CKEDITOR.instances[name].destroy();
+                }
+            }
+            // create ckeditors
+            if (layout === 0) {
+                make_wysiwyg('content', 'content_full_main');
+            } else if (layout === 1) {
+                make_wysiwyg('content', 'content_with_sidebar_main');
+                make_wysiwyg('sidebar_content', 'content_with_sidebar_sidebar_plain');
+            } else {
+                make_wysiwyg('content', 'content_with_sidebar_main');
+                make_wysiwyg('sidebar_content', 'content_with_sidebar_sidebar_bordered');
+            }
+
+            window.admin_pages_cur_layout = layout
+        }
+    </script>
+    <!--~}~-->
 
 </head>
 
 <body>
 <!--~$body show {~-->
 
-       <!--~form {~-->
-               <h2><!--~id unset {~-->Add a new page<!--~}~--><!--~id {~-->Edit page "~title html~"<!--~}~--></h2>
+    <!--~form {~-->
+        <h1>~$host~ Admin Control Panel</h1>
+
+        <h2><!--~id unset {~-->Add a new page<!--~}~--><!--~id {~-->Edit page "~title html~"<!--~}~--></h2>
+
+        <!--~archived_versions {~-->
+            <p><a href="admin_pages?history_page_id=~id~">View archived versions of this page</a></p>
+        <!--~}~-->
+
+        <form action="admin_pages" method="post"><!--~id {~--><div style="display: none"><input type="hidden" name="edit_id" value="~id attr~"></div><!--~}~-->
+
+            <div class="caption">Title</div>
+            <div class="field_notes">(This appears at the top of the page, in the window title-bar (by the close button) and as the headline/link of search engine results.)</div>
+            <div class="field"><input type="text" name="title" value="~title attr~" class="wide_field"></div>
+
+            <div class="caption">Filename</div>
+            <div class="field_notes">(<!--~editing {~-->Careful: if you change this, be sure to update all links to this page<!--~}~--><!--~editing unset {~-->Please use only a-z, 0-9 and _ (underscore) in your filename. Please, no capitals, punctuation or spaces.<!--~}~-->)</div>
+            <div class="field"><input type="text" name="filename" value="~filename attr~"></div>
+
+            <div class="caption">Show in site-wide navigation links (optional)</div>
+            <div class="field"><select name="navbar"><!--~navbar options~--></select></div>
+
+            <div class="caption">Navigation Link Text</div>
+            <div class="field_notes">(If you'd like this page to appear in the navigation with a shorter title.)</div>
+            <div class="field"><input type="text" name="nav_title" value="~nav_title attr~"></div>
 
-               <form action="admin_pages" method="post"><!--~id {~--><div style="display: none"><input type="hidden" name="edit_id" value="~id attr~"></div><!--~}~-->
+            <div class="caption">Page Template/Layout</div>
+            <div class="field"><select id="layout" name="layout" onchange="return admin_pages_layout()"><!--~layout options~--></select></div>
 
-                       <div class="caption">Title</div>
-                       <div class="field_notes">(This appears at the top of the page, in the window title-bar (by the close button) and as the headline/link of search engine results.)</div>
-                       <div class="field"><input type="text" name="title" value="~title attr~"></div>
+            <div class="caption">Page Contents</div>
+            <div class="field_notes">
+                <ul class="first">
+                    <li style="color: red; list-style: none">Please read these instructions in full:</li>
+                    <li>If you don't see an editor below (with buttons in it) then please try this page in <a href="http://getfirefox.com">Mozilla FireFox</a> or <a href="http://www.google.com/chrome/">Google Chrome</a>.</li>
+                    <li>If you're pasting from Microsoft Word, please use the "paste from word" button (looks like a clipboard with a "W").</li>
+                    <li>To make a link, type the text to be clicked, select it, click the "Link" button (looks like a short chain) and paste the web address (where the link should point to) into the "URL" field. Exception: If you're making a link to another page on this site, please remove the "http://~$host~/" from the beginning of the "URL" field and set the "Protocol" to &lt;other&gt;.</li>
+                    <li>To insert an image: place the cursor at the beginning of a line and click the "insert image" button in the editor. Note that you will only be able to insert images that you have already uploaded on the <a href="admin_images" target="_blank">manage images</a> page.</li>
+                </ul>
+            </div>
+            <div class="field"><textarea class="html_editor" rows="20" cols="50" id="content" name="content">~content html~</textarea></div>
 
-                       <div class="caption">Filename</div>
-                       <div class="field_notes">(<!--~editing {~-->Careful: if you change this, be sure to update all links to this page<!--~}~--><!--~editing unset {~-->Please use only a-z, 0-9 and _ (underscore) in your filename. Please, no capitals, punctuation or spaces.<!--~}~-->)</div>
-                       <div class="field"><input type="text" name="filename" value="~filename attr~"></div>
+            <div id="sidebar_editor" style="display: ~sidebar_editor_display~">
+                <div class="caption">Sidebar Contents</div>
+                <div class="field_notes">
+                    <ul class="first">
+                        <li>Ditto to the notes above "Page Contents" field.</li>
+                        <li>Centered images appear smaller in this editor than on the real page.</li>
+                        <li>Don't use the "Insert on Left" and "or Insert on Right" options for images inserting images in this sidebar.</li>
+                    </ul>
+                </div>
+                <div class="field"><textarea class="html_editor" rows="20" cols="50" id="sidebar_content" name="sidebar_content">~sidebar_content html~</textarea></div>
+            </div>
 
-                       <div class="caption">Show in navigation links</div>
-                       <div class="field_notes">(On the left of every page.)</div>
-                       <div class="field"><select name="navbar"><!--~navbar options~--></select></div>
+            <script>admin_pages_layout()</script>
 
-                       <div class="caption">Navigation Link Text</div>
-                       <div class="field_notes">(If you'd like this page to appear in the navigation with a shorter title.)</div>
-                       <div class="field"><input type="text" name="nav_title" value="~nav_title attr~"></div>
+            <!--
+            <div class="caption">Description</div>
+            <div class="field_notes">(Hidden description of this page, primarily for search engines.)</div>
+            <div class="field"><textarea rows="9" cols="22" name="description">~description html~</textarea></div>
 
-                       <div class="caption">Page Contents</div>
-                       <div class="field_notes">
-                               <ul class="first">
-                                       <li style="color: red; list-style: none">Please read these instructions in full:</li>
-                                       <li>If you don't see an editor below (with buttons in it) then please try this page in <a href="http://getfirefox.com">Mozilla FireFox</a> or <a href="http://www.google.com/chrome/">Google Chrome</a>.</li>
-                                       <li>If you're pasting from Microsoft Word, please use the "paste from word" button (looks like a clipboard with a "W").</li>
-                                       <li>To make a link, type the text to be clicked, select it, click the "Link" button (looks like a short chain) and paste the web address (where the link should point to) into the "URL" field. Exception: If you're making a link to another page on this site, please remove the "http://~$host~/" from the beginning of the "URL" field and set the "Protocol" to &lt;other&gt;.</li>
-                               </ul>
-                       </div>
-                       <div class="field"><textarea class="html_editor" rows="20" cols="50" id="content" name="content">~content html~</textarea><script type="text/javascript">make_wysiwyg('content');</script></div>
+            <div class="caption">Keywords</div>
+            <div class="field_notes">(Hidden words (up to 30) with commas between them for search engines)</div>
+            <div class="field"><textarea rows="9" cols="22" name="keywords">~keywords html~</textarea></div>
+            -->
 
-                       <div class="caption">Description</div>
-                       <div class="field_notes">(Hidden description of this page, primarily for search engines.)</div>
-                       <div class="field"><textarea rows="9" cols="22" name="description">~description html~</textarea></div>
+            <div class="caption">&nbsp;</div>
+            <div class="field"><input type="submit" name="save" value="Save"></div>
 
-                       <div class="caption">Keywords</div>
-                       <div class="field_notes">(Hidden words (up to 30) with commas between them for search engines)</div>
-                       <div class="field"><textarea rows="9" cols="22" name="keywords">~keywords html~</textarea></div>
+        </form>
 
-                       <div class="caption">&nbsp;</div>
-                       <div class="field"><input type="submit" name="save" value="Save"></div>
+        <div class="caption">&nbsp;</div>
+        <div class="field"><a href="~filename nonempty {~~filename attr~~}~~filename empty {~admin_pages~id {~?id=~id~~}~~}~">Cancel</a></div>
+    <!--~}~-->
 
-               </form>
+    <!--~listing {~-->
+        <h1>~$host~ Admin Control Panel</h1>
 
-               <div class="caption">&nbsp;</div>
-               <div class="field"><a href="~filename nonempty {~~filename attr~~}~~filename empty {~admin_pages~id {~?id=~id~~}~~}~">Cancel</a></div>
-       <!--~}~-->
+        <h2>Manage Pages</h2>
 
-       <!--~listings once {~-->
-               <!--~listings once_if {~-->
-                       <p><a href="admin_pages?new=1">[Add a new page]</a></p>
+        <table cellspacing="0" cellpadding="4" border="0" summary="" class="evenodd">
+            <tr>
+                <td><em>(new)</em></td>
+                <td>
+                    <form style="display: inline-block" action="admin_pages"><input type="hidden" name="new" value="1"><input type="submit" value="create"></form>
+                </td>
+            </tr>
+            <!--~no_home {~-->
+                <tr>
+                    <td><em>(home page)</em></td>
+                    <td>
+                        <form style="display: inline-block" action="admin_pages">
+                            <input type="hidden" name="new" value="1">
+                            <input type="hidden" name="new_filename" value="index">
+                            <input type="submit" value="create"></form>
+                    </td>
+                </tr>
+            <!--~}~-->
+            <!--~rows {~-->
+            <tr>
+                <td>~title html~<!--~title empty {~--><em>(untitled)</em><!--~}~--></td>
+                <td>
+                    <form style="display: inline-block" action="admin_pages"><input type="hidden" name="edit_id" value="~id~"><input type="submit" value="edit"></form>
+                    <form style="display: inline-block" action="admin_pages"><input type="hidden" name="history_page_id" value="~id~"><input type="submit" value="history"></form>
+                    <form style="display: inline-block" action="admin_pages" onsubmit="return confirm('Permanently delete?')"><input type="hidden" name="admin_pages_delete_id" value="~id~"><input type="submit" value="delete"></form>
+                </td>
+            </tr><!--~}~-->
 
-                       <table cellspacing="0" cellpadding="4" border="1" summary="">
-                               <tr><th>Title</th><th>Filename</th><th>&nbsp;</th></tr>
-                               <!--~listings {~-->
-                               <tr>
-                                       <td class="listing"><a href="admin_pages?edit_id=~id~">~title html~<!--~title empty {~--><em>(untitled)</em><!--~}~--></a></td>
-                                       <td class="listing"><a href="admin_pages?edit_id=~id~">~filename html~<!--~filename empty {~--><em>(offline)</em><!--~}~--></a></td>
-                                       <td><a href="admin_pages?admin_pages_delete_id=~id~" onclick="return confirm('Permanently delete?')">[delete this page]</a></td>
-                               </tr>
-                               <!--~}~-->
+        </table>
+    <!--~}~-->
+    <!--~page_history {~-->
+        <h1>~$host~ Admin Control Panel</h1>
 
-                       </table>
-               <!--~}~-->
-               <!--~listings once_else {~-->
-                       <p>No pages in database.</p>
-               <!--~}~-->
+        <h2>Edit history for page "~title html~"</h2>
 
-               <p><a href="admin_pages?new=1">[Add a new page]</a></p>
-       <!--~}~-->
+        <!--~rows once_else {~-->
+            <p>There are no archived versions of this page.</p>
+        <!--~}~-->
+        <!--~rows once_if {~-->
+            <table cellspacing="0" cellpadding="4" border="0" summary="" class="evenodd">
+                <tr>
+                    <th>title</th>
+                    <th>saved at</th>
+                    <th>by</th>
+                    <th></th>
+                </tr>
+                <!--~rows {~-->
+                    <tr>
+                        <td>~title html~<!--~title empty {~--><em>(untitled)</em><!--~}~--></td>
+                        <td class="timestamp">~timestamp~</td>
+                        <td>~who html~</td>
+                        <td>
+                            <!--~first {~-->
+                                <!--~filename nonempty {~-->
+                                    <form style="display: inline-block" action="~filename attr~"><input type="submit" value="view"></form>
+                                <!--~}~-->
+                                <!--~filename empty {~-->
+                                    <form style="display: inline-block" action="admin_pages"><input type="hidden" name="id" value="~page_id~"><input type="submit" value="view"></form>
+                                <!--~}~-->
+                            <!--~}~-->
+                            <!--~first unset {~-->
+                                <form style="display: inline-block" action="admin_pages"><input type="hidden" name="history_id" value="~history_id~"><input type="submit" value="view"></form>
+                            <!--~}~-->
+                        </td>
+                    </tr>
+                <!--~}~-->
+                <script>
+                    (function () {
+                        var i, i02, d, hours, el, els
+                        i02 = function (i) { return i > 9 ? i : '0' + i }
+                        els = document.getElementsByClassName('timestamp');
+                        for (i = 0; i < els.length; ++i) {
+                            el = els[i]
+                            d = new Date(parseInt(el.innerText) * 1000)
+                            hours = d.getHours();
+                            el.innerText =
+                                i02(d.getMonth() + 1) + '/' +
+                                i02(d.getDate()) + '/' +
+                                d.getFullYear() + ' ' +
+                                i02((hours + 11) % 12 + 1) + ':' +
+                                i02(d.getMinutes()) + '' +
+                                (hours < 12 ? 'am' : 'pm')
+                        }
+                    })();
+                </script>
+            </table>
+        <!--~}~-->
+    <!--~}~-->
 <!--~}~-->
 </body>
 </html>