Changed getNames signature from set to list

4 files changed, 1812 insertions, 528 deletions

diff --git a/apps/samples/vrml/viewer-webgl-setpose.js b/apps/samples/vrml/viewer-webgl-setpose.js
new file mode 100644
index 0000000..e2d3c6c
--- /dev/null
+++ b/apps/samples/vrml/viewer-webgl-setpose.js
@@ -0,0 +1,1353 @@
+// Define the namespace
+// var eu_smartvorex_femkit_ui_modelviewer = eu_smartvorex_femkit_ui_modelviewer || {};
+
+// eu_smartvorex_femkit_ui_modelviewer.VRMLViewer = function (element, params) {
+VRMLViewer = function (element, params) {
+	element.innerHTML = "<div name='vrmlviewer'/>";
+	
+  this.updatePose = function(pose) {
+	     console.log("Updating pose.");
+	     console.log("Pose = " + JSON.stringify(pose, null, 4));
+       if (!pose.width) pose.width = self.pose.width;
+       if (!pose.height) pose.height = self.pose.height;
+       // this.setScene(this.imagePath, this.imageFormat, pose, this.serverURL);
+  };
+
+  // private attributes
+  var self = this;
+  var batchChanges = false;
+  var webGLManipulatorsSetup = false;
+  var currWebGLModel = "";
+  
+  // private instanceId
+  // if (!eu_smartvorex_femkit_ui_modelviewer.VRMLViewer.instances)
+  //   eu_smartvorex_femkit_ui_modelviewer.VRMLViewer.instances = 0;
+  // this.instanceId = eu_smartvorex_femkit_ui_modelviewer.VRMLViewer.instances++;
+
+  if (!VRMLViewer.instances)
+    VRMLViewer.instances = 0;
+  this.instanceId = VRMLViewer.instances++;
+  
+  // public attribute defaults
+  this.width       = 450;
+  this.height      = 350;
+  
+  {
+    var pose = {
+      pitch: 0,
+      roll: 0,
+      yaw: 0,
+      zoom: 1,
+      x: 0,
+      y: 0,
+      z: 0,
+      autorotate: false,
+    };
+    this.pose = pose;
+  }
+  
+  this.enableMovies = false;
+  this.enableDND = true;
+  this.enableWebGL = true;
+  this.enableSceneshots = false;
+  this.enableDraggables = false;
+  this.treeNavigationStyle = true;
+  this.listNavigationStyle = true;
+  this.listDirectory = "";
+
+  this.serverURL = "localhost:8080";
+  this.imagePath = "";
+  this.imageFormat = ".png";
+  this.resRoot = "";
+  
+  osg.setNotifyLevel(osg.ERROR);
+  
+  // copy over values from constructor arguments
+  if (params) {
+    for (var param in params) {
+      if (self.hasOwnProperty(param)) {
+        self[param] = params[param];
+      } else {
+        console.log("Unknown paramter " + param);
+      }
+    }
+  }
+  
+  if (!self.pose.width)
+    self.pose.width = self.width;
+  if (!self.pose.height)
+    self.pose.height = self.height;
+
+  var hasWebGL = function() {
+    try {
+      if (!window.WebGLRenderingContext) {
+         return false;
+      }
+      var canvas = document.createElement("canvas");
+      var names = ["webgl", "experimental-webgl", "moz-webgl", "webkit-3d"];
+      for (var i = 0; i < 4; i++) {
+        var gl = canvas.getContext(names[i]);
+        if (gl) {
+          return true;
+        }
+      }
+    } catch(e) {
+      return false;
+    }
+    return false;
+  };
+  
+  if (self.enableWebGL && !hasWebGL()) {
+    console.log("Your browser does no support WebGL, falling back to sceneshots");
+    self.enableWebGL = false;
+    self.enableSceneshots = true;
+  }
+  
+  /**
+   * normalize given parameters
+   */
+  var normalizeParams = function() {
+    // make sure server url begins with protocol and does *not* ends in /
+    if (!self.serverURL.substring(0, 7) == "http://" && 
+        !self.serverURL.substring(0, 8) == "https://")
+      self.serverURL = "http://" + self.serverURL;
+    if (!self.serverURL.lastIndexOf("/") === self.serverURL.length)
+      self.serverURL += self.serverURL.substring(0, self.serverURL - 1);
+
+    // make sure we have a listDirectory with navigation style list ending in /
+    if (self.modelNavigationStyle === "list" && !self.listDirectory && self.imagePath)
+      self.listDirectory = self.imagePath.substring(0, self.imagePath.lastIndexOf("/"));
+    if (!self.listDirectory.indexOf("/", self.listDirectory.length - 1) !== -1)
+      self.listDirectory += "/";
+  
+    // use latest image if none given
+    if (!self.imagePath)
+      self.imagePath = self.listDirectory + "latest";
+  
+    if (!self.imageFormat.substring(0, 1) !== ".")
+      self.imageFormat = "." + self.imageFormat;    
+  };
+  normalizeParams();
+
+  /**
+   * Fetch a remote WebGL model and return a future for it
+   */
+  var getWebGLModel = function(url) {
+    console.log("Loading " + url);
+    if (self.webGLStandby) { self.webGLStandby.show(); }
+    var defer = osgDB.Promise.defer();
+    var node = new osg.MatrixTransform();
+    // node.setMatrix(osg.Matrix.makeRotate(-Math.PI/2, 1,0,0, []));
+    var loadModel = function(url) {
+      osg.log("loading " + url);
+      var req = new XMLHttpRequest();
+      req.open('GET', url, true);
+      req.onreadystatechange = function(aEvt) {
+        if (req.readyState == 4) {
+          if(req.status == 200) {
+            osgDB.Promise.when(osgDB.parseSceneGraph(JSON.parse(req.responseText))).then(function(child) {
+
+              console.log("Loaded " + url);
+
+              var rotate = [];
+              osg.Matrix.makeIdentity(rotate);
+              // osg.Matrix.preMult(rotate, osg.Matrix.makeRotate(Math.PI/2.0, 1,0,0,[]));
+              // osg.Matrix.preMult(rotate, osg.Matrix.makeRotate(Math.PI, 0,1,0,[]));
+              
+              node.setMatrix(rotate);
+              node.addChild(child);
+              defer.resolve(node);
+              osg.log("success " + url);
+              
+            });
+            if (self.webGLStandby) { self.webGLStandby.hide(); }
+          } else {
+            osg.log("error " + url);            
+            if (self.webGLStandby) { self.webGLStandby.hide(); }
+          }
+        }
+      };
+      req.send(null);
+    };
+    loadModel(url);
+    return defer.promise;
+  };
+
+  /**
+   * Concatenate pose as query string
+   */
+  var urlSuffixForPose = function(pose) {
+    var queryString =
+    '?width=' + pose.width + 
+    '&height=' + pose.height +
+    '&pitch=' + pose.pitch +
+    '&roll=' + pose.roll +
+    '&yaw=' + pose.yaw +
+    '&x=' + pose.x +
+    '&y=' + pose.y +
+    '&z=' + pose.z +
+    '&zoom=' + pose.zoom +
+    '&autorotate=' + (pose.autorotate ? '1' : '0');
+    return queryString;
+  };
+
+  /**
+   * Get relative position of two elements
+   */
+  var moverRelativeTo = function(mover, container) {
+    // see http://stackoverflow.com/questions/288699/get-the-position-of-a-div-span-tag
+    var absolutePosition = function(el) {
+      for (var lx=0, ly=0; el != null; lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
+      return {x: lx,y: ly};
+    };
+
+    var containerPos = absolutePosition(container);
+    return {
+      x: mover.x - containerPos.x, 
+      y: mover.y - containerPos.y
+    };
+  };
+
+  var eulerToMatrix = function(pitch, roll, yaw) {
+  	// see http://www.flipcode.com/documents/matrfaq.html#Q36
+    var m = osg.Matrix.makeIdentity([]);
+    
+    var A = Math.cos(pitch);
+    var B = Math.sin(pitch);
+    var C = Math.cos(roll);
+    var D = Math.sin(roll);
+    var E = Math.cos(yaw);
+    var F = Math.sin(yaw);
+    var AD = A * D;
+    var BD = B * D;
+    
+    osg.Matrix.setRow(m, 0,  (C * E),            (-C * F),          (-D),      0);
+    osg.Matrix.setRow(m, 1,  (-BD * E + A * F),  (BD * F + A * E),  (-B * C),  0);
+    osg.Matrix.setRow(m, 2,  (AD * E + B * F),   (-AD * F + B * E), (A * C),   0);
+    osg.Matrix.setRow(m, 3,  0,                  0,                 0,         1);
+   
+    return m;
+  }
+
+  var matrixToEuler = function(m) {
+  	// see: http://www.flipcode.com/documents/matrfaq.html#Q37
+    var angleX = 0;
+    var angleZ = 0;
+    var D = -1 * Math.asin(osg.Matrix.get(m,0,2));        /* Calculate Y-axis angle */
+    var angleY = D;
+    var C = Math.cos(angleY);
+    
+    /* Gimbal lock? */
+    if (Math.abs(C) > 0.005) {
+      var tr_x =  osg.Matrix.get(m,2,2) / C;           /* No, so get X-axis angle */
+      var tr_y = -1 * osg.Matrix.get(m,1,2)  / C;
+      angleX  = Math.atan2( tr_y, tr_x );
+      tr_x =  osg.Matrix.get(m,0,0) / C;                  /* Get Z-axis angle */
+      tr_y = -1 * osg.Matrix.get(m,0,1) / C;
+      angleZ  = Math.atan2( tr_y, tr_x );
+    } else {
+      /* Gimball lock has occurred */
+      angleX = 0;                      /* Set X-axis angle to zero */
+      var tr_x = osg.Matrix.get(m,1,1);                 /* And calculate Z-axis angle */
+      var tr_y = osg.Matrix.get(m,1,0);
+      angleZ = Math.atan2( tr_y, tr_x );
+    }
+    
+    /* Clamp all angles to range */
+    return {
+      pitch: angleX % (2 * 3.14159),
+      roll: angleY % (2 * 3.14159),
+      yaw: angleZ % (2 * 3.14159)
+    };
+  }
+  
+  // get list of supported ffmpeg codecs from server
+  this.populateMovieCodecs = function(server, selectElem) {
+    self.xhr.get({
+      // The URL to request
+      url: server,
+      handleAs:"json",
+      headers:{"X-Requested-With":null},
+      load: function(result) {
+        for (var codec in result.video) {
+          if (codec !== "mpeg1video" && 
+              codec !== "mpeg2video" && 
+              codec !== "mpeg4" && 
+              codec !== "h264" && 
+              codec !== "ayuv" && 
+              codec !== "flashsv" && 
+              codec !== "flashsv2" && 
+              codec !== "flv" && 
+              codec !== "rv40" && 
+              codec !== "theora" && 
+              codec !== "v210" && 
+              codec !== "v308" && 
+              codec !== "v408" && 
+              codec !== "v410" && 
+              codec !== "wmv3" && 
+              codec !== "y41p" && 
+              codec !== "yuv4")
+            continue;
+          // console.log(codec);
+          selectElem.options.push({ label: result.video[codec].longName, value: codec });              
+          if (codec === "mpeg4")
+            selectElem.options[selectElem.options.length - 1].selected = true;
+        }
+      }
+    });
+  };
+
+  // update list of vrml files from server
+  this.refreshServer = function(server, params) {
+    if (!self.listNavigationStyle && !self.treeNavigationStyle)
+    return;
+    
+    self.serverURL = server;
+    if (!params)
+      params = {};
+    if (self.fileStandby) { self.fileStandby.show(); }
+    
+    self.xhr.get({
+      // The URL to request
+      url: server,
+      handleAs:"json",
+      headers:{"X-Requested-With":null},
+      error: function(result) {
+        
+        if (self.browseButton) { self.browseButton.setAttribute('label', 'Browse'); }
+        if (self.fileStandby) { self.fileStandby.hide(); }
+
+        if (!params.skipTree) {
+          if (self.fileTreeStore) {
+            var allItems = self.fileTreeStore.query();
+            for (var i = 0; i < allItems.total; i++) {
+              self.fileTreeStore.remove(allItems[i].id);          
+            }
+          }
+        }
+        if (!params.skipList) {
+          if (self.fileListStore) {
+            var allItems = self.fileListStore.query();
+            for (var i = 0; i < allItems.total; i++) {
+              self.fileListStore.remove(allItems[i].id);          
+            }
+          }
+        }
+      },
+      load: function(result) {
+// self.localStorage.put("vrmlServer", self.serverURL, null);
+        if (self.browseButton) { self.browseButton.setAttribute('label', 'Refresh'); }
+        if (self.fileStandby) { self.fileStandby.hide(); }
+
+        if (self.treeNavigationStyle && !params.skipTree) {
+          // empty store
+          var allItems = self.fileTreeStore.query();
+          for (var i = 0; i < allItems.total; i++) {
+            self.fileTreeStore.remove(allItems[i].id);          
+          }
+          
+          // parse result as tree
+          (function fillstore(tree, parentId) {
+            // todo: respect navigation style
+            for (key in tree) {
+              if ('url' in tree[key]) {
+                self.fileTreeStore.add({id:parentId+key, name:key, url:tree[key].path, parent:parentId});
+              } else {
+                self.fileTreeStore.add({id:parentId+key, name:key, parent:parentId});
+                fillstore(tree[key], parentId+key);
+              }            
+            }
+          } (result.models, "root", ""));
+        }  
+        if (self.listNavigationStyle && !params.skipList) {
+          
+          // empty store
+          var allItems = self.fileListStore.query();
+          for (var i = 0; i < allItems.total; i++) {
+            self.fileListStore.remove(allItems[i].id);          
+          }
+          
+          // parse result as list
+          if (!self.listDirectory)
+            console.log("Requested modelNavigationStyle === list but provided no listDirectory");
+          var dirs = self.listDirectory.split("/");
+          var models = result.models;
+          for (var dir in dirs) {
+            if (!dirs[dir].length)
+              continue;
+            if (dirs[dir] in models) {
+              models = models[dirs[dir]];
+            } else {
+              console.log("No " + dirs[dir] + " in " + models);
+            }
+          }
+          for (var key in models) {
+            var url = self.serverURL + models[key].path;
+            self.fileListStore.add({id:key, value:models[key].path, label:key, name:key, url:url});
+          }
+          self.fileListSelect.startup();
+        }
+        // self.updateScene();
+      }
+    });
+  };
+
+  this.getPose = function() {
+    if (self.webGLViewer && self.webGLViewer.getSceneData()) {
+      var rotate = [];
+      osg.Matrix.makeIdentity(rotate);
+      
+      osg.Matrix.preMult(rotate, osg.Matrix.makeRotate(Math.PI/2.0, 1,0,0,[]));
+      osg.Matrix.preMult(rotate, osg.Matrix.makeRotate(Math.PI, 0,1,0,[]));
+      osg.Matrix.postMult(self.webGLViewer.getSceneData().getMatrix(), rotate);
+      
+      var pose = matrixToEuler(rotate);
+      return pose;
+    } else {
+      return {
+        pitch: self.pose.pitch,
+        roll: self.pose.roll,
+        yaw: self.pose.yaw,
+      }
+    }
+  }
+  
+  this.setPose = function(pose) {
+    this.setScene(self.imagePath, self.imageFormat, pose, self.serverURL);
+  }
+  
+  this.setScene = function(imagePath, imageFormat, pose, serverURL) {
+
+    if (serverURL && serverURL != self.serverURL) {
+      self.refreshServer(serverURL);
+    }
+        
+    self.imagePath = imagePath;
+    self.imageFormat = imageFormat;
+
+    for (var key in pose) {
+      self.pose[key] = pose[key];
+    }
+
+    self.pose.pitch = (2 * 3.14159 + self.pose.pitch) % (2 * 3.14159);
+    self.pose.roll = (2 * 3.14159 + self.pose.roll) % (2 * 3.14159);
+    self.pose.yaw = (2 * 3.14159 + self.pose.yaw) % (2 * 3.14159);
+
+    var pitch = (self.pose.pitch / (2 * 3.14159) + 0.5) * 100;
+    var roll = (self.pose.roll / (2 * 3.14159) + 0.5) * 100;
+    var yaw = (self.pose.yaw / (2 * 3.14159) + 0.5) * 100;
+    var x = ((self.pose.x / 100) + 0.5) * 100;
+    var y = ((self.pose.y / 100) + 0.5) * 100;
+    var zoom = (((self.pose.zoom - 1) / 3) + 0.5) * 100;
+
+    // console.log("pitch: " + pitch);
+
+    if (self.pitchRollHandlerElem) self.pitchRollHandlerElem.parentNode.style.right = pitch + "%";
+    if (self.pitchRollHandlerElem) self.pitchRollHandlerElem.parentNode.style.top = roll + "%";
+    if (self.yawZoomHandlerElem) self.yawZoomHandlerElem.parentNode.style.right = yaw + "%";
+    if (self.yawZoomHandlerElem) self.yawZoomHandlerElem.parentNode.style.top = zoom + "%";
+    if (self.xyHandlerElem) self.xyHandlerElem.parentNode.style.right = x + "%";
+    if (self.xyHandlerElem) self.xyHandlerElem.parentNode.style.top = y + "%";
+    
+    self.updateScene();
+  };
+
+  // update the scene
+  this.updateScene = function() {
+    if (self.serverURL && self.imagePath && !self.batchChanges) {
+      // console.log(self.serverURL + self.imagePath + self.imageFormat + urlSuffixForPose(self.pose));
+
+      if (self.enableWebGL) {
+        var setWebGLPose = function() {
+          
+          // reset camera controls
+          self.webGLViewer.getManipulator().reset();
+          self.webGLViewer.getManipulator().computeHomePosition();  
+
+          var bs = self.webGLViewer.getSceneData().getBound();
+          var zoom = 1; //self.pose.zoom || 10;
+          var eye = [0, 0, bs.radius() * (1.9 * zoom)];
+          // var center = bs.center();
+          // var up = [1,1,0];
+          
+          self.webGLViewer.getManipulator().setEyePosition(eye);
+          
+          // var poseMatrix = eulerToMatrix(self.pose.pitch, self.pose.yaw, -1 * self.pose.roll);
+          var poseMatrix = eulerToMatrix(self.pose.pitch * -1, self.pose.roll * -1, self.pose.yaw);
+          
+          var rotate = [];
+          osg.Matrix.makeIdentity(rotate);
+          // osg.Matrix.preMult(rotate, osg.Matrix.makeRotate(Math.PI/2.0, 1,0,0,[]));
+          // osg.Matrix.preMult(rotate, osg.Matrix.makeRotate(Math.PI, 0,1,0,[]));
+          osg.Matrix.postMult(poseMatrix, rotate);
+
+          // osg.Matrix.preMult(rotate, poseMatrix);
+          self.webGLViewer.getSceneData().setMatrix(rotate);
+          
+        }
+        
+        if (self.imagePath != currWebGLModel) {
+          currWebGLModel = self.imagePath;
+          osgDB.Promise.when(getWebGLModel(self.serverURL + self.imagePath + '.osgjs')).then(function(model) {       
+            self.webGLViewer.setSceneData(model);
+            if (!webGLManipulatorsSetup) {
+              self.webGLViewer.setupManipulator(new osgGA.OrbitManipulator(), false);
+              self.webGLViewer.getManipulator().computeHomePosition();  
+            }
+            webGLManipulatorsSetup = true;
+            setWebGLPose();
+          });
+        }
+        if (self.webGLViewer && currWebGLModel == self.imagePath && self.webGLViewer.getSceneData()) {
+          setWebGLPose();
+        }
+      } 
+      if (self.enableSceneshots) {
+        self.imgElem.src = self.serverURL + self.imagePath + self.imageFormat + urlSuffixForPose(self.pose);
+        if (self.enableMovies && self.movieAddButton) {
+          // we are showing an image, activate movie controls
+          self.movieAddButton.domNode.style.display = "";
+          self.movieDropDown.domNode.style.display = "";
+        }
+      }
+    }
+  };
+
+  require(["dojo/dom-construct", 
+           "dojo/_base/xhr", 
+           "dojo/dom", 
+           "dojo/on",
+           "dojo/_base/array",
+           "dojox/storage", 
+           "dojo/store/Memory", 
+           "dojo/store/Observable", 
+           "dijit/tree/ObjectStoreModel",
+           "dojo/data/ObjectStore",
+           "dijit/Tree",
+           "dijit/form/TextBox",
+           "dijit/form/Button",
+           "dojox/widget/Standby",
+           "dijit/form/DropDownButton",
+           "dijit/TooltipDialog",
+           "dojo/dnd/Moveable",
+           "dojo/ready",
+           "dojo/dnd/Source",
+           "dijit/form/HorizontalSlider",
+           "dijit/form/Select",
+           "dijit/form/NumberSpinner"], 
+    function(domConst, 
+             xhr, 
+             dom, 
+             on,
+             array,
+             storage, 
+             Memory,
+             Observable,
+             ObjectStoreModel,
+             ObjectStore,
+             Tree,
+             TextBox,
+             Button,
+             Standby,
+             DropDownButton,
+             TooltipDialog,
+             Moveable,
+             ready,
+             Source,
+             HorizontalSlider,
+             Selector,
+             NumberSpinner) {
+
+      ready(function() {
+        
+        if (typeof(element) === 'string') {
+          element = dom.byId(element);
+        }
+        element.style.height = self.pose.height;
+        element.style.width = self.pose.width;
+        
+        self.element = element;
+        self.xhr = xhr;
+        
+        // establish our dom
+        element.appendChild(domConst.toDom('\
+          <table>\
+            <tr>\
+              <td valign="top">\
+                  <div style="position: relative; padding: 0px; width: ' + self.pose.width + 'px; height: ' + self.pose.height + 'px">\
+                    <div class="screenShot" style="position: absolute; width: ' + self.pose.width + 'px; height: ' + self.pose.height + 'px">\
+                        <img class="screenShot" style="width: ' + self.pose.width + 'px; height: ' + self.pose.height + 'px"></img>\
+                    </div>\
+                    <div class="webGL" style="position: absolute; width: ' + self.pose.width + 'px; height: ' + self.pose.height + 'px">\
+                        <canvas class="webGL" style="width: ' + self.pose.width + 'px; height: ' + self.pose.height + 'px"></canvas>\
+                    </div>\
+                    <div style="z-index: -1; position: absolute; right: 45%; top: 45%">\
+                      <div class="progress"></div>\
+                    </div>\
+                    <div style="position: absolute; left: 10px; top: 10px">\
+                      <table></tr>\
+                        <td class="treeNavigation filesDropDown" style="vertical-align: middle"></td>\
+                        <td class="movieControls">\
+                          <div class="movieDropDown" style="display: inline"></div>\
+                          <button type="button" class="movieAddButton"></button>\
+                        </td>\
+                        <td align="right"><button type="button" class="resetButton"></button></td>\
+                        <td class="dndHandler" style="vertical-align: middle; padding-top: 4px;"></td>\
+                      </tr></table>\
+                    </div>\
+                    <div style="position: absolute; right: 10px; top: 15%; height: 50%">\
+                      <div class="zoomSlide"></div>\
+                    </div>\
+                    <div class="draggable" style="position: absolute; right: 50%; top: 50%">\
+                      <div class="pitchRollHandler" style="font-size: 0.5em; background-color: rgba(255,255,255,0.5); border-radius: 5px; moz-border-radius: 5px;">\
+                        <table>\
+                          <tr>\
+                            <td><img class="pitchRollHandlerImg" src="' + self.resRoot + 'img/pitchRoll-handle.png" height="20px" style="padding: 2px 0px 0px 4px;" /></td>\
+                            <td><div class="pitchLabel"></div><div class="rollLabel"></div></td>\
+                          </tr>\
+                        </table>\
+                      </div>\
+                    </div>\
+                    <div class="draggable"style="position: absolute; right: 50%; top: 50%">\
+                      <div class="yawZoomHandler">\
+                        <div style="font-size: 0.5em; background-color: rgba(255,255,255,0.5); border-radius: 5px; moz-border-radius: 5px; position: absolute; left: -34px;">\
+                          <table>\
+                            <tr>\
+                              <td><img class="yawZoomHandlerImg" src="' + self.resRoot + 'img/yawZoom-handle.png" height="20px" style="padding: 2px 0px 0px 4px;" /></td>\
+                              <td><div class="yawLabel"></div><div class="zoomLabel"></div></td>\
+                            </tr>\
+                          </table>\
+                        </div>\
+                      </div>\
+                    </div>\
+                    <div class="draggable"style="position: absolute; right: 50%; top: 50%">\
+                      <div class="xyHandler" style="font-size: 0.5em; background-color: rgba(255,255,255,0.5); border-radius: 5px; moz-border-radius: 5px;">\
+                        <table>\
+                          <tr>\
+                            <td><img class="xyHandlerImg" src="' + self.resRoot + 'img/xy-handle.png" width="20px" style="padding: 2px 0px 0px 4px;" /></td>\
+                            <td><div class="xLabel"></div><div class="yLabel"></div></td>\
+                          </tr>\
+                        </table>\
+                      </div>\
+                    </div>\
+                    <div class="listNavigation" style="position: absolute; left: 10px; bottom: 10px">\
+                      <table></tr>\
+                        <td style="vertical-align: middle"><button class="prevButton" type="button" /></td>\
+                        <td style="vertical-align: middle"><div class="fileList" /></td>\
+                        <td style="vertical-align: middle"><button class="nextButton" type="button" /></td>\
+                      </tr></table>\
+                    </div>\
+                  </div>\
+              </td>\
+              <td valign="top" height="100%">\
+              </td>\
+            </tr>\
+            <tr>\
+              <td colspan="2"><div class="messages"></div></td>\
+            </tr>\
+          </table>\
+        '));
+        
+        // fetch special dom nodes for content
+        self.messageBox = dojo.query("div.messages", element)[0];
+        self.imgElem = dojo.query("img.screenShot", element)[0];
+
+        /**
+         * === WebGL ====================
+         */
+        var activateWebGL = function(enable) {
+          if (enable) {
+            self.canvasElem = dojo.query("canvas.webGL", element)[0];
+            self.canvasElem.style.width = self.width;
+            self.canvasElem.style.height = self.height;
+            self.canvasElem.width = self.width;
+            self.canvasElem.height = self.height;
+                        
+            if (self.webGLViewer === undefined) {
+              self.webGLViewer = new osgViewer.Viewer(self.canvasElem, {antialias : true, alpha: true });
+              self.webGLViewer.init();
+              self.webGLViewer.getCamera().setClearColor([0.0, 0.0, 0.0, 0.0]);
+              self.webGLViewer.setupManipulator();
+              self.webGLViewer.run();
+              
+              self.webGLStandby = new Standby({target: self.element });
+              self.element.appendChild(self.webGLStandby.domNode);
+            }
+            
+            // show elements
+            array.forEach(dojo.query(".webGL", element), function(entry, i) {
+              entry.style.display = "inline";
+            });
+          } else {
+            if (self.webGLViewer) {
+              self.webGLViewer.stop();
+            }
+            // hide elements
+            array.forEach(dojo.query(".webGL", element), function(entry, i) {
+              entry.style.display = "none";
+            });
+          }
+        };
+        activateWebGL(self.enableWebGL);
+
+        var activateScreenshot = function(enable) {
+          if (enable) {
+            array.forEach(dojo.query(".screenShot", element), function(entry, i) {
+              entry.style.display = "inline";
+            });
+          } else {
+            array.forEach(dojo.query(".screenShot", element), function(entry, i) {
+              entry.style.display = "none";
+            });
+          }
+        };
+        activateScreenshot(self.enableSceneshots);
+        
+        
+        /**
+         * === POSE MANIPULATION AND RESET ====================
+         */
+         self.resetButtonElem = dojo.query("button.resetButton", element)[0];
+         self.resetButton = new Button({
+           label: "Reset",
+           onClick: function() {
+             if (self.webGLViewer) {
+               self.webGLViewer.setupManipulator();
+               self.webGLViewer.getManipulator().computeHomePosition();  
+             }
+             self.pose.x = 0;
+             self.pose.y = 0;
+             self.pose.pitch = 0;
+             self.pose.roll = 0;
+             self.pose.yaw = 0;
+             self.pose.zoom = 1;
+
+             if (self.xyHandler) self.xyHandler.node.style.left = 0;
+             if (self.xyHandler) self.xyHandler.node.style.top = 0;
+             if (self.pitchRollHandler) self.pitchRollHandler.node.style.left = 0;
+             if (self.pitchRollHandler) self.pitchRollHandler.node.style.top = 0;
+             if (self.yawZoomHandler) self.yawZoomHandler.node.style.left = 0;
+             if (self.yawZoomHandler) self.yawZoomHandler.node.style.top = 0;
+
+             self.updateScene();
+           }
+         }, self.resetButtonElem);
+
+        var activateDraggables = function(enable) {
+          if (enable) {
+            if (self.pitchRollHandler == undefined) {
+              self.progressElem = dojo.query("div.progress", element)[0];
+
+              self.pitchRollHandlerElem = dojo.query(".pitchRollHandler", element)[0];
+              self.yawZoomHandlerElem = dojo.query(".yawZoomHandler", element)[0];
+              self.xyHandlerElem = dojo.query(".xyHandler", element)[0];
+
+              self.pitchRollHandler = new Moveable(self.pitchRollHandlerElem);
+              self.pitchRollHandler.onMoveStop = function(mover) {
+                var handlerImg = dojo.query("img.pitchRollHandlerImg", mover.node)[0];
+                var pitchLabel = dojo.query("div.pitchLabel", mover.node)[0];
+                var rollLabel = dojo.query("div.rollLabel", mover.node)[0];
+                pitchLabel.innerHTML = '';
+                rollLabel.innerHTML = '';
+                self.updateScene();
+              };
+              self.pitchRollHandler.onMoving = function(mover) {
+                var handlerImg = dojo.query(".pitchRollHandlerImg", mover.node)[0];
+                var pitchLabel = dojo.query(".pitchLabel", mover.node)[0];
+                var rollLabel = dojo.query(".rollLabel", mover.node)[0];
+                var offset = moverRelativeTo(handlerImg, self.element);
+
+                offset.x += 30;
+                offset.y += 20;
+
+                self.xyHandlerElem.style.zIndex = 1;
+                self.yawZoomHandlerElem.style.zIndex = 1;
+                self.pitchRollHandlerElem.style.zIndex = 2;
+
+                self.pose.roll =  offset.x / self.pose.width - 0.5;
+                self.pose.pitch = offset.y / self.pose.height - 0.5;
+                self.pose.pitch *= -1;
+                self.pose.roll *= 2 * 3.14159;
+                self.pose.pitch *= 2 * 3.14159;
+                self.pose.roll = Math.ceil((self.pose.roll) * 10) / 10;
+                self.pose.pitch = Math.ceil((self.pose.pitch) * 10) / 10;
+                pitchLabel.innerHTML = 'Pitch:' + self.pose.pitch;
+                rollLabel.innerHTML =   'Roll:' + self.pose.roll;
+              };
+
+              self.yawZoomHandler = new Moveable(self.yawZoomHandlerElem);
+              self.yawZoomHandler.onMoveStop = function(mover) {
+                var handlerImg = dojo.query("img.yawZoomHandlerImg", mover.node)[0];
+                var yawLabel = dojo.query("div.yawLabel", mover.node)[0];
+                var zoomLabel = dojo.query("div.zoomLabel", mover.node)[0];
+                yawLabel.innerHTML = '';
+                zoomLabel.innerHTML = '';
+                self.updateScene();
+              };
+              self.yawZoomHandler.onMoving = function(mover) {
+                var handlerImg = dojo.query("img.yawZoomHandlerImg", mover.node)[0];
+                var yawLabel = dojo.query("div.yawLabel", mover.node)[0];
+                var zoomLabel = dojo.query("div.zoomLabel", mover.node)[0];
+                var offset = moverRelativeTo(handlerImg, self.element);
+
+                offset.x += 7;
+                offset.y += 9;
+
+                self.xyHandlerElem.style.zIndex = 1;
+                self.yawZoomHandlerElem.style.zIndex = 2;
+                self.pitchRollHandlerElem.style.zIndex = 1;
+
+                // self.pose.pitch = self.pose.pitch % (2 * 3.14159);
+                // self.pose.roll = self.pose.roll % (2 * 3.14159);
+                self.pose.yaw =  (self.pose.width - offset.x) / self.pose.width - 0.5;
+                self.pose.zoom = offset.y / self.pose.height - 0.5;
+                self.pose.yaw *= 2 * 3.14159;
+                self.pose.zoom = self.pose.zoom * 3 + 1;
+                self.pose.zoom = Math.ceil((self.pose.zoom) * 10) / 10;
+                self.pose.yaw = Math.ceil((self.pose.yaw) * 10) / 10;
+                yawLabel.innerHTML = 'Yaw:' + self.pose.yaw;
+                zoomLabel.innerHTML = 'Zoom:' + self.pose.zoom;
+              };
+
+              self.xyHandler = new Moveable(self.xyHandlerElem);
+              self.xyHandler.onMoveStop = function(mover) {
+                var handlerImg = dojo.query("img.xyHandlerImg", mover.node)[0];
+                var xLabel = dojo.query("div.xLabel", mover.node)[0];
+                var yLabel = dojo.query("div.yLabel", mover.node)[0];
+
+                xLabel.innerHTML = '';
+                yLabel.innerHTML = '';
+
+                self.updateScene();
+              };
+              self.xyHandler.onMoving = function(mover) {
+                var handlerImg = dojo.query("img.xyHandlerImg", mover.node)[0];
+                var xLabel = dojo.query("div.xLabel", mover.node)[0];
+                var yLabel = dojo.query("div.yLabel", mover.node)[0];
+                var offset = moverRelativeTo(handlerImg, self.element);
+
+                offset.x += 3;
+                offset.y += 13;
+
+                self.xyHandlerElem.style.zIndex = 2;
+                self.yawZoomHandlerElem.style.zIndex = 1;
+                self.pitchRollHandlerElem.style.zIndex = 1;
+
+                self.pose.x = offset.x / self.pose.width - 0.5;
+                self.pose.y = offset.y / self.pose.height - 0.5;
+                self.pose.x *= 100;
+                self.pose.y *= 100;
+                self.pose.y = Math.ceil((self.pose.y) * 10) / 10;
+                self.pose.x = Math.ceil((self.pose.x) * 10) / 10;
+                xLabel.innerHTML = 'X:' + self.pose.x;
+                yLabel.innerHTML = 'Y:' + self.pose.y;
+              };
+            }
+            
+            // show all draggables
+            array.forEach(dojo.query(".draggable", element), function(entry, i) {
+              entry.style.display = "inline";
+            });
+            
+          } else {
+            // show all draggables
+            array.forEach(dojo.query(".draggable", element), function(entry, i) {
+              entry.style.display = "none";
+            });
+          }
+        };
+        activateDraggables(self.enableDraggables);
+        
+        /**
+         * === DRAG HANDLER ====================
+         */
+        var activateDND = function(enable) {
+          if (enable) {
+            self.createAvatar = function(item, mode) {
+              if (mode == 'avatar') {
+                 // create your avatar if you want
+                 var avatar = dojo.create( 'div', { innerHTML: item.data });
+                 var avatarPose = dojo.clone(self.pose);
+                 avatarPose.width=60;
+                 avatarPose.height=60;
+                 var avatarImgUrl = urlSuffixForPose(avatarPose);
+                 avatar.innerHTML = '<img src=' + self.serverURL + self.imagePath + self.imageFormat + avatarImgUrl + ' /> ';
+                 item.srcEcc = "VRMLViewer";
+                 item.iconPoseUrl = self.serverURL + self.imagePath + self.imageFormat + avatarImgUrl;
+                 item.imagePath = self.imagePath;
+                 item.imageFormat = self.imageFormat;
+                 item.serverURL = self.serverURL;
+                 item.pose = avatarPose;
+                 return {node: avatar, data: item, type: item.type};
+              }
+              var handler = dojo.create( 'div', { innerHTML: '<img src="' + self.resRoot + 'img/drag.png" width="20px" />' });
+              return {node: handler, data: item, type: item.type};
+            };
+      
+            self.dndHandler = new Source(dojo.query("td.dndHandler", element)[0], {copyOnly: true, creator: self.createAvatar});
+            self.dndHandler.insertNodes(false, [ { } ]);
+            
+            array.forEach(dojo.query(".dndHandler", element), function(entry, i) {
+              entry.style.display = "inline";
+            });
+            
+          } else {
+            array.forEach(dojo.query(".dndHandler", element), function(entry, i) {
+              entry.style.display = "none";
+            });
+            
+          }
+        };
+        
+        activateDND(self.enableDND);
+        
+        /**
+         * === FILE NAVIGATION ====================
+         */
+
+        var activateListNavigation = function(enable) {
+          if (enable) {
+            array.forEach(dojo.query(".listNavigation", element), function(entry, i) {
+              entry.style.display = "inline";
+            });
+          
+            if (!self.fileListStore) {
+              // setup fileStore
+              self.fileListStore = new Observable(new Memory({
+                data: [],
+              }));
+            
+              self.prevButtonElem = dojo.query("button.prevButton", element)[0];
+              self.nextButtonElem = dojo.query("button.nextButton", element)[0];
+              self.fileListElem = dojo.query("div.fileList", element)[0];
+            
+              self.fileListSelect = new Selector({
+                store: new ObjectStore({ objectStore: self.fileListStore }),
+                onChange: function(name) {
+                  var item = self.fileListStore.query({ id: name })[0];
+                  self.imagePath = self.listDirectory + item.name;
+                  self.updateScene();
+                }
+              }, self.fileListElem);
+            
+              self.prevButton = new Button({
+                label: "<",
+                onClick: function() {
+                  var allItems = self.fileListStore.query();
+                  var foundAt = 0;
+                  for (var i = 0; i < allItems.total; i++) {
+                    console.log(self.serverURL + self.imagePath + " === " + allItems[i].url);
+                    if (self.serverURL + self.imagePath === allItems[i].url) {
+                      foundAt = i;
+                      break;
+                    }
+                  }
+                
+                  if (foundAt > 0) {
+                    self.imagePath = self.listDirectory + allItems[foundAt - 1].name;
+                    self.fileListSelect.attr( 'value', allItems[foundAt - 1].id );
+                    if (self.serverURL + self.imagePath !== allItems[foundAt - 1].url)
+                      console.log(self.serverURL + self.imagePath + " !== " + allItems[foundAt - 1].url);
+                    self.updateScene();
+                  }
+                }
+              }, self.prevButtonElem);
+
+              self.nextButton = new Button({
+                label: ">",
+                onClick: function() {
+                  var allItems = self.fileListStore.query();
+                  var foundAt = 0;
+                  for (var i = 0; i < allItems.total; i++) {
+                    // console.log(self.serverURL + self.imagePath + " === " + allItems[i].url);
+                    if (self.serverURL + self.imagePath === allItems[i].url) {
+                      foundAt = i;
+                      break;
+                    }
+                  }
+                  if (foundAt + 1 < allItems.total) {
+                    self.imagePath = self.listDirectory + allItems[foundAt + 1].name + ".png";
+                    self.fileListSelect.attr( 'value', allItems[foundAt + 1].id );
+                    if (self.serverURL + self.imagePath !== allItems[foundAt + 1].url)
+                      console.log(self.serverURL + self.imagePath + " !== " + allItems[foundAt + 1].url);
+                    self.updateScene();
+                  }
+                }
+              }, self.nextButtonElem);
+            }
+          } else {
+            array.forEach(dojo.query(".listNavigation", element), function(entry, i) {
+              entry.style.display = "none";
+            });
+          }
+        };
+        activateListNavigation(self.listNavigationStyle);
+        
+        var activateTreeNavigation = function(enable) {
+          if (enable) {
+
+            array.forEach(dojo.query(".treeNavigation", element), function(entry, i) {
+              entry.style.display = "";
+            });
+          
+            if (!self.fileTreeStore) {
+              // setup fileStore
+              self.fileTreeStore = new Observable(new Memory({
+                data: [ { id: 'root', name:'3D Models'} ],
+                getChildren: function(object){
+                    return this.query({parent: object.id});
+                }
+              }));
+          
+              self.fileTreeModel = new ObjectStoreModel({
+                  store: self.fileTreeStore,
+                  query: { id: "root" }
+              });
+
+              // setup actual tree dijit
+              self.fileTree = new dijit.Tree({
+                  id: "fileTree" + self.instanceId,
+                  model: self.fileTreeModel,
+                  persist: false,
+                  showRoot: false,
+                  style: "height: 300px;",
+                  onClick: function(item){
+                    if ('url' in item) {
+                      self.imagePath = item.url;
+                      var newListDir = self.imagePath.substring(0, self.imagePath.lastIndexOf("/"));
+                      if (newListDir.length > 0)
+                        newListDir += '/';
+                      if (newListDir !== self.listDirectory) {
+                         self.listDirectory = newListDir;
+                         self.refreshServer(self.serverURL, { skipTree: true });
+                      }
+                      self.updateScene();
+                    }
+                  },
+                  getIconClass: function(item, opened) {
+                      return (!item || !('url' in item)) ? (opened ? "dijitFolderOpened" : "dijitFolderClosed") : "dijitLeaf";
+                  },
+                  getIconStyle: function(item, opened){
+                    if('url' in item) {
+                      return { backgroundImage: "url('" + self.serverURL + item.url + self.imageFormat + "?width=16&height=16')"};
+                    }
+                  }
+              });
+          
+              self.filesDropDownElem = dojo.query("td.filesDropDown", element)[0];
+
+              self.serverBox = new TextBox({
+                name: "Server",
+                value: self.serverURL,
+                style: "width: 65%",
+
+                onKeyUp: function(e) {
+                  if (self.browseButton) { 
+                    if (this.get("value") !== self.serverURL) {
+                      self.browseButton.setAttribute('label', 'Browse'); 
+                    } else {
+                      self.browseButton.setAttribute('label', 'Refresh'); 
+                    }
+                  }
+                },
+
+                onKeyDown: function(e) {
+                  var code = e.keyCode || e.which;
+                  if( code === 13 ) {
+                    e.preventDefault();
+                    self.refreshServer(this.get("value"));
+                    return false; 
+                  }
+                },
+              });
+
+              self.browseButton = new Button({
+                label: "Browse",
+                onClick: function(){
+                  self.refreshServer(self.serverBox.get("value"));
+                }
+              });
+
+              self.filesDropDownContent = domConst.toDom('<div />');
+              self.filesDropDownContent.appendChild(self.serverBox.domNode);
+              self.filesDropDownContent.appendChild(self.browseButton.domNode);
+              self.filesDropDownContent.appendChild(self.fileTree.domNode);
+
+              self.filesToolTip = new TooltipDialog({ content:self.filesDropDownContent, style:"max-height:320px"});
+              self.filesDropDown = new DropDownButton({ label: "Files", dropDown: self.filesToolTip });
+              self.filesDropDownElem.appendChild(self.filesDropDown.domNode);
+
+              self.fileStandby = new Standby({target: self.filesDropDownContent });
+              self.filesDropDownContent.appendChild(self.fileStandby.domNode);
+            }
+          } else {
+            array.forEach(dojo.query(".treeNavigation", element), function(entry, i) {
+              entry.style.display = "none";
+            });
+          }
+        };
+        
+        activateTreeNavigation(self.treeNavigationStyle);
+        
+        /**
+         * === MOVIE DROPDOWN ====================
+         */
+        
+        var activateMovies = function(enable) {
+          if (enable) {
+            self.movieDropDownElem = dojo.query("div.movieDropDown", element)[0];
+            self.movieAddButtonElem = dojo.query("button.movieAddButton", element)[0];
+
+            self.movieDropDownContent = domConst.toDom(
+              '<div style="overflow: auto; max-height: 420px;"> \
+                <table><tr class="movieFormatLengthRow" /></tr><tr class="movieWidthHeightLengthRow" /></table> \
+                <div class=\"dndArea\" /> \
+              </div>'
+            );
+        
+            self.movieFormatLengthRowElem = dojo.query("tr.movieFormatLengthRow", self.movieDropDownContent)[0];
+            self.movieWidthHeightLengthRowElem = dojo.query("tr.movieWidthHeightLengthRow", self.movieDropDownContent)[0];
+            self.movieDnDArea = dojo.query("div.dndArea", self.movieDropDownContent)[0];
+        
+            self.createMovieThumb = function(item, mode) {
+              if (mode == 'avatar') {
+                 // when dragged
+                 var avatar = dojo.create( 'div', { innerHTML: item.data });
+                 var avatarPose = dojo.clone(self.pose);
+                 avatarPose.width = 60;
+                 avatarPose.height = 60;
+                 var avatarImgUrl = urlSuffixForPose(avatarPose);
+                 avatar.innerHTML = '<img src=' + self.imagePath + self.imageFormat + avatarImgUrl + ' /> ';
+                 item.srcEcc = "VRMLViewer";
+                 item.iconPoseUrl = self.imagePath + avatarImgUrl;
+                 item.imagePath = self.imagePath;
+                 item.serverURL = self.serverURL;
+                 item.pose = avatarPose;
+                 return {node: avatar, data: item, type: item.type};
+              } else {
+            
+                // when added to list
+                var thumb = domConst.toDom("\
+                  <div>\
+                    <table><tr><td>\
+                      <img class=\"movieThumb\"/>\
+                      <img class=\"removeThumb\" style=\"vertical-align: top; margin: -3px 0px 0px -8px; width: 20px; height: 20px;\"/>\
+                    </td><td align=\"left\">\
+                      <table><tr>\
+                        <td>Frame:</td><td><div class=\"relFrameLength\"/></td>\
+                        <td><div class=\"fillInSeries\" \></td>\
+                      </tr><tr>\
+                        <td>Transition:</td><td><div class=\"relTransitionLength\"/></td>\
+                      </tr></table>\
+                    </td></tr></table>\
+                  </div>\
+                ");
+                thumb = dojo.query("div", thumb)[0];
+            
+                var thumbImgElem = dojo.query("img.movieThumb", thumb)[0];
+                var removeImgElem = dojo.query("img.removeThumb", thumb)[0];
+                var relFrameLengthElem = dojo.query("div.relFrameLength", thumb)[0];
+                var relTransitionLengthElem = dojo.query("div.relTransitionLength", thumb)[0];
+                var fillInSeriesElem = dojo.query("div.fillInSeries", thumb)[0];
+            
+                item.getThisAndNeighborsFromDnD = function() {
+                  var thisAndNeighbors = {};
+                  self.addToMovieHandler.forInItems(function(obj, key, ctx) {
+                    if (obj.data === item) {
+                      thisAndNeighbors.this = { key: key, obj: obj };
+                    } else {
+                      thisAndNeighbors.before = { key: key, obj: obj };
+                    }
+                    if (thisAndNeighbors.this) {
+                      thisAndNeighbors.after = { key: key, obj: obj };
+                      return thisAndNeighbors;
+                    }
+                  });
+                  return thisAndNeighbors;
+                };
+            
+                item.relFrameLengthSlider = new HorizontalSlider({ 
+                  value: 50,
+                  title: "Relative Duration of Frame",
+                  style: "width:150px;"
+                }, relFrameLengthElem);
+
+                item.relTransitionLengthSlider = new HorizontalSlider({ 
+                  value: 100,
+                  title: "Relative Duration of Transition",
+                  style: "width:150px;"
+                }, relTransitionLengthElem);
+            
+                removeImgElem.onclick = function() {
+                  var thisItem = item.getThisAndNeighborsFromDnD();
+                  if (thisItem.this) {
+                    // haha - what a mess!
+                    self.addToMovieHandler.selectNone();
+                    self.addToMovieHandler.selection[thisItem.this.key] = thisItem.this.obj;
+                    self.addToMovieHandler.deleteSelectedNodes();
+                  }
+                  // disable create button if this was the last one
+                  if (!thisItem.after || !thisItem.before) {
+                    self.movieCreateButton.setAttribute('disabled', true);
+                  }
+                }
+            
+                item.fillInSeriesButton = new Button({ 
+                  label: "Insert Series",
+                  style: "display: none;",
+                  onClick: function(){
+                    alert("foo");
+                  }
+                }, fillInSeriesElem);
+            
+                removeImgElem.src = self.resRoot + "img/close.png";
+            
+                var thumbPose = dojo.clone(self.pose);
+                thumbPose.width = self.pose.width / 10;
+                thumbPose.height = self.pose.height / 10;
+                var thumbImgUrl = urlSuffixForPose(thumbPose);
+            
+                thumbImgElem.src = self.serverURL + self.imagePath + self.imageFormat + thumbImgUrl;
+                // removeImgElem.src = self.resRoot + 'img/close.png';
+                        
+                item.srcEcc = "VRMLViewer";
+                item.iconPoseUrl = self.imagePath + thumbImgUrl;
+                item.imagePath = self.imagePath;
+                item.serverURL = self.serverURL;
+                item.pose = thumbPose;
+            
+                return {node: thumb, data: item, type: item.type};
+              }
+            };
+
+            self.addToMovieHandler = new Source(self.movieDnDArea, {copyOnly: true, creator: self.createMovieThumb});
+
+            self.movieFormatSelection = new Selector({
+              name: "movieFormat",
+              style: "width: 320px",
+              options: []
+            });
+            self.populateMovieCodecs(self.serverURL + '/movie/codecs', self.movieFormatSelection);
+
+            self.movieFormatLengthRowElem.appendChild(dojo.create('td', { innerHTML: 'Format:'} ));
+            self.movieFormatLengthRowElem.appendChild(dojo.create('td', { colspan: "2"}));
+            self.movieFormatLengthRowElem.lastChild.appendChild(self.movieFormatSelection.domNode);
+        
+            self.movieHeightSpinner = new NumberSpinner({
+              value: 400,
+              smallDelta: 1,
+              style: "width: 60px",
+              constraints: { min:40, places:0 },
+            });
+        
+            self.movieWidthSpinner = new NumberSpinner({
+              value: 600,
+              smallDelta: 1,
+              style: "width: 60px",
+              constraints: { min:40, places:0 },
+            });
+
+            self.movieCreateButton = new Button({
+              label: "Create",
+              disabled: true,
+              onClick: function(){
+                        
+                var form = document.createElement("form");
+
+                form.setAttribute("method", "post");
+                form.setAttribute("action", self.serverURL + "/movie");
+
+                var submitData = {};
+                submitData.frames = [];
+                submitData.movieLength = self.movieDurationSpinner.value;
+                submitData.format = self.movieFormatSelection.value;
+                submitData.width = self.movieWidthSpinner.value;
+                submitData.height = self.movieHeightSpinner.value;
+            
+                self.addToMovieHandler.forInItems(function(obj, key, ctx) {
+                  var jsonData = {
+                    iconPoseUrl: obj.data.iconPoseUrl,
+                    imagePath: obj.data.imagePath,
+                    serverURL: obj.data.serverURL,
+                    pose: obj.data.pose,
+                    relFrameLength: obj.data.relFrameLengthSlider.value,
+                    relTransitionLength: obj.data.relTransitionLengthSlider.value,
+                  }
+                  submitData.frames.push(jsonData);
+                });
+
+                var hiddenField = document.createElement("input");
+                hiddenField.setAttribute("type", "hidden");
+                hiddenField.setAttribute("name", "data");
+                hiddenField.setAttribute("value", JSON.stringify(submitData));
+
+                form.appendChild(hiddenField);
+                        
+                document.body.appendChild(form);
+                form.submit();
+                document.body.removeChild(form);
+              }
+            });
+
+            self.movieDurationSpinner = new NumberSpinner({
+              value: 10,
+              smallDelta: 1,
+              style: "width: 40px",
+              constraints: { min:0, places:0 },
+            });
+
+            // append format duration cell
+            self.movieWidthHeightLengthRowElem.appendChild(dojo.create('td', { innerHTML: 'Size:'} ));
+            var movieDimensionCell = dojo.create('td');
+            movieDimensionCell.appendChild(self.movieWidthSpinner.domNode);
+            movieDimensionCell.appendChild(dojo.create('span', { innerHTML: "x"} ));
+            movieDimensionCell.appendChild(self.movieHeightSpinner.domNode);
+            movieDimensionCell.appendChild(self.movieDurationSpinner.domNode);
+            movieDimensionCell.appendChild(dojo.create('span', { innerHTML: "sec"} ));        
+            self.movieWidthHeightLengthRowElem.appendChild(movieDimensionCell);
+
+            self.movieWidthHeightLengthRowElem.appendChild(dojo.create('td', { align: "right"}));
+            self.movieWidthHeightLengthRowElem.lastChild.appendChild(self.movieCreateButton.domNode);
+
+
+            self.movieToolTip = new TooltipDialog({ content:self.movieDropDownContent });
+            self.movieDropDown = new DropDownButton({ 
+              label: "Movie", 
+              style: "display: none;",
+              dropDown: self.movieToolTip });
+            self.movieDropDownElem.appendChild(self.movieDropDown.domNode);
+
+            self.movieAddButton = new Button({
+              label: "+",
+              style: "margin-left: -10px; display: none;",
+              onClick: function(){
+                if (self.movieFormatSelection.options.length == 0) {
+                  self.populateMovieCodecs(self.serverURL + '/movie/codecs', self.movieFormatSelection);
+                }
+                // we could pass item.data here to creator
+                self.addToMovieHandler.insertNodes(false, [ { } ]);
+                self.movieCreateButton.setAttribute('disabled', false);
+            
+              }
+            }, self.movieAddButtonElem);
+          } else {
+            // remove movie controls
+            var movieControls = dojo.query("td.movieControls", element)[0];
+            movieControls.parentNode.removeChild(movieControls);
+          }
+        }
+        activateMovies(self.enableMovies);
+        
+        // do we have parameters for the initial pose?
+        if(self.params && self.params.pose)
+          self.setScene(self.params.imagePath, self.params.pose, self.params.serverURL);
+
+        if (self.serverURL) {
+          self.refreshServer(self.serverURL);
+          self.updateScene();
+        }
+
+      });
+    });
+
+};
diff --git a/apps/samples/vrml/viewer-webgl.js b/apps/samples/vrml/viewer-webgl.js
index e2d3c6c..bc5833b 100644
--- a/apps/samples/vrml/viewer-webgl.js
+++ b/apps/samples/vrml/viewer-webgl.js
@@ -1,29 +1,11 @@
-// Define the namespace
-// var eu_smartvorex_femkit_ui_modelviewer = eu_smartvorex_femkit_ui_modelviewer || {};
-
-// eu_smartvorex_femkit_ui_modelviewer.VRMLViewer = function (element, params) {
-VRMLViewer = function (element, params) {
-	element.innerHTML = "<div name='vrmlviewer'/>";
-	
-  this.updatePose = function(pose) {
-	     console.log("Updating pose.");
-	     console.log("Pose = " + JSON.stringify(pose, null, 4));
-       if (!pose.width) pose.width = self.pose.width;
-       if (!pose.height) pose.height = self.pose.height;
-       // this.setScene(this.imagePath, this.imageFormat, pose, this.serverURL);
-  };
+function VRMLViewer(element, params) {
 
   // private attributes
   var self = this;
   var batchChanges = false;
   var webGLManipulatorsSetup = false;
-  var currWebGLModel = "";
   
   // private instanceId
-  // if (!eu_smartvorex_femkit_ui_modelviewer.VRMLViewer.instances)
-  //   eu_smartvorex_femkit_ui_modelviewer.VRMLViewer.instances = 0;
-  // this.instanceId = eu_smartvorex_femkit_ui_modelviewer.VRMLViewer.instances++;
-
   if (!VRMLViewer.instances)
     VRMLViewer.instances = 0;
   this.instanceId = VRMLViewer.instances++;
@@ -41,8 +23,10 @@ VRMLViewer = function (element, params) {
       x: 0,
       y: 0,
       z: 0,
+      width: false,
+      height: false,
       autorotate: false,
-    };
+    }
     this.pose = pose;
   }
   
@@ -51,17 +35,17 @@ VRMLViewer = function (element, params) {
   this.enableWebGL = true;
   this.enableSceneshots = false;
   this.enableDraggables = false;
+  this.enablePosePublishing = true;
   this.treeNavigationStyle = true;
   this.listNavigationStyle = true;
   this.listDirectory = "";
 
-  this.serverURL = "localhost:8080";
+  this.serverURL = "localhost:8082";
+  this.webSocketURL = "localhost:8083";
   this.imagePath = "";
   this.imageFormat = ".png";
   this.resRoot = "";
   
-  osg.setNotifyLevel(osg.ERROR);
-  
   // copy over values from constructor arguments
   if (params) {
     for (var param in params) {
@@ -78,6 +62,13 @@ VRMLViewer = function (element, params) {
   if (!self.pose.height)
     self.pose.height = self.height;
 
+  this.hasWebSockets = ("WebSocket" in window);
+  
+  if (self.enablePosePublishing && !self.hasWebSockets) {
+    console.log("Your browser does not support WebSockets, deactivating pose publishing");
+    self.enablePosePublishing = false;
+  }
+  
   var hasWebGL = function() {
     try {
       if (!window.WebGLRenderingContext) {
@@ -95,17 +86,39 @@ VRMLViewer = function (element, params) {
       return false;
     }
     return false;
-  };
+  }
+  self.hasWebGL = hasWebGL();
   
   if (self.enableWebGL && !hasWebGL()) {
-    console.log("Your browser does no support WebGL, falling back to sceneshots");
+    console.log("Your browser does not support WebGL, falling back to sceneshots");
     self.enableWebGL = false;
     self.enableSceneshots = true;
   }
   
-  /**
-   * normalize given parameters
-   */
+  // see http://stackoverflow.com/questions/4810841/how-can-i-pretty-print-json-using-javascript
+  function syntaxHighlight(json) {
+      if (typeof json != 'string') {
+           json = JSON.stringify(json, undefined, 2);
+      }
+      json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+      return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
+          var cls = 'number';
+          if (/^"/.test(match)) {
+              if (/:$/.test(match)) {
+                  cls = 'key';
+              } else {
+                  cls = 'string';
+              }
+          } else if (/true|false/.test(match)) {
+              cls = 'boolean';
+          } else if (/null/.test(match)) {
+              cls = 'null';
+          }
+          return '<span class="' + cls + '">' + match + '</span>';
+      });
+  }
+  
+  // normalize parameters
   var normalizeParams = function() {
     // make sure server url begins with protocol and does *not* ends in /
     if (!self.serverURL.substring(0, 7) == "http://" && 
@@ -126,18 +139,14 @@ VRMLViewer = function (element, params) {
   
     if (!self.imageFormat.substring(0, 1) !== ".")
       self.imageFormat = "." + self.imageFormat;    
-  };
+  }
   normalizeParams();
-
-  /**
-   * Fetch a remote WebGL model and return a future for it
-   */
+  
   var getWebGLModel = function(url) {
-    console.log("Loading " + url);
     if (self.webGLStandby) { self.webGLStandby.show(); }
     var defer = osgDB.Promise.defer();
     var node = new osg.MatrixTransform();
-    // node.setMatrix(osg.Matrix.makeRotate(-Math.PI/2, 1,0,0, []));
+    //node.setMatrix(osg.Matrix.makeRotate(-Math.PI/2, 1,0,0, []));
     var loadModel = function(url) {
       osg.log("loading " + url);
       var req = new XMLHttpRequest();
@@ -146,36 +155,23 @@ VRMLViewer = function (element, params) {
         if (req.readyState == 4) {
           if(req.status == 200) {
             osgDB.Promise.when(osgDB.parseSceneGraph(JSON.parse(req.responseText))).then(function(child) {
-
-              console.log("Loaded " + url);
-
-              var rotate = [];
-              osg.Matrix.makeIdentity(rotate);
-              // osg.Matrix.preMult(rotate, osg.Matrix.makeRotate(Math.PI/2.0, 1,0,0,[]));
-              // osg.Matrix.preMult(rotate, osg.Matrix.makeRotate(Math.PI, 0,1,0,[]));
-              
-              node.setMatrix(rotate);
+              node.setMatrix(osg.Matrix.makeRotate(Math.PI/2.0, 1,0,0,[]));
               node.addChild(child);
               defer.resolve(node);
               osg.log("success " + url);
-              
             });
-            if (self.webGLStandby) { self.webGLStandby.hide(); }
           } else {
             osg.log("error " + url);            
-            if (self.webGLStandby) { self.webGLStandby.hide(); }
           }
+          if (self.webGLStandby) { self.webGLStandby.hide(); }
         }
       };
       req.send(null);
     };
     loadModel(url);
     return defer.promise;
-  };
+  }
 
-  /**
-   * Concatenate pose as query string
-   */
   var urlSuffixForPose = function(pose) {
     var queryString =
     '?width=' + pose.width + 
@@ -191,16 +187,7 @@ VRMLViewer = function (element, params) {
     return queryString;
   };
 
-  /**
-   * Get relative position of two elements
-   */
   var moverRelativeTo = function(mover, container) {
-    // see http://stackoverflow.com/questions/288699/get-the-position-of-a-div-span-tag
-    var absolutePosition = function(el) {
-      for (var lx=0, ly=0; el != null; lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
-      return {x: lx,y: ly};
-    };
-
     var containerPos = absolutePosition(container);
     return {
       x: mover.x - containerPos.x, 
@@ -208,59 +195,37 @@ VRMLViewer = function (element, params) {
     };
   };
 
-  var eulerToMatrix = function(pitch, roll, yaw) {
-  	// see http://www.flipcode.com/documents/matrfaq.html#Q36
-    var m = osg.Matrix.makeIdentity([]);
-    
-    var A = Math.cos(pitch);
-    var B = Math.sin(pitch);
-    var C = Math.cos(roll);
-    var D = Math.sin(roll);
-    var E = Math.cos(yaw);
-    var F = Math.sin(yaw);
-    var AD = A * D;
-    var BD = B * D;
-    
-    osg.Matrix.setRow(m, 0,  (C * E),            (-C * F),          (-D),      0);
-    osg.Matrix.setRow(m, 1,  (-BD * E + A * F),  (BD * F + A * E),  (-B * C),  0);
-    osg.Matrix.setRow(m, 2,  (AD * E + B * F),   (-AD * F + B * E), (A * C),   0);
-    osg.Matrix.setRow(m, 3,  0,                  0,                 0,         1);
-   
-    return m;
-  }
+  // see http://stackoverflow.com/questions/288699/get-the-position-of-a-div-span-tag
+  var absolutePosition = function(el) {
+    for (var lx=0, ly=0; el != null; lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
+    return {x: lx,y: ly};
+  };
 
-  var matrixToEuler = function(m) {
-  	// see: http://www.flipcode.com/documents/matrfaq.html#Q37
-    var angleX = 0;
-    var angleZ = 0;
-    var D = -1 * Math.asin(osg.Matrix.get(m,0,2));        /* Calculate Y-axis angle */
-    var angleY = D;
-    var C = Math.cos(angleY);
-    
-    /* Gimbal lock? */
-    if (Math.abs(C) > 0.005) {
-      var tr_x =  osg.Matrix.get(m,2,2) / C;           /* No, so get X-axis angle */
-      var tr_y = -1 * osg.Matrix.get(m,1,2)  / C;
-      angleX  = Math.atan2( tr_y, tr_x );
-      tr_x =  osg.Matrix.get(m,0,0) / C;                  /* Get Z-axis angle */
-      tr_y = -1 * osg.Matrix.get(m,0,1) / C;
-      angleZ  = Math.atan2( tr_y, tr_x );
-    } else {
-      /* Gimball lock has occurred */
-      angleX = 0;                      /* Set X-axis angle to zero */
-      var tr_x = osg.Matrix.get(m,1,1);                 /* And calculate Z-axis angle */
-      var tr_y = osg.Matrix.get(m,1,0);
-      angleZ = Math.atan2( tr_y, tr_x );
+  // update the scene
+  this.updateScene = function() {
+    if (self.serverURL && self.imagePath && !self.batchChanges) {
+      console.log(self.serverURL + self.imagePath + self.imageFormat + urlSuffixForPose(self.pose));
+      if (self.enableWebGL) {
+        osgDB.Promise.when(getWebGLModel(self.serverURL + self.imagePath + '.osgjs')).then(function(model) {       
+          self.webGLViewer.setSceneData(model);
+          if (!webGLManipulatorsSetup) {
+            self.webGLViewer.setupManipulator(new osgGA.OrbitManipulator(), false);
+            self.webGLViewer.getManipulator().computeHomePosition();  
+          }
+          webGLManipulatorsSetup = true;
+      	});
+      } 
+      if (self.enableSceneshots) {
+        self.imgElem.src = self.serverURL + self.imagePath + self.imageFormat + urlSuffixForPose(self.pose);
+        if (self.enableMovies && self.movieAddButton) {
+          // we are showing an image, activate movie controls
+          self.movieAddButton.domNode.style.display = "";
+          self.movieDropDown.domNode.style.display = "";
+        }
+      }
     }
-    
-    /* Clamp all angles to range */
-    return {
-      pitch: angleX % (2 * 3.14159),
-      roll: angleY % (2 * 3.14159),
-      yaw: angleZ % (2 * 3.14159)
-    };
-  }
-  
+  };
+
   // get list of supported ffmpeg codecs from server
   this.populateMovieCodecs = function(server, selectElem) {
     self.xhr.get({
@@ -288,20 +253,17 @@ VRMLViewer = function (element, params) {
               codec !== "y41p" && 
               codec !== "yuv4")
             continue;
-          // console.log(codec);
+          //console.log(codec);
           selectElem.options.push({ label: result.video[codec].longName, value: codec });              
           if (codec === "mpeg4")
             selectElem.options[selectElem.options.length - 1].selected = true;
         }
       }
     });
-  };
+  }
 
   // update list of vrml files from server
   this.refreshServer = function(server, params) {
-    if (!self.listNavigationStyle && !self.treeNavigationStyle)
-    return;
-    
     self.serverURL = server;
     if (!params)
       params = {};
@@ -335,7 +297,7 @@ VRMLViewer = function (element, params) {
         }
       },
       load: function(result) {
-// self.localStorage.put("vrmlServer", self.serverURL, null);
+//        self.localStorage.put("vrmlServer", self.serverURL, null);
         if (self.browseButton) { self.browseButton.setAttribute('label', 'Refresh'); }
         if (self.fileStandby) { self.fileStandby.hide(); }
 
@@ -387,132 +349,38 @@ VRMLViewer = function (element, params) {
           }
           self.fileListSelect.startup();
         }
-        // self.updateScene();
+        //self.updateScene();
       }
     });
   };
 
-  this.getPose = function() {
-    if (self.webGLViewer && self.webGLViewer.getSceneData()) {
-      var rotate = [];
-      osg.Matrix.makeIdentity(rotate);
-      
-      osg.Matrix.preMult(rotate, osg.Matrix.makeRotate(Math.PI/2.0, 1,0,0,[]));
-      osg.Matrix.preMult(rotate, osg.Matrix.makeRotate(Math.PI, 0,1,0,[]));
-      osg.Matrix.postMult(self.webGLViewer.getSceneData().getMatrix(), rotate);
-      
-      var pose = matrixToEuler(rotate);
-      return pose;
-    } else {
-      return {
-        pitch: self.pose.pitch,
-        roll: self.pose.roll,
-        yaw: self.pose.yaw,
-      }
-    }
-  }
-  
-  this.setPose = function(pose) {
-    this.setScene(self.imagePath, self.imageFormat, pose, self.serverURL);
-  }
-  
-  this.setScene = function(imagePath, imageFormat, pose, serverURL) {
-
+  this.setPose = function(imagePath, imageFormat, pose, serverURL) {
     if (serverURL && serverURL != self.serverURL) {
       self.refreshServer(serverURL);
     }
-        
     self.imagePath = imagePath;
     self.imageFormat = imageFormat;
+    self.pose = pose;
 
-    for (var key in pose) {
-      self.pose[key] = pose[key];
-    }
+    var pitch = (pose.pitch % (2 * 3.14159) + 0.5) * 100;
+    var roll = (pose.roll % (2 * 3.14159) + 0.5) * 100;
+    var yaw = (pose.yaw % (2 * 3.14159) + 0.5) * 100;
+        
+    var x = ((pose.x / 100) + 0.5) * 100;
+    var y = ((pose.y / 100) + 0.5) * 100;
+
+    var zoom = (((pose.zoom - 1) / 3) + 0.5) * 100;
 
-    self.pose.pitch = (2 * 3.14159 + self.pose.pitch) % (2 * 3.14159);
-    self.pose.roll = (2 * 3.14159 + self.pose.roll) % (2 * 3.14159);
-    self.pose.yaw = (2 * 3.14159 + self.pose.yaw) % (2 * 3.14159);
-
-    var pitch = (self.pose.pitch / (2 * 3.14159) + 0.5) * 100;
-    var roll = (self.pose.roll / (2 * 3.14159) + 0.5) * 100;
-    var yaw = (self.pose.yaw / (2 * 3.14159) + 0.5) * 100;
-    var x = ((self.pose.x / 100) + 0.5) * 100;
-    var y = ((self.pose.y / 100) + 0.5) * 100;
-    var zoom = (((self.pose.zoom - 1) / 3) + 0.5) * 100;
-
-    // console.log("pitch: " + pitch);
-
-    if (self.pitchRollHandlerElem) self.pitchRollHandlerElem.parentNode.style.right = pitch + "%";
-    if (self.pitchRollHandlerElem) self.pitchRollHandlerElem.parentNode.style.top = roll + "%";
-    if (self.yawZoomHandlerElem) self.yawZoomHandlerElem.parentNode.style.right = yaw + "%";
-    if (self.yawZoomHandlerElem) self.yawZoomHandlerElem.parentNode.style.top = zoom + "%";
-    if (self.xyHandlerElem) self.xyHandlerElem.parentNode.style.right = x + "%";
-    if (self.xyHandlerElem) self.xyHandlerElem.parentNode.style.top = y + "%";
+    self.pitchRollHandlerElem.parentNode.style.right = pitch + "%";
+    self.pitchRollHandlerElem.parentNode.style.top = roll + "%";
+    self.yawZoomHandlerElem.parentNode.style.right = yaw + "%";
+    self.yawZoomHandlerElem.parentNode.style.top = zoom + "%";
+    self.xyHandlerElem.parentNode.style.right = x + "%";
+    self.xyHandlerElem.parentNode.style.top = y + "%";
     
     self.updateScene();
   };
 
-  // update the scene
-  this.updateScene = function() {
-    if (self.serverURL && self.imagePath && !self.batchChanges) {
-      // console.log(self.serverURL + self.imagePath + self.imageFormat + urlSuffixForPose(self.pose));
-
-      if (self.enableWebGL) {
-        var setWebGLPose = function() {
-          
-          // reset camera controls
-          self.webGLViewer.getManipulator().reset();
-          self.webGLViewer.getManipulator().computeHomePosition();  
-
-          var bs = self.webGLViewer.getSceneData().getBound();
-          var zoom = 1; //self.pose.zoom || 10;
-          var eye = [0, 0, bs.radius() * (1.9 * zoom)];
-          // var center = bs.center();
-          // var up = [1,1,0];
-          
-          self.webGLViewer.getManipulator().setEyePosition(eye);
-          
-          // var poseMatrix = eulerToMatrix(self.pose.pitch, self.pose.yaw, -1 * self.pose.roll);
-          var poseMatrix = eulerToMatrix(self.pose.pitch * -1, self.pose.roll * -1, self.pose.yaw);
-          
-          var rotate = [];
-          osg.Matrix.makeIdentity(rotate);
-          // osg.Matrix.preMult(rotate, osg.Matrix.makeRotate(Math.PI/2.0, 1,0,0,[]));
-          // osg.Matrix.preMult(rotate, osg.Matrix.makeRotate(Math.PI, 0,1,0,[]));
-          osg.Matrix.postMult(poseMatrix, rotate);
-
-          // osg.Matrix.preMult(rotate, poseMatrix);
-          self.webGLViewer.getSceneData().setMatrix(rotate);
-          
-        }
-        
-        if (self.imagePath != currWebGLModel) {
-          currWebGLModel = self.imagePath;
-          osgDB.Promise.when(getWebGLModel(self.serverURL + self.imagePath + '.osgjs')).then(function(model) {       
-            self.webGLViewer.setSceneData(model);
-            if (!webGLManipulatorsSetup) {
-              self.webGLViewer.setupManipulator(new osgGA.OrbitManipulator(), false);
-              self.webGLViewer.getManipulator().computeHomePosition();  
-            }
-            webGLManipulatorsSetup = true;
-            setWebGLPose();
-          });
-        }
-        if (self.webGLViewer && currWebGLModel == self.imagePath && self.webGLViewer.getSceneData()) {
-          setWebGLPose();
-        }
-      } 
-      if (self.enableSceneshots) {
-        self.imgElem.src = self.serverURL + self.imagePath + self.imageFormat + urlSuffixForPose(self.pose);
-        if (self.enableMovies && self.movieAddButton) {
-          // we are showing an image, activate movie controls
-          self.movieAddButton.domNode.style.display = "";
-          self.movieDropDown.domNode.style.display = "";
-        }
-      }
-    }
-  };
-
   require(["dojo/dom-construct", 
            "dojo/_base/xhr", 
            "dojo/dom", 
@@ -662,7 +530,17 @@ VRMLViewer = function (element, params) {
             self.canvasElem.style.height = self.height;
             self.canvasElem.width = self.width;
             self.canvasElem.height = self.height;
-                        
+            
+            // osgDB.Promise.when(getWebGLModel('http://localhost:8081/vrml/cranehook/cranehook_bad_convergence/HARD_MP_VAL_013.osgjs')).then(function(model) {
+            //   self.webGLViewer = new osgViewer.Viewer(self.canvasElem, {antialias : true, alpha: true });
+            //   self.webGLViewer.init();
+            //   self.webGLViewer.getCamera().setClearColor([0.0, 0.0, 0.0, 0.0]);
+            //   self.webGLViewer.setSceneData(model);
+            //   self.webGLViewer.setupManipulator();
+            //   self.webGLViewer.getManipulator().computeHomePosition();  
+            //   self.webGLViewer.run();
+            // });
+            
             if (self.webGLViewer === undefined) {
               self.webGLViewer = new osgViewer.Viewer(self.canvasElem, {antialias : true, alpha: true });
               self.webGLViewer.init();
@@ -677,7 +555,7 @@ VRMLViewer = function (element, params) {
             // show elements
             array.forEach(dojo.query(".webGL", element), function(entry, i) {
               entry.style.display = "inline";
-            });
+            })
           } else {
             if (self.webGLViewer) {
               self.webGLViewer.stop();
@@ -685,9 +563,9 @@ VRMLViewer = function (element, params) {
             // hide elements
             array.forEach(dojo.query(".webGL", element), function(entry, i) {
               entry.style.display = "none";
-            });
+            })
           }
-        };
+        }
         activateWebGL(self.enableWebGL);
 
         var activateScreenshot = function(enable) {
@@ -700,13 +578,13 @@ VRMLViewer = function (element, params) {
               entry.style.display = "none";
             });
           }
-        };
+        }
         activateScreenshot(self.enableSceneshots);
         
