Version 1.0 (beta 1) done

source/css/main.css

@@ -116,6 +116,6 @@ body.searching .tab-content {
     display: none !important;
 }
 
-body.searching #search-results {
+body.searching #search-result-container {
     display: block !important;
 }

source/css/setting.css

@@ -54,7 +54,7 @@
 }
 
 .setting.element.description {
-    color: #666666;
+    color: #555555;
 }
 
 .setting.element.slider {
@@ -69,7 +69,7 @@
 }
 
 #nothing-found {
-    position: relative;
-    font-size: 20px;
     display: none;
+    margin-top: 10px;
+    font-size: 18px;
 }

source/index.html

@@ -16,8 +16,8 @@
         <link rel="stylesheet" href="css/setting.css" media="screen">
 
         <!-- JavaScripts -->
-        <script src="lib/store.js"></script>
         <script src="lib/mootools-core.js"></script>
+        <script src="lib/store.js"></script>
         <script src="js/classes/tab.js"></script>
         <script src="js/classes/setting.js"></script>
         <script src="js/classes/search.js"></script>

source/manifest.json

@@ -1,10 +1,4 @@
 // SAMPLE MANIFEST
-// (learn by reading...)
-//
-// A manifest can get rather complex(-looking),
-// so you might wanna consider specifing
-// your settings manually in the settings.js
-// file. Sample is included.
 //
 // Even if you choose to use the manifest file,
 // you can manually customize the settings.

source/settings.js

@@ -1,38 +1,42 @@
 window.addEvent("domready", function () {
     // Option 1: Use the manifest:
+    /*
     new FancySettings.initWithManifest("manifest.json", function (settings) {
         settings.manifestOutput.button1.addEvent("action", function () {
             alert("hello, here i am");
         });
     });
+    */
 
-    /*
-    var f = new FancySettings("TEST", "icon.png");
-    f.create({
-        "name": "test",
-        "type": "text",
-        "tab": "Tab 1",
-        "group": "Group 1",
-        "text": "Drück mich sanft",
-        "label": "Hier:"
+    // Option 2: Do everything manually:
+    var settings = new FancySettings("My Extension", "icon.png");
+
+    var checkbox1 = settings.create({
+        "tab": "tabName",
+        "group": "groupName",
+        "type": "checkbox",
+        "name": "checkbox1",
+        "label": "Enable this"
     });
-    f.create({
+
+    settings.create({
+        "tab": "tabName",
+        "group": "groupName",
         "type": "button",
+        "label": "Press me softly:",
+        "text": "Right Here"
+    });
+
+    settings.create({
         "tab": "Tab 2",
-        "group": "Group 2",
-        "text": "mich auch"
+        "group": "Some Grop",
+        "type": "text",
+        "masked": true,
+        "text": "6 - 12 characters",
+        "label": "Enter password:"
     });
 
-    // Option 2: Do everything manually:
-    // ---------------------------------
-    // var settings = new FancySettings("My Extension");
-    // 
-    // var checkbox1 = settings.create("tabName", "groupName", "checkbox", {
-    //     "name": "checkbox1",
-    //     "label": "Enable this"
-    // });
-    // 
-    // checkbox1.addEvent("action", function (value) {
-    //     alert("you toggled me: " + value);
-    // });*/
+    checkbox1.addEvent("action", function (value) {
+        alert("you toggled me: " + value);
+    });
 });