[Openautomation-svn] SF.net SVN: openautomation:[963] CometVisu/trunk/visu

[<pe...@us...>]

Revision: 963
          http://openautomation.svn.sourceforge.net/openautomation/?rev=963&view=rev
Author:   peuter
Date:     2012-08-15 10:27:29 +0000 (Wed, 15 Aug 2012)
Log Message:
-----------
* Fixed Bug that prevented the subpage-nabvars from disappearing
* Enhanced the shownavbar-setting to allow each navbar beeing disabled separately. (Top-, Right-, Bottom-, Left-Navbar) can be disabled/enabled by an css-like syntax e.g. shownavbar="true false false true" enabled top and left, shownavbar="true false"
* Added possibility to use more than one navbar at once, e.g. top and left
* Changed metal-config to show an example usage of the new feature
* Fixed some Bugs in Metal Design: Chrome and Opera browsers should work better with the rounded group corners
* Changed wrong red-styling in metal design

Modified Paths:
--------------
    CometVisu/trunk/visu/designs/metal/basic.css
    CometVisu/trunk/visu/designs/metal/design_setup.js
    CometVisu/trunk/visu/designs/metal/mobile.css
    CometVisu/trunk/visu/lib/templateengine.js
    CometVisu/trunk/visu/structure/pure/navbar.js
    CometVisu/trunk/visu/visu_config.xsd
    CometVisu/trunk/visu/visu_config_metal.xml