-        
         /**
          * === POSE MANIPULATION AND RESET ====================
          */
+
          self.resetButtonElem = dojo.query("button.resetButton", element)[0];
          self.resetButton = new Button({
            label: "Reset",
@@ -722,12 +600,12 @@ VRMLViewer = function (element, params) {
              self.pose.yaw = 0;
              self.pose.zoom = 1;
 
-             if (self.xyHandler) self.xyHandler.node.style.left = 0;
-             if (self.xyHandler) self.xyHandler.node.style.top = 0;
-             if (self.pitchRollHandler) self.pitchRollHandler.node.style.left = 0;
-             if (self.pitchRollHandler) self.pitchRollHandler.node.style.top = 0;
-             if (self.yawZoomHandler) self.yawZoomHandler.node.style.left = 0;
-             if (self.yawZoomHandler) self.yawZoomHandler.node.style.top = 0;
+             self.xyHandler.node.style.left = 0;
+             self.xyHandler.node.style.top = 0;
+             self.pitchRollHandler.node.style.left = 0;
+             self.pitchRollHandler.node.style.top = 0;
+             self.yawZoomHandler.node.style.left = 0;
+             self.yawZoomHandler.node.style.top = 0;
 
              self.updateScene();
            }
@@ -847,15 +725,15 @@ VRMLViewer = function (element, params) {
             // show all draggables
             array.forEach(dojo.query(".draggable", element), function(entry, i) {
               entry.style.display = "inline";
-            });
+            })
             
           } else {
             // show all draggables
             array.forEach(dojo.query(".draggable", element), function(entry, i) {
               entry.style.display = "none";
-            });
+            })
           }
