From 87d0b4d1aa49deb33c39558b8a44dfda192fa674 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Ple=C3=9F?= <lucas@xleave.de>
Date: Sat, 29 Dec 2012 00:04:06 +0100
Subject: [PATCH] included badboys buttons

---
 nodeartnet/.idea/workspace.xml     | 168 ++++++++++++++++++-------
 nodeartnet/bootstrap/css/style.css |  61 ++++++++++
 nodeartnet/index.html              | 189 +++++++++++++++++++++++++++--
 3 files changed, 365 insertions(+), 53 deletions(-)
 create mode 100644 nodeartnet/bootstrap/css/style.css

diff --git a/nodeartnet/.idea/workspace.xml b/nodeartnet/.idea/workspace.xml
index 4a3c3ee..3276e99 100644
--- a/nodeartnet/.idea/workspace.xml
+++ b/nodeartnet/.idea/workspace.xml
@@ -1,12 +1,17 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ChangeListManager">
-    <list default="true" id="72d93b4a-de8e-43f1-9d4b-34713e827c14" name="Default" comment="" />
+    <list default="true" id="72d93b4a-de8e-43f1-9d4b-34713e827c14" name="Default" comment="">
+      <change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/bootstrap/css/style.css" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/index.html" afterPath="$PROJECT_DIR$/index.html" />
+      <change type="MODIFICATION" beforePath="$PROJECT_DIR$/.idea/workspace.xml" afterPath="$PROJECT_DIR$/.idea/workspace.xml" />
+    </list>
     <ignored path="nodeartnet.iws" />
     <ignored path=".idea/workspace.xml" />
     <file path="$PROJECT_DIR$/../hackcentercontrol/app.js" changelist="72d93b4a-de8e-43f1-9d4b-34713e827c14" time="1356729852724" ignored="false" />
     <file path="/app.js" changelist="72d93b4a-de8e-43f1-9d4b-34713e827c14" time="1356732858583" ignored="false" />
-    <file path="/index.html" changelist="72d93b4a-de8e-43f1-9d4b-34713e827c14" time="1356732719044" ignored="false" />
+    <file path="/index.html" changelist="72d93b4a-de8e-43f1-9d4b-34713e827c14" time="1356735773223" ignored="false" />
+    <file path="/Dummy.txt" changelist="72d93b4a-de8e-43f1-9d4b-34713e827c14" time="1356735801846" ignored="false" />
     <option name="TRACKING_ENABLED" value="true" />
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -69,7 +74,7 @@
       <file leaf-file-name="app.js" pinned="false" current="true" current-in-tab="true">
         <entry file="file://$PROJECT_DIR$/app.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state line="43" column="31" selection-start="1224" selection-end="1224" vertical-scroll-proportion="0.8895435">
+            <state line="15" column="10" selection-start="455" selection-end="455" vertical-scroll-proportion="-0.20357941">
               <folding />
             </state>
           </provider>
@@ -78,7 +83,18 @@
       <file leaf-file-name="index.html" pinned="false" current="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/index.html">
           <provider selected="true" editor-type-id="text-editor">
-            <state line="24" column="96" selection-start="672" selection-end="672" vertical-scroll-proportion="-7.5">
+            <state line="197" column="101" selection-start="9117" selection-end="9117" vertical-scroll-proportion="-6.875">
+              <folding>
+                <element signature="n#style#0;n#br#0;n#body#0;n#html#0;n#!!top" expanded="true" />
+              </folding>
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file leaf-file-name="style.css" pinned="false" current="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/bootstrap/css/style.css">
+          <provider selected="true" editor-type-id="text-editor">
+            <state line="61" column="0" selection-start="888" selection-end="888" vertical-scroll-proportion="0.0">
               <folding />
             </state>
           </provider>
@@ -91,20 +107,30 @@
       <setting name="OPEN_NEW_TAB" value="false" />
     </FindUsagesManager>
   </component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$/.." />
+  </component>
+  <component name="GitLogSettings">
+    <option name="myDateState">
+      <MyDateState />
+    </option>
+  </component>
   <component name="IdeDocumentHistory">
     <option name="changedFiles">
       <list>
