From 7c554a610d755ab61552e12a26fafb5087c1b8d1 Mon Sep 17 00:00:00 2001
From: Hendrik Fellerhoff <hf@rrbone.net>
Date: Wed, 21 Mar 2012 02:54:33 +0100
Subject: [PATCH] =?UTF-8?q?vertikale=20tabs=20implementiert=20und=20testwe?=
 =?UTF-8?q?ise=20eingef=C3=BCgt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main/webapp/WEB-INF/jsp/index.jsp    | 20 +++++++++++++--
 src/main/webapp/resources/css/styles.css | 31 ++++++++++++++++++++++++
 2 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/src/main/webapp/WEB-INF/jsp/index.jsp b/src/main/webapp/WEB-INF/jsp/index.jsp
index 56f7a8a..9cb8e64 100644
--- a/src/main/webapp/WEB-INF/jsp/index.jsp
+++ b/src/main/webapp/WEB-INF/jsp/index.jsp
@@ -71,9 +71,11 @@
                     });
 
                 });
+                $(document).ready(function() {
+                    $("#tabs").tabs();
+                    $("#v-tabs").tabs().addClass('ui-tabs-vertical');
 
-                $( "#tabs" ).tabs({ cookie: { expires: 1 } });
-
+                });
             }
         );
 
@@ -91,6 +93,20 @@
             <li><a href="#tabs-5">Raum 4</a></li>
         </ul>
         <div id="tabs-1">
+            <div id="v-tabs" class="inner-tabs-container">
+                <ul>
+                    <li><a href="#v-tabs-1">Licht</a></li>
+                    <li><a href="#v-tabs-2">Musik</a></li>
+                </ul>
+                <div id="v-tabs-1">
+                    Liiiiiichtsteuerung
+
+                </div>
+                <div id="v-tabs-2">
+                    Muuuusik
+
+                </div>
+            </div>
             <div class="buzzer">
                 <span class="circle red">Auf</span>
                 <button>Buzzern</button>
diff --git a/src/main/webapp/resources/css/styles.css b/src/main/webapp/resources/css/styles.css
index 99f00da..95a45ec 100644
--- a/src/main/webapp/resources/css/styles.css
+++ b/src/main/webapp/resources/css/styles.css
@@ -2,6 +2,7 @@
 
 #tabs {
 	height: 500px;
+	width: 700px;
 }
 
 .circle {
@@ -22,4 +23,34 @@
 
 .buzzer {
     width: 95px;
+}
+
+.inner-tabs-container {
+    position: relative;
+    width: 530px;
+    height: 400px;
+    left: 120px;
+    top: 400px;
+    margin-top: -400px;
+}
+
+/* Vertical Tabs
+----------------------------------*/
+.ui-tabs-vertical .ui-tabs-nav {
+    -moz-transform: rotate(-90deg) translate(0, 100%);
+    -moz-transform-origin: 0% 100%;
+    -o-transform: rotate(-90deg) translate(0, 100%);
+    -o-transform-origin: 0% 100%;
+    -webkit-transform: rotate(-90deg) translate(0, 100%);
+    -webkit-transform-origin: 0% 100%;
+    transform: rotate(-90deg) translate(0, 100%);
+    transform-origin: 0% 100%;
+    width: 400px;
+    top: 358px;
+    position: relative;
+    left: -4px;
+    margin-bottom: -46px !important;
+}
+.ui-tabs-vertical .ui-tabs-panel {
+    margin-left: 50px;
 }
\ No newline at end of file