-        };
+        }
         activateDraggables(self.enableDraggables);
         
         /**
@@ -889,16 +767,15 @@ VRMLViewer = function (element, params) {
             
             array.forEach(dojo.query(".dndHandler", element), function(entry, i) {
               entry.style.display = "inline";
-            });
+            })
             
           } else {
             array.forEach(dojo.query(".dndHandler", element), function(entry, i) {
               entry.style.display = "none";
-            });
+            })
             
           }
-        };
-        
+        }
         activateDND(self.enableDND);
         
         /**
@@ -959,10 +836,10 @@ VRMLViewer = function (element, params) {
                   var allItems = self.fileListStore.query();
                   var foundAt = 0;
                   for (var i = 0; i < allItems.total; i++) {
-                    // console.log(self.serverURL + self.imagePath + " === " + allItems[i].url);
+                    //console.log(self.serverURL + self.imagePath + " === " + allItems[i].url);
                     if (self.serverURL + self.imagePath === allItems[i].url) {
                       foundAt = i;
-                      break;
+                      break
                     }
                   }
                   if (foundAt + 1 < allItems.total) {
@@ -980,7 +857,7 @@ VRMLViewer = function (element, params) {
               entry.style.display = "none";
             });
           }
-        };
+        }
         activateListNavigation(self.listNavigationStyle);
         
         var activateTreeNavigation = function(enable) {
@@ -1032,6 +909,7 @@ VRMLViewer = function (element, params) {
                       return { backgroundImage: "url('" + self.serverURL + item.url + self.imageFormat + "?width=16&height=16')"};
                     }
                   }
+                  //return {backgroundImage: "url('" + item.url + "?width=16&height=16')"};
               });
           
               self.filesDropDownElem = dojo.query("td.filesDropDown", element)[0];
@@ -1085,269 +963,318 @@ VRMLViewer = function (element, params) {
               entry.style.display = "none";
             });
           }
-        };
-        
+        }
         activateTreeNavigation(self.treeNavigationStyle);
         
+        if (self.serverURL) {
+          self.refreshServer(self.serverURL);
+          self.updateScene();
+        }
+
+
+        /**
+         * === Pose Publishing ====================
+         */
+        
+        var activatePosePublishing = function(enable) {
+          if (enable && self.hasWebSockets) {
+            self.poseWebSocket = new WebSocket(self.webSocketURL);
+            
+            self.poseWebSocket.onopen = function(evt) {
+              foo = 0;
+              function publishPose() {
+                foo++;
+                var viewMatrix = self.webGLViewer.getCamera().getViewMatrix();
+                var roundMatrix = [];
+                for (var i = 0; i < 16; i++) {
+                  roundMatrix[i] = viewMatrix[i].toFixed(5);
+                  if (roundMatrix[i] == -0.0) roundMatrix[i] = 0.0;
+                }
+                self.poseWebSocket.send(JSON.stringify(roundMatrix));
+                self.messageBox.innerHTML = "<pre>SEND" + syntaxHighlight(roundMatrix) + "</pre>";
+                // self.poseWebSocket.send(foo);
+                // self.messageBox.innerHTML = "<pre>SEND" + foo + "</pre>";
+                if (self.enablePosePublishing) {
+                  setTimeout(publishPose, 200);
+                }
+              }
+              self.messageBox.innerHTML = "<pre>Starting</pre>";
+              publishPose();
+            };
+            self.poseWebSocket.onclose = function(evt) {
+            };
+            self.poseWebSocket.onmessage = function(evt) {
+              var result = JSON.parse(evt.data);
+             self.messageBox.innerHTML = "<pre>RCVD" + syntaxHighlight(JSON.parse(result.data.content)) + "</pre>";
+            };
+            self.poseWebSocket.onerror = function(evt) {
+            };
+          } else {
+            
+          }
+        }
+        activatePosePublishing(self.enablePosePublishing);
+        
         /**
          * === MOVIE DROPDOWN ====================
          */
         