-        <option value="$PROJECT_DIR$/index.html" />
+        <option value="$PROJECT_DIR$/bootstrap/css/screen.css" />
         <option value="$PROJECT_DIR$/app.js" />
+        <option value="$PROJECT_DIR$/index.html" />
       </list>
     </option>
   </component>
   <component name="ProjectFrameBounds">
+    <option name="x" value="-4" />
     <option name="y" value="25" />
-    <option name="width" value="1600" />
-    <option name="height" value="850" />
+    <option name="width" value="1608" />
+    <option name="height" value="853" />
   </component>
-  <component name="ProjectLevelVcsManager" settingsEditedManually="false">
+  <component name="ProjectLevelVcsManager" settingsEditedManually="true">
     <OptionsSetting value="true" id="Add" />
     <OptionsSetting value="true" id="Remove" />
     <OptionsSetting value="true" id="Checkout" />
@@ -130,6 +156,8 @@
       <sortByType />
     </navigator>
     <panes>
+      <pane id="Scope" />
+      <pane id="PackagesPane" />
       <pane id="ProjectPane">
         <subPane>
           <PATH>
@@ -180,10 +208,26 @@
               <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
             </PATH_ELEMENT>
           </PATH>
+          <PATH>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="nodeartnet" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
+            </PATH_ELEMENT>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="nodeartnet" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
+            </PATH_ELEMENT>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="bootstrap" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
+            </PATH_ELEMENT>
+            <PATH_ELEMENT>
+              <option name="myItemId" value="css" />
+              <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
+            </PATH_ELEMENT>
+          </PATH>
         </subPane>
       </pane>
-      <pane id="PackagesPane" />
-      <pane id="Scope" />
     </panes>
   </component>
   <component name="PropertiesComponent">
@@ -191,6 +235,7 @@
     <property name="GoToClass.toSaveIncludeLibraries" value="false" />
     <property name="WebServerToolWindowFactoryState" value="false" />
     <property name="MemberChooser.sorted" value="false" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$" />
     <property name="MemberChooser.showClasses" value="true" />
     <property name="GoToClass.includeLibraries" value="false" />
     <property name="MemberChooser.copyJavadoc" value="false" />
@@ -210,19 +255,6 @@
       <option name="PORT" value="5005" />
       <method />
     </configuration>
-    <configuration default="true" type="Applet" factoryName="Applet">
-      <module name="" />
-      <option name="MAIN_CLASS_NAME" />
-      <option name="HTML_FILE_NAME" />
-      <option name="HTML_USED" value="false" />
-      <option name="WIDTH" value="400" />
-      <option name="HEIGHT" value="300" />
-      <option name="POLICY_FILE" value="$APPLICATION_HOME_DIR$/bin/appletviewer.policy" />
-      <option name="VM_PARAMETERS" />
-      <option name="ALTERNATIVE_JRE_PATH_ENABLED" value="false" />
-      <option name="ALTERNATIVE_JRE_PATH" />
-      <method />
-    </configuration>
     <configuration default="true" type="TestNG" factoryName="TestNG">
       <extension name="coverage" enabled="false" merge="false" sample_coverage="true" runner="idea" />
       <module name="" />
@@ -251,6 +283,19 @@
       <listeners />
       <method />
     </configuration>
+    <configuration default="true" type="Applet" factoryName="Applet">
+      <module name="" />
+      <option name="MAIN_CLASS_NAME" />
+      <option name="HTML_FILE_NAME" />
+      <option name="HTML_USED" value="false" />
+      <option name="WIDTH" value="400" />
+      <option name="HEIGHT" value="300" />
+      <option name="POLICY_FILE" value="$APPLICATION_HOME_DIR$/bin/appletviewer.policy" />
+      <option name="VM_PARAMETERS" />
+      <option name="ALTERNATIVE_JRE_PATH_ENABLED" value="false" />
+      <option name="ALTERNATIVE_JRE_PATH" />
+      <method />
+    </configuration>
     <configuration default="true" type="Application" factoryName="Application">
       <extension name="coverage" enabled="false" merge="false" sample_coverage="true" runner="idea" />
       <option name="MAIN_CLASS_NAME" />
@@ -294,6 +339,24 @@
     </configuration>
   </component>
   <component name="ShelveChangesManager" show_recycled="false" />
