Split the config / options page into tabs based on Category.

Still a lot of work to do such as displaying the proper input
type based on option, however basic tabbing and saving works,
as does the on-hover tooltip (I think I put that in this commit).

web/app/Controller/ConfigController.php

@@ -2,9 +2,21 @@
 	class ConfigController extends AppController {
   
 		public function index() {
-			$configs['fields'] = array('Name', 'Id',  'Value', 'Prompt', 'Type');
-			$configs['order'] = array('Config.Category ASC');
-			$this->set('configs', $this->Config->find('all', $configs));
+			// Get a list of categories
+			$categories = $this->Config->find('all', array('fields' => array('Category'), 'group' => array('Category')));
+			$this->set('categories', $categories);
+
+			// Build an array of categories with each child option under that category
+			$options = array();
+			foreach ($categories as $category) {
+				$name = $category['Config']['Category'];
+				$configs = $this->Config->findAllByCategory($name,
+				   	array('Name', 'Id',  'Value', 'Prompt', 'Type', 'Category'));
+				$options[$name] = $configs;
+			}
+
+			// Pass the completed array to the view
+			$this->set('options', $options);
 
 			if (!empty($this->request->data)) {
 				$data = array();

web/app/View/Config/index.ctp

@@ -1,21 +1,34 @@
-<h2>Configs</h2>
-<?php
-  echo $this->Form->create('Config', array(
+<?php echo $this->Form->create('Config', array(
     'url' => '/config',
     'novalidate' => true
-  ));
-   foreach ($configs as $config):
-	$id = $config['Config']['Id'];
-	$inputname = 'Config.' . $id . '.' . $config['Config']['Name'];
-	 echo $this->Form->input($inputname, array(
-		'default' => $config['Config']['Value'],
-		'label' => $config['Config']['Name'],
-         	'after' => $config['Config']['Prompt'],
-	));
-	echo "\n";
-    endforeach;
-    unset($config);
-  echo $this->Form->end('Save Config'); 
+)); ?>
 
+<div id="tabs">
+<ul>
+<?php
+foreach ($categories as $key => $value) {
+	$category = $value['Config']['Category'];
+	echo '<li><a href="#tabs-'.$category.'">' . $category . '</a></li>';
+}
 ?>
-</table>
+</ul>
+
+<?php
+foreach ($options as $option => $value) {
+	echo "<div id=\"tabs-$option\">";
+	foreach ($value as $val) {
+		$id = $val['Config']['Id'];
+		$inputname = 'Config.' . $id . '.' . $val['Config']['Name'];
+		echo $this->Form->input($inputname, array(
+			'default' => $val['Config']['Value'],
+			'label' => $val['Config']['Name'],
+			'title' => $val['Config']['Prompt']
+		));
+		echo "\n";
+	}
+	echo "</div>"; // End each category div
+}
+?>
+</div> <!-- End the tabs div -->
+
+<? echo $this->Form->end('Save Config'); ?>

web/app/View/Layouts/default.ctp

@@ -39,6 +39,7 @@ $cakeDescription = __d('cake_dev', 'CakePHP: the rapid development php framework
     echo $this->Html->script('jquery-2.0.1.min');
     echo $this->Html->script('jquery-ui.min');
     echo $this->Html->script('events.js');
+    echo $this->Html->script('config.js');
     echo $this->Js->writeBuffer();
 	?>
 </head>

web/app/webroot/js/config.js

@@ -0,0 +1,4 @@
+$(document).ready(function() {
+	$("#tabs").tabs();
+	$(document).tooltip({ track:true });
+});