-        var activateMovies = function(enable) {
-          if (enable) {
-            self.movieDropDownElem = dojo.query("div.movieDropDown", element)[0];
-            self.movieAddButtonElem = dojo.query("button.movieAddButton", element)[0];
-
-            self.movieDropDownContent = domConst.toDom(
-              '<div style="overflow: auto; max-height: 420px;"> \
-                <table><tr class="movieFormatLengthRow" /></tr><tr class="movieWidthHeightLengthRow" /></table> \
-                <div class=\"dndArea\" /> \
-              </div>'
-            );
+        if (self.enableMovies) {
+          self.movieDropDownElem = dojo.query("div.movieDropDown", element)[0];
+          self.movieAddButtonElem = dojo.query("button.movieAddButton", element)[0];
+
+          self.movieDropDownContent = domConst.toDom(
+            '<div style="overflow: auto; max-height: 420px;"> \
+              <table><tr class="movieFormatLengthRow" /></tr><tr class="movieWidthHeightLengthRow" /></table> \
+              <div class=\"dndArea\" /> \
+            </div>'
+          );
         
-            self.movieFormatLengthRowElem = dojo.query("tr.movieFormatLengthRow", self.movieDropDownContent)[0];
-            self.movieWidthHeightLengthRowElem = dojo.query("tr.movieWidthHeightLengthRow", self.movieDropDownContent)[0];
-            self.movieDnDArea = dojo.query("div.dndArea", self.movieDropDownContent)[0];
+          self.movieFormatLengthRowElem = dojo.query("tr.movieFormatLengthRow", self.movieDropDownContent)[0];
+          self.movieWidthHeightLengthRowElem = dojo.query("tr.movieWidthHeightLengthRow", self.movieDropDownContent)[0];
+          self.movieDnDArea = dojo.query("div.dndArea", self.movieDropDownContent)[0];
         
-            self.createMovieThumb = function(item, mode) {
-              if (mode == 'avatar') {
-                 // when dragged
-                 var avatar = dojo.create( 'div', { innerHTML: item.data });
-                 var avatarPose = dojo.clone(self.pose);
-                 avatarPose.width = 60;
-                 avatarPose.height = 60;
-                 var avatarImgUrl = urlSuffixForPose(avatarPose);
-                 avatar.innerHTML = '<img src=' + self.imagePath + self.imageFormat + avatarImgUrl + ' /> ';
-                 item.srcEcc = "VRMLViewer";
-                 item.iconPoseUrl = self.imagePath + avatarImgUrl;
-                 item.imagePath = self.imagePath;
-                 item.serverURL = self.serverURL;
-                 item.pose = avatarPose;
-                 return {node: avatar, data: item, type: item.type};
-              } else {
-            
-                // when added to list
-                var thumb = domConst.toDom("\
-                  <div>\
-                    <table><tr><td>\
-                      <img class=\"movieThumb\"/>\
-                      <img class=\"removeThumb\" style=\"vertical-align: top; margin: -3px 0px 0px -8px; width: 20px; height: 20px;\"/>\
-                    </td><td align=\"left\">\
-                      <table><tr>\
-                        <td>Frame:</td><td><div class=\"relFrameLength\"/></td>\
-                        <td><div class=\"fillInSeries\" \></td>\
-                      </tr><tr>\
-                        <td>Transition:</td><td><div class=\"relTransitionLength\"/></td>\
-                      </tr></table>\
-                    </td></tr></table>\
-                  </div>\
-                ");
-                thumb = dojo.query("div", thumb)[0];
-            
-                var thumbImgElem = dojo.query("img.movieThumb", thumb)[0];
-                var removeImgElem = dojo.query("img.removeThumb", thumb)[0];
-                var relFrameLengthElem = dojo.query("div.relFrameLength", thumb)[0];
-                var relTransitionLengthElem = dojo.query("div.relTransitionLength", thumb)[0];
-                var fillInSeriesElem = dojo.query("div.fillInSeries", thumb)[0];
+          self.createMovieThumb = function(item, mode) {
+            if (mode == 'avatar') {
+               // when dragged 
+               var avatar = dojo.create( 'div', { innerHTML: item.data });
+               var avatarPose = dojo.clone(self.pose);
+               avatarPose.width = 60;
+               avatarPose.height = 60;
+               var avatarImgUrl = urlSuffixForPose(avatarPose);
+               avatar.innerHTML = '<img src=' + self.imagePath + self.imageFormat + avatarImgUrl + ' /> ';
+               item.srcEcc = "VRMLViewer";
+               item.iconPoseUrl = self.imagePath + avatarImgUrl;
+               item.imagePath = self.imagePath;
+               item.serverURL = self.serverURL;
+               item.pose = avatarPose;
+               return {node: avatar, data: item, type: item.type};
+            } else {
             
-                item.getThisAndNeighborsFromDnD = function() {
-                  var thisAndNeighbors = {};
-                  self.addToMovieHandler.forInItems(function(obj, key, ctx) {
-                    if (obj.data === item) {
-                      thisAndNeighbors.this = { key: key, obj: obj };
-                    } else {
-                      thisAndNeighbors.before = { key: key, obj: obj };
-                    }
-                    if (thisAndNeighbors.this) {
-                      thisAndNeighbors.after = { key: key, obj: obj };
-                      return thisAndNeighbors;
-                    }
-                  });
-                  return thisAndNeighbors;
-                };
+              // when added to list
+              var thumb = domConst.toDom("\
+                <div>\
+                  <table><tr><td>\
+                    <img class=\"movieThumb\"/>\
+                    <img class=\"removeThumb\" style=\"vertical-align: top; margin: -3px 0px 0px -8px; width: 20px; height: 20px;\"/>\
+                  </td><td align=\"left\">\
+                    <table><tr>\
+                      <td>Frame:</td><td><div class=\"relFrameLength\"/></td>\
+                      <td><div class=\"fillInSeries\" \></td>\
+                    </tr><tr>\
+                      <td>Transition:</td><td><div class=\"relTransitionLength\"/></td>\
+                    </tr></table>\
+                  </td></tr></table>\
+                </div>\
+              ");
+              thumb = dojo.query("div", thumb)[0];
             
-                item.relFrameLengthSlider = new HorizontalSlider({ 
-                  value: 50,
-                  title: "Relative Duration of Frame",
-                  style: "width:150px;"
-                }, relFrameLengthElem);
-
-                item.relTransitionLengthSlider = new HorizontalSlider({ 
-                  value: 100,
-                  title: "Relative Duration of Transition",
-                  style: "width:150px;"
-                }, relTransitionLengthElem);
+              var thumbImgElem = dojo.query("img.movieThumb", thumb)[0];
+              var removeImgElem = dojo.query("img.removeThumb", thumb)[0];
+              var relFrameLengthElem = dojo.query("div.relFrameLength", thumb)[0];
+              var relTransitionLengthElem = dojo.query("div.relTransitionLength", thumb)[0];
+              var fillInSeriesElem = dojo.query("div.fillInSeries", thumb)[0];
             
-                removeImgElem.onclick = function() {
-                  var thisItem = item.getThisAndNeighborsFromDnD();
-                  if (thisItem.this) {
-                    // haha - what a mess!
-                    self.addToMovieHandler.selectNone();
-                    self.addToMovieHandler.selection[thisItem.this.key] = thisItem.this.obj;
-                    self.addToMovieHandler.deleteSelectedNodes();
+              item.getThisAndNeighborsFromDnD = function() {
+                var thisAndNeighbors = {};
+                self.addToMovieHandler.forInItems(function(obj, key, ctx) {
+                  if (obj.data === item) {
+                    thisAndNeighbors.this = { key: key, obj: obj };
+                  } else {
+                    thisAndNeighbors.before = { key: key, obj: obj };
                   }
-                  // disable create button if this was the last one
-                  if (!thisItem.after || !thisItem.before) {
-                    self.movieCreateButton.setAttribute('disabled', true);
+                  if (thisAndNeighbors.this) {
+                    thisAndNeighbors.after = { key: key, obj: obj };
+                    return thisAndNeighbors;
                   }
+                });
+                return thisAndNeighbors;
+              };
+            
+              item.relFrameLengthSlider = new HorizontalSlider({ 
+                value: 50,
+                title: "Relative Duration of Frame",
+                style: "width:150px;"
+              }, relFrameLengthElem);
+
+              item.relTransitionLengthSlider = new HorizontalSlider({ 
+                value: 100,
+                title: "Relative Duration of Transition",
+                style: "width:150px;"
+              }, relTransitionLengthElem);
+            
+              removeImgElem.onclick = function() {
+                var thisItem = item.getThisAndNeighborsFromDnD();
+                if (thisItem.this) {
+                  // haha - what a mess!
+                  self.addToMovieHandler.selectNone();
+                  self.addToMovieHandler.selection[thisItem.this.key] = thisItem.this.obj;
+                  self.addToMovieHandler.deleteSelectedNodes();
+                }
+                // disable create button if this was the last one
+                if (!thisItem.after || !thisItem.before) {
+                  self.movieCreateButton.setAttribute('disabled', true);
                 }
+              }
             
-                item.fillInSeriesButton = new Button({ 
-                  label: "Insert Series",
-                  style: "display: none;",
-                  onClick: function(){
-                    alert("foo");
-                  }
-                }, fillInSeriesElem);
+              item.fillInSeriesButton = new Button({ 
+                label: "Insert Series",
+                style: "display: none;",
+                onClick: function(){
+                  alert("foo");
+                }
+              }, fillInSeriesElem);
             
-                removeImgElem.src = self.resRoot + "img/close.png";
+              removeImgElem.src = self.resRoot + "img/close.png";
             
-                var thumbPose = dojo.clone(self.pose);
-                thumbPose.width = self.pose.width / 10;
-                thumbPose.height = self.pose.height / 10;
-                var thumbImgUrl = urlSuffixForPose(thumbPose);
+              var thumbPose = dojo.clone(self.pose);
+              thumbPose.width = self.pose.width / 10;
+              thumbPose.height = self.pose.height / 10;
+              var thumbImgUrl = urlSuffixForPose(thumbPose);
             
-                thumbImgElem.src = self.serverURL + self.imagePath + self.imageFormat + thumbImgUrl;
-                // removeImgElem.src = self.resRoot + 'img/close.png';
+              thumbImgElem.src = self.serverURL + self.imagePath + self.imageFormat + thumbImgUrl;
+              // removeImgElem.src = self.resRoot + 'img/close.png';
                         
-                item.srcEcc = "VRMLViewer";
-                item.iconPoseUrl = self.imagePath + thumbImgUrl;
-                item.imagePath = self.imagePath;
-                item.serverURL = self.serverURL;
-                item.pose = thumbPose;
+              item.srcEcc = "VRMLViewer";
+              item.iconPoseUrl = self.imagePath + thumbImgUrl;
+              item.imagePath = self.imagePath;
+              item.serverURL = self.serverURL;
+              item.pose = thumbPose;
             
-                return {node: thumb, data: item, type: item.type};
-              }
-            };
+              return {node: thumb, data: item, type: item.type};
+            }
+          };
 
-            self.addToMovieHandler = new Source(self.movieDnDArea, {copyOnly: true, creator: self.createMovieThumb});
+          self.addToMovieHandler = new Source(self.movieDnDArea, {copyOnly: true, creator: self.createMovieThumb});
 
-            self.movieFormatSelection = new Selector({
-              name: "movieFormat",
-              style: "width: 320px",
-              options: []
-            });
-            self.populateMovieCodecs(self.serverURL + '/movie/codecs', self.movieFormatSelection);
+          self.movieFormatSelection = new Selector({
+            name: "movieFormat",
+            style: "width: 320px",
+            options: []
+          });
+          self.populateMovieCodecs(self.serverURL + '/movie/codecs', self.movieFormatSelection);
 
-            self.movieFormatLengthRowElem.appendChild(dojo.create('td', { innerHTML: 'Format:'} ));
-            self.movieFormatLengthRowElem.appendChild(dojo.create('td', { colspan: "2"}));
-            self.movieFormatLengthRowElem.lastChild.appendChild(self.movieFormatSelection.domNode);
+          self.movieFormatLengthRowElem.appendChild(dojo.create('td', { innerHTML: 'Format:'} ));
+          self.movieFormatLengthRowElem.appendChild(dojo.create('td', { colspan: "2"}));
+          self.movieFormatLengthRowElem.lastChild.appendChild(self.movieFormatSelection.domNode);
         
-            self.movieHeightSpinner = new NumberSpinner({
-              value: 400,
-              smallDelta: 1,
-              style: "width: 60px",
-              constraints: { min:40, places:0 },
-            });
+          self.movieHeightSpinner = new NumberSpinner({
+            value: 400,
+            smallDelta: 1,
+            style: "width: 60px",
+            constraints: { min:40, places:0 },
+          });
         
-            self.movieWidthSpinner = new NumberSpinner({
-              value: 600,
-              smallDelta: 1,
-              style: "width: 60px",
-              constraints: { min:40, places:0 },
-            });
+          self.movieWidthSpinner = new NumberSpinner({
+            value: 600,
+            smallDelta: 1,
+            style: "width: 60px",
+            constraints: { min:40, places:0 },
+          });
 
-            self.movieCreateButton = new Button({
-              label: "Create",
-              disabled: true,
-              onClick: function(){
+          self.movieCreateButton = new Button({
+            label: "Create",
+            disabled: true,
+            onClick: function(){
                         
-                var form = document.createElement("form");
+              var form = document.createElement("form");
 
-                form.setAttribute("method", "post");
-                form.setAttribute("action", self.serverURL + "/movie");
+              form.setAttribute("method", "post");
+              form.setAttribute("action", self.serverURL + "/movie");
 
-                var submitData = {};
-                submitData.frames = [];
-                submitData.movieLength = self.movieDurationSpinner.value;
-                submitData.format = self.movieFormatSelection.value;
-                submitData.width = self.movieWidthSpinner.value;
-                submitData.height = self.movieHeightSpinner.value;
+              var submitData = {};
+              submitData.frames = [];
+              submitData.movieLength = self.movieDurationSpinner.value;
+              submitData.format = self.movieFormatSelection.value;
+              submitData.width = self.movieWidthSpinner.value;
+              submitData.height = self.movieHeightSpinner.value;
             
-                self.addToMovieHandler.forInItems(function(obj, key, ctx) {
-                  var jsonData = {
-                    iconPoseUrl: obj.data.iconPoseUrl,
-                    imagePath: obj.data.imagePath,
-                    serverURL: obj.data.serverURL,
-                    pose: obj.data.pose,
-                    relFrameLength: obj.data.relFrameLengthSlider.value,
-                    relTransitionLength: obj.data.relTransitionLengthSlider.value,
-                  }
-                  submitData.frames.push(jsonData);
-                });
+              self.addToMovieHandler.forInItems(function(obj, key, ctx) {
+                var jsonData = {
+                  iconPoseUrl: obj.data.iconPoseUrl,
+                  imagePath: obj.data.imagePath,
+                  serverURL: obj.data.serverURL,
+                  pose: obj.data.pose,
+                  relFrameLength: obj.data.relFrameLengthSlider.value,
+                  relTransitionLength: obj.data.relTransitionLengthSlider.value,
+                }
+                submitData.frames.push(jsonData);
+              });
 
-                var hiddenField = document.createElement("input");
-                hiddenField.setAttribute("type", "hidden");
-                hiddenField.setAttribute("name", "data");
-                hiddenField.setAttribute("value", JSON.stringify(submitData));
+              var hiddenField = document.createElement("input");
+              hiddenField.setAttribute("type", "hidden");
+              hiddenField.setAttribute("name", "data");
+              hiddenField.setAttribute("value", JSON.stringify(submitData));
 
-                form.appendChild(hiddenField);
-                        
-                document.body.appendChild(form);
-                form.submit();
-                document.body.removeChild(form);
-              }
-            });
+              form.appendChild(hiddenField);
+            
+              // this will not save the returned binary file
+              // self.xhr.post({
+              //   form: form,
+              //   load: function(data){
+              //     alert("asd");
+              //   }
+              // });
+            
+              document.body.appendChild(form);
+              form.submit();
+              document.body.removeChild(form);
+            }
+          });
 
-            self.movieDurationSpinner = new NumberSpinner({
-              value: 10,
-              smallDelta: 1,
-              style: "width: 40px",
-              constraints: { min:0, places:0 },
-            });
+          self.movieDurationSpinner = new NumberSpinner({
+            value: 10,
+            smallDelta: 1,
+            style: "width: 40px",
+            constraints: { min:0, places:0 },
+          });
 
-            // append format duration cell
-            self.movieWidthHeightLengthRowElem.appendChild(dojo.create('td', { innerHTML: 'Size:'} ));
-            var movieDimensionCell = dojo.create('td');
-            movieDimensionCell.appendChild(self.movieWidthSpinner.domNode);
-            movieDimensionCell.appendChild(dojo.create('span', { innerHTML: "x"} ));
-            movieDimensionCell.appendChild(self.movieHeightSpinner.domNode);
-            movieDimensionCell.appendChild(self.movieDurationSpinner.domNode);
-            movieDimensionCell.appendChild(dojo.create('span', { innerHTML: "sec"} ));        
-            self.movieWidthHeightLengthRowElem.appendChild(movieDimensionCell);
-
-            self.movieWidthHeightLengthRowElem.appendChild(dojo.create('td', { align: "right"}));
-            self.movieWidthHeightLengthRowElem.lastChild.appendChild(self.movieCreateButton.domNode);
-
-
-            self.movieToolTip = new TooltipDialog({ content:self.movieDropDownContent });
-            self.movieDropDown = new DropDownButton({ 
-              label: "Movie", 
-              style: "display: none;",
-              dropDown: self.movieToolTip });
-            self.movieDropDownElem.appendChild(self.movieDropDown.domNode);
-
-            self.movieAddButton = new Button({
-              label: "+",
-              style: "margin-left: -10px; display: none;",
-              onClick: function(){
-                if (self.movieFormatSelection.options.length == 0) {
-                  self.populateMovieCodecs(self.serverURL + '/movie/codecs', self.movieFormatSelection);
-                }
-                // we could pass item.data here to creator
-                self.addToMovieHandler.insertNodes(false, [ { } ]);
-                self.movieCreateButton.setAttribute('disabled', false);
-            
+          // append format duration cell
+          self.movieWidthHeightLengthRowElem.appendChild(dojo.create('td', { innerHTML: 'Size:'} ));
+          var movieDimensionCell = dojo.create('td');
+          movieDimensionCell.appendChild(self.movieWidthSpinner.domNode);
+          movieDimensionCell.appendChild(dojo.create('span', { innerHTML: "x"} ));
+          movieDimensionCell.appendChild(self.movieHeightSpinner.domNode);
+          movieDimensionCell.appendChild(self.movieDurationSpinner.domNode);
+          movieDimensionCell.appendChild(dojo.create('span', { innerHTML: "sec"} ));        
+          self.movieWidthHeightLengthRowElem.appendChild(movieDimensionCell);
+
+          self.movieWidthHeightLengthRowElem.appendChild(dojo.create('td', { align: "right"}));
+          self.movieWidthHeightLengthRowElem.lastChild.appendChild(self.movieCreateButton.domNode);
+
+
+          self.movieToolTip = new TooltipDialog({ content:self.movieDropDownContent });
+          self.movieDropDown = new DropDownButton({ 
+            label: "Movie", 
+            style: "display: none;",
+            dropDown: self.movieToolTip });
+          self.movieDropDownElem.appendChild(self.movieDropDown.domNode);
+
+          self.movieAddButton = new Button({
+            label: "+",
+            style: "margin-left: -10px; display: none;",
+            onClick: function(){
+              if (self.movieFormatSelection.options.length == 0) {
+                self.populateMovieCodecs(self.serverURL + '/movie/codecs', self.movieFormatSelection);
               }
-            }, self.movieAddButtonElem);
-          } else {
-            // remove movie controls
-            var movieControls = dojo.query("td.movieControls", element)[0];
-            movieControls.parentNode.removeChild(movieControls);
-          }
+              // we could pass item.data here to creator
+              self.addToMovieHandler.insertNodes(false, [ { } ]);
+              self.movieCreateButton.setAttribute('disabled', false);
+            
+            }
+          }, self.movieAddButtonElem);
+        } else {
+          // remove movie controls
+          var movieControls = dojo.query("td.movieControls", element)[0];
+          movieControls.parentNode.removeChild(movieControls);
         }
-        activateMovies(self.enableMovies);
-        
+
         // do we have parameters for the initial pose?
         if(self.params && self.params.pose)
-          self.setScene(self.params.imagePath, self.params.pose, self.params.serverURL);
-
-        if (self.serverURL) {
-          self.refreshServer(self.serverURL);
-          self.updateScene();
-        }
+          self.setPose(self.params.imagePath, self.params.pose, self.params.serverURL);
 
       });
     });
 
-};
+
+}
\ No newline at end of file
diff --git a/apps/samples/vrml/viewer.html b/apps/samples/vrml/viewer.html
index 1a0732d..7a079df 100644
--- a/apps/samples/vrml/viewer.html
+++ b/apps/samples/vrml/viewer.html
@@ -79,62 +79,62 @@
          enableSceneshots: false,
          enableDraggables: false,
          enablePosePublishing: true,