+  <component name="SvnConfiguration" maxAnnotateRevisions="500" myUseAcceleration="nothing" myAutoUpdateAfterCommit="false" cleanupOnStartRun="false">
+    <option name="USER" value="" />
+    <option name="PASSWORD" value="" />
+    <option name="mySSHConnectionTimeout" value="30000" />
+    <option name="mySSHReadTimeout" value="30000" />
+    <option name="LAST_MERGED_REVISION" />
+    <option name="MERGE_DRY_RUN" value="false" />
+    <option name="MERGE_DIFF_USE_ANCESTRY" value="true" />
+    <option name="UPDATE_LOCK_ON_DEMAND" value="false" />
+    <option name="IGNORE_SPACES_IN_MERGE" value="false" />
+    <option name="DETECT_NESTED_COPIES" value="true" />
+    <option name="CHECK_NESTED_FOR_QUICK_MERGE" value="false" />
+    <option name="IGNORE_SPACES_IN_ANNOTATE" value="true" />
+    <option name="SHOW_MERGE_SOURCES_IN_ANNOTATE" value="true" />
+    <option name="FORCE_UPDATE" value="false" />
+    <option name="IGNORE_EXTERNALS" value="false" />
+    <myIsUseDefaultProxy>false</myIsUseDefaultProxy>
+  </component>
   <component name="TaskManager">
     <task active="true" id="Default" summary="Default task">
       <changelist id="72d93b4a-de8e-43f1-9d4b-34713e827c14" name="Default" comment="" />
@@ -303,29 +366,29 @@
     <servers />
   </component>
   <component name="ToolWindowManager">
-    <frame x="0" y="25" width="1600" height="850" extended-state="6" />
-    <editor active="true" />
+    <frame x="-4" y="25" width="1608" height="853" extended-state="6" />
+    <editor active="false" />
     <layout>
-      <window_info id="Changes" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
-      <window_info id="Palette" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
+      <window_info id="Changes" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" weight="0.3286119" sideWeight="0.497426" order="7" side_tool="false" content_ui="tabs" />
+      <window_info id="Palette" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
       <window_info id="Ant Build" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
-      <window_info id="Database" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
+      <window_info id="Database" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
       <window_info id="Debug" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.4" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
-      <window_info id="Event Log" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="-1" side_tool="true" content_ui="tabs" />
-      <window_info id="Favorites" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="-1" side_tool="true" content_ui="tabs" />
-      <window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
+      <window_info id="Event Log" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" weight="0.3286119" sideWeight="0.4980695" order="7" side_tool="true" content_ui="tabs" />
+      <window_info id="Favorites" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="2" side_tool="true" content_ui="tabs" />
+      <window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
       <window_info id="TODO" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="6" side_tool="false" content_ui="tabs" />
       <window_info id="Structure" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.25" sideWeight="0.5" order="1" side_tool="true" content_ui="tabs" />
-      <window_info id="Maven Projects" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
+      <window_info id="Maven Projects" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
       <window_info id="Commander" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.4" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
-      <window_info id="Application Servers" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
-      <window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" weight="0.24967825" sideWeight="0.5" order="0" side_tool="false" content_ui="combo" />
+      <window_info id="Application Servers" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
+      <window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" weight="0.24967825" sideWeight="0.6713881" order="0" side_tool="false" content_ui="combo" />
       <window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" />
       <window_info id="Cvs" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.25" sideWeight="0.5" order="4" side_tool="false" content_ui="tabs" />
       <window_info id="Message" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
       <window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
-      <window_info id="Inspection" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.4" sideWeight="0.5" order="5" side_tool="false" content_ui="tabs" />
       <window_info id="Hierarchy" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.25" sideWeight="0.5" order="2" side_tool="false" content_ui="combo" />
+      <window_info id="Inspection" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.4" sideWeight="0.5" order="5" side_tool="false" content_ui="tabs" />
     </layout>
   </component>
   <component name="VcsContentAnnotationSettings">
@@ -384,25 +447,46 @@
     <breakpoint-manager />
   </component>
   <component name="editorHistoryManager">
