dynamic tab interface

classes/partials/options-admin.inc

@@ -39,3 +39,38 @@
 		<?php do_action('comicpress-options-admin') ?>
 	</form>
 </div>
+<script type="text/javascript">
+	(function() {
+		var tab_holder = new Element('div', { className: 'comicpress-tab-holder' });
+		$$('.comicpress-admin > h2').pop().insert({after: tab_holder});
+
+		var show_tab = function(which) {
+			tab_holder.childElements().each(function(t) {
+				var is_same = (t.id == which);
+				t[is_same ? 'addClassName' : 'removeClassName']('active');
+				$('comicpress-' + t.id.replace(/^comicpress-tab-/, ''))[is_same ? 'show' : 'hide']();
+			});
+		};
+
+		$$('.comicpress-admin > form > h3').each(function(t) {
+			var id_suffix = t.innerHTML.replace(/\s+/g, '_');
+			var holder = new Element("div", { className: 'comicpress-admin-section', id: 'comicpress-' + id_suffix });
+			t.insert({before: holder});
+
+			holder.insert(t.next().remove());
+			holder.insert({top: t.remove()});
+
+			var tab = new Element("a", { href: "#", id: 'comicpress-tab-' + id_suffix }).update(t.innerHTML);
+			tab_holder.insert(tab);
+
+			tab.observe('click', function(e) {
+				Event.stop(e);
+				show_tab(e.target.id)
+			});
+		});
+
+		tab_holder.childElements().pop().addClassName('last');
+
+		show_tab(tab_holder.childElements().shift().id);
+	}());
+</script>

css/cp-admin.css

@@ -231,3 +231,31 @@ tr.highlighted td {
   margin: inherit;
   padding: inherit
 }
+
+/* Options */
+
+.comicpress-tab-holder {
+	padding: 2px 0
+}
+
+.comicpress-tab-holder a {
+	padding: 5px;
+	background-color: #aaa;
+	font-size: 10px;
+	border-color: black;
+	border-style: solid;
+	border-width: 1px 0 0 1px;
+}
+
+.comicpress-tab-holder a.last {
+	border-right-width: 1px;
+}
+
+.comicpress-tab-holder a.active {
+	background-color: white
+}
+
+.comicpress-admin form {
+	border: solid black 1px;
+	padding: 0 10px 10px;
+}