-         listNavigationStyle: false,
-         treeNavigationStyle: false,
+         listNavigationStyle: true,
+         treeNavigationStyle: true,
          listDirectory: "/cranehook/cranehook_bad_convergence",
          imagePath: "/cranehook/cranehook_bad_convergence/HARD_MP_VAL_001",
          imageFormat: "png",
-         serverURL: "http://epikur.local:8008/vrml/",
+         serverURL: "http://femkit.smartvortex.eu:8086/vrml/",
         });
 
-        var viewer2 = new VRMLViewer("scene2", {
-         pose: {
-           pitch       : 0,
-           roll        : 0,
-           yaw         : 0,
-           zoom        : 1,
-           x           : 0,
-           y           : 0,
-           z           : 0,
-           autorotate  : true
-         },
-         height: 300,
-         width: 400,
-         enableMovies: false,
-         enableDND: false,
-         enableWebGL: false,
-         enableSceneshots: true,
-         enableDraggables: false,
-         enablePosePublishing: true,
-         listNavigationStyle: false,
-         treeNavigationStyle: false,
-         listDirectory: "/cranehook/cranehook_bad_convergence",
-         imagePath: "/cranehook/cranehook_bad_convergence/HARD_MP_VAL_000",
-         imageFormat: "png",
-         serverURL: "http://epikur.local:8008/vrml/",
-        });
-
-				setTimeout(function() {
-				  setInterval(function(){ 
-						var pose1 = viewer1.getPose();
-						var pose2 = viewer2.getPose();
-						console.log("Pose1 - pitch: " + pose1.pitch + ", roll: " + pose1.roll + ", yaw: " + pose1.yaw);
-						console.log("Pose2 - pitch: " + pose2.pitch + ", roll: " + pose2.roll + ", yaw: " + pose2.yaw);
-
-						pose1.pitch += 0.1;
-						pose2.pitch += 0.1;
-
-						pose1.roll += 0.2;
-						pose2.roll += 0.2;
-						
-						pose1.yaw += 0.4;
-						pose2.yaw += 0.4;
+        // var viewer2 = new VRMLViewer("scene2", {
+        //  pose: {
+        //    pitch       : 0,
+        //    roll        : 0,
+        //    yaw         : 0,
+        //    zoom        : 1,
+        //    x           : 0,
+        //    y           : 0,
+        //    z           : 0,
+        //    autorotate  : true
+        //  },
+        //  height: 300,
+        //  width: 400,
+        //  enableMovies: false,
+        //  enableDND: false,
+        //  enableWebGL: false,
+        //  enableSceneshots: true,
+        //  enableDraggables: false,
+        //  enablePosePublishing: true,
+        //  listNavigationStyle: false,
+        //  treeNavigationStyle: false,
+        //  listDirectory: "/cranehook/cranehook_bad_convergence",
+        //  imagePath: "/cranehook/cranehook_bad_convergence/HARD_MP_VAL_000",
+        //  imageFormat: "png",
+        //  serverURL: "http://femkit.smartvortex.eu:8086/vrml/",
+        // });
 
-						viewer1.setPose(pose2);
-						viewer2.setPose(pose2);
-			  					
-				  }, 400);
-				}, 1000);
+        // setTimeout(function() {
+        //   setInterval(function(){ 
+        //     var pose1 = viewer1.getPose();
+        //     var pose2 = viewer2.getPose();
+        //     console.log("Pose1 - pitch: " + pose1.pitch + ", roll: " + pose1.roll + ", yaw: " + pose1.yaw);
+        //     console.log("Pose2 - pitch: " + pose2.pitch + ", roll: " + pose2.roll + ", yaw: " + pose2.yaw);
+        // 
+        //     pose1.pitch += 0.1;
+        //     pose2.pitch += 0.1;
+        // 
+        //     pose1.roll += 0.2;
+        //     pose2.roll += 0.2;
+        //     
+        //     pose1.yaw += 0.4;
+        //     pose2.yaw += 0.4;
+        // 
+        //     viewer1.setPose(pose2);
+        //     viewer2.setPose(pose2);
+        //                   
+        //   }, 400);
+        // }, 1000);
 			});
 			
 			