-    <entry file="file://$PROJECT_DIR$/bootstrap/js/jquery-1.8.3.min.js">
+    <entry file="file://$PROJECT_DIR$/app.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state line="0" column="0" selection-start="0" selection-end="0" vertical-scroll-proportion="0.0">
-          <folding>
-            <element signature="n#!!doc" expanded="true" />
-          </folding>
+        <state line="43" column="31" selection-start="1224" selection-end="1224" vertical-scroll-proportion="0.0">
+          <folding />
         </state>
       </provider>
     </entry>
     <entry file="file://$PROJECT_DIR$/index.html">
       <provider selected="true" editor-type-id="text-editor">
-        <state line="24" column="96" selection-start="672" selection-end="672" vertical-scroll-proportion="-7.5">
+        <state line="24" column="96" selection-start="672" selection-end="672" vertical-scroll-proportion="0.0">
+          <folding>
+            <element signature="n#style#0;n#br#0;n#body#0;n#html#0;n#!!top" expanded="true" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/bootstrap/js/jquery-1.8.3.min.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state line="0" column="0" selection-start="0" selection-end="0" vertical-scroll-proportion="0.0" />
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/bootstrap/css/style.css">
+      <provider selected="true" editor-type-id="text-editor">
+        <state line="61" column="0" selection-start="888" selection-end="888" vertical-scroll-proportion="0.0">
           <folding />
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/index.html">
+      <provider selected="true" editor-type-id="text-editor">
+        <state line="197" column="101" selection-start="9117" selection-end="9117" vertical-scroll-proportion="-6.875">
+          <folding>
+            <element signature="n#style#0;n#br#0;n#body#0;n#html#0;n#!!top" expanded="true" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
     <entry file="file://$PROJECT_DIR$/app.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state line="43" column="31" selection-start="1224" selection-end="1224" vertical-scroll-proportion="0.8895435">
+        <state line="15" column="10" selection-start="455" selection-end="455" vertical-scroll-proportion="-0.20357941">
           <folding />
         </state>
       </provider>
diff --git a/nodeartnet/bootstrap/css/style.css b/nodeartnet/bootstrap/css/style.css
new file mode 100644
index 0000000..8509594
--- /dev/null
+++ b/nodeartnet/bootstrap/css/style.css
@@ -0,0 +1,61 @@
+.row {
+    margin-left: 0;
+}
+.left {
+    float: left;
+}
+.container {
+    padding: 5px;
+}
+.right {
+    display: inline-block;
+    border: 1px solid black;
+    width: 100px;
+    height: 600px;
+    margin: 10px;
+    margin-left: 0px;
+}
+.span3 {
+    border: 1px solid black;
+    margin: 5px;
+    width: 250px;
+    height: 150px;
+}
+.spansmall {
+    width: 100px;
+}
+
+.spansmall .btn-group {
+    padding-left: 9px;
+}
+
+.bottom {
+    border: 1px solid black;
+    margin-left: 0;
+}
+.bottom input[type=range] {
+    width: 900px;
+}
+
+.farright {
+    width: 250px;
+}
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+    .farright {
+        width: 100px;
+    }
+    .right input[type=range] {
+        -webkit-appearance: slider-vertical;
+        height: 600px;
+        width: 30px;
+    }
+}
+
+.btn-group {
+    padding: 10px;
+    padding-left: 50px;
+}
+
+.btn-group + .btn-group {
+    margin-left: 0;
+}
diff --git a/nodeartnet/index.html b/nodeartnet/index.html
index c21c3d2..7d13106 100644
--- a/nodeartnet/index.html
+++ b/nodeartnet/index.html
@@ -4,6 +4,7 @@
 		<title>Bootstrap 101 Template</title>
 		<!-- Bootstrap -->
 		<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
