Merge commit '3473ec2b9a38a703310b773e51ce059a8423e379' into releaseQtEE_v3.1.0

* commit '3473ec2b9a38a703310b773e51ce059a8423e379': (32 commits)
  [Doc] Use symbolic links for demo preview images
  Changed the audio track on the Qt_EnterpriseEmbedded_1080p.mp4 video.
  Fix demo descriptions.
  launchersettings: make ip field span two columns
  Remove deleted demos also from doc
  Update all VirtualKeyboard import to version 1.1
  Doc: Bump version to 3.1.0
  Doc: Content/language improvement for About QtEE demo.
  Disable GraphicalEffects demo on beagleboneblack
  about: fit text properly to the box
  Fix Meet Qt Enterprise Embedded video url on startup
  Fix a typo in the new About presentation
  About Boot to Qt-demo update
  Update Enterprise gallery demo description
  Remove incorrect assingment of QUrl to bool
  Add Meet Qt Enterprise Embedded video to mediaplayer demo
  disable camera and sensor demo from Toradex Apalis iMX6
  webengine: enable the browser example on android-nexus7v2
  Delete obsoleted demos from Boot2Qt launcher
  webengine: Add offline Morphing Cubes demo
  ...

Change-Id: Ic39278a1bc92386b9b9fe15e9d90097a67656a37

36 files changed, 1462 insertions, 188 deletions

