Add tab structure to the developer panel

webapp/web/css/developer/developerPanel.css

@@ -46,3 +46,28 @@ div.developer input[type="text"]:disabled {
 div.developer a {
 	margin: 3px;
 }
+
+#developerPanelBody ul.ui-tabs-nav li a {
+	padding: 0em 1em;
+}
+
+#developerPanelBody .ui-widget-header {
+	background-image: none;
+	background-color: #CC9900;
+}
+
+#developerPanelBody .ui-widget-content {
+	background-image: none;
+	background-color: #f7dd8a;
+}
+
+#developerPanelBody .ui-widget-header .ui-state-default {
+	background-image: none;
+	background-color: #f7cc33;
+}
+
+#developerPanelBody .ui-widget-header li.ui-state-active {
+	background-image: none;
+	background-color: #f7dd8a;
+}
+

webapp/web/js/developer/developerPanel.js

@@ -14,6 +14,7 @@ function DeveloperPanel(developerAjaxUrl) {
 	        		enablePanelOpener();
 	        		addBehaviorToElements();
 	        		updateDisabledFields();
+	        		initializeTabs();
 	        	}
 	        }
 	    });
@@ -55,6 +56,10 @@ function DeveloperPanel(developerAjaxUrl) {
 		document.getElementById("developer_loggingRDFService_stackRestriction").disabled = !rdfServiceEnabled;
 	}
 
+    function initializeTabs() {
+        $("#developerTabs").tabs();
+    }
+    
 	function collectFormData() {
 		var data = new Object();
 		getCheckbox("developer_enabled", data);
@@ -82,9 +87,14 @@ function DeveloperPanel(developerAjaxUrl) {
 }	
 
 /*
- * Relies on the global variable for the AJAX URL.
+ * Relies on the global variables for the AJAX URL and the CSS files.
  */
 $(document).ready(function() {   
+	$.each(developerCssLinks, function(index, value){
+        var cssLink = $("<link rel='stylesheet' type='text/css' href='" + value + "'>");
+        $("head").append(cssLink); 
+    });	
+
 	new DeveloperPanel(developerAjaxUrl).setupDeveloperPanel({});	
 }); 
 

webapp/web/templates/freemarker/page/partials/developer.ftl

@@ -1,6 +1,9 @@
 <#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
 
 <div id="developerPanel" > </div>
-<script>developerAjaxUrl = '${urls.developerAjax}'</script>
+<script>
+    developerAjaxUrl = '${urls.developerAjax}'
+    developerCssLinks = ["${urls.base}/css/developer/developerPanel.css", "${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.8.9.custom.css"]
+</script>
 ${scripts.add('<script type="text/javascript" src="${urls.base}/js/developer/developerPanel.js"></script>')}   
-<link rel="stylesheet" href="${urls.base}/css/developer/developerPanel.css" />
+${scripts.add('<script type="text/javascript" src="${urls.base}/js/jquery-ui/js/jquery-ui-1.8.9.custom.min.js"></script>')}   

webapp/web/templates/freemarker/page/partials/developerPanel.ftl

@@ -31,6 +31,13 @@
 				</label>
 			</div>
 			
+			<div id="developerTabs">
+				<ul>
+					<li><a href="#developerTabGeneral"><span>General</span></a></li>
+					<li><a href="#developerTabAuthorization"><span>Authorization</span></a></li>
+				</ul>
+			
+				<div id="developerTabGeneral">
 					<div class="devright">
 						<div class="container">
 							Page configuration
@@ -102,6 +109,13 @@
 							</div>
 						</div>
 					</div>
+				</div>
+				
+				<div id="developerTabAuthorization">
+					Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+					Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
+				</div>
+			</div>
 
 			<div>
 				<input type="button" id="developerPanelSaveButton" value="Save Settings" name="foo" />