+        <link href="css/style.css" rel="stylesheet" media="screen">
 		<style type="text/css">
 		  body { margin: 20px; }
 			.kasten {
@@ -17,23 +18,184 @@
         <script src="js/jquery-1.8.3.min.js"></script>
 	</head>
 	<body>
-
-
+    <div class="container left">
         <div class="row">
-            <div class="span4 kasten" id="wabe1" data-channel="/2/multitoggle/1/1" data-value="1">
+            <div class="span3">
+                <div class="btn-group wabe-1-1-red" data-channel="/2/multitoggle/1/1">
+                    <button class="btn btn-success">on</button>
+                    <button class="btn btn-danger">off</button>
+                </div>
+                <div class="btn-group wabe-1-1-green" data-channel="/2/multitoggle/2/1">
+                    <button class="btn btn-success">on</button>
+                    <button class="btn btn-danger">off</button>
+                </div>
+                <div class="btn-group wabe-1-1-blue" data-channel="/2/multitoggle/1/2">
+                    <button class="btn btn-success">on</button>
+                    <button class="btn btn-danger">off</button>
+                </div>
             </div>
-            <div class="span4 kasten" id="wabe2" data-channel="/2/multitoggle/1/1" data-value="0">
+            <div class="span3 spansmall">
+                <div class="btn-group wabe-2-1-red" data-channel="/2/multitoggle/1/16">
+                    <button class="btn btn-success">on</button>
+                    <button class="btn btn-danger">off</button>
+                </div>
             </div>
-            <div class="span4 kasten" id="wabe3" data-channel="/2/multitoggle/1/2">
+            <div class="span3">
+                <div class="btn-group wabe-3-1-red" data-channel="/2/multitoggle/3/1">
+                    <button class="btn btn-success">on</button>
+                    <button class="btn btn-danger">off</button>
+                </div>
+                <div class="btn-group wabe-3-1-green" data-channel="/2/multitoggle/4/1">
+                    <button class="btn btn-success">on</button>
+                    <button class="btn btn-danger">off</button>
+                </div>
+                <div class="btn-group wabe-3-1-blue" data-channel="/2/multitoggle/3/2">
+                    <button class="btn btn-success">on</button>
+                    <button class="btn btn-danger">off</button>
+                </div>
+            </div>
+            <div class="span3">
+                <div class="btn-group wabe-4-1-red" data-channel="/2/multitoggle/5/1">
+                    <button class="btn btn-success">on</button>
+                    <button class="btn btn-danger">off</button>
+                </div>
+                <div class="btn-group wabe-4-1-green" data-channel="/2/multitoggle/6/1">
+                    <button class="btn btn-success">on</button>
+                    <button class="btn btn-danger">off</button>
+                </div>
+                <div class="btn-group wabe-4-1-blue" data-channel="/2/multitoggle/5/2">
+                    <button class="btn btn-success">on</button>
+                    <button class="btn btn-danger">off</button>
+                </div>
             </div>
         </div>
+        <div class="row">
+            <div class="span3">
+                <div class="btn-group wabe-4-1-red" data-channel="/2/multitoggle/1/3">
+                    <button class="btn btn-success">on</button>
+                    <button class="btn btn-danger">off</button>
+                </div>
+                <div class="btn-group wabe-4-1-green" data-channel="/2/multitoggle/2/3">
+                    <button class="btn btn-success">on</button>
+                    <button class="btn btn-danger">off</button>
+                </div>
+                <div class="btn-group wabe-4-1-blue" data-channel="/2/multitoggle/1/4">
+                    <button class="btn btn-success">on</button>
+                    <button class="btn btn-danger">off</button>
+                </div>
+            </div>
+            <div class="span3 spansmall">
+                <div class="btn-group wabe-2-1-red" data-channel="/2/multitoggle/2/16">
+                    <button class="btn btn-success">on</button>
+                    <button class="btn btn-danger">off</button>
+                </div>
+            </div>
+            <div class="span3">
+                <div class="btn-group wabe-4-1-red" data-channel="/2/multitoggle/3/3">
+                    <button class="btn btn-success">on</button>
+                    <button class="btn btn-danger">off</button>
+                </div>
+                <div class="btn-group wabe-4-1-green" data-channel="/2/multitoggle/4/3">
+                    <button class="btn btn-success">on</button>
+                    <button class="btn btn-danger">off</button>
+                </div>
+                <div class="btn-group wabe-4-1-blue" data-channel="/2/multitoggle/3/4">
+                    <button class="btn btn-success">on</button>
+                    <button class="btn btn-danger">off</button>
+                </div>
+            </div>
+            <div class="span3">
+                <div class="btn-group wabe-4-1-red" data-channel="/2/multitoggle/5/3">
+                    <button class="btn btn-success">on</button>
+                    <button class="btn btn-danger">off</button>
+                </div>
+                <div class="btn-group wabe-4-1-green" data-channel="/2/multitoggle/6/3">
+                    <button class="btn btn-success">on</button>
+                    <button class="btn btn-danger">off</button>
+                </div>
+                <div class="btn-group wabe-4-1-blue" data-channel="/2/multitoggle/5/4">
+                    <button class="btn btn-success">on</button>
+                    <button class="btn btn-danger">off</button>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="span3">
+                <div class="btn-group wabe-4-1-red" data-channel="/2/multitoggle/1/5">
+                    <button class="btn btn-success">on</button>
+                    <button class="btn btn-danger">off</button>
+                </div>
+                <div class="btn-group wabe-4-1-green" data-channel="/2/multitoggle/2/5">
+                    <button class="btn btn-success">on</button>
+                    <button class="btn btn-danger">off</button>
+                </div>
+                <div class="btn-group wabe-4-1-blue" data-channel="/2/multitoggle/1/6">
+                    <button class="btn btn-success">on</button>
+                    <button class="btn btn-danger">off</button>
+                </div>
+            </div>
+            <div class="span3 spansmall">
+                <div class="btn-group wabe-2-1-red" data-channel="/2/multitoggle/3/16">
+                    <button class="btn btn-success">on</button>
+                    <button class="btn btn-danger">off</button>
+                </div>
+            </div>
+            <div class="span3">
+                <div class="btn-group wabe-4-1-red" data-channel="/2/multitoggle/3/5">
+                    <button class="btn btn-success">on</button>
+                    <button class="btn btn-danger">off</button>
+                </div>
+                <div class="btn-group wabe-4-1-green" data-channel="/2/multitoggle/4/5">
+                    <button class="btn btn-success">on</button>
+                    <button class="btn btn-danger">off</button>
+                </div>
+                <div class="btn-group wabe-4-1-blue" data-channel="/2/multitoggle/3/6">
+                    <button class="btn btn-success">on</button>
+                    <button class="btn btn-danger">off</button>
+                </div>
+            </div>
+            <div class="span3">
+                <div class="btn-group wabe-4-1-red" data-channel="/2/multitoggle/5/5">
+                    <button class="btn btn-success">on</button>
+                    <button class="btn btn-danger">off</button>
+                </div>
+                <div class="btn-group wabe-4-1-green" data-channel="/2/multitoggle/6/5">
+                    <button class="btn btn-success">on</button>
+                    <button class="btn btn-danger">off</button>
+                </div>
+                <div class="btn-group wabe-4-1-blue" data-channel="/2/multitoggle/5/6">
+                    <button class="btn btn-success">on</button>
+                    <button class="btn btn-danger">off</button>
+                </div>
+            </div>
+
+        </div>
+    </div>
+
+    <div class="container right">
+        <div class="span2">
+            LED
+        </div>
+    </div>
+    <div class="container right">
+        <div class="span2">
+            <input type="range" name="right-slider" id="right-slider" min="0" max="100" value="0" />
+        </div>
+    </div>
+
+    <br style="clear: both" />
+
+    <div class="container bottom">
+        <input type="range" name="bottom-slider" id="bottom-slider" min="0" max="100" value="0" />
+    </div>
+
 
 
 		<script src="/socket.io/socket.io.js"></script>
 		<script>
 
 
-            var socket = io.connect('http://localhost');
+            var socket = io.connect('http://' + window.location.hostname + ":" + window.location.port);
             socket.on('news', function (data) {
                 console.log(data);
             //
@@ -42,15 +204,20 @@
 
             $(document).ready(function(evnt) {
 
-                $(document).delegate('.kasten', 'click', function(event) {
-                    var channel = $(this).data('channel');
-                    var value = $(this).data('value');
+                $(document).delegate('.btn-success', 'click', function(event) {
+                    var channel = $(this).parent().data('channel');
                     if(channel != null) {
-
-                        socket.emit('oscmessage', { chan: channel, val: value });
+                        socket.emit('oscmessage', { chan: channel, val: 1 });
 
                     }
+                });
 
+                $(document).delegate('.btn-danger', 'click', function(event) {
+                    var channel = $(this).parent().data('channel');
+                    if(channel != null) {
+                        socket.emit('oscmessage', { chan: channel, val: 0 });
+
+                    }
                 });
 
             });