diff --git a/basicsuite/webengine/ErrorPage.qml b/basicsuite/webengine/ErrorPage.qml
new file mode 100644
index 0000000..daa25d0
--- /dev/null
+++ b/basicsuite/webengine/ErrorPage.qml
@@ -0,0 +1,71 @@
+/****************************************************************************
+**
+** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies).
+** Contact: http://www.qt-project.org/legal
+**
+** This file is part of the QtWebEngine module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:BSD$
+** You may use this file under the terms of the BSD license as follows:
+**
+** "Redistribution and use in source and binary forms, with or without
+** modification, are permitted provided that the following conditions are
+** met:
+**   * Redistributions of source code must retain the above copyright
+**     notice, this list of conditions and the following disclaimer.
+**   * Redistributions in binary form must reproduce the above copyright
+**     notice, this list of conditions and the following disclaimer in
+**     the documentation and/or other materials provided with the
+**     distribution.
+**   * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names
+**     of its contributors may be used to endorse or promote products derived
+**     from this software without specific prior written permission.
+**
+**
+** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.1
+
+Rectangle {
+    id: errorPage
+    property alias mainMessage: errorMessage.text;
+    property bool displayingError: false;
+    anchors.fill: parent
+    color: "lightgray"
+    visible: displayingError
+
+    Rectangle {
+        color: "white"
+        anchors.centerIn: parent
+        height: parent.height / 3
+        width: Math.max(parent.width / 2, errorMessage.width + 20)
+
+        border {
+            color: "dimgray"
+            width: 0.5
+        }
+
+        radius: 20
+        Text {
+            id: errorMessage
+            color: "dimgray"
+            font.pixelSize: 20
+            anchors.centerIn: parent
+        }
+    }
+
+}
diff --git a/basicsuite/webengine/content/index.html b/basicsuite/webengine/content/index.html
new file mode 100644
index 0000000..3cbeb16
--- /dev/null
+++ b/basicsuite/webengine/content/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset=utf-8 />
+        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+        <title>Qt WebEngine Demo</title>
+        <style>
+        a, a:link, a:active, a:visited {
+            text-decoration:none;
+            font-family: "Helvetica";
+            font-size: 18px;
+            color: rgb(0,0,0)
+        }
+        .bookmark {
+            margin: 28px;
+        }
+        .example {
+            display: inline-block;
+        }
+        .example_image {
+            width: 300px;
+            height: 175px;
+        }
+        </style>
+    </head>
+    <body bgcolor="#AAAAAA">
+        <div style="text-align: center; padding-top: 100px;">
+            <div class="bookmark"><a href="http://qt.digia.com">http://qt.digia.com</a></div>
+            <div class="bookmark"><a href="http://qt-project.org/doc/qt-5">http://qt-project.org/doc/qt-5</a></div>
+            <div class="bookmark"><a href="http://www.google.com">http://www.google.com</a></div>
+            <div class="example"><a href="../content/webgl/helloqt.html"><img class="example_image" src="../content/webgl/screenshot.png"></a></div>
+            <div class="example"><a href="../content/csstetrahedron/index.html"><img class="example_image" src="../content/csstetrahedron/screenshot.png"></a></div>
+            <div class="example"><a href="../content/rubiks/index.html"><img class="example_image" src="../content/rubiks/screenshot.png"></a></div>
+            <div class="example"><a href="../content/morphingcubes/index.html"><img class="example_image" src="../content/morphingcubes/screenshot.png"></a></div>
+        </div>
+    </body>
+</html>
diff --git a/basicsuite/webengine/content/morphingcubes/index.html b/basicsuite/webengine/content/morphingcubes/index.html
new file mode 100644
index 0000000..a5731f1
--- /dev/null
+++ b/basicsuite/webengine/content/morphingcubes/index.html
@@ -0,0 +1,286 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+   "http://www.w3.org/TR/html4/loose.dtd">
+
+<html lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+  <title>Morphing Power Cubes</title>
+  <style type="text/css" media="screen">
+    body {
+      background-color: black;
+      color: white;
+      font-family: 'Lucida Grande', Verdana, Arial;
+      font-size: 12px;
+      background-image: -webkit-gradient(radial,
+                            50% 500, 1,
+                            50% 500, 400,
+                            from(rgba(255, 255, 255, 0.3)),
+                            to(rgba(255, 255, 255, 0)));
+     background-repeat: no-repeat;
+    }
+
+    #container {
+      width: 100%;
+      height: 700px;
+      -webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
+      -webkit-perspective-origin: 50% 225px;
+    }
+    #stage {
+      width: 100%;
+      height: 100%;
+      -webkit-transition: -webkit-transform 2s;
+      -webkit-transform-style: preserve-3d;
+    }
+
+    #shape {
+      position: relative;
+      top: 160px;
+      margin: 0 auto;
+      height: 200px;
+      width: 200px;
+      -webkit-transform-style: preserve-3d;
+    }
+
+    .plane {
+      position: absolute;
+      height: 200px;
+      width: 200px;
+      border: 1px solid white;
+      -webkit-border-radius: 12px;
+      -webkit-box-sizing: border-box;
+      text-align: center;
+      font-family: Times, serif;
+      font-size: 124pt;
+      color: black;
+      background-color: rgba(255, 255, 255, 0.6);
+      -webkit-transition: -webkit-transform 2s, opacity 2s;
+      -webkit-backface-visibility: hidden;
+    }
+
+    #shape.backfaces .plane {
+      -webkit-backface-visibility: visible;
+    }
+
+    #shape {
+      -webkit-animation: spin 8s infinite linear;
+    }
+
+    @-webkit-keyframes spin {
+      from { -webkit-transform: rotateY(0); }
+      to   { -webkit-transform: rotateY(-360deg); }
+    }
+
+    /* ---------- cube styles ------------- */
+    .cube > .one {
+      opacity: 0.5;
+      -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px);
+    }
+
+    .cube > .two {
+      opacity: 0.5;
+      -webkit-transform: scale3d(1.2, 1.2, 1.2) translateZ(100px);
+    }
+
+    .cube > .three {
+      opacity: 0.5;
+      -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px);
+    }
+
+    .cube > .four {
+      opacity: 0.5;
+      -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);
+    }
+
+    .cube > .five {
+      opacity: 0.5;
+      -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px);
+    }
+
+    .cube > .six {
+      opacity: 0.5;
+      -webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px) rotate(180deg);
+    }
+
+
+    .cube > .seven {
+      -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(90deg) translateZ(100px) rotate(180deg);
+    }
+
+    .cube > .eight {
+      -webkit-transform: scale3d(0.8, 0.8, 0.8) translateZ(100px);
+    }
+
+    .cube > .nine {
+      -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(90deg) translateZ(100px);
+    }
+
+    .cube > .ten {
+      -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(180deg) translateZ(100px);
+    }
+
+    .cube > .eleven {
+      -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(-90deg) translateZ(100px);
+    }
+
+    .cube > .twelve {
+      -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(-90deg) translateZ(100px);
+    }
+
+    /* ---------- ring styles ------------- */
+    .ring > .one {
+      -webkit-transform: translateZ(380px);
+    }
+
+    .ring > .two {
+      -webkit-transform: rotateY(30deg) translateZ(380px);
+    }
+
+    .ring > .three {
+      -webkit-transform: rotateY(60deg) translateZ(380px);
+    }
+
+    .ring > .four {
+      -webkit-transform: rotateY(90deg) translateZ(380px);
+    }
+
+    .ring > .five {
+      -webkit-transform: rotateY(120deg) translateZ(380px);
+    }
+
+    .ring > .six {
+      -webkit-transform: rotateY(150deg) translateZ(380px);
+    }
+
+    .ring > .seven {
+      -webkit-transform: rotateY(180deg) translateZ(380px);
+    }
+
+    .ring > .eight {
+      -webkit-transform: rotateY(210deg) translateZ(380px);
+    }
+
+    .ring > .nine {
+      -webkit-transform: rotateY(-120deg) translateZ(380px);
+    }
+
+    .ring > .ten {
+      -webkit-transform: rotateY(-90deg) translateZ(380px);
+    }
+
+    .ring > .eleven {
+      -webkit-transform: rotateY(300deg) translateZ(380px);
+    }
+
+    .ring > .twelve {
+      -webkit-transform: rotateY(330deg) translateZ(380px);
+    }
+
+    .controls {
+      width: 80%;
+      margin: 0 auto;
+      padding: 5px 20px;
+      -webkit-border-radius: 12px;
+      background-color: rgba(255, 255, 255, 0.5);
+    }
+    .controls > div {
+      margin: 10px;
+    }
+  </style>
+  <script type="text/javascript" charset="utf-8">
+    function hasClassName(inElement, inClassName)
+    {
+        var regExp = new RegExp('(?:^|\\s+)' + inClassName + '(?:\\s+|$)');
+        return regExp.test(inElement.className);
+    }
+
+    function addClassName(inElement, inClassName)
+    {
+        if (!hasClassName(inElement, inClassName))
+            inElement.className = [inElement.className, inClassName].join(' ');
+    }
+
+    function removeClassName(inElement, inClassName)
+    {
+        if (hasClassName(inElement, inClassName)) {
+            var regExp = new RegExp('(?:^|\\s+)' + inClassName + '(?:\\s+|$)', 'g');
+            var curClasses = inElement.className;
+            inElement.className = curClasses.replace(regExp, ' ');
+        }
+    }
+
+    function toggleClassName(inElement, inClassName)
+    {
+        if (hasClassName(inElement, inClassName))
+            removeClassName(inElement, inClassName);
+        else
+            addClassName(inElement, inClassName);
+    }
+    function toggleShape()
+    {
+      var shape = document.getElementById('shape');
+      if (hasClassName(shape, 'ring')) {
+        removeClassName(shape, 'ring');
+        addClassName(shape, 'cube');
+      } else {
+        removeClassName(shape, 'cube');
+        addClassName(shape, 'ring');
+      }
+      // Move the ring back in Z so it's not so in-your-face.
+      var stage = document.getElementById('stage');
+      if (hasClassName(shape, 'ring'))
+        stage.style.webkitTransform = 'translateZ(-200px)';
+      else
+        stage.style.webkitTransform = '';
+    }
+    function toggleBackfaces()
+    {
+      var backfacesVisible = document.getElementById('backfaces').checked;
+      var shape = document.getElementById('shape');
+      if (backfacesVisible)
+        addClassName(shape, 'backfaces');
+      else
+        removeClassName(shape, 'backfaces');
+    }
+  </script>
+</head>
+<body>
+
+  <div class="controls">
+    <h1>Animations, Transitions and 3D Transforms</h1>
+    <p>This demo shows some more interesting content using 3D transforms, animations and transitions.
+      Note that you can still select the text on the the elements, even while they are rotating. Transforms elements remain
+        fully interactive.</p>
+    <p>Click Toggle Shape to switch between nested cubes and one big ring. Note how the planes move smoothly to their new locations,
+      even while the whole shape is rotating. You can even interrupt this transition by clicking again, and they move back smoothly.</p>
+    <p>Toggle the Backfaces Visible checkbox to turn backfaces on and off using <code>-webkit-backface-visibility</code>.</p>
+    <div><button onclick="toggleShape()">Toggle Shape</button></div>
+    <div><input type="checkbox" id="backfaces" onclick="toggleBackfaces()" checked><label for="backfaces">Backfaces visible</label></div>
+  </div>
+
+  <div id="container">
+    <div id="stage">
+      <div id="shape" class="cube backfaces">
+        <div class="plane one">1</div>
+        <div class="plane two">2</div>
+        <div class="plane three">3</div>
+        <div class="plane four">4</div>
+        <div class="plane five">5</div>
+        <div class="plane six">6</div>
+        <div class="plane seven">7</div>
+        <div class="plane eight">8</div>
+        <div class="plane nine">9</div>
+        <div class="plane ten">10</div>
+        <div class="plane eleven">11</div>
+        <div class="plane twelve">12</div>
+      </div>
+    </div>
+  </div>
+  <div id="footer"></div>
+  <script language="javascript">
+  var container = document.getElementById("footer");
+  container.innerHTML = "<div style=\"font-family: monospace; font-size: 15px; margin: 0px auto 0px; padding: 2em; width: 600px; "
+                      + "height 100px; text-align: center; color: black; background-color: rgb(238, 238, 238);\">" + navigator.userAgent + "</div>";
+  </script>
+</body>
+</html>
diff --git a/basicsuite/webengine/content/morphingcubes/screenshot.png b/basicsuite/webengine/content/morphingcubes/screenshot.png
new file mode 100644
index 0000000..9d36114
--- /dev/null
+++ b/basicsuite/webengine/content/morphingcubes/screenshot.png
diff --git a/basicsuite/webengine/content/rubiks/css/style.css b/basicsuite/webengine/content/rubiks/css/style.css
new file mode 100644
index 0000000..a636bb0
--- /dev/null
+++ b/basicsuite/webengine/content/rubiks/css/style.css
@@ -0,0 +1,36 @@
+html, body {
+    height: 100%;
+    margin: 0px;
+}
+
+body {
+    background-color: #000;
+    color: white;
+    text-shadow: 0px 1px 1px black;
+    text-align: center;
+    font-family: sans-serif;
+}
+
+h1 {
+    text-align: center;
+    margin-top: 0px;
+    padding-top: 1em;
+}
+
+footer {
+    position: fixed;
+    text-align: center;
+    width: 100%;
+    left: 0px;
+    bottom: 3px;
+    font-size: 90%;
+}
+
+a {
+    color: white;
+}
+
+.face {
+    border: 2px solid black;
+    border-radius: 10px;
+}
diff --git a/basicsuite/webengine/content/rubiks/index.html b/basicsuite/webengine/content/rubiks/index.html
new file mode 100644
index 0000000..993b523
--- /dev/null
+++ b/basicsuite/webengine/content/rubiks/index.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<!--
+
+Copyright (c) 2012 Ondřej Žára http://ondras.zarovi.cz
+This demo is released under the BSD license:
+http://opensource.org/licenses/bsd-license.php
+
+-->
+
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>Rubik's cube :: CSS 3D Transformations demo</title>
+        <script src="js/oz.js"></script>
+        <script src="js/css3.oz.js"></script>
+        <script src="js/rubik.js"></script>
+        <script src="js/quaternion.js"></script>
+        <link rel="stylesheet" href="css/style.css" />
+        <meta name="viewport" content="width=device-width" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+    </head>
+    <body onload="new Rubik()">
+        <h1>CSS 3D Rubik's cube</h1>
+    </body>
+</html>
diff --git a/basicsuite/webengine/content/rubiks/js/css3.oz.js b/basicsuite/webengine/content/rubiks/js/css3.oz.js
new file mode 100644
index 0000000..d8ad6d9
--- /dev/null
+++ b/basicsuite/webengine/content/rubiks/js/css3.oz.js
@@ -0,0 +1,28 @@
+OZ.CSS3 = {
+    getProperty: function(property) {
+        var prefix = this.getPrefix(this._normalize(property));
+        if (prefix === null) { return null; }
+        return (prefix ? "-" + prefix.toLowerCase() + "-" : "") + property;
+    },
+    set: function(node, prop, value) {
+        prop = this._normalize(prop);
+        var prefix = this.getPrefix(prop);
+        if (prefix === null) { return false; }
+        var p = (prefix ? prefix + prop.charAt(0).toUpperCase() + prop.substring(1) : prop);
+        node.style[p] = value;
+        return true;
+    },
+    getPrefix: function(property) {
+        var prefixes = ["", "ms", "Webkit", "O", "Moz"];
+        for (var i=0;i<prefixes.length;i++) {
+            var p = prefixes[i];
+            var prop = (p ? p + property.charAt(0).toUpperCase() + property.substring(1) : property);
+            if (prop in this._node.style) { return p; }
+        }
+        return null;
+    },
+    _normalize: function(property) {
+        return property.replace(/-([a-z])/g, function(match, letter) { return letter.toUpperCase(); });
+    },
+    _node: OZ.DOM.elm("div")
+}
diff --git a/basicsuite/webengine/content/rubiks/js/oz.js b/basicsuite/webengine/content/rubiks/js/oz.js
new file mode 100644
index 0000000..b821c04
--- /dev/null
+++ b/basicsuite/webengine/content/rubiks/js/oz.js
@@ -0,0 +1,334 @@
+/* (c) 2007 - now() Ondrej Zara, 1.7 */
+var OZ = {
+    $:function(x) { return typeof(x) == "string" ? document.getElementById(x) : x; },
+    select: function(x) { return document.querySelectorAll(x); },
+    opera:!!window.opera,
+    ie:!!document.attachEvent && !window.opera,
+    gecko:!!document.getAnonymousElementByAttribute,
+    webkit:!!navigator.userAgent.match(/webkit/i),
+    khtml:!!navigator.userAgent.match(/khtml/i) || !!navigator.userAgent.match(/konqueror/i),
+    Event:{
+        _id:0,
+        _byName:{},
+        _byID:{},
+        add:function(elm,event,cb) {
+            var id = OZ.Event._id++;
+            var element = OZ.$(elm);
+            var fnc = (element && element.attachEvent ? function() { return cb.apply(element,arguments); } : cb);
+            var rec = [element,event,fnc];
+            var parts = event.split(" ");
+            while (parts.length) {
+                var e = parts.pop();
+                if (element) {
+                    if (element.addEventListener) {
+                        element.addEventListener(e,fnc,false);
+                    } else if (element.attachEvent) {
+                        element.attachEvent("on"+e,fnc);
+                    }
+                }
+                if (!(e in OZ.Event._byName)) { OZ.Event._byName[e] = {}; }
+                OZ.Event._byName[e][id] = rec;
+            }
+            OZ.Event._byID[id] = rec;
+            return id;
+        },
+        remove:function(id) {
+            var rec = OZ.Event._byID[id];
+            if (!rec) { return; }
+            var elm = rec[0];
+            var parts = rec[1].split(" ");
+            while (parts.length) {
+                var e = parts.pop();
+                if (elm) {
+                    if (elm.removeEventListener) {
+                        elm.removeEventListener(e,rec[2],false);
+                    } else if (elm.detachEvent) {
+                        elm.detachEvent("on"+e,rec[2]);
+                    }
+                }
+                delete OZ.Event._byName[e][id];
+            }
+            delete OZ.Event._byID[id];
+        },
+        stop:function(e) { e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true; },
+        prevent:function(e) { e.preventDefault ? e.preventDefault() : e.returnValue = false; },
+        target:function(e) { return e.target || e.srcElement; }
+    },
+    Class:function() {
+        var c = function() {
+            var init = arguments.callee.prototype.init;
+            if (init) { init.apply(this,arguments); }
+        };
+        c.implement = function(parent) {
+            for (var p in parent.prototype) { this.prototype[p] = parent.prototype[p]; }
+            return this;
+        };
+        c.extend = function(parent) {
+            var tmp = function(){};
+            tmp.prototype = parent.prototype;
+            this.prototype = new tmp();
+            this.prototype.constructor = this;
+            return this;
+        };
+        c.prototype.bind = function(fnc) { return fnc.bind(this); };
+        c.prototype.dispatch = function(type, data) {
+            var obj = {
+                type:type,
+                target:this,
+                timeStamp:(new Date()).getTime(),
+                data:data
+            }
+            var tocall = [];
+            var list = OZ.Event._byName[type];
+            for (var id in list) {
+                var item = list[id];
+                if (!item[0] || item[0] == this) { tocall.push(item[2]); }
+            }
+            var len = tocall.length;
+            for (var i=0;i<len;i++) { tocall[i](obj); }
+        }
+        return c;
+    },
+    DOM:{
+        elm:function(name, opts) {
+            var elm = document.createElement(name);
+            for (var p in opts) {
+                var val = opts[p];
+                if (p == "class") { p = "className"; }
+                if (p in elm) { elm[p] = val; }
+            }
+            OZ.Style.set(elm, opts);
+            return elm;
+        },
+        text:function(str) { return document.createTextNode(str); },
+        clear:function(node) { while (node.firstChild) {node.removeChild(node.firstChild);} },
+        pos:function(elm) { /* relative to _viewport_ */
+            var cur = OZ.$(elm);
+            var html = cur.ownerDocument.documentElement;
+            var parent = cur.parentNode;
+            var x = y = 0;
+            if (cur == html) { return [x,y]; }
+            while (1) {
+                if (OZ.Style.get(cur,"position") == "fixed") {
+                    x += cur.offsetLeft;
+                    y += cur.offsetTop;
+                    return [x,y];
+                }
+
+                if (OZ.opera && (parent == html || OZ.Style.get(cur,"display") != "block")) { } else {
+                    x -= parent.scrollLeft;
+                    y -= parent.scrollTop;
+                }
+                if (parent == cur.offsetParent || cur.parentNode == html) {
+                    x += cur.offsetLeft;
+                    y += cur.offsetTop;
+                    cur = parent;
+                }
+
+                if (parent == html) { return [x,y]; }
+                parent = parent.parentNode;
+            }
+        },
+        scroll:function() {
+            var x = document.documentElement.scrollLeft || document.body.scrollLeft || 0;
+            var y = document.documentElement.scrollTop || document.body.scrollTop || 0;
+            return [x,y];
+        },
+        win:function(avail) {
+            return (avail ? [window.innerWidth,window.innerHeight] : [document.documentElement.clientWidth,document.documentElement.clientHeight]);
+        },
+        hasClass:function(node, className) {
+            var cn = OZ.$(node).className;
+            var arr = (cn ? cn.split(" ") : []);
+            return (arr.indexOf(className) != -1);
+        },
+        addClass:function(node,className) {
+            if (OZ.DOM.hasClass(node, className)) { return; }
+            var cn = OZ.$(node).className;
+            var arr = (cn ? cn.split(" ") : []);
+            arr.push(className);
+            OZ.$(node).className = arr.join(" ");
+        },
+        removeClass:function(node, className) {
+            if (!OZ.DOM.hasClass(node, className)) { return; }
+            var cn = OZ.$(node).className;
+            var arr = (cn ? cn.split(" ") : []);
+            var arr = arr.filter(function($){ return $ != className; });
+            OZ.$(node).className = arr.join(" ");
+        },
+        append:function() {
+            if (arguments.length == 1) {
+                var arr = arguments[0];
+                var root = OZ.$(arr[0]);
+                for (var i=1;i<arr.length;i++) { root.appendChild(OZ.$(arr[i])); }
+            } else for (var i=0;i<arguments.length;i++) { OZ.DOM.append(arguments[i]); }
+        }
+    },
+    Style:{
+        get:function(elm, prop) {
+            if (document.defaultView && document.defaultView.getComputedStyle) {
+                try {
+                    var cs = elm.ownerDocument.defaultView.getComputedStyle(elm,"");
+                } catch(e) {
+                    return false;
+                }
+                if (!cs) { return false; }
+                return cs[prop];
+            } else {
+                return elm.currentStyle[prop];
+            }
+        },
+        set:function(elm, obj) {
+            for (var p in obj) {
+                var val = obj[p];
+                if (p == "opacity" && OZ.ie) {
+                    p = "filter";
+                    val = "alpha(opacity="+Math.round(100*val)+")";
+                    elm.style.zoom = 1;
+                } else if (p == "float") {
+                    p = (OZ.ie ? "styleFloat" : "cssFloat");
+                }
+                if (p in elm.style) { elm.style[p] = val; }
+            }
+        }
+    },
+    Request:function(url, callback, options) {
+        var o = {data:false, method:"get", headers:{}, xml:false}
+        for (var p in options) { o[p] = options[p]; }
+        o.method = o.method.toUpperCase();
+
+        var xhr = false;
+        if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); }
+        else if (window.ActiveXObject) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); }
+        else { return false; }
+        xhr.open(o.method, url, true);
+        xhr.onreadystatechange = function() {
+            if (xhr.readyState != 4) { return; }
+            if (!callback) { return; }
+            var data = (o.xml ? xhr.responseXML : xhr.responseText);
+            var headers = {};
+            var h = xhr.getAllResponseHeaders();
+            if (h) {
+                h = h.split(/[\r\n]/);
+                for (var i=0;i<h.length;i++) if (h[i]) {
+                    var v = h[i].match(/^([^:]+): *(.*)$/);
+                    headers[v[1]] = v[2];
+                }
+            }
+            callback(data,xhr.status,headers);
+        };
+        if (o.method == "POST") { xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); }
+        for (var p in o.headers) { xhr.setRequestHeader(p,o.headers[p]); }
+        xhr.send(o.data || null);
+        return xhr;
+    }
+}
+
+if (!Function.prototype.bind) {
+    Function.prototype.bind = function(thisObj) {
+        var fn = this;
+        var args = Array.prototype.slice.call(arguments, 1);
+        return function() {
+            return fn.apply(thisObj, args.concat(Array.prototype.slice.call(arguments)));
+        }
+    }
+};
+
+if (!Array.prototype.indexOf) {
+    Array.prototype.indexOf = function(item, from) {
+        var len = this.length;
+        var i = from || 0;
+        if (i < 0) { i += len; }
+        for (;i<len;i++) {
+            if (i in this && this[i] === item) { return i; }
+        }
+        return -1;
+    }
+}
+if (!Array.indexOf) {
+    Array.indexOf = function(obj, item, from) { return Array.prototype.indexOf.call(obj, item, from); }
+}
+
+if (!Array.prototype.lastIndexOf) {
+    Array.prototype.lastIndexOf = function(item, from) {
+        var len = this.length;
+        var i = from || len-1;
+        if (i < 0) { i += len; }
+        for (;i>-1;i--) {
+            if (i in this && this[i] === item) { return i; }
+        }
+        return -1;
+    }
+}
+if (!Array.lastIndexOf) {
+    Array.lastIndexOf = function(obj, item, from) { return Array.prototype.lastIndexOf.call(obj, item, from); }
+}
+
+if (!Array.prototype.forEach) {
+    Array.prototype.forEach = function(cb, _this) {
+        var len = this.length;
+        for (var i=0;i<len;i++) {
+            if (i in this) { cb.call(_this, this[i], i, this); }
+        }
+    }
+}
+if (!Array.forEach) {
+    Array.forEach = function(obj, cb, _this) { Array.prototype.forEach.call(obj, cb, _this); }
+}
+
+if (!Array.prototype.every) {
+    Array.prototype.every = function(cb, _this) {
+        var len = this.length;
+        for (var i=0;i<len;i++) {
+            if (i in this && !cb.call(_this, this[i], i, this)) { return false; }
+        }
+        return true;
+    }
+}
+if (!Array.every) {
+    Array.every = function(obj, cb, _this) { return Array.prototype.every.call(obj, cb, _this); }
+}
+
+if (!Array.prototype.some) {
+    Array.prototype.some = function(cb, _this) {
+        var len = this.length;
+        for (var i=0;i<len;i++) {
+            if (i in this && cb.call(_this, this[i], i, this)) { return true; }
+        }
+        return false;
+    }
+}
+if (!Array.some) {
+    Array.some = function(obj, cb, _this) { return Array.prototype.some.call(obj, cb, _this); }
+}
+
+if (!Array.prototype.map) {
+    Array.prototype.map = function(cb, _this) {
+        var len = this.length;
+        var res = new Array(len);
+        for (var i=0;i<len;i++) {
+            if (i in this) { res[i] = cb.call(_this, this[i], i, this); }
+        }
+        return res;
+    }
+}
+if (!Array.map) {
+    Array.map = function(obj, cb, _this) { return Array.prototype.map.call(obj, cb, _this); }
+}
+
+if (!Array.prototype.filter) {
+    Array.prototype.filter = function(cb, _this) {
+        var len = this.length;
+        var res = [];
+            for (var i=0;i<len;i++) {
+                if (i in this) {
+                    var val = this[i];
+                    if (cb.call(_this, val, i, this)) { res.push(val); }
+                }
+            }
+        return res;
+    }
+}
+if (!Array.filter) {
+    Array.filter = function(obj, cb, _this) { return Array.prototype.filter.call(obj, cb, _this); }
+}
diff --git a/basicsuite/webengine/content/rubiks/js/quaternion.js b/basicsuite/webengine/content/rubiks/js/quaternion.js
new file mode 100644
index 0000000..a44cfea
--- /dev/null
+++ b/basicsuite/webengine/content/rubiks/js/quaternion.js
@@ -0,0 +1,78 @@
+var Quaternion = OZ.Class();
+
+Quaternion.fromRotation = function(axis, angle) {
+    var DEG2RAD = Math.PI/180;
+    var a = angle * DEG2RAD;
+
+    var sin = Math.sin(a/2);
+    var cos = Math.cos(a/2);
+
+    return new this(
+        axis[0]*sin, axis[1]*sin, axis[2]*sin,
+        cos
+    );
+}
+
+Quaternion.fromUnit = function() {
+    return new this(0, 0, 0, 1);
+}
+
+Quaternion.prototype.init = function(x, y, z, w) {
+    this.x = x;
+    this.y = y;
+    this.z = z;
+    this.w = w;
+}
+
+Quaternion.prototype.normalize = function() {
+    var norm = Math.sqrt(this.x*this.x + this.y*this.y + this.z*this.z + this.w*this.w);
+    return new this.constructor(this.x/norm, this.y/norm, this.z/norm, this.w/norm);
+}
+
+Quaternion.prototype.conjugate = function() {
+    return new this.constructor(-this.x, -this.y, -this.z, this.w);
+}
+
+Quaternion.prototype.toString = function() {
+    return [this.x, this.y, this.z, this.w].toString(", ");
+}
+
+Quaternion.prototype.multiply = function(q) {
+    var p = this;
+
+    var x = p.w*q.x + p.x*q.w + p.y*q.z - p.z*q.y;
+    var y = p.w*q.y + p.y*q.w + p.z*q.x - p.x*q.z;
+    var z = p.w*q.z + p.z*q.w + p.x*q.y - p.y*q.x;
+    var w = p.w*q.w - p.x*q.x - p.y*q.y - p.z*q.z;
+
+    return new this.constructor(x, y, z, w);
+}
+
+Quaternion.prototype.toAxis = function() {
+    return [this.x, this.y, this.z];
+}
+
+Quaternion.prototype.toAngle = function() {
+    var RAD2DEG = 180/Math.PI;
+    return RAD2DEG * 2 * Math.acos(this.w);
+}
+
+Quaternion.prototype.toRotation = function() {
+    var axis = this.toAxis();
+    var angle = this.toAngle();
+    return "rotate3d(" + axis[0].toFixed(10) + "," + axis[1].toFixed(10) + "," + axis[2].toFixed(10) + "," + angle.toFixed(10) + "deg)";
+}
+
+Quaternion.prototype.toRotations = function() {
+    var RAD2DEG = 180/Math.PI;
+
+    var x = RAD2DEG * Math.atan2(2*(this.w*this.x + this.y*this.z), 1 - 2*(this.x*this.x + this.y*this.y));
+    var y = RAD2DEG * Math.asin(2*(this.w*this.y - this.x*this.z));
+    var z = RAD2DEG * Math.atan2(2*(this.w*this.z + this.x*this.y), 1 - 2*(this.y*this.y + this.z*this.z));
+
+    if (x < 0) { x += 360; }
+    if (y < 0) { y += 360; }
+    if (z < 0) { z += 360; }
+
+    return "rotateX(" + x.toFixed(10) + "deg) rotateY(" + y.toFixed(10) + "deg) rotate(" + z.toFixed(10) + "deg)";
+}
diff --git a/basicsuite/webengine/content/rubiks/js/rubik.js b/basicsuite/webengine/content/rubiks/js/rubik.js
new file mode 100644
index 0000000..4e6cf28
--- /dev/null
+++ b/basicsuite/webengine/content/rubiks/js/rubik.js
@@ -0,0 +1,492 @@
+Array.prototype.clone = function() {
+    var c = [];
+    var len = this.length;
+    for (var i=0;i<len;i++) { c.push(this[i]); }
+    return c;
+}
+
+Array.prototype.random = function() {
+    return this[Math.floor(Math.random()*this.length)];
+}
+
+var Face = OZ.Class();
+Face.SIZE	= 100;
+Face.LEFT	= 0;
+Face.RIGHT	= 1;
+Face.TOP	= 2;
+Face.BOTTOM	= 3;
+Face.FRONT	= 4;
+Face.BACK	= 5;
+
+Face.ROTATION = [
+    [Face.TOP, Face.FRONT, Face.BOTTOM, Face.BACK].reverse(),
+    [Face.LEFT, Face.BACK, Face.RIGHT, Face.FRONT].reverse(),
+    [Face.LEFT, Face.BOTTOM, Face.RIGHT, Face.TOP].reverse()
+];
+
+Face.prototype.init = function(cube, type) {
+    this._cube = cube;
+    this._type = type;
+    this._color = null;
+    this._node = OZ.DOM.elm("div", {className:"face face"+type, width:Face.SIZE+"px", height:Face.SIZE+"px", position:"absolute", left:"0px", top:"0px"});
+    OZ.CSS3.set(this._node, "box-sizing", "border-box");
+//	OZ.CSS3.set(this._node, "backface-visibility", "hidden");
+
+    switch (type) {
+        case Face.LEFT:
+            OZ.CSS3.set(this._node, "transform-origin", "100% 50%");
+            OZ.CSS3.set(this._node, "transform", "translate3d(-"+Face.SIZE+"px, 0px, 0px) rotateY(-90deg)");
+        break;
+        case Face.RIGHT:
+            OZ.CSS3.set(this._node, "transform-origin", "0% 50%");
+            OZ.CSS3.set(this._node, "transform", "translate3d("+Face.SIZE+"px, 0px, 0px) rotateY(90deg)");
+        break;
+        case Face.TOP:
+            OZ.CSS3.set(this._node, "transform-origin", "50% 100%");
+            OZ.CSS3.set(this._node, "transform", "translate3d(0px, -"+Face.SIZE+"px, 0px) rotateX(90deg)");
+        break;
+        case Face.BOTTOM:
+            OZ.CSS3.set(this._node, "transform-origin", "50% 0%");
+            OZ.CSS3.set(this._node, "transform", "translate3d(0px, "+Face.SIZE+"px, 0px) rotateX(-90deg)");
+        break;
+        case Face.FRONT:
+        break;
+        case Face.BACK:
+            OZ.CSS3.set(this._node, "transform", "translate3d(0px, 0px, -"+Face.SIZE+"px) rotateY(180deg)");
+        break;
+    }
+}
+
+Face.prototype.getCube = function() {
+    return this._cube;
+}
+
+Face.prototype.getNode = function() {
+    return this._node;
+}
+
+Face.prototype.getType = function() {
+    return this._type;
+}
+
+Face.prototype.setColor = function(color) {
+    this._color = color;
+    this._node.style.backgroundColor = color;
+}
+
+Face.prototype.getColor = function() {
+    return this._color;
+}
+
+var Cube = OZ.Class();
+Cube.prototype.init = function(position) {
+    this._rotation = null;
+    this._position = position;
+    this._node = OZ.DOM.elm("div", {className:"cube", position:"absolute", width:Face.SIZE+"px", height:Face.SIZE+"px"});
+    this._faces = {};
+    this._tmpFaces = {};
+    OZ.CSS3.set(this._node, "transform-style", "preserve-3d");
+
+    this._update();
+}
+
+Cube.prototype.getFaces = function() {
+    return this._faces;
+}
+
+Cube.prototype.setFace = function(type, color) {
+    if (!(type in this._faces)) {
+        var face = new Face(this, type);
+        this._node.appendChild(face.getNode());
+        this._faces[type] = face;
+    }
+    this._faces[type].setColor(color);
+}
+
+Cube.prototype.setRotation = function(rotation) {
+    this._rotation = rotation;
+    this._update();
+}
+
+Cube.prototype.complete = function() {
+    for (var i=0;i<6;i++) {
+        if (i in this._faces) { continue; }
+        this.addFace(i, "black");
+    }
+}
+
+Cube.prototype.prepareColorChange = function(sourceCube, rotation) {
+    this._tmpFaces = {};
+    var sourceFaces = sourceCube.getFaces();
+    for (var p in sourceFaces) {
+        var sourceType = parseInt(p);
+        var targetType = this._rotateType(sourceType, rotation);
+        this._tmpFaces[targetType] = sourceFaces[sourceType].getColor();
+    }
+}
+
+Cube.prototype.commitColorChange = function() {
+//	var parent = this._node.parentNode;
+//	parent.removeChild(this._node);
+
+    OZ.DOM.clear(this._node);
+    this._faces = {};
+    for (var p in this._tmpFaces) {
+        var type = parseInt(p);
+        this.setFace(type, this._tmpFaces[p]);
+    }
+    this._tmpFaces = {};
+
+    this._rotation = null;
+    this._update();
+//	parent.appendChild(this._node);
+}
+
+Cube.prototype._rotateType = function(type, rotation) {
+    for (var i=0;i<3;i++) {
+        if (!rotation[i]) { continue; }
+        var faces = Face.ROTATION[i];
+        var index = faces.indexOf(type);
+        if (index == -1) { continue; } /* no rotation available */
+        index = (index + rotation[i] + faces.length) % faces.length;
+        return faces[index];
+    }
+
+    return type;
+}
+
+Cube.prototype._update = function() {
+    var transform = "";
+    transform += "translate3d("+(-Face.SIZE/2)+"px, "+(-Face.SIZE/2)+"px, "+(-Face.SIZE/2)+"px) ";
+    if (this._rotation) { transform += this._rotation + " "; }
+
+    var half = Math.floor(Rubik.SIZE/2);
+    var x = this._position[0];
+    var y = this._position[1];
+    var z = -this._position[2];
+    x -= half;
+    y -= half;
+    z += half + 1/2;
+    transform += "translate3d("+(x*Face.SIZE)+"px, "+(y*Face.SIZE)+"px, "+(z*Face.SIZE)+"px)";
+
+    var prop = OZ.CSS3.getProperty("transform");
+    var val = this._rotation ? prop + " 300ms" : "";
+    OZ.CSS3.set(this._node, "transition", val);
+
+    OZ.CSS3.set(this._node, "transform", transform);
+}
+
+Cube.prototype.getPosition = function() {
+    return this._position;
+}
+
+Cube.prototype.getNode = function() {
+    return this._node;
+}
+
+Cube.prototype.getFaces = function() {
+    return this._faces;
+}
+
+var Rubik = OZ.Class();
+Rubik.SIZE = 3;
+Rubik.prototype.init = function() {
+    this._cubes = [];
+    this._faces = [];
+    this._faceNodes = [];
+    this._help = {};
+    this._drag = {
+        ec: [],
+        mouse: [],
+        face: null
+    };
+
+    this._rotation = Quaternion.fromRotation([1, 0, 0], -35).multiply(Quaternion.fromRotation([0, 1, 0], 45));
+    this._node = OZ.DOM.elm("div", {position:"absolute", left:"50%", top:"55%", width:"0px", height:"0px"});
+    document.body.appendChild(this._node);
+
+    OZ.CSS3.set(document.body, "perspective", "460px");
+    OZ.CSS3.set(this._node, "transform-style", "preserve-3d");
+
+    this._build();
+    this._update();
+    OZ.Event.add(document.body, "mousedown touchstart", this._dragStart.bind(this));
+
+    setTimeout(this.randomize.bind(this), 500);
+}
+
+Rubik.prototype.randomize = function() {
+    var remain = 10;
+    var cb = function() {
+        remain--;
+        if (remain > 0) {
+            this._rotateRandom();
+        } else {
+            OZ.Event.remove(e);
+
+            this._help.a = OZ.DOM.elm("p", {innerHTML:"Drag or swipe the background to rotate the whole cube."});
+            this._help.b = OZ.DOM.elm("p", {innerHTML:"Drag or swipe the cube to rotate its layers."});
+            document.body.appendChild(this._help.a);
+            document.body.appendChild(this._help.b);
+            OZ.CSS3.set(this._help.a, "transition", "opacity 500ms");
+            OZ.CSS3.set(this._help.b, "transition", "opacity 500ms");
+
+        }
+    }
+    var e = OZ.Event.add(null, "rotated", cb.bind(this));
+    this._rotateRandom();
+}
+
+Rubik.prototype._rotateRandom = function() {
+    var method = "_rotate" + ["X", "Y", "Z"].random();
+    var dir = [-1, 1].random();
+    var layer = Math.floor(Math.random()*Rubik.SIZE);
+    this[method](dir, layer);
+}
+
+Rubik.prototype._update = function() {
+    OZ.CSS3.set(this._node, "transform", "translateZ(" + (-Face.SIZE/2 - Face.SIZE) + "px) " + this._rotation.toRotation() + " translateZ("+(Face.SIZE/2)+"px)");
+}
+
+Rubik.prototype._eventToFace = function(e) {
+    if (document.elementFromPoint) {
+        e = (e.touches ? e.touches[0] : e);
+        var node = document.elementFromPoint(e.clientX, e.clientY);
+    } else {
+        var node = OZ.Event.target(e);
+    }
+    var index = this._faceNodes.indexOf(node);
+    if (index == -1) { return null; }
+    return this._faces[index];
+}
+
+Rubik.prototype._dragStart = function(e) {
+    this._faces = [];
+    this._faceNodes = [];
+    for (var i=0;i<this._cubes.length;i++) {
+        var faces = this._cubes[i].getFaces();
+        for (var p in faces) {
+            this._faces.push(faces[p]);
+            this._faceNodes.push(faces[p].getNode());
+        }
+    }
+
+    OZ.Event.prevent(e);
+    this._drag.face = this._eventToFace(e);
+    e = (e.touches ? e.touches[0] : e);
+    this._drag.mouse = [e.clientX, e.clientY];
+
+    this._drag.ec.push(OZ.Event.add(document.body, "mousemove touchmove", this._dragMove.bind(this)));
+    this._drag.ec.push(OZ.Event.add(document.body, "mouseup touchend", this._dragEnd.bind(this)));
+}
+
+Rubik.prototype._dragMove = function(e) {
+    if (e.touches && e.touches.length > 1) { return; }
+
+    if (this._drag.face) { /* check second face for rotation */
+        var thisFace = this._eventToFace(e);
+        if (!thisFace || thisFace == this._drag.face) { return; }
+        this._dragEnd();
+        this._rotate(this._drag.face, thisFace);
+    } else { /* rotate cube */
+        e = (e.touches ? e.touches[0] : e);
+        var mouse = [e.clientX, e.clientY];
+        var dx = mouse[0] - this._drag.mouse[0];
+        var dy = mouse[1] - this._drag.mouse[1];
+        var norm = Math.sqrt(dx*dx+dy*dy);
+        if (!norm) { return; }
+        var N = [-dy/norm, dx/norm];
+
+        this._drag.mouse = mouse;
+        this._rotation = Quaternion.fromRotation([N[0], N[1], 0], norm/2).multiply(this._rotation);
+        this._update();
+    }
+}
+
+Rubik.prototype._dragEnd = function(e) {
+    while (this._drag.ec.length) { OZ.Event.remove(this._drag.ec.pop()); }
+
+    if (!this._drag.face && this._help.a) {
+        this._help.a.style.opacity = 0;
+        this._help.a = null;
+    }
+}
+
+Rubik.prototype._rotate = function(face1, face2) {
+    var t1 = face1.getType();
+    var t2 = face2.getType();
+    var pos1 = face1.getCube().getPosition();
+    var pos2 = face2.getCube().getPosition();
+
+    /* find difference between cubes */
+    var diff = 0;
+    var diffIndex = -1;
+    for (var i=0;i<3;i++) {
+        var d = pos1[i]-pos2[i];
+        if (d) {
+            if (diffIndex != -1) { return; } /* different in >1 dimensions */
+            diff = (d > 0 ? 1 : -1);
+            diffIndex = i;
+        }
+    }
+
+    if (t1 == t2) { /* same face => diffIndex != -1 */
+        switch (t1) {
+            case Face.FRONT:
+            case Face.BACK:
+                var coef = (t1 == Face.FRONT ? 1 : -1);
+                if (diffIndex == 0) { this._rotateY(coef*diff, pos1[1]); } else { this._rotateX(coef*diff, pos1[0]); }
+            break;
+
+            case Face.LEFT:
+            case Face.RIGHT:
+                var coef = (t1 == Face.LEFT ? 1 : -1);
+                if (diffIndex == 2) { this._rotateY(-coef*diff, pos1[1]); } else { this._rotateZ(coef*diff, pos1[2]); }
+            break;
+
+            case Face.TOP:
+            case Face.BOTTOM:
+                var coef = (t1 == Face.TOP ? 1 : -1);
+                if (diffIndex == 0) { this._rotateZ(-coef*diff, pos1[2]); } else { this._rotateX(-coef*diff, pos1[0]); }
+            break;
+        }
+        return;
+    }
+
+    switch (t1) { /* different face => same cube, diffIndex == 1 */
+        case Face.FRONT:
+        case Face.BACK:
+            var coef = (t1 == Face.FRONT ? 1 : -1);
+            if (t2 == Face.LEFT) { this._rotateY(1 * coef, pos1[1]); }
+            if (t2 == Face.RIGHT) { this._rotateY(-1 * coef, pos1[1]); }
+            if (t2 == Face.TOP) { this._rotateX(1 * coef, pos1[0]); }
+            if (t2 == Face.BOTTOM) { this._rotateX(-1 * coef, pos1[0]); }
+        break;
+
+        case Face.LEFT:
+        case Face.RIGHT:
+            var coef = (t1 == Face.LEFT ? 1 : -1);
+            if (t2 == Face.FRONT) { this._rotateY(-1 * coef, pos1[1]); }
+            if (t2 == Face.BACK) { this._rotateY(1 * coef, pos1[1]); }
+            if (t2 == Face.TOP) { this._rotateZ(1 * coef, pos1[2]); }
+            if (t2 == Face.BOTTOM) { this._rotateZ(-1 * coef, pos1[2]); }
+        break;
+
+        case Face.TOP:
+        case Face.BOTTOM:
+            var coef = (t1 == Face.TOP ? 1 : -1);
+            if (t2 == Face.FRONT) { this._rotateX(-1 * coef, pos1[0]); }
+            if (t2 == Face.BACK) { this._rotateX(1 * coef, pos1[0]); }
+            if (t2 == Face.LEFT) { this._rotateZ(-1 * coef, pos1[2]); }
+            if (t2 == Face.RIGHT) { this._rotateZ(1 * coef, pos1[2]); }
+        break;
+    }
+
+}
+
+Rubik.prototype._rotateX = function(dir, layer) {
+    var cubes = [];
+    for (var i=0;i<Rubik.SIZE*Rubik.SIZE;i++) {
+        cubes.push(this._cubes[layer + i*Rubik.SIZE]);
+    }
+    this._rotateCubes(cubes, [dir, 0, 0]);
+}
+
+Rubik.prototype._rotateY = function(dir, layer) {
+    var cubes = [];
+    for (var i=0;i<Rubik.SIZE;i++) {
+        for (var j=0;j<Rubik.SIZE;j++) {
+            cubes.push(this._cubes[j + layer*Rubik.SIZE + i*Rubik.SIZE*Rubik.SIZE]);
+        }
+    }
+    this._rotateCubes(cubes, [0, -dir, 0]);
+}
+
+Rubik.prototype._rotateZ = function(dir, layer) {
+    var cubes = [];
+    var offset = layer * Rubik.SIZE * Rubik.SIZE;
+    for (var i=0;i<Rubik.SIZE*Rubik.SIZE;i++) {
+        cubes.push(this._cubes[offset+i]);
+    }
+    this._rotateCubes(cubes, [0, 0, dir]);
+}
+
+Rubik.prototype._rotateCubes = function(cubes, rotation) {
+    var suffixes = ["X", "Y", ""];
+
+    var prefix = OZ.CSS3.getPrefix("transition");
+    if (prefix === null) {
+        this._finalizeRotation(cubes, rotation);
+    } else {
+        var cb = function() {
+            OZ.Event.remove(e);
+            this._finalizeRotation(cubes, rotation);
+        }
+        var e = OZ.Event.add(document.body, "webkitTransitionEnd transitionend MSTransitionEnd oTransitionEnd", cb.bind(this));
+
+        var str = "";
+        for (var i=0;i<3;i++) {
+            if (!rotation[i]) { continue; }
+            str = "rotate" + suffixes[i] + "(" + (90*rotation[i]) + "deg)";
+        }
+        for (var i=0;i<cubes.length;i++) { cubes[i].setRotation(str); }
+    }
+
+}
+
+/**
+ * Remap colors
+ */
+Rubik.prototype._finalizeRotation = function(cubes, rotation) {
+    var direction = 0;
+    for (var i=0;i<3;i++) {
+        if (rotation[i]) { direction = rotation[i]; }
+    }
+
+    if (rotation[0]) { direction *= -1; } /* FIXME wtf */
+
+    var half = Math.floor(Rubik.SIZE/2);
+
+    for (var i=0;i<cubes.length;i++) {
+        var x = i % Rubik.SIZE - half;
+        var y = Math.floor(i / Rubik.SIZE) - half;
+
+        var source = [y*direction + half, -x*direction + half];
+        var sourceIndex = source[0] + Rubik.SIZE*source[1];
+
+        cubes[i].prepareColorChange(cubes[sourceIndex], rotation);
+    }
+
+    for (var i=0;i<cubes.length;i++) { cubes[i].commitColorChange(); }
+
+    setTimeout(function() {
+        if (this._help.b) {
+            this._help.b.style.opacity = 0;
+            this._help.b = null;
+        }
+
+        this.dispatch("rotated");
+    }.bind(this), 100);
+}
+
+Rubik.prototype._build = function() {
+    for (var z=0;z<Rubik.SIZE;z++) {
+        for (var y=0;y<Rubik.SIZE;y++) {
+            for (var x=0;x<Rubik.SIZE;x++) {
+                var cube = new Cube([x, y, z]);
+                this._cubes.push(cube);
+
+                if (z == 0) { cube.setFace(Face.FRONT, "red"); }
+                if (z == 2) { cube.setFace(Face.BACK, "blue"); }
+
+                if (x == 0) { cube.setFace(Face.LEFT, "green"); }
+                if (x == 2) { cube.setFace(Face.RIGHT, "yellow"); }
+
+                if (y == 0) { cube.setFace(Face.TOP, "cyan"); }
+                if (y == 2) { cube.setFace(Face.BOTTOM, "teal"); }
+                this._node.appendChild(cube.getNode());
+            }
+        }
+    }
+
+}
diff --git a/basicsuite/webengine/content/rubiks/screenshot.png b/basicsuite/webengine/content/rubiks/screenshot.png
new file mode 100644
index 0000000..45b0e37
--- /dev/null
+++ b/basicsuite/webengine/content/rubiks/screenshot.png
diff --git a/basicsuite/webengine/description.txt b/basicsuite/webengine/description.txt
index e725f8b..0a4cf41 100644
--- a/basicsuite/webengine/description.txt
+++ b/basicsuite/webengine/description.txt
@@ -1,3 +1,3 @@
 This example demonstrates the use of the QtWebEngine WebView with Qt Quick.
 