Modified: CometVisu/trunk/visu/designs/metal/basic.css
===================================================================
--- CometVisu/trunk/visu/designs/metal/basic.css	2012-08-15 07:48:42 UTC (rev 962)
+++ CometVisu/trunk/visu/designs/metal/basic.css	2012-08-15 10:27:29 UTC (rev 963)
@@ -90,6 +90,7 @@
 
 .widget_container {
    float: left;
+   width: 100%;
 }
 .widget
 {
@@ -98,7 +99,6 @@
   border-color: #666;
   border-style: solid;
   border-width: 1px 1px 0 0;
-  
   min-height: 2em;
   text-shadow: 0 1px 1px #111;
 	background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#2d2d2d)); /* Saf4+, Chrome */
@@ -108,8 +108,9 @@
 	background-image:      -o-linear-gradient(#444444, #2d2d2d); /* Opera 11.10+ */
 	background-image:         linear-gradient(#444444, #2d2d2d);
 }
+.navbar .pagejump { position: relative; }
 .pagejump:hover,.pagelink:hover,.pagejump.active {
-    background: #444444;
+    background-color: #444444;
 	font-weight: bold;
 	color: #fff;
 	text-shadow: 0 1px 1px #111;
@@ -120,7 +121,7 @@
 	background-image:      -o-linear-gradient(#555555, #383838); /* Opera 11.10+ */
 	background-image:         linear-gradient(#555555, #383838);
 }
-.pagejump.active { background: url(images/active_page24.png) no-repeat center right; }
+.pagejump.active { background-image: url(images/active_page24.png); background-repeat: no-repeat; background-position: center right; }
 .text > div,
 .link > a {
   float:left;
@@ -162,7 +163,6 @@
   float:left;
   /*white-space: pre-wrap;*/
 }
-.widget.group { padding: 0; }
 
  iframe { border: none; }
 
@@ -172,14 +172,13 @@
 	width: auto;
 }
 .navbar .widget .label > img {
-	position: absolute;
 	left: 0.2em;
 }
 .navbar .switchPressed, .navbar .switchUnpressed {
   width: 100% !important;
 }
 .navbar .switchPressed .value, .navbar .switchUnpressed .value {
-	padding-left: 2em;
+	padding-left: 2.2em;
 }
 
 .green.switchPressed div, .green.switchUnpressed div {
@@ -189,12 +188,15 @@
 	text-shadow: 0;
 }
 .red.switchPressed div, .red.switchUnpressed div{
+    background: transparent url(images/dot_red.png) no-repeat center center;
+    color: grey !important;
+}
+.grey.switchPressed div, .grey.switchUnpressed div{
     background: transparent url(images/dot_grey.png) no-repeat center center;
     color: grey !important;
 }
 
-
-.red 
+.red
 {
   color:#f44;
   font-weight:bold;
@@ -272,15 +274,16 @@
 	text-align: left;
 	margin-left: 0.2em;
 }
-.group {
-	margin: 0.2em 0.5em;
-}
+
 .group.widget { 
-	border: 2px solid #B3B3B3;
+	border: 1px solid #B3B3B3;
 	border-radius: 1em;
 	-moz-border-radius: 1em;
   	-webkit-border-radius: 1em;
+  	-o-border-radius: 1em;
 	overflow: hidden;
+	margin: 0.2em 0.5em;
+	padding: 0;
 }
 .navbar .group { 
 	margin: 0.2em 0 0.1em 0;
@@ -311,8 +314,24 @@
 	border-left: 2px solid #B3B3B3;
 }
 .navbar > .widget_container:first-child .group .widget_container:last-child, .navbar > .widget_container:first-child .group div.widget_container:last-child .widget {
-	border: none;
-}	
+	border-width: 1px 0 0 0;
+	border-bottom-right-radius: 1em;
+	border-bottom-left-radius: 1em;
+}
+.navbar .group .widget_container:last-child,.navbar .group .widget_container:last-child .widget {
+	border-bottom-right-radius: 1em;
+}
+.navbar .pagejump .actor {
+	position: absolute;
+	top:0;
+	left:0;
+	right:0;
+	bottom:0;
+	vertical-align: middle;
+}
+.navbar .pagejump .actor .value {
+	line-height: 2em;
+}
 .group > div > h2 {
 	font-size: 0.8em;
 	padding: 0 1em;
@@ -356,16 +375,16 @@
 	background-image:      -o-linear-gradient(#f0f0f0, #ddd); /* Opera 11.10+ */
 	background-image:         linear-gradient(#f0f0f0, #ddd);
 }
-.pagejump {
+/*.pagejump {
 	background: #333333;
-	background-image: -webkit-gradient(linear, left top, left bottom, from(   #444444   /*{c-bar-background-start}*/), to(   #2D2D2D   /*{c-bar-background-end}*/)); /* Saf4+, Chrome */
-	background-image: -webkit-linear-gradient(  #444444  /*{c-bar-background-start}*/,   #2D2D2D   /*{c-bar-background-end}*/); /* Chrome 10+, Saf5.1+ */
-	background-image:    -moz-linear-gradient(   #444444   /*{c-bar-background-start}*/,   #2D2D2D   /*{c-bar-background-end}*/); /* FF3.6 */
-	background-image:     -ms-linear-gradient(   #444444   /*{c-bar-background-start}*/,   #2D2D2D  /*{c-bar-background-end}*/); /* IE10 */
-	background-image:      -o-linear-gradient(   #444444   /*{c-bar-background-start}*/,   #2D2D2D   /*{c-bar-background-end}*/); /* Opera 11.10+ */
-	background-image:         linear-gradient(   #444444   /*{c-bar-background-start}*/,   #2D2D2D   /*{c-bar-background-end}*/);
+	background-image: -webkit-gradient(linear, left top, left bottom, from(   #444444), to(   #2D2D2D));
+	background-image: -webkit-linear-gradient(  #444444 ,   #2D2D2D; 
+	background-image:    -moz-linear-gradient(   #444444,   #2D2D2D);
+	background-image:     -ms-linear-gradient(   #444444,   #2D2D2D);
+	background-image:      -o-linear-gradient(   #444444,   #2D2D2D);
+	background-image:         linear-gradient(   #444444,   #2D2D2D);
 	margin: 0;
-}
+}*/
 
 .switchPressed
 {
@@ -571,3 +590,73 @@
     background-color: #1d1d1d;
 }
 .iframe .actor { width: 98%; }
+
+.innerrowspan { /* test: Absolute Positionierung scheint in machen Browser das overflow: hidden der Group zu umgehen */
+	position: relative;
+	width: 100%;
+	height: 100%;
+	padding: 0;
+}
+.innerrowspan > div {
+	margin: 0.3em;
+}
+
+#navbarTop .navbar .widget_container, #navbarBottom .navbar .widget_container {
+	width: auto !important;
+}
+
+#navbarTop, #navbarTop .navbar .widget, #navbarBottom .navbar .widget {
+	background: #333333;
+	background-image: -webkit-gradient(linear, left top, left bottom, from(   #666), to(   #000));
+	background-image: -webkit-linear-gradient(  #666 ,   #000); 
+	background-image:    -moz-linear-gradient(   #666,   #000);
+	background-image:     -ms-linear-gradient(   #666,   #000);
+	background-image:      -o-linear-gradient(   #666,   #000);
+	background-image:         linear-gradient(   #666,   #000);
+}
+#navbarTop .navbar .widget, #navbarBottom .navbar .widget {
+	margin: 0;
+	border-width:0;
+	padding: 0.3em 0.5em;
+	
+}
+#navbarTop .navbar .widget:hover,#navbarTop .navbar .pagejump.active,#navbarTop .navbar .pagejump.active_ancestor {
+    background-color: #000;
+	font-weight: normal;
+	color: #fff;
+	text-shadow: 0 1px 1px #111;
+	background-image: -webkit-gradient(linear, left top, left bottom, from(#111), to(#666)); /* Saf4+, Chrome */
+	background-image: -webkit-linear-gradient(#111, #666); /* Chrome 10+, Saf5.1+ */
+	background-image:    -moz-linear-gradient(#111, #666); /* FF3.6 */
+	background-image:     -ms-linear-gradient(#111, #666); /* IE10 */
+	background-image:      -o-linear-gradient(#111, #666); /* Opera 11.10+ */
+	background-image:         linear-gradient(#111, #666);
+}
+
+#navbarTop { border-bottom: 2px solid #666; }
+#navbarTop .navbar .widget { position: relative; min-width: 2em; min-height: 3em; }
+#navbarTop .navbar .pagejump .label > img { 
+	display: block;
+	margin: 0 auto;
+	height: 44px !important;
+}
+#navbarTop .navbar .pagejump .label {
+	text-align: center;
+	font-size: 0.7em;
+	width: 100%;
+	margin: 0 auto;
+	float: left;
+}
+#navbarTop .navbar .pagejump .actor .value { 
+	display: none;
+}
+#navbarTop .navbar .pagejump .actor { position: absolute; top:0;left:0;right:0;bottom:0 }
+#navbarTop hr, #navbarBottom hr {
+	clear: none;
+	float: left;
+	width: 1px;
+	height: 3.6em;
+	margin: 0;
+	padding: 0;
+	color: inherit;
+}
\ No newline at end of file

Modified: CometVisu/trunk/visu/designs/metal/design_setup.js
===================================================================
--- CometVisu/trunk/visu/designs/metal/design_setup.js	2012-08-15 07:48:42 UTC (rev 962)
+++ CometVisu/trunk/visu/designs/metal/design_setup.js	2012-08-15 10:27:29 UTC (rev 963)
@@ -25,30 +25,77 @@
 
 var started=true;
 
-$(window).resize(function() {
-	// only execute on start
-	if (started) {
-		if ($('.navbar').size()>0) {
-			$('.navbar > .widget_container:first-child .group:not(.root) .pagejump:first-child .actor').each(function(i) {
-				var target = ($(this).data().target.match(/^id_[0-9_]+$/)==null) ? $('.page h1:contains('+$(this).data().target+')').closest(".page").attr("id") : $(this).data().target;
-				if (target=="id_0") {
-					// pagejump to root-page found
-					$(this).closest(".group").addClass("root");
-				}
-			});
-		}
-		if (/(iphone|ipod|ipad)/i.test(navigator.userAgent.toLowerCase())) {
-			$('#top').css('margin-top','1em');
-		}
-		$('.navbar .widget .label > img').each(function(i) {
-			if ($(this).parent().text().trim()) {
-				$(this).css("position","relative");
-			}
-		});
-		started=false;
-	}
+function getOffsetCorners(elem) {
+  return {
+    top_left: {top: Math.round(elem.offset().top), left: Math.round(elem.offset().left) },
+    bottom_left: {top: Math.round(elem.offset().top+elem.height()), left: Math.round(elem.offset().left) },
+    top_right: {top: Math.round(elem.offset().top), left: Math.round(elem.offset().left+elem.width()) },
+    bottom_right: {top: Math.round(elem.offset().top+elem.height()), left: Math.round(elem.offset().left+elem.width()) },
+  };
+}
+function roundCorners() {
+  // find elements in each groups corners
+    $('.page.activePage .group:visible').each(function(i) {
+      var group = $(this);
+      // do not use this in navbars
+      if (group.parents('.navbar').size()>0) return;
+      var groupCorners = getOffsetCorners(group);
+      // if the group has a headline (=name) we must not round the upper corners
+      var roundUpperCorners =  ($(this).find('.widget_container:first-child').size()>0) && group.css('border-top-right-radius')!="0px";
+      var threshold=5;
+      $(this).find('.widget_container').each(function (i) {
+        var elemCorners = getOffsetCorners($(this));
+        if (roundUpperCorners) {
+          // upper left corner is done by regular  css-rule  upper right corner
+          if (Math.abs(elemCorners.top_right.top-groupCorners.top_right.top)<threshold && Math.abs(elemCorners.top_right.left-groupCorners.top_right.left)<threshold) {
+            $(this).css({'border-top-right-radius': group.css('border-top-right-radius')});
+            $(this).children().css({'border-top-right-radius': group.css('border-top-right-radius')});
+          }
+        }
+        if (group.css('border-bottom-right-radius')!="0px" && Math.abs(elemCorners.bottom_right.top-groupCorners.bottom_right.top)<threshold && Math.abs(elemCorners.bottom_right.left-groupCorners.bottom_right.left)<threshold) {
+          $(this).css({'border-bottom-right-radius': group.css('border-bottom-right-radius')});
+          $(this).children().css({'border-bottom-right-radius': group.css('border-bottom-right-radius')});
+        }
+        if (group.css('border-bottom-left-radius')!="0px" && Math.abs(elemCorners.bottom_left.top-groupCorners.bottom_left.top)<threshold && Math.abs(elemCorners.bottom_left.left-groupCorners.bottom_left.left)<threshold) {
+          $(this).css({'border-bottom-left-radius': group.css('border-bottom-left-radius')});
+          $(this).children().css({'border-bottom-left-radius': group.css('border-bottom-left-radius')});
+        }
+      });
+    });
+}
+$(window).bind('scrolltopage',function() {
+  //$('#id_0').append(navigator.userAgent.toLowerCase());
+  if (/(opera|chrome|safari)/i.test(navigator.userAgent.toLowerCase())) {
+    roundCorners();
+  }
 });
 
+$(window).resize(function() {
+  // only execute on start
+    if (started) {
+       if ($('.navbar').size()>0) {
+         $('.navbar > .widget_container:first-child .group:not(.root) .pagejump:first-child .actor').each(function(i) {
+           var target = ($(this).data().target.match(/^id_[0-9_]+$/)==null) ? $('.page h1:contains('+$(this).data().target+')').closest(".page").attr("id") : $(this).data().target;
+           if (target=="id_0") {
+             // pagejump to root-page found
+             $(this).closest(".group").addClass("root");
+           }
+         });
+       }
+       if (/(iphone|ipod|ipad)/i.test(navigator.userAgent.toLowerCase())) {
+         $('#top').css('margin-top','1em');
+		 handleResize();
+       }
+       $('#navbarLeft .navbar .widget .label,#navbarRight .navbar .widget .label').each(function(i) {
+         if ($(this).text().trim()!="") {
+           $(this).parent().css("height","3em");
+           $(this).siblings('.actor').css("padding-top","1.3em");
+         }
+       });
+       started=false;
+    }
+});
+
 icons.insert({
   'CometVisu'             : { '*'  : '128',
                               '16' : { '*'         : 'sodium'                                                              ,

Modified: CometVisu/trunk/visu/designs/metal/mobile.css
===================================================================
--- CometVisu/trunk/visu/designs/metal/mobile.css	2012-08-15 07:48:42 UTC (rev 962)
+++ CometVisu/trunk/visu/designs/metal/mobile.css	2012-08-15 10:27:29 UTC (rev 963)
@@ -12,7 +12,7 @@
 .group { 
 	margin: 0.2em 0.1em;
 }
-.navbar, #navbarLeft { display: none !important; width: 0 !important; }
+#navbarLeft, #navbarLeft > .navbar, #navbarRight, #navbarRight > .navbar { display: none !important; width: 0 !important; }
 
 .widget .ui-slider
 {

Modified: CometVisu/trunk/visu/lib/templateengine.js
===================================================================
--- CometVisu/trunk/visu/lib/templateengine.js	2012-08-15 07:48:42 UTC (rev 962)
+++ CometVisu/trunk/visu/lib/templateengine.js	2012-08-15 10:27:29 UTC (rev 963)
@@ -55,7 +55,7 @@
 }
 
 if( $.getUrlVar('forceReload') ) {
-  forceReload = $.getUrlVar('forceReload') != 'false'; // true unless set to false
+  forceReload = $.getUrlVar('forceReload') != 'false'; // true unless set to  false
 }
 
 // "Bug"-Fix for ID: 3204682 "Caching on web server"
@@ -142,28 +142,31 @@
 }
 
 /*
- * Make sure everything looks right when the window gets resized.
+ * Make sure everything looks right when the window gets resized. 
  * This is necessary as the scroll effect requires a fixed element size
  */
-function handleResize() {
+function handleResize(skipScrollFix) {
   var uagent = navigator.userAgent.toLowerCase();
-  var widthNavbarLeft  = $( '#navbarLeft'  ).width();
-  var widthNavbarRight = $( '#navbarRight' ).width();
-  var width = $( 'body' ).width() - widthNavbarLeft - widthNavbarRight - 1; // remove an additional pixel for Firefox
+  var widthNavbarLeft  = $( '#navbarLeft' ).css('display')!='none' ? $( '#navbarLeft' ).width() : 0;
+  var widthNavbarRight = $( '#navbarRight' ).css('display')!='none' ? $( '#navbarRight' ).width() : 0;
+  var width = $( 'body' ).width() - widthNavbarLeft - widthNavbarRight - 1; // remove  an additional pixel for Firefox
 
   if (/(android|blackberry|iphone|ipod|series60|symbian|windows ce|palm)/i.test(uagent)) {
     $( '#main' ).css( 'width', width );
     $( '#pageSize' ).text( '.page{width:' + (width-0) + 'px;}' );
     // do nothing
   } else {
-    var height = $( window ).height()
-                 - $( '#main' ).position().top
-                 - $( '#navbarBottom' ).outerHeight(true)
-                 - $( '#bottom'       ).outerHeight(true) - 2;
+    var height = $( window ).height() - $( '#main' ).position().top;
+    if ($( '#navbarBottom' ).css('display')!='none') {
+      height-= $( '#navbarBottom' ).outerHeight(true)-1;
+    }
+    if ($( '#bottom' ).css('display')!='none') {
+      height-= $( '#bottom'       ).outerHeight(true) - 1;
+    }
     $( '#main' ).css( 'width', width ).css( 'height', height );
     $( '#pageSize' ).text( '.page{width:' + (width-0) + 'px;height:' + height + 'px;}' );
   }
-  main_scroll != undefined && main_scroll.seekTo( main_scroll.getIndex(), 0 ); // fix scroll
+  skipScrollFix===undefined && main_scroll != undefined && main_scroll.seekTo( main_scroll.getIndex(), 0 ); // fix scroll
 }
 $( window ).bind( 'resize', handleResize );
 
@@ -193,9 +196,9 @@
   $.ajaxSetup({cache: true});
 
   
-  /* First, we try to get a design by url
-   * Secondly, we try to get a predefined design in the config file
-   * Otherwise we show the design selection dialog
+  /*
+   * First, we try to get a design by url Secondly, we try to get a predefined
+   * design in the config file Otherwise we show the design selection dialog
    */
   
   // read predefined design in config
@@ -511,14 +514,14 @@
   if (typeof node.attributes != "undefined") {
     for(var i=0; i<node.attributes.length; i++)  {
       if(node.attributes.item(i).specified) {
-        attributes[node.attributes.item(i).nodeName]=node.attributes.item(i).nodeValue
+        attributes[node.attributes.item(i).nodeName]=node.attributes.item(i).nodeValue;
       }
     }
   } else {
     $.extend(attributes, node);
   }
 
-  var configData = {attributes: {}, elements: {}}
+  var configData = {attributes: {}, elements: {}};
   if (typeof creator.attributes != "undefined") {
     $.each(creator.attributes, function (index, e) {
       if ($(page).attr(index)) {
@@ -551,6 +554,8 @@
 function scrollToPage( page_id, speed, skipHistory ) {
   $('.activePage').removeClass('activePage');
   $('.pagejump.active').removeClass('active');
+  $('.pagejump.active_ancestor').removeClass('active_ancestor');
+
   if (page_id.match(/^id_[0-9_]+$/)==null) {
     // find Page-ID by name
     $('.page h1:contains('+page_id+')').each(function (i) {
@@ -559,64 +564,101 @@
       }
     });  
   }
+ 
+  $('#'+page_id).addClass('pageActive activePage');// show new page
+  // update visibility ob navbars, top-navigation, footer
   updatePageParts($('#'+page_id));
-  $('#'+page_id).addClass('pageActive activePage');                         // show new page
-  $('#'+page_id+'_navbar').addClass('navbarActive');
-  
   // push new state to history
   if (skipHistory==undefined)
     window.history.pushState(page_id, page_id, window.location.href);
-    
+  
   main_scroll.seekTo( $('#'+page_id), speed ); // scroll to it
+  
+  // remove all navbars that do not belong to this page
+  $('.navbar.navbarActive').each(function(i) {
+    var navBarPath = $(this).attr('id').split('_');
+    // skip last 2 elements e.g. '_top_navbar'
+    navBarPath = navBarPath.slice(0,navBarPath.length-2).join('_');
+    var expr = new RegExp("^"+navBarPath+".*","i");
+    if (navBarPath!=page_id && !expr.test(page_id)) {
+      $(this).removeClass('navbarActive');
+    }
+  });
+  // show the navbars for this page
+  $('#'+page_id+'_top_navbar').addClass('navbarActive');
+  $('#'+page_id+'_right_navbar').addClass('navbarActive');
+  $('#'+page_id+'_bottom_navbar').addClass('navbarActive');
+  $('#'+page_id+'_left_navbar').addClass('navbarActive');
+  
   var pagedivs=$('div', '#'+page_id); 
-  for( var i = 0; i<pagedivs.length; i++) { //check for inline diagrams & refresh
+  for( var i = 0; i<pagedivs.length; i++) { // check for inline diagrams & refresh
     if( /diagram_inline/.test(pagedivs[i].className)) {
       refreshDiagram(pagedivs[i]);
     }
   }
   // set pagejump for this page to active if it exists
   $(".pagejump > .actor").each(function (i) {
+    var activePageJump=null;
     if ($(this).data().target.match(/^id_[0-9_]+$/)==null) {
       // get page id by name
       var actor = $(this);
       var target = $(this).data().target;
       $('#'+page_id+' h1:contains('+target+')').each(function(i) {
         if ($(this).text()==target) {
-          actor.parent().addClass('active');
+          activePageJump = actor.parent();
+          return false;
         }
       }); 
     }
     else if (page_id==$(this).data().target) {
-      $(this).parent().addClass("active");
+      activePageJump = $(this).parent();
     }
+    if (activePageJump!=null) {
+      activePageJump.addClass('active');
+      var parentPage = getParentPage($('#'+page_id));
+      while (parentPage!=null) {
+        if (parentPage.attr('id')=="id_0") {
+          // root is always an active ancestor, no need to specify that
+          break;
+        }
+        $(".pagejump > .actor").each(function (i) {
+          if ($(this).data().target.match(/^id_[0-9_]+$/)==null) {
+            // get page id by name
+            var actor = $(this);
+            var target = $(this).data().target;
+            $('#'+parentPage.attr('id')+' h1:contains('+target+')').each(function(i) {
+              if ($(this).text()==target) {
+                actor.parent().addClass('active_ancestor');
+                return false;
+              }
+            }); 
+          }
+          else if (parentPage.attr('id')==$(this).data().target) {
+            $(this).parent().addClass('active_ancestor');
+          }
+        });
+        parentPage = getParentPage(parentPage);
+      }
+    }
   });
   $(window).trigger('scrolltopage',page_id);
+  
 }
 
 function updateTopNavigation() {
   var path = $('#main .page').eq( this.getIndex() ).attr('id').split( '_' );
-  var id = 'id_'; //path[0];
+  var id = 'id_'; // path[0];
   var nav = '';
   for( var i = 1; i < path.length; i++ ) { // element 0 is id_ (JNK)
     id  += path[i];
     if ($('#'+id).hasClass("page")) {
-    
-    nav += ((1==i) ? '' : '<span> &#x25ba; </span>')
+      nav += ((1==i) ? '' : '<span> &#x25ba; </span>')
         +  '<a href="javascript:scrollToPage(\'' +id+ '\')">'
         +  $('#' + id + ' h1').text() + '</a>';
     }
     id  += '_';
   }
   $('.nav_path').html( nav );
-  var new_array = path;
-  var old_array = old_scroll;
-  old_scroll = path;
-  path = path.join('_');
-  for( var i = new_array.length; i < old_array.length; i++ ) {
-    path += '_' + old_array[i]; // reuse of path...
-    $('#'+path).removeClass('pageActive');
-    $('#'+path+'_navbar').removeClass('navbarActive');
-  }
 }
 
 /*
@@ -626,8 +668,8 @@
  * so it's content can be easily extended
  */
 function showPopup( type, attributes ) {
-  //var retval = design.popups[ type ].create( attributes ); //page, path );
-  //return retval;
+  // var retval = design.popups[ type ].create( attributes ); //page, path );
+  // return retval;
   if( !design.popups[ type ] ) type = 'unknown';
 
   return design.popups[ type ].create( attributes );
@@ -641,10 +683,10 @@
   jQuery_object.remove();
 }
 
-/****************************************************************************/
+/** ************************************************************************* */
 /* FIXME - Question: should this belong to the VisuDesign object so that it */
-/* is possible to overload?!?                                               */
-/****************************************************************************/
+/* is possible to overload?!? */
+/** ************************************************************************* */
 function refreshAction( target, src ) {
   target.src = src + '&' + new Date().getTime();
 }
@@ -689,7 +731,7 @@
       $div.append($myDiv);
 
       var $tDiv = $("<div />");
-      $tDiv.css({background: "transparent", position: "absolute", height: "90px", width: "160px", zIndex: 2})
+      $tDiv.css({background: "transparent", position: "absolute", height: "90px", width: "160px", zIndex: 2});
       var pos = $myDiv.find("iframe").position();
       $tDiv.css({left: pos.left + "px", top: pos.top + "px"});
       $myDiv.append($tDiv);
@@ -709,10 +751,9 @@
         } else {
           document.location.href = document.location.href + "&design=" + element;
         }
-      })
-            
-    })
-  })
+      });   
+    });
+  });
 }
 
 /**
@@ -738,14 +779,44 @@
 }
 
 /**
+ * parse a string with up to four, space-separated values usage like css
+ * settings, e.g width: 1px 2px 3px 4px (top-, right-, bottom-, left-width)
+ * 
+ * @param value
+ */
+function parseTopRightBottomLeftString(value) {
+  var parts = value.split(" ");
+  if (parts.length==4) {
+    return {top: parts[0], right: parts[1], bottom: parts[2], left: parts[3]};
+  }
+  else if (parts.length==3) {
+    return {top: parts[0], right: parts[1], bottom: parts[2], left: parts[1]};
+  }
+  else if (parts.length==2) {
+    return {top: parts[0], right: parts[1], bottom: parts[0], left: parts[1]};
+  }
+  else if (parts.length==1) {
+    return {top: parts[0], right: parts[0], bottom: parts[0], left: parts[0]};
+  }
+  else
+    return {top: '', right: '', bottom: '', left: ''};
+}
+
+/**
  * update the visibility ob top-navigation, footer and navbar for this page
+ * 
  * @param page
  */
 function updatePageParts(page) {
   // default values
   var showtopnavigation=true;
   var showfooter=true;
-  var shownavbar=true;
+  var shownavbar={
+    top: "true",
+    right: "true",
+    bottom: "true",
+    left: "true"
+  };
   
   if (page.data()!=null) {
     if (page.data().showtopnavigation!=undefined) {
@@ -777,51 +848,94 @@
       }
     }
     if (page.data().shownavbar!=undefined) {
-      shownavbar = page.data().shownavbar!="false";
+      shownavbar = parseTopRightBottomLeftString(page.data().shownavbar);
     }
     else {
       // traverse up the page tree
+      var inheritedShowNavbar={
+          top: 'inherit',
+          right: 'inherit',
+          bottom: 'inherit',
+          left: 'inherit'
+        };
       var parentPage = getParentPage(page);
       while (parentPage!=null) {
         if (parentPage.data().shownavbar!=undefined) {
-          shownavbar = parentPage.data().shownavbar!="false";
-          break;
+          var pageShowNavBar = parseTopRightBottomLeftString(parentPage.data().shownavbar);
+          for (var pos in pageShowNavBar) {
+            if (pageShowNavBar[pos]!='inherit' && inheritedShowNavbar[pos]=='inherit') {
+              inheritedShowNavbar[pos]=pageShowNavBar[pos];
+            }
+          }
+          if (inheritedShowNavbar.top!='inherit' && inheritedShowNavbar.right!='inherit' && inheritedShowNavbar.bottom!='inherit' && inheritedShowNavbar.left!='inherit') {
+            // we are done
+            break;
+          }
         }
         parentPage = getParentPage(parentPage);
       }
+      // set default values if not set otherwise
+      for (var pos in inheritedShowNavbar) {
+        if (inheritedShowNavbar[pos]=='inherit') {
+          inheritedShowNavbar[pos]=shownavbar[pos];
+        }
+      }
+      shownavbar=inheritedShowNavbar;
     }
   }
+  var resize=false;
   if (showtopnavigation) {
-    $('#top, #top > *').css("display","block");
+    if ($('#top').css("display")=="none") {
+      $('#top, #top > *').css("display","block");
+      resize=true;
+      //console.log("#top hidden");
+    }
   }
   else {
-    $('#top, #top > *').css("display","none");
+    $('#top.loading').removeClass('loading');
+    if ($('#top').css("display")!="none") {
+      $('#top').css("display","none");
+      resize=true;
+      //console.log("#top visible");
+    }
   }
   if (showfooter) {
-    $('#bottom, #bottom > *').css("display","block");
+    if ($('#bottom').css("display")=="none") {
+      $('#bottom').css("display","block");
+      //console.log("#bottom hidden");
+      resize=true;
+    }
   }
   else {
-    $('#bottom, #bottom > *').css("display","none");
+    // the loading class prevents any element from beeing disabled, we have to remove it
+    $('#bottom.loading').removeClass('loading');
+    if ($('#bottom').css("display")!="none") {
+      $('#bottom').css("display","none");
+      //console.log("#bottom "+$('#bottom').css("display"));
+      resize=true;
+    }
   }
-  if (shownavbar) {
-    $.each(['Left','Top','Right','Bottom'], function (index, value) {
-      var size = $('#navbar'+value).data('size');
-      var cssSize = size + (isFinite( size ) ? 'px' : '');
-      $('#navbar'+value).css('width',cssSize);
-    });
-    // for some reason the handleResize() method has to be called here, without it the Navbar looks strange (has scrollbars even if they wouldn´t be neccessary)
-    handleResize();
-  }
-  else {
-    // store the navbar sizes
-    $.each(['Left','Top','Right','Bottom'], function (index, value) {
-      if ($('#navbar'+value).data('size')==undefined) {
-        $('#navbar'+value).data('size',$('#navbar'+value).css('width'));
+  $.each(['Left','Top','Right','Bottom'], function (index, value) {
+    if (shownavbar[value.toLowerCase()]=="true") {
+      if ($('#navbar'+value).css("display")=="none") {
+        $('#navbar'+value).css('display','block');
+        resize=true;
       }
-      $('#navbar'+value).css('width', 0);
-    });
+    }
+    else if (shownavbar[value.toLowerCase()]=="false") {
+      // the loading class prevents any element from beeing disabled, we have to remove it
+      $('#navbar'+value+'.loading').removeClass('loading');
+      if ($('#navbar'+value).css("display")!="none") {
+        $('#navbar'+value).css("display","none");
+        resize=true;
+      }
+    }
+  });
+  if (resize) {
+    // needs to be called twice to work
+    handleResize(true);
+    handleResize(true);      
   }
-  handleResize();
 }
 
 function getParentPage(page) {
@@ -837,4 +951,4 @@
       return $('.page[id="'+path+'"]');
     }
   }
-}
\ No newline at end of file
+}

Modified: CometVisu/trunk/visu/structure/pure/navbar.js
===================================================================
--- CometVisu/trunk/visu/structure/pure/navbar.js	2012-08-15 07:48:42 UTC (rev 962)
+++ CometVisu/trunk/visu/structure/pure/navbar.js	2012-08-15 10:27:29 UTC (rev 963)
@@ -20,14 +20,15 @@
     var $n = $(navbar);
     var childs = $n.children();
     var id = path.split('_'); id.pop();
-    var container = $( '<div class="navbar clearfix" id="' + id.join('_') + '_navbar" />' );
+    var position = $n.attr('position') || 'left';
+    var container = $( '<div class="navbar clearfix" id="' + id.join('_')+'_'+ position + '_navbar" />' );
     if( $n.attr('name') ) container.append( '<h2 ' + hstyle + '>' + $n.attr('name') + '</h2>' );
     $( childs ).each( function(i){
         container.append( create_pages( childs[i], path + '_' + i, flavour ) );
     } );
     
     var dynamic  = $n.attr('dynamic') == 'true' ? true : false;
-    var position = $n.attr('position') || 'left';
+  
 	var size = $n.attr('width') || 300;
     switch( position )
     {

Modified: CometVisu/trunk/visu/visu_config.xsd
===================================================================
--- CometVisu/trunk/visu/visu_config.xsd	2012-08-15 07:48:42 UTC (rev 962)
+++ CometVisu/trunk/visu/visu_config.xsd	2012-08-15 10:27:29 UTC (rev 963)
@@ -235,7 +235,7 @@
       <xsd:attribute name="backdrop" type="uri" use="optional" />
       <xsd:attribute name="showtopnavigation" type="xsd:boolean" use="optional"/>
       <xsd:attribute name="showfooter" type="xsd:boolean" use="optional"/>
-      <xsd:attribute name="shownavbar" type="xsd:boolean" use="optional"/>
+      <xsd:attribute name="shownavbar" type="xsd:string" use="optional"/>
     </xsd:complexType>
   </xsd:element>
 
@@ -287,6 +287,7 @@
       <!-- list all possbile widgets here -->
       <xsd:element name="text" type="text" />
       <xsd:element name="switch" type="switch" />
+      <xsd:element name="group" type="group" />
       <xsd:element name="toggle" type="switch" />
       <xsd:element name="trigger" type="trigger" />
       <xsd:element name="multitrigger" type="multitrigger" />

Modified: CometVisu/trunk/visu/visu_config_metal.xml
===================================================================
--- CometVisu/trunk/visu/visu_config_metal.xml	2012-08-15 07:48:42 UTC (rev 962)
+++ CometVisu/trunk/visu/visu_config_metal.xml	2012-08-15 10:27:29 UTC (rev 963)
@@ -62,15 +62,19 @@
 			</mapping>
 		</mappings>
 		<stylings>
-			<styling name="RedGreen">
-				<entry value="Aus">red</entry>
-				<entry value="Weg">red</entry>
-				<entry value="Fehlt">red</entry>
-				<entry value="Offen">red</entry>
+			<styling name="GreyGreen">
+				<entry value="Aus">grey</entry>
+				<entry value="Weg">grey</entry>
+				<entry value="Fehlt">grey</entry>
+				<entry value="Offen">grey</entry>
 				<entry value="An">green</entry>
 				<entry value="Da">green</entry>
 				<entry value="Zu">green</entry>
-				<entry value="Vorhanden">red</entry>
+				<entry value="Vorhanden">green</entry>
+				<entry value="0">grey</entry>
+				<entry value="1">green</entry>
+			</styling>
+			<styling name="RedGreen">
 				<entry value="0">red</entry>
 				<entry value="1">green</entry>
 			</styling>
@@ -91,50 +95,52 @@
 				<entry range_min="21" range_max="100">red</entry>
 			</styling>
 		</stylings>
-		<statusbar> <status type="html"><![CDATA[ <img src="icon/comet_64_ff8000.png" 
+		<statusbar>
+			<status type="html"><![CDATA[ <img src="icon/comet_64_ff8000.png" 
 			alt="CometVisu" /> by <a href="http://www.cometvisu.org/">CometVisu.org</a> 
 			- <a href=".?forceReload=true">Reload</a> - <a href="?config=demo">Widget 
-			Demo</a> ]]></status> <status type="html" condition="!edit" hrefextend="config"><![CDATA[ 
-			- <a href="edit_config.html">Edit</a> ]]></status> <status type="html" condition="edit" 
-			hrefextend="all"><![CDATA[ - <a href=".">normal Mode</a> ]]></status> <status 
-			type="html" hrefextend="config"><![CDATA[ - <a href="check_config.php">Check 
-			Config</a> ]]></status> </statusbar>
+			Demo</a> ]]></status>
+			<status type="html" condition="!edit" hrefextend="config"><![CDATA[ 
+			- <a href="edit_config.html">Edit</a> ]]></status>
+			<status type="html" condition="edit" hrefextend="all"><![CDATA[ - <a href=".">normal Mode</a> ]]></status>
+			<status type="html" hrefextend="config"><![CDATA[ - <a href="check_config.php">Check 
+			Config</a> ]]></status>
+		</statusbar>
 	</meta>
-	<page name="Übersicht" showtopnavigation="false" showfooter="false">
-		<navbar position="left" dynamic="true" width="200px">
-			<group nowidget="true">
-				<pagejump target="Übersicht">
-					<label>
-						<icon name="steuer_home" />
-					</label>
-				</pagejump>
-			</group>
-			<group name="Räume" nowidget="true">
-				<pagejump target="Wohnzimmer" name="Wohnen">
-					<label>
-						<icon name="it_fernsehen" />
-					</label>
-				</pagejump>
-				<pagejump target="Schlafzimmer" name="Schlafen">
-					<label>
-						<icon name="szene_schlafen" />
-					</label>
-				</pagejump>
-			</group>
-			<group name="Sonstiges" nowidget="true">
-				<pagejump target="Multiroom" name="Audio">
-					<label>
-						<icon name="audio_sound" />
-					</label>
-				</pagejump>
-				<pagejump target="Temperaturen" name="Temperatur">
-					<label>
-						<icon name="temp_temperatur" />
-					</label>
-				</pagejump>
-			</group>
+	<page name="Übersicht" showtopnavigation="false" showfooter="false"
+		shownavbar="true false">
+		<navbar position="top">
+			<pagejump target="Übersicht">
+				<label>
+					<icon name="steuer_home" />Start
+				</label>
+			</pagejump>
+			<pagejump target="KNX">
+				<label>
+					<icon name="steuer_alles_ein_aus" />KNX
+				</label>
+			</pagejump>
+			<pagejump target="Video">
+				<label>
+					<icon name="it_fernsehen" />Video
+				</label>
+			</pagejump>
+			<pagejump target="Audio">
+				<label>
+					<icon name="audio_audio" />Audio
+				</label>
+			</pagejump>
+			<pagejump target="Web">
+				<label>
+					<icon name="it_internet" />Web
+				</label>
+			</pagejump>
+			<line/>
+			<pagejump target="Wetter">
+				<label><icon name="wetter_sonne"/>Wetter</label>
+			</pagejump>
 		</navbar>
-		<group name="Allgemein" nowidget="true">
+		<group name="Allgemein">
 			<layout colspan="12" />
 			<info>
 				<label>Modus</label>
@@ -144,224 +150,251 @@
 				<label>Präsenz</label>
 				<address transform="DPT:16.001" variant="">12/1/0</address>
 			</info>
-			<switch mapping="OnOff" styling="RedGreen">
+			<switch mapping="OnOff" styling="GreyGreen">
 				<layout colspan="3" />
 				<label>Follow me</label>
 				<address transform="DPT:1.001" variant="">12/1/6</address>
 			</switch>
-			<switch mapping="OnOff" styling="RedGreen">
+			<switch mapping="OnOff" styling="GreyGreen">
 				<layout colspan="3" />
 				<label>Abwesend</label>
 				<address transform="DPT:1.001" variant="">12/1/2</address>
 			</switch>
-			<switch mapping="OnOff" styling="RedGreen">
+			<switch mapping="OnOff" styling="GreyGreen">
 				<layout colspan="3" />
 				<label>Wecker</label>
 				<address transform="DPT:1.001" variant="">12/1/8</address>
 			</switch>
-			<page name="Multiroom">
-				<layout colspan="3" />
-				<group name="Allgemein" nowidget="true">
-					<layout colspan="12" />
-					<switch mapping="OnOff" styling="RedGreen">
-						<label>Webradio</label>
-						<address transform="DPT:1.001" variant="">12/1/7</address>
-					</switch>
-					<switch mapping="AudioMute" styling="RedGreen">
-						<layout colspan="3" />
-						<label>LS Schlafzimmer</label>
-						<address transform="DPT:1.001" variant="">13/5/1</address>
-					</switch>
-					<switch mapping="AudioMute" styling="RedGreen">
-						<layout colspan="3" />
-						<label>LS Wohnzimmer</label>
-						<address transform="DPT:1.001" variant="">14/1/3</address>
-					</switch>
-				</group>
-				<!-- iframe src="http://drake:9000" width="100%" height="600px"> <layout 
-					colspan="12"/> </iframe -->
-			</page>
 		</group>
-		<group name="Wetter" nowidget="true">
+		<page name="Wetter" visible="false">
 			<layout colspan="12" />
 			<gweather city="Warstein" lang="de" current="true" forecast="true">
-				<layout colspan="7" />
+				<layout colspan="12" />
 			</gweather>
-		</group>
-		<group name="Räume" nowidget="true">
-			<layout colspan="6" />
-			<page name="Test"><layout colspan="3" /></page>
-			<page name="Wohnzimmer">
-				<layout colspan="3" />
-				<group name="Licht" nowidget="true">
-					<layout colspan="12" />
-					<switch mapping="OnOff" styling="RedGreen">
-						<layout colspan="3" />
-						<label>Strahler</label>
-						<address transform="DPT:1.001" variant="">13/0/0</address>
-					</switch>
-					<switch mapping="OnOff" styling="RedGreen">
-						<layout colspan="3" />
-						<label>Spot</label>
-						<address transform="DPT:1.001" variant="">13/0/1</address>
-					</switch>
-					<switch mapping="OnOff" styling="RedGreen">
-						<layout colspan="3" />
-						<label>Schrank</label>
-						<address transform="DPT:1.001" variant="">13/0/2</address>
-					</switch>
-					<switch mapping="OnOff" styling="RedGreen">
-						<layout colspan="3" />
-						<label>Stehlampe</label>
-						<address transform="DPT:1.001" variant="">13/0/24</address>
-					</switch>
-				</group>
-				<group name="Jalousien" nowidget="true">
-					<layout colspan="12" />
-					<multitrigger button1label="&#8593;" button1value="0"
-						button2label="&#8595;" button2value="1" styling="RedGreen"
-						mapping="UpDown">
-						<label><icon name="fts_rollo" /> Fenster</label>
-						<address transform="DPT:1.001" variant="">13/0/3</address>
-					</multitrigger>
-					<multitrigger button1label="&#8593;" button1value="0"
-						button2label="&#8595;" button2value="1" styling="RedGreen"
-						mapping="UpDown">
-						<label><icon name="fts_rollo" /> Tür</label>
-						<address transform="DPT:1.001" variant="">13/0/4</address>
-					</multitrigger>
-				</group>
-				<group name="Steckdosen" nowidget="true">
-					<layout colspan="12" />
-					<switch mapping="OnOff" styling="RedGreen">
-						<layout colspan="3" />
-						<label>SD 1</label>
-						<address transform="DPT:1.001" variant="">10/0/0</address>
-					</switch>
-					<switch mapping="OnOff" styling="RedGreen">
-						<layout colspan="3" />
-						<label>SD 2</label>
-						<address transform="DPT:1.001" variant="">13/0/5</address>
-					</switch>
-					<switch mapping="OnOff" styling="RedGreen">
-						<layout colspan="3" />
-						<label>SD 3</label>
-						<address transform="DPT:1.001" variant="">13/0/6</address>
-					</switch>
-					<switch mapping="OnOff" styling="RedGreen">
-						<layout colspan="3" />
-						<label>SD 4</label>
-						<address transform="DPT:1.001" variant="">13/0/13</address>
-					</switch>
-				</group>
-				<group name="Heizung" nowidget="true">
-					<slide min="0" max="100">
-						<label><icon name="sani_heizung" />Heizung</label>
-						<address transform="DPT:5.001" variant="">13/0/38</address>
-					</slide>
+		</page>
+			<page name="KNX" shownavbar="true" visible="false">
+				<navbar position="left" dynamic="true" width="200px">
+					<group name="Räume">
+						<pagejump target="Wohnzimmer" name="Wohnen">
+							<label>
+						<icon name="it_fernsehen" />
+					</label>
+						</pagejump>
+						<pagejump target="Schlafzimmer" name="Schlafen">
+							<label>
+						<icon name="szene_schlafen" />
+					</label>
+						</pagejump>
+					</group>
+					<group name="Sonstiges">
+						<pagejump target="Temperaturen" name="Temperatur">
+							<label>
+						<icon name="temp_temperatur" />
+					</label>
+						</pagejump>
+					</group>
+				</navbar>
+				<page name="Wohnzimmer">
+					<layout colspan="3" />
+					<group name="Licht">
+						<layout colspan="12" />
+						<switch mapping="OnOff" styling="RedGreen">
+							<layout colspan="3" />
+							<label>Strahler</label>
+							<address transform="DPT:1.001" variant="">13/0/0</address>
+						</switch>
+						<switch mapping="OnOff" styling="GreyGreen">
+							<layout colspan="3" />
+							<label>Spot</label>
+							<address transform="DPT:1.001" variant="">13/0/1</address>
+						</switch>
+						<switch mapping="OnOff" styling="GreyGreen">
+							<layout colspan="3" />
+							<label>Schrank</label>
+							<address transform="DPT:1.001" variant="">13/0/2</address>
+						</switch>
+						<switch mapping="OnOff" styling="GreyGreen">
+							<layout colspan="3" />
+							<label>Stehlampe</label>
+							<address transform="DPT:1.001" variant="">13/0/24</address>
+						</switch>
+					</group>
+					<group name="Jalousien">
+						<layout colspan="12" />
+						<multitrigger button1label="&#8593;" button1value="0"
+							button2label="&#8595;" button2value="1" styling="GreyGreen"
+							mapping="UpDown">
+							<label><icon name="fts_rollo" /> Fenster</label>
+							<address transform="DPT:1.001" variant="">13/0/3</address>
+						</multitrigger>
+						<multitrigger button1label="&#8593;" button1value="0"
+							button2label="&#8595;" button2value="1" styling="GreyGreen"
+							mapping="UpDown">
+							<label><icon name="fts_rollo" /> Tür</label>
+							<address transform="DPT:1.001" variant="">13/0/4</address>
+						</multitrigger>
+					</group>
+					<group name="Steckdosen">
+						<layout colspan="12" />
+						<switch mapping="OnOff" styling="GreyGreen">
+							<layout colspan="3" />
+							<label>SD 1</label>
+							<address transform="DPT:1.001" variant="">10/0/0</address>
+						</switch>
+						<switch mapping="OnOff" styling="GreyGreen">
+							<layout colspan="3" />
+							<label>SD 2</label>
+							<address transform="DPT:1.001" variant="">13/0/5</address>
+						</switch>
+						<switch mapping="OnOff" styling="GreyGreen">
+							<layout colspan="3" />
+							<label>SD 3</label>
+							<address transform="DPT:1.001" variant="">13/0/6</address>
+						</switch>
+						<switch mapping="OnOff" styling="GreyGreen">
+							<layout colspan="3" />
+							<label>SD 4</label>
+							<address transform="DPT:1.001" variant="">13/0/13</address>
+						</switch>
+					</group>
+					<group name="Heizung">
+						<slide min="0" max="100">
+							<label><icon name="sani_heizung" />Heizung</label>
+							<address transform="DPT:5.001" variant="">13/0/38</address>
+						</slide>
+						<info format="%.1f °C">
+							<label><icon name="temp_temperatur" />Ist</label>
+							<address transform="DPT:9.001" variant="">13/0/14</address>
+						</info>
+						<infotrigger uplabel="+" upvalue="0.5" downlabel="-"
+							downvalue="-0.5" styling="BluePurpleRedTemp" align="center"
+							infoposition="1" format="%.1f °C" change="absolute" min="15" max="25">
+							<label><icon name="temp_regelung" />Soll</label>
+							<address transform="DPT:9.001" variant="">13/0/39</address>
+						</infotrigger>
+					</group>
+					<group name="Sonstiges">
+						<info mapping="OpenClose">
+							<layout colspan="3" />
+							<label>Fenster</label>
+							<address transform="DPT:1.001" variant="">13/0/34</address>
+						</info>
+						<info mapping="DoorOpenClose">
+							<layout colspan="3" />
+							<label>Tür</label>
+							<address transform="DPT:1.001" variant="">13/0/35</address>
+						</info>
+						<info mapping="OnOff" styling="GreyGreen">
+							<label>Bewegung</label>
+							<address transform="DPT:1.001" variant="">13/0/36</address>
+						</info>
+					</group>
+				</page>
+				<page name="Schlafzimmer">
+					<layout colspan="3" />
+					<group name="Licht">
+						<layout colspan="12" />
+						<switch mapping="OnOff" styling="GreyGreen">
+							<label>Licht</label>
+							<address transform="DPT:1.001" variant="">13/1/0</address>
+						</switch>
+						<info format="%.2f Lux">
+							<label><icon name="licht_licht" />Helligkeit</label>
+							<address transform="DPT:9.001" variant="">13/1/25</address>
+						</info>
+					</group>
+					<group name="Jalousien + Fenster">
+						<layout colspan="12" />
+						<multitrigger button1label="&#8593;" button1value="0"
+							button2label="&#8595;" button2value="1">
+							<label><icon name="fts_rollo" />Jalousien</label>
+							<address transform="DPT:1.001" variant="">13/1/1</address>
+						</multitrigger>
+						<info mapping="OpenClose">
+							<label>Fenster</label>
+							<address transform="DPT:1.001" variant="">13/1/17</address>
+						</info>
+					</group>
+					<group align="center" name="Heizung">
+						<slide min="0" max="100">
+							<label><icon name="sani_heizung" />Heizung</label>
+							<address transform="DPT:5.001" variant="">13/1/27</address>
+						</slide>
+						<info format="%.1f °C">
+							<label><icon name="temp_temperatur" />Ist</label>
+							<address transform="DPT:9.001" variant="">13/1/12</address>
+						</info>
+						<infotrigger uplabel="+" upvalue="0.5" downlabel="-"
+							downvalue="-0.5" styling="BluePurpleRedTemp" align="center"
+							infoposition="1" format="%.1f °C" change="absolute" min="15" max="25">
+							<label><icon name="temp_regelung" />Soll</label>
+							<address transform="DPT:9.001" variant="">13/1/28</address>
+						</infotrigger>
+					</group>
+					<group align="center" name="Verbraucher">
+						<switch mapping="AudioMute" styling="GreyGreen">
+							<label>Lautsprecher</label>
+							<address transform="DPT:1.001" variant="">13/5/1</address>
+						</switch>
+						<switch mapping="OnOff" styling="GreyGreen">
+							<label>TV</label>
+							<address transform="DPT:1.001" variant="">13/1/4</address>
+						</switch>
+						<switch mapping="OnOff" styling="GreyGreen">
+							<label>DVD</label>
+							<address transform="DPT:1.001" variant="">13/1/7</address>
+						</switch>
+						<switch mapping="OnOff" styling="GreyGreen">
+							<label>IR</label>
+							<address transform="DPT:1.001" variant="">13/1/6</address>
+						</switch>
+					</group>
+				</page>
+				<page name="Temperaturen">
+					<layout colspan="3" />
 					<info format="%.1f °C">
-						<label><icon name="temp_temperatur" />Ist</label>
-						<address transform="DPT:9.001" variant="">13/0/14</address>
+						<label><icon name="temp_aussen" />Aussen</label>
+						<address transform="DPT:9.001" variant="">13/6/1</address>
 					</info>
-					<infotrigger uplabel="+" upvalue="0.5" downlabel="-"
-						downvalue="-0.5" styling="BluePurpleRedTemp" align="center"
-						infoposition="1" format="%.1f °C" change="absolute" min="15" max="25">
-						<label><icon name="temp_regelung" />Soll</label>
-						<address transform="DPT:9.001" variant="">13/0/39</address>
-					</infotrigger>
-				</group>
-				<group name="Sonstiges" nowidget="true">
-					<info mapping="OpenClose">
-						<layout colspan="3" />
-						<label>Fenster</label>
-						<address transform="DPT:1.001" variant="">13/0/34</address>
+					<info format="%.1f °C">
+						<label><icon name="temp_frost" />Kühlbox</label>
+						<address transform="DPT:9.001" variant="">13/5/4</address>
 					</info>
-					<info mapping="DoorOpenClose">
-						<layout colspan="3" />
-						<label>Tür</label>
-						<address transform="DPT:1.001" variant="">13/0/35</address>
+					<info format="%.1f °C">
+						<label><icon name="temp_innen" />Innen</label>
+						<address transform="DPT:9.001" variant="">14/1/6</address>
 					</info>
-					<info mapping="OnOff" styling="RedGreen">
-						<label>Bewegung</label>
-						<address transform="DPT:1.001" variant="">13/0/36</address>
-					</info>
-				</group>
+				</page>
 			</page>
-			<page name="Schlafzimmer">
-				<layout colspan="3" />
-				<group name="Licht" nowidget="true">
+			<page name="Video" visible="false"><text>Video Page</text></page>
+			<page name="Audio" shownavbar="true" visible="false">
+				<navbar position="left" dynamic="true" width="200px">
+					<group name="Sonstiges">
+						<pagejump target="Audio">
+							<label>
+								<icon name="audio_sound" />
+							</label>
+						</pagejump>
+					</group>
+				</navbar>
+				<group name="Allgemein">
 					<layout colspan="12" />
-					<switch mapping="OnOff" styling="RedGreen">
-						<label>Licht</label>
-						<address transform="DPT:1.001" variant="">13/1/0</address>
+					<switch mapping="OnOff" styling="GreyGreen">
+						<label>Webradio</label>
+						<address transform="DPT:1.001" variant="">12/1/7</address>
 					</switch>
-					<info format="%.2f Lux">
-						<label><icon name="licht_licht" />Helligkeit</label>
-						<address transform="DPT:9.001" variant="">13/1/25</address>
-					</info>
-				</group>
-				<group name="Jalousien + Fenster" nowidget="true">
-					<layout colspan="12" />
-					<multitrigger button1label="&#8593;" button1value="0"
-						button2label="&#8595;" button2value="1">
-						<label><icon name="fts_rollo" />Jalousien</label>
-						<address transform="DPT:1.001" variant="">13/1/1</address>
-					</multitrigger>
-					<info mapping="OpenClose">
-						<label>Fenster</label>
-						<address transform="DPT:1.001" variant="">13/1/17</address>
-					</info>
-				</group>
-				<group align="center" name="Heizung" nowidget="true">
-					<slide min="0" max="100">
-						<label><icon name="sani_heizung" />Heizung</label>
-						<address transform="DPT:5.001" variant="">13/1/27</address>
-					</slide>
-					<info format="%.1f °C">
-						<label><icon name="temp_temperatur" />Ist</label>
-						<address transform="DPT:9.001" variant="">13/1/12</address>
-					</info>
-					<infotrigger uplabel="+" upvalue="0.5" downlabel="-"
-						downvalue="-0.5" styling="BluePurpleRedTemp" align="center"
-						infoposition="1" format="%.1f °C" change="absolute" min="15" max="25">
-						<label><icon name="temp_regelung" />Soll</label>
-						<address transform="DPT:9.001" variant="">13/1/28</address>
-					</infotrigger>
-				</group>
-				<group align="center" name="Verbraucher" nowidget="true">
-					<switch mapping="AudioMute" styling="RedGreen">
-						<label>Lautsprecher</label>
+					<switch mapping="AudioMute" styling="GreyGreen">
+						<layout colspan="3" />
+						<label>LS Schlafzimmer</label>
 						<address transform="DPT:1.001" variant="">13/5/1</address>
 					</switch>
-					<switch mapping="OnOff" styling="RedGreen">
-						<label>TV</label>
-						<address transform="DPT:1.001" variant="">13/1/4</address>
+					<switch mapping="AudioMute" styling="GreyGreen">
+						<layout colspan="3" />
+						<label>LS Wohnzimmer</label>
+						<address transform="DPT:1.001" variant="">14/1/3</address>
 					</switch>
-					<switch mapping="OnOff" styling="RedGreen">
-						<label>DVD</label>
-						<address transform="DPT:1.001" variant="">13/1/7</address>
-					</switch>
-					<switch mapping="OnOff" styling="RedGreen">
-						<label>IR</label>
-						<address transform="DPT:1.001" variant="">13/1/6</address>
-					</switch>
 				</group>
 			</page>
-			<page name="Temperaturen">
-				<layout colspan="3" />
-				<info format="%.1f °C">
-					<label><icon name="temp_aussen" />Aussen</label>
-					<address transform="DPT:9.001" variant="">13/6/1</address>
-				</info>
-				<info format="%.1f °C">
-					<label><icon name="temp_frost" />Kühlbox</label>
-					<address transform="DPT:9.001" variant="">13/5/4</address>
-				</info>
-				<info format="%.1f °C">
-					<label><icon name="temp_innen" />Innen</label>
-					<address transform="DPT:9.001" variant="">14/1/6</address>
-				</info>
-			</page>
-		</group>
+			<page name="Web" visible="false"><text>Web Page</text></page>
 	</page>
 </pages>

This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.