diff --git a/apps/uscxml-browser.cpp b/apps/uscxml-browser.cpp
index cd74154..5d3b389 100644
--- a/apps/uscxml-browser.cpp
+++ b/apps/uscxml-browser.cpp
@@ -121,9 +121,6 @@ int main(int argc, char** argv) {
 #endif
 
 	InterpreterOptions options = InterpreterOptions::fromCmdLine(argc, argv);
-	if (!options) {
-		InterpreterOptions::printUsageAndExit(argv[0]);
-	}
 
 	// setup logging
 	google::LogToStderr();
@@ -133,6 +130,13 @@ int main(int argc, char** argv) {
 		Factory::setDefaultPluginPath(options.pluginPath);
 	}
 
+	if (options.verbose) {
+		Factory::getInstance()->listComponents();
+	}
+	if (!options) {
+		InterpreterOptions::printUsageAndExit(argv[0]);
+	}
+
 	// setup HTTP server
 	HTTPServer::SSLConfig* sslConf = NULL;
 	if (options.certificate.length() > 0) {
@@ -149,7 +153,7 @@ int main(int argc, char** argv) {
 
 	}
 	HTTPServer::getInstance(options.httpPort, options.wsPort, sslConf);
-
+	
 	DebuggerServlet* debugger;
 	if (options.withDebugger) {
 		debugger = new DebuggerServlet();