-Demo can be used to browse the internet (working network connection required) or run the off-line WebGL demo
+Demo can be used to browse the internet (working network connection required) or run the offline web page demos.
diff --git a/basicsuite/webengine/exclude.txt b/basicsuite/webengine/exclude.txt
index 4ae58fb..4efe135 100644
--- a/basicsuite/webengine/exclude.txt
+++ b/basicsuite/webengine/exclude.txt
@@ -3,4 +3,3 @@ linux-emulator
 linux-raspberrypi
 linux-beaglebone
 android-beaglebone
-android-nexus7v2
diff --git a/basicsuite/webengine/main.qml b/basicsuite/webengine/main.qml
index 2295ea4..c8ea895 100644
--- a/basicsuite/webengine/main.qml
+++ b/basicsuite/webengine/main.qml
@@ -41,6 +41,7 @@
 
 import QtQuick 2.1
 import QtQuick.Controls 1.1
+import QtQuick.Controls.Styles 1.2
 import QtQuick.Layouts 1.1
 import QtWebEngine 0.9
 
@@ -55,28 +56,42 @@ Rectangle {
     width: 1280
     height: 800
 
-    property url defaultUrl: "about:blank"
+    property url defaultUrl: Qt.resolvedUrl("content/index.html")
     function load(url) { mainWebView.url = url }
 
+    ErrorPage {
+        id: errorPage
+        anchors.fill: parent
+        displayingError: false
+    }
+
     WebEngineView {
         id: mainWebView
         anchors.fill: parent
-        url: Qt.resolvedUrl(defaultUrl)
+        url: defaultUrl
+        visible: !errorPage.displayingError
         onLoadingChanged: {
             if (!loading) {
                 addressBar.cursorPosition = 0
-                toolBar.state = "address"
             }
+            var loadError = loadRequest.errorDomain
+            if (loadError == WebEngineView.NoErrorDomain) {
+                errorPage.displayingError = false
+                return;
+            }
+            errorPage.displayingError = true
+            if (loadError == WebEngineView.InternalErrorDomain)
+                errorPage.mainMessage = "Internal error"
+            else if (loadError == WebEngineView.ConnectionErrorDomain)
+                errorPage.mainMessage = "Unable to connect to the Internet"
+            else if (loadError == WebEngineView.CertificateErrorDomain)
+                errorPage.mainMessage = "Certificate error"
+            else if (loadError == WebEngineView.DnsErrorDomain)
+                errorPage.mainMessage = "Unable to resolve the server's DNS address"
+            else // HTTP and FTP
+                errorPage.mainMessage = "Protocol error"
         }
-    }
-
-    PageView {
-        id: pageView
-        visible: true
-        opacity: 1
-        Behavior on opacity {
-            NumberAnimation { duration: 250 }
-        }
+        onActiveFocusChanged: activeFocus ? hideTimer.running = true : toolBar.state = "address"
     }
 
     MultiPointTouchArea {
@@ -100,7 +115,7 @@ Rectangle {
         color: "black"
         opacity: 1
 
-        height: addressBar.height + showToolBarButton.height + 50
+        height: addressBar.height + showToolBarButton.height + 40
         y: 0
 
         Behavior on y {
@@ -120,13 +135,13 @@ Rectangle {
 
         Timer {
             id: hideTimer
-            interval: 3000
-            running: (toolBar.state == "address" || toolBar.state == "") && !addressBar.activeFocus
+            interval: 2000
+            running: false
             onTriggered: {
-                if (toolBar.state == "address")
-                    toolBar.state = "hidden"
-                if (toolBar.state == "")
-                    toolBar.state = "address"
+                if (addressBar.activeFocus)
+                    return;
+                toolBar.state = "hidden"
+                running = false
             }
         }
 
@@ -147,54 +162,71 @@ Rectangle {
 
         RowLayout {
             id: addressRow
-            height: 65
+
+            Component {
+                id: navigationButtonStyle
+                ButtonStyle {
+                    background: Rectangle {
+                        anchors.fill: parent
+                        color: control.pressed ? "grey" : "transparent"
+                        radius: 5
+                        Image {
+                            anchors.fill: parent
+                            anchors.margins: 6
+                            source: control.icon
+                        }
+                    }
+                }
+            }
             anchors {
                 top: parent.top
                 bottom: showToolBarButton.top
                 left: parent.left
                 right: parent.right
                 margins: 10
-                topMargin: 40
+                topMargin: 30
             }
             ToolButton {
                 id: backButton
                 Layout.fillHeight: true
-                iconSource: "ui/icons/go-previous.png"
+                Layout.minimumWidth: height
+                property string icon: "ui/icons/go-previous.png"
                 onClicked: mainWebView.goBack()
                 enabled: mainWebView.canGoBack
+                style: navigationButtonStyle
             }
             ToolButton {
                 id: forwardButton
                 Layout.fillHeight: true
-                iconSource: "ui/icons/go-next.png"
+                Layout.minimumWidth: height
+                property string icon: "ui/icons/go-next.png"
                 onClicked: mainWebView.goForward()
                 enabled: mainWebView.canGoForward
+                style: navigationButtonStyle
             }
             ToolButton {
                 id: reloadButton
                 Layout.fillHeight: true
-                iconSource: mainWebView.loading ? "ui/icons/process-stop.png" : "ui/icons/view-refresh.png"
+                Layout.minimumWidth: height
+                property string icon: mainWebView.loading ? "ui/icons/process-stop.png" : "ui/icons/view-refresh.png"
                 onClicked: mainWebView.loading ? mainWebView.stop() : mainWebView.reload()
+                style: navigationButtonStyle
             }
             ToolButton {
                 id: homeButton
                 width: 20
                 Layout.fillHeight: true
-                iconSource: pageView.enabled ? "ui/icons/window.png" : "ui/icons/home.png"
-                onClicked: {
-                    if (pageView.enabled) {
-                        pageView.hide()
-                    } else {
-                        pageView.show()
-                    }
-                }
+                Layout.minimumWidth: height
+                property string icon: "ui/icons/home.png"
+                onClicked: load(defaultUrl)
+                style: navigationButtonStyle
             }
             TextField {
                 id: addressBar
                 focus: true
                 textColor: "black"
-                implicitHeight: 40
-                font.pointSize: 10
+                implicitHeight: 50
+                font.pixelSize: 25
                 inputMethodHints: Qt.ImhUrlCharactersOnly | Qt.ImhNoPredictiveText
                 Image {
                     anchors {
@@ -211,7 +243,6 @@ Rectangle {
                 Layout.fillWidth: true
                 text: mainWebView.url
                 onAccepted: {
-                    pageView.hide()
                     mainWebView.url = engine.fromUserInput(text)
                 }
             }
@@ -219,12 +250,16 @@ Rectangle {
 
         ToolButton {
             id: showToolBarButton
-            height: 25
-            iconSource: (toolBar.state == "hidden") ? "ui/icons/down.png" : "ui/icons/up.png"
+            height: 30
+            width: height
+            property string icon: (toolBar.state == "hidden") ? "ui/icons/down.png" : "ui/icons/up.png"
+            style: navigationButtonStyle
             onClicked: {
-                if (toolBar.state == "hidden")
+                if (toolBar.state == "hidden") {
                     toolBar.state = "address"
-                else
+                    addressBar.forceActiveFocus()
+                    addressBar.selectAll()
+                } else
                     toolBar.state = "hidden"
             }
             anchors {
diff --git a/basicsuite/webengine/ui/PageView.qml b/basicsuite/webengine/ui/PageView.qml
deleted file mode 100644
index 778fcd7..0000000
--- a/basicsuite/webengine/ui/PageView.qml
+++ /dev/null
@@ -1,147 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies).
-** Contact: For any questions to Digia, please use the contact form at
-** http://qt.digia.com/
-**
-** This file is part of the examples of the Qt Enterprise Embedded.
-**
-** $QT_BEGIN_LICENSE:BSD$
-** You may use this file under the terms of the BSD license as follows:
-**
-** "Redistribution and use in source and binary forms, with or without
-** modification, are permitted provided that the following conditions are
-** met:
-**   * Redistributions of source code must retain the above copyright
-**     notice, this list of conditions and the following disclaimer.
-**   * Redistributions in binary form must reproduce the above copyright
-**     notice, this list of conditions and the following disclaimer in
-**     the documentation and/or other materials provided with the
-**     distribution.
-**   * Neither the name of Digia Plc and its Subsidiary(-ies) nor the names
-**     of its contributors may be used to endorse or promote products derived
-**     from this software without specific prior written permission.
-**
-**
-** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
-** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
-** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
-** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
-** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
-** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
-** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
-** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
-** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
-** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
-**
-** $QT_END_LICENSE$
-**
-****************************************************************************/
-
-import QtQuick 2.1
-import QtQuick.Layouts 1.1
-
-Rectangle {
-    id: root
-    color: "#AAAAAA"
-    visible: true
-
-    property real fontPointSize: 13
-
-    function show() {
-        enabled = true
-        opacity = 1
-    }
-    function hide() {
-        enabled = false
-        opacity = 0
-    }
-    anchors {
-        fill: parent
-    }
-    ColumnLayout {
-        id: links
-        anchors {
-            bottom: parent.bottom
-            top: parent.top
-            horizontalCenter: parent.horizontalCenter
-            margins: 50
-        }
-        Text {
-            text: "http://www.google.com"
-            font.pointSize: fontPointSize
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
-            Layout.fillWidth: true
-            Layout.preferredHeight: 60
-            MouseArea {
-                anchors.fill: parent
-                onClicked: {
-                    load(Qt.resolvedUrl(parent.text))
-                    hide()
-                }
-            }
-        }
-        Text {
-            text: "http://qt.digia.com"
-            font.pointSize: fontPointSize
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
-            Layout.fillWidth: true
-            Layout.preferredHeight: 60
-            MouseArea {
-                anchors.fill: parent
-                onClicked: {
-                    load(Qt.resolvedUrl(parent.text))
-                    hide()
-                }
-            }
-        }
-        Text {
-            text: "http://qt-project.org/doc/qt-5"
-            font.pointSize: fontPointSize
-            horizontalAlignment: Text.AlignHCenter
-            verticalAlignment: Text.AlignVCenter
-            Layout.fillWidth: true
-            Layout.preferredHeight: 60
-            MouseArea {
-                anchors.fill: parent
-                onClicked: {
-                    load(Qt.resolvedUrl(parent.text))
-                    hide()
-                }
-            }
-        }
-    RowLayout {
-        id: localContent
-        anchors {
-            margins: 50
-        }
-        Image {
-            sourceSize.width: 300
-            sourceSize.height: 175
-            source: "../content/webgl/screenshot.png"
-            MouseArea {
-                anchors.fill: parent
-                onClicked: {
-                    load(Qt.resolvedUrl("../content/webgl/helloqt.html"))
-                    hide()
-                }
-            }
-        }
-        Image {
-            sourceSize.width: 300
-            sourceSize.height: 175
-            source: "../content/csstetrahedron/screenshot.png"
-            MouseArea {
-                anchors.fill: parent
-                onClicked: {
-                    load(Qt.resolvedUrl("../content/csstetrahedron/index.html"))
-                    hide()
-                }
-            }
-        }
-    } // RowLayout
-    } // ColumnLayout
-}
diff --git a/basicsuite/webengine/ui/icons/busy.png b/basicsuite/webengine/ui/icons/busy.png
deleted file mode 100644
index 3b60d26..0000000
--- a/basicsuite/webengine/ui/icons/busy.png
+++ /dev/null
diff --git a/basicsuite/webengine/ui/icons/cube.png b/basicsuite/webengine/ui/icons/cube.png
deleted file mode 100644
index a5b337b..0000000
--- a/basicsuite/webengine/ui/icons/cube.png
+++ /dev/null
diff --git a/basicsuite/webengine/ui/icons/down.png b/basicsuite/webengine/ui/icons/down.png
index cabd356..ec246e7 100644
--- a/basicsuite/webengine/ui/icons/down.png
+++ b/basicsuite/webengine/ui/icons/down.png
diff --git a/basicsuite/webengine/ui/icons/go-next.png b/basicsuite/webengine/ui/icons/go-next.png
index c8b9b76..6ba21f8 100644
--- a/basicsuite/webengine/ui/icons/go-next.png
+++ b/basicsuite/webengine/ui/icons/go-next.png
diff --git a/basicsuite/webengine/ui/icons/go-previous.png b/basicsuite/webengine/ui/icons/go-previous.png
index 7a71d7d..e0753dd 100644
--- a/basicsuite/webengine/ui/icons/go-previous.png
+++ b/basicsuite/webengine/ui/icons/go-previous.png
diff --git a/basicsuite/webengine/ui/icons/grid.png b/basicsuite/webengine/ui/icons/grid.png
deleted file mode 100644
index 2959d1d..0000000
--- a/basicsuite/webengine/ui/icons/grid.png
+++ /dev/null
diff --git a/basicsuite/webengine/ui/icons/home.png b/basicsuite/webengine/ui/icons/home.png
index 92d01d1..b241e02 100644
--- a/basicsuite/webengine/ui/icons/home.png
+++ b/basicsuite/webengine/ui/icons/home.png
diff --git a/basicsuite/webengine/ui/icons/list.png b/basicsuite/webengine/ui/icons/list.png
deleted file mode 100644
index 6cbc8b3..0000000
--- a/basicsuite/webengine/ui/icons/list.png
+++ /dev/null
diff --git a/basicsuite/webengine/ui/icons/pin-checked.png b/basicsuite/webengine/ui/icons/pin-checked.png
deleted file mode 100644
index aa50f2b..0000000
--- a/basicsuite/webengine/ui/icons/pin-checked.png
+++ /dev/null
diff --git a/basicsuite/webengine/ui/icons/pin-unchecked.png b/basicsuite/webengine/ui/icons/pin-unchecked.png
deleted file mode 100644
index c11411b..0000000
--- a/basicsuite/webengine/ui/icons/pin-unchecked.png
+++ /dev/null
diff --git a/basicsuite/webengine/ui/icons/pin.png b/basicsuite/webengine/ui/icons/pin.png
deleted file mode 100644
index 4439f04..0000000
--- a/basicsuite/webengine/ui/icons/pin.png
+++ /dev/null
diff --git a/basicsuite/webengine/ui/icons/plus.png b/basicsuite/webengine/ui/icons/plus.png
deleted file mode 100644
index 33b03d2..0000000
--- a/basicsuite/webengine/ui/icons/plus.png
+++ /dev/null
diff --git a/basicsuite/webengine/ui/icons/process-stop.png b/basicsuite/webengine/ui/icons/process-stop.png
index 8399059..c71d5a7 100644
--- a/basicsuite/webengine/ui/icons/process-stop.png
+++ b/basicsuite/webengine/ui/icons/process-stop.png
diff --git a/basicsuite/webengine/ui/icons/settings.png b/basicsuite/webengine/ui/icons/settings.png
deleted file mode 100644
index 347a0e5..0000000
--- a/basicsuite/webengine/ui/icons/settings.png
+++ /dev/null
diff --git a/basicsuite/webengine/ui/icons/stack.png b/basicsuite/webengine/ui/icons/stack.png
deleted file mode 100644
index d631adc..0000000
--- a/basicsuite/webengine/ui/icons/stack.png
+++ /dev/null
diff --git a/basicsuite/webengine/ui/icons/up.png b/basicsuite/webengine/ui/icons/up.png
index 8a2e626..5d33c4a 100644
--- a/basicsuite/webengine/ui/icons/up.png
+++ b/basicsuite/webengine/ui/icons/up.png
diff --git a/basicsuite/webengine/ui/icons/view-refresh.png b/basicsuite/webengine/ui/icons/view-refresh.png
index 265585b..e7af6b3 100644
--- a/basicsuite/webengine/ui/icons/view-refresh.png
+++ b/basicsuite/webengine/ui/icons/view-refresh.png
diff --git a/basicsuite/webengine/ui/icons/wifi-off.png b/basicsuite/webengine/ui/icons/wifi-off.png
deleted file mode 100644
index 4c0490d..0000000
--- a/basicsuite/webengine/ui/icons/wifi-off.png
+++ /dev/null
diff --git a/basicsuite/webengine/ui/icons/wifi-on.png b/basicsuite/webengine/ui/icons/wifi-on.png
deleted file mode 100644
index 8bdc553..0000000
--- a/basicsuite/webengine/ui/icons/wifi-on.png
+++ /dev/null
diff --git a/basicsuite/webengine/ui/icons/wifi.png b/basicsuite/webengine/ui/icons/wifi.png
deleted file mode 100644
index 8a0d9e0..0000000
--- a/basicsuite/webengine/ui/icons/wifi.png
+++ /dev/null
diff --git a/basicsuite/webengine/ui/icons/window.png b/basicsuite/webengine/ui/icons/window.png
deleted file mode 100644
index a06602b..0000000
--- a/basicsuite/webengine/ui/icons/window.png
+++ /dev/null