From 87771969b0057c4fd8f0c6b4f575c024b8368faf Mon Sep 17 00:00:00 2001
From: rolux <rolux@rolux.org>
Date: Mon, 5 May 2014 00:55:36 +0200
Subject: [PATCH] update SlidePanel + CSS

---
 source/Ox.UI/css/Ox.UI.css          |  2 ++
 source/Ox.UI/js/Panel/SlidePanel.js | 29 ++++++++++++++++++-----------
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/source/Ox.UI/css/Ox.UI.css b/source/Ox.UI/css/Ox.UI.css
index 2905e28f..c03c1932 100644
--- a/source/Ox.UI/css/Ox.UI.css
+++ b/source/Ox.UI/css/Ox.UI.css
@@ -2055,6 +2055,8 @@ Panels
 }
 .OxSlidePanel > div {
     position: absolute;
+    top: 0;
+    bottom: 0;
 }
 
 .OxSplitPanel {
diff --git a/source/Ox.UI/js/Panel/SlidePanel.js b/source/Ox.UI/js/Panel/SlidePanel.js
index 23524e36..2cbec3e0 100644
--- a/source/Ox.UI/js/Panel/SlidePanel.js
+++ b/source/Ox.UI/js/Panel/SlidePanel.js
@@ -7,13 +7,15 @@ Ox.SlidePanel = function(options, self) {
         .defaults({
             animate: 250,
             elements: [],
+            orientation: 'horizontal',
             selected: ''
         })
         .options(options || {})
         .update({
             selected: function() {
                 selectElement(self.options.selected);
-            }
+            },
+            size: updateElements
         })
         .addClass('OxSlidePanel');
 
@@ -24,29 +26,34 @@ Ox.SlidePanel = function(options, self) {
     self.$content = Ox.Element()
         .css(getContentCSS())
         .appendTo(that);
-    self.options.elements.forEach(function(element) {
-        element
-            .css({width: self.options.width + 'px'})
-            .appendTo(self.$content);
+    updateElements();
+    self.options.elements.forEach(function(element, index) {
+        element.element.appendTo(self.$content);
     });
 
     function getContentCSS() {
         return {
-            left: -getIndexById(self.options.elements, self.options.selected)
-                * self.options.width + 'px',
-            width: self.options.width + 'px'
+            left: -Ox.getIndexById(self.options.elements, self.options.selected)
+                * self.options.size + 'px',
+            width: self.options.size + 'px'
         };
     }
 
     function getElementCSS(index) {
         return {
-            left: index * self.options.width + 'px',
-            width: self.options.width + 'px'
+            left: index * self.options.size + 'px',
+            width: self.options.size + 'px'
         };
     }
 
     function selectElement(id) {
-        self.content.animate(getContentCSS(), self.options.animate);
+        self.$content.animate(getContentCSS(), self.options.animate);
+    }
+
+    function updateElements() {
+        self.options.elements.forEach(function(element, index) {
+            element.element.css(getElementCSS(index));
+        });
     }
 
     that.replaceElement = function(idOrIndex, element) {