Imported Upstream version 1.0upstream/1.0

65 files changed, 1699 insertions, 0 deletions

diff --git a/Qt5_CinematicExperience.pro b/Qt5_CinematicExperience.pro
new file mode 100644
index 0000000..3830ee9
--- /dev/null
+++ b/Qt5_CinematicExperience.pro
@@ -0,0 +1,9 @@
+TEMPLATE = app
+
+QT += qml quick
+SOURCES += main.cpp
+
+target.path = /opt/Qt5_CinematicExperience
+qml.files = Qt5_CinematicExperience.qml content
+qml.path = /opt/Qt5_CinematicExperience
+INSTALLS += target qml
diff --git a/Qt5_CinematicExperience.qml b/Qt5_CinematicExperience.qml
new file mode 100644
index 0000000..ae16ac5
--- /dev/null
+++ b/Qt5_CinematicExperience.qml
@@ -0,0 +1,41 @@
+import QtQuick 2.0
+import "content"
+
+Item {
+    id: mainWindow
+
+    width: 620
+    height: 720
+
+    QtObject {
+        id: settings
+        // These are used to scale fonts according to screen size
+        property real _scaler: 400 + mainWindow.width * mainWindow.height * 0.00015
+        property int fontXS: _scaler * 0.032
+        property int fontS: _scaler * 0.040
+        property int fontM: _scaler * 0.046
+        property int fontMM: _scaler * 0.064
+        property int fontL: _scaler * 0.100
+        // Settings
+        property bool showFogParticles: true
+        property bool showShootingStarParticles: true
+        property bool showLighting: true
+        property bool showColors: false
+    }
+
+    MainView {
+        id: mainView
+    }
+
+    InfoView {
+        id: infoView
+    }
+
+    DetailsView {
+        id: detailsView
+    }
+
+    MoviesModel {
+        id: moviesModel
+    }
+}
diff --git a/Qt5_CinematicExperience.qmlproject b/Qt5_CinematicExperience.qmlproject
new file mode 100644
index 0000000..fd24655
--- /dev/null
+++ b/Qt5_CinematicExperience.qmlproject
@@ -0,0 +1,20 @@
+/* File generated by Qt Creator, version 2.4.1 */
+
+import QmlProject 1.1
+
+Project {
+    mainFile: "Qt5_CinematicExperience.qml"
+
+    /* Include .qml, .js, and image files from current directory and subdirectories */
+    QmlFiles {
+        directory: "."
+    }
+    JavaScriptFiles {
+        directory: "."
+    }
+    ImageFiles {
+        directory: "."
+    }
+    /* List of plugin directories passed to QML runtime */
+    // importPaths: [ "../exampleplugin" ]
+}
diff --git a/README b/README
new file mode 100644
index 0000000..1f16c7e
--- /dev/null
+++ b/README
@@ -0,0 +1,49 @@
+
+INTRO
+==========
+
+This UX demo application presents some graphical features of Qt5. 
+The name 'Cinematic Experience' reflects how it's possible to build user 
+interfaces with increased dynamics.
+
+
+RUNNING
+==========
+
+To run this application you need relatively recent build of Qt5:
+- http://qt-project.org
+- http://qt.gitorious.org/qt/qt5
+
+There are two different ways to run the application:
+
+1) If your target platform contains 'qmlscene' binary, just use it:
+---
+cd Qt5_CinematicExperience
+[path to Qt5]/qtbase/bin/qmlscene Qt5_CinematicExperience.qml
+---
+
+2) Alternatively, a simple launcher is provided to start the application:
+---
+cd Qt5_CinematicExperience
+[path to Qt5]/qtbase/bin/qmake
+make
+./Qt5_CinematicExperience
+---
+
+The run application in fullscreen mode, use '--fullscreen' parameter for 
+qmlscene or launcher. If you want to tweak the window resolution, 
+modify 'width' and 'height' properties in Qt5_CinematicExperience.qml
+
+
+LICENSE
+==========
+
+Source codes are licensed under a Creative Commons Attribution 3.0 Unported 
+License. http://creativecommons.org/licenses/by/3.0/
+
+No attribution required, but feel free to mention us or 
+contact info@quitcoding.com
+
+Qt, and the Qt logo are trademarks of Nokia Corporation
+Movie reviews copyright © IMDb.com
+DVD cover icons from http://www.iconarchive.com
diff --git a/content/Background.qml b/content/Background.qml
new file mode 100644
index 0000000..bc8831d
--- /dev/null
+++ b/content/Background.qml
@@ -0,0 +1,40 @@
+import QtQuick 2.0
+import QtQuick.Particles 2.0
+
+Rectangle {
+    id: root
+
+    anchors.fill: parent
+    color: "#ffffff"
+
+    Image {
+        id: backgroundImage
+        anchors.fill: parent
+        source: settings.showColors ? "images/background3.png" : "images/background.png"
+        Behavior on source {
+            SequentialAnimation {
+                NumberAnimation { target: backgroundImage; property: "opacity"; to: 0; duration: 400; easing.type: Easing.InQuad }
+                PropertyAction { target: backgroundImage; property: "source" }
+                NumberAnimation { target: backgroundImage; property: "opacity"; to: 1; duration: 400; easing.type: Easing.OutQuad }
+            }
+        }
+    }
+
+    // Sky stars particles
+    ParticleSystem {
+        width: parent.width
+        height: 220
+        paused: detailsView.isShown || infoView.isShown || !settings.showShootingStarParticles
+        ImageParticle {
+            source: "images/star.png"
+            rotationVariation: 10
+        }
+        Emitter {
+            anchors.fill: parent
+            emitRate: 4
+            lifeSpan: 5000
+            size: 32
+            sizeVariation: 16
+        }
+    }
+}
diff --git a/content/Button.qml b/content/Button.qml
new file mode 100644
index 0000000..c6ab643
--- /dev/null
+++ b/content/Button.qml
@@ -0,0 +1,112 @@
+import QtQuick 2.0
+import QtQuick.Particles 2.0
+
+Item {
+    id: root
+
+    property alias text: buttonTextItem.text
+    property bool effectsOn: true
+    signal clicked
+
+    width: buttonBackgroundImage.width
+    height: buttonBackgroundImage.height
+    scale: mouseArea.pressed && mouseArea.containsMouse ? 0.9 : 1.0
+    opacity: mouseArea.pressed && mouseArea.containsMouse ? 0.8 : 1.0
+
+    Behavior on scale {
+        NumberAnimation { duration: 150; easing.type: Easing.OutQuad }
+    }
+    Behavior on opacity {
+        NumberAnimation { duration: 150; easing.type: Easing.OutQuad }
+    }
+
+    BorderImage {
+        id: buttonBackgroundImage
+        source: "images/button.png"
+        border.left: 24
+        border.right: 24
+        border.top: 20
+        border.bottom: 20
+        width: 140
+    }
+
+    // Stars effect
+    ParticleSystem {
+        id: particleSystem
+        anchors.fill: buttonBackgroundImage
+        running: root.effectsOn
+        ImageParticle {
+            source: "images/star.png"
+            rotationVariation: 180
+            color:"#ffffff"
+        }
+        Emitter {
+            width: parent.width
+            height: 8
+            emitRate: 16
+            lifeSpan: 2000
+            size: 32
+            sizeVariation: 16
+            endSize: 8
+            velocity: PointDirection{ y: 20; x:-2; xVariation: 5; yVariation: 10 }
+        }
+        Turbulence {
+            width: parent.width
+            height: (parent.height / 2)
+            strength: 8
+        }
+    }
+
+    // Button background
+    ShaderEffectSource {
+        id: shaderSource
+        anchors.fill: buttonBackgroundImage
+        sourceItem: buttonBackgroundImage
+        hideSource: true
+        visible: false
+    }
+
+    // Particles
+    ShaderEffectSource {
+        id: shaderSource2
+        anchors.fill: particleSystem
+        sourceItem: particleSystem
+        hideSource: true
+        visible: false
+    }
+
+    // Mask particles inside the button
+    ShaderEffect {
+        id: shaderEffectItem
+        anchors.fill: shaderSource
+
+        property variant source: shaderSource
+        property variant source2: shaderSource2
+
+        fragmentShader: "
+            uniform sampler2D source;
+            uniform sampler2D source2;
+            uniform lowp float qt_Opacity;
+            varying highp vec2 qt_TexCoord0;
+            void main() {
+                lowp vec4 pix = texture2D(source, qt_TexCoord0);
+                lowp vec4 pix2 = texture2D(source2, qt_TexCoord0);
+                gl_FragColor = qt_Opacity * (pix + pix.a * pix2);
+            }"
+    }
+
+    Text {
+        id: buttonTextItem
+        anchors.centerIn: parent
+        color: "#000000"
+        font.pixelSize: 28
+    }
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        anchors.margins: -16
+        onClicked: {
+            root.clicked();
+        }
+    }
+}
diff --git a/content/CurtainEffect.qml b/content/CurtainEffect.qml
new file mode 100644
index 0000000..497975c
--- /dev/null
+++ b/content/CurtainEffect.qml
@@ -0,0 +1,54 @@
+import QtQuick 2.0
+
+ShaderEffect {
+    id: root
+
+    property variant source
+    property real leftHeight: height / 2
+    property real rightHeight: height / 2
+    property real originalHeight: height
+    property real originalWidth: width
+    property real amplitude: 0.10
+
+    anchors.fill: parent
+    mesh: Qt.size(1, 80)
+
+    vertexShader: "
+        attribute highp vec4 qt_Vertex;
+        attribute highp vec2 qt_MultiTexCoord0;
+        uniform highp mat4 qt_Matrix;
+        varying highp vec2 qt_TexCoord0;
+        varying lowp float shade;
+        uniform highp float leftHeight;
+        uniform highp float rightHeight;
+        uniform highp float originalHeight;
+        uniform highp float originalWidth;
+        uniform highp float amplitude;
+
+        void main() {
+            qt_TexCoord0 = qt_MultiTexCoord0;
+
+            highp vec4 shift = vec4(0);
+            shift.y = qt_Vertex.y * ((originalHeight - leftHeight) + (leftHeight - rightHeight) * (qt_Vertex.x / originalWidth)) / originalHeight;
+
+            shade = sin(21.9911486 * qt_Vertex.y / originalHeight);
+            shift.x = amplitude * (originalHeight - leftHeight + (leftHeight - rightHeight) * (qt_Vertex.x / originalWidth)) * shade;
+
+            gl_Position = qt_Matrix * (qt_Vertex - shift);
+
+            shade = 0.2 * (2.0 - shade ) * (1.0 - (rightHeight + (leftHeight  - rightHeight) * (1.0 - qt_Vertex.y / originalWidth)) / originalHeight);
+        }
+    "
+
+    fragmentShader: "
+        varying highp vec2 qt_TexCoord0;
+        uniform lowp float qt_Opacity;
+        uniform sampler2D source;
+        varying lowp float shade;
+        void main() {
+            highp vec4 color = texture2D(source, qt_TexCoord0);
+            color.rgb *= 1.0 - shade;
+            gl_FragColor = color * qt_Opacity;
+        }
+    "
+}
diff --git a/content/DelegateItem.qml b/content/DelegateItem.qml
new file mode 100644
index 0000000..4b3f632
--- /dev/null
+++ b/content/DelegateItem.qml
@@ -0,0 +1,89 @@
+import QtQuick 2.0
+
+Item {
+    id: root
+
+    property string name
+    property bool isSelected: listView.currentIndex === index
+
+    width: parent ? parent.width : imageItem.width
+    height: imageItem.height
+    z: isSelected ? 1000 : -index
+    rotation: isSelected ? 0 : -15
+    scale: isSelected ? 1.5 : 0.8
+
+    Behavior on rotation {
+        NumberAnimation { duration: 500; easing.type: Easing.OutBack }
+    }
+    Behavior on scale {
+        NumberAnimation { duration: 1000; easing.type: Easing.OutElastic }
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            if (isSelected) {
+                detailsView.image = model.image
+                detailsView.name =  model.name
+                detailsView.year = model.year
+                detailsView.director = model.director
+                detailsView.cast = model.cast
+                detailsView.rating = model.rating
+                detailsView.overview = model.overview
+                detailsView.show();
+            } else {
+                listView.currentIndex = index;
+                if (settings.showShootingStarParticles) shootingStarBurst.burst(50);
+            }
+        }
+    }
+
+    Image {
+        id: imageItem
+        anchors.horizontalCenter: parent.horizontalCenter
+        source: "images/" + model.image
+        visible: !settings.showLighting
+    }
+
+    ShaderEffectSource {
+        id: s1
+        sourceItem: imageItem
+        hideSource: settings.showLighting
+        visible: settings.showLighting
+    }
+
+    ShaderEffect {
+        anchors.fill: imageItem
+        property variant src: s1
+        property variant srcNmap: coverNmapSource
+        property real widthPortition: mainView.width/imageItem.width
+        property real heightPortition: mainView.height/imageItem.height
+        property real widthNorm: widthPortition * 0.5 - 0.5
+        property real heightNorm: root.y/imageItem.height - listView.contentY / imageItem.height
+        property real lightPosX: listView.globalLightPosX * widthPortition - widthNorm
+        property real lightPosY: listView.globalLightPosY * heightPortition - heightNorm
+        visible: settings.showLighting
+
+        fragmentShader: "
+            uniform sampler2D src;
+            uniform sampler2D srcNmap;
+            uniform lowp float qt_Opacity;
+            varying highp vec2 qt_TexCoord0;
+            uniform highp float lightPosX;
+            uniform highp float lightPosY;
+            void main() {
+                highp vec4 pix = texture2D(src, qt_TexCoord0.st);
+                highp vec4 pix2 = texture2D(srcNmap, qt_TexCoord0.st);
+                highp vec3 normal = normalize(pix2.rgb * 2.0 - 1.0);
+                highp vec3 light_pos = normalize(vec3(qt_TexCoord0.x - lightPosX, qt_TexCoord0.y - lightPosY, 0.6 ));
+                highp float diffuse = max(dot(normal, light_pos), 0.4);
+
+                // boost a bit
+                diffuse *= 1.8;
+
+                highp vec3 color = diffuse * pix.rgb;
+                gl_FragColor = vec4(color, pix.a) * qt_Opacity;
+            }
+        "
+    }
+}
diff --git a/content/DetailsView.qml b/content/DetailsView.qml
new file mode 100644
index 0000000..c5c31dc
--- /dev/null
+++ b/content/DetailsView.qml
@@ -0,0 +1,190 @@
+import QtQuick 2.0
+
+Item {
+    id: root
+
+    property bool isShown: false
+    property string image
+    property string name
+    property string year
+    property string director
+    property string cast
+    property string overview
+    property alias rating: ratingsItem.rating
+
+    anchors.fill: parent
+    opacity: 0
+    visible: opacity
+    scale: 0.3
+
+    function show() {
+        mainView.scheduleUpdate();
+        root.isShown = true;
+        showAnimation.restart();
+    }
+    function hide() {
+        hideAnimation.restart();
+    }
+
+    Binding {
+        target: mainView
+        property: "blurAmount"
+        value: 40 * root.opacity
+        when: root.isShown
+    }
+
+    ParallelAnimation {
+        id: showAnimation
+        NumberAnimation { target: root; property: "opacity"; to: 1.0; duration: 500; easing.type: Easing.InOutQuad }
+        NumberAnimation { target: root; property: "scale"; to: 1.0; duration: 500; easing.type: Easing.InOutQuad }
+    }
+    SequentialAnimation {
+        id: hideAnimation
+        ParallelAnimation {
+            NumberAnimation { target: root; property: "opacity"; to: 0; duration: 500; easing.type: Easing.InOutQuad }
+            NumberAnimation { target: root; property: "scale"; to: 0.3; duration: 500; easing.type: Easing.InOutQuad }
+        }
+        PropertyAction { target: root; property: "isShown"; value: false }
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            root.hide();
+        }
+    }
+
+    Rectangle {
+        id: backgroundItem
+        anchors.centerIn: parent
+        width: Math.min(620, parent.width - 32)
+        height: Math.min(840, parent.height - 32)
+        border.color: "#808080"
+        border.width: 1
+        opacity: 0.8
+        gradient: Gradient {
+            GradientStop { position: 0.0; color: "#101010" }
+            GradientStop { position: 0.3; color: "#404040" }
+            GradientStop { position: 1.0; color: "#090909" }
+        }
+    }
+
+    Flickable {
+        anchors.top: backgroundItem.top
+        anchors.left: backgroundItem.left
+        anchors.right: backgroundItem.right
+        anchors.bottom: bottomSeparator.top
+        anchors.margins: 1
+        anchors.bottomMargin: 0
+
+        contentWidth: backgroundItem.width
+        contentHeight: ratingsItem.y + descriptionTextItem.height + 64
+        flickableDirection: Flickable.VerticalFlick
+        clip: true
+
+        Image {
+            id: movieImageItem
+            x: 8
+            y: 24
+            width: 192
+            height: 192
+            source: root.image ? "images/" + root.image : ""
+            fillMode: Image.PreserveAspectFit
+            smooth: true
+        }
+
+        Column {
+            id: topColumn
+            y: 20
+            anchors.left: movieImageItem.right
+            anchors.leftMargin: 10
+            anchors.right: parent.right
+            anchors.rightMargin: 26
+            spacing: 8
+            Text {
+                id: titleTextItem
+                width: parent.width
+                wrapMode: Text.WordWrap
+                color: "#ffffff"
+                font.pixelSize: text.length < 12 ? settings.fontL  : settings.fontMM
+                text: root.name
+            }
+            Text {
+                id: yearTextItem
+                width: parent.width
+                wrapMode: Text.WordWrap
+                color: "#ffffff"
+                font.pixelSize: settings.fontS
+                text: "<b>Published:</b> " + root.year
+            }
+            Text {
+                id: directorsTextItem
+                width: parent.width
+                wrapMode: Text.WordWrap
+                color: "#ffffff"
+                font.pixelSize: settings.fontS
+                text: "<b>Director:</b> " + root.director
+            }
+            Text {
+                id: castTextItem
+                width: parent.width
+                wrapMode: Text.WordWrap
+                color: "#ffffff"
+                font.pixelSize: settings.fontS
+                text: "<b>Cast:</b> " + root.cast
+            }
+        }
+
+        RatingsItem {
+            id: ratingsItem
+            x: 10
+            y: Math.max(topColumn.height, movieImageItem.height) + 40
+            rating: root.rating
+        }
+
+        Text {
+            id: descriptionTextItem
+            anchors.top: ratingsItem.bottom
+            anchors.topMargin: 16
+            width: parent.width - 32
+            anchors.horizontalCenter: parent.horizontalCenter
+            wrapMode: Text.WordWrap
+            color: "#ffffff"
+            font.pixelSize: settings.fontM
+            text: "<b>Description:</b> " + root.overview
+        }
+    }
+
+    Rectangle {
+        id: bottomSeparator
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: backgroundItem.bottom
+        anchors.bottomMargin: 80
+        width: backgroundItem.width - 16
+        height: 1
+        color: "#808080"
+    }
+
+    Button {
+        anchors.bottom: backgroundItem.bottom
+        anchors.bottomMargin: 8
+        anchors.left: backgroundItem.left
+        anchors.leftMargin: 32
+        text: "Back"
+        effectsOn: false
+        onClicked: {
+            root.hide();
+        }
+    }
+    Button {
+        anchors.bottom: backgroundItem.bottom
+        anchors.bottomMargin: 8
+        anchors.right: backgroundItem.right
+        anchors.rightMargin: 32
+        effectsOn: root.visible
+        text: "Order"
+        onClicked: {
+            console.debug("Order! TODO: implement");
+        }
+    }
+}
diff --git a/content/InfoView.qml b/content/InfoView.qml
new file mode 100644
index 0000000..d7327e4
--- /dev/null
+++ b/content/InfoView.qml
@@ -0,0 +1,263 @@
+import QtQuick 2.0
+
+Item {
+    id: root
+
+    property bool isShown: false
+
+    anchors.fill: parent
+
+    QtObject {
+        id: priv
+        property bool poleOut: false
+        // How curly the curtain is when opened
+        property int endCurly: 80
+        // 0 = pole in, 1 = pole out
+        property real polePosition: 0
+        property bool showingStarted: false
+    }
+
+    function show() {
+        priv.showingStarted = true;
+        isShown = true;
+        hideCurtainAnimation.stop();
+        hidePoleAnimation.stop();
+        if (priv.poleOut) {
+            showCurtainAnimation.restart();
+        } else {
+            showPoleAnimation.restart();
+        }
+    }
+    function hide() {
+        priv.showingStarted = false;
+        showCurtainAnimation.stop();
+        showPoleAnimation.stop();
+        if (priv.poleOut) {
+            hideCurtainAnimation.restart();
+        } else {
+            hidePoleAnimation.restart();
+        }
+    }
+
+    onIsShownChanged: {
+        if (root.isShown) {
+            mainView.scheduleUpdate();
+        }
+    }
+
+    Binding {
+        target: mainView
+        property: "blurAmount"
+        value: 40 * priv.polePosition
+        when: root.isShown
+    }
+
+    // Pole show/hide animations
+    SequentialAnimation {
+        id: showPoleAnimation
+        NumberAnimation { target: priv; property: "polePosition"; to: 1; duration: 600; easing.type: Easing.InOutQuad }
+        PropertyAction { target: priv; property: "poleOut"; value: true }
+        ScriptAction { script: showCurtainAnimation.restart(); }
+    }
+    SequentialAnimation {
+        id: hidePoleAnimation
+        PropertyAction { target: priv; property: "poleOut"; value: false }
+        NumberAnimation { target: priv; property: "polePosition"; to: 0; duration: 600; easing.type: Easing.InOutQuad }
+        PropertyAction { target: root; property: "isShown"; value: false }
+    }
+
+    // Curtain show/hide animations
+    SequentialAnimation {
+        id: showCurtainAnimation
+        NumberAnimation { target: curtainEffect; property: "rightHeight"; to: root.height-8; duration: 1200; easing.type: Easing.OutBack }
+    }
+    SequentialAnimation {
+        id: hideCurtainAnimation
+        NumberAnimation { target: curtainEffect; property: "rightHeight"; to: 0; duration: 600; easing.type: Easing.OutCirc }
+        ScriptAction { script: hidePoleAnimation.restart(); }
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        enabled: root.isShown
+        onClicked: {
+            root.hide();
+        }
+    }
+
+    BorderImage {
+        anchors.right: parent.right
+        anchors.top: parent.top
+        border.left: 22
+        border.right: 64
+        border.top: 0
+        border.bottom: 0
+        width: 86 + priv.polePosition * (viewItem.width-88)
+        z: 20
+        source: "images/info.png"
+        opacity: 0.5 + priv.polePosition
+        MouseArea {
+            anchors.fill: parent
+            anchors.margins: -20
+            onClicked: {
+                if (priv.showingStarted) {
+                    root.hide();
+                } else {
+                    root.show();
+                }
+            }
+        }
+    }
+
+    Item {
+        id: viewItem
+        anchors.right: parent.right
+        width: Math.min(620, parent.width)
+        height: parent.height + priv.endCurly - 16
+        y: 8
+        visible: isShown
+
+        Rectangle {
+            id: backgroundItem
+            anchors.fill: parent
+            anchors.margins: 16
+            anchors.topMargin: 8
+            gradient: Gradient {
+                GradientStop { position: 0.0; color: "#101010" }
+                GradientStop { position: 0.3; color: "#404040" }
+                GradientStop { position: 1.0; color: "#090909" }
+            }
+            border.color: "#808080"
+            border.width: 1
+            opacity: 0.8
+        }
+
+        Flickable {
+            id: flickableArea
+            anchors.fill: backgroundItem
+            contentHeight: infoTextColumn.height + 32
+            contentWidth: backgroundItem.width
+            flickableDirection: Flickable.VerticalFlick
+            clip: true
+
+            Column {
+                id: infoTextColumn
+                width: parent.width
+                spacing: 32
+
+                Text {
+                    id: textItem
+                    x: 32
+                    height: 60
+                    color: "#ffffff"
+                    font.pixelSize: settings.fontMM
+                    text: "<i>The Cinematic Experience</i>"
+                    verticalAlignment: Text.AlignBottom
+                }
+
+                InfoViewItem {
+                    text: "Welcome to <i>'Cinematic Experience'</i> demo. This application demonstrates the power of Qt5 and few of the new additions available in QtQuick 2.0. Below is a short summary of those new features which have been used in this demo application."
+                    image: "images/qt_logo2.png"
+                }
+                InfoViewItem {
+                    text: "<b>Rendering</b><br/>Qt5 has brand new rendering backend 'QML SceneGraph' which is optimized for hardware accelerated rendering. This allows to take full gains out of OpenGL powered GPUs on desktop and embedded devices. Not just performance, new Qt5 rendering backend also allows features which have not been possible earlier."
+                }
+                InfoViewItem {
+                    text: "<b>Particles</b><br/>Qt5 comes with a fresh particles plugin 'QtQuick.Particles 2.0' which is superior compared to Qt4 particles. In this demo application, twinkling stars, shooting star and fog/smoke have been implemented using this new particles engine. Superb."
+                    image: "images/sc2.png"
+                }
+                InfoViewItem {
+                    text: "<b>Sprites</b><br/>QtQuick 2.0 has built-in support for sprites using Sprite, SpriteSequence and AnimatedSprite elements. Sprites can also be used as a source for particles. In this demo application, shooting star is an AnimatedSprite with 16 frames."
+                    image: "images/sc5.png"
+                    switchedLayout: true
+                }
+                InfoViewItem {
+                    text: "<b>Animations</b><br/>QtQuick has always had a very strong animations support. Qt5 supports now also animations along a non-linear paths using PathAnimation and PathInterpolator QML elements. In this demo, shooting star position moves along PathAnimation using PathCurves."
+                    image: "images/sc1.png"
+                }
+                InfoViewItem {
+                    text: "<b>ShaderEffects</b><br/>Qt5 supports ShaderEffect and ShaderEffectSource QML elements which allow writing custom GLSL shader effects. This gives developers a lot of control to transform and enhance QML UIs by increasing dynamicity. In this demo, custom shader effect is used for lighting the movie delegates."
+                    image: "images/sc3.png"
+                    switchedLayout: true
+                }
+                InfoViewItem {
+                    text: "<b>Graphical Effects</b><br/>Qt5 comes with pre-defined set of effects such as drop-shadow, blur, glow, colorize etc. These are available in 'QtGraphicalEffects 1.0' plugin. In this demo, DropShadow is used to improve the appearance of movie title texts."
+                    image: "images/sc4.png"
+                }
+
+                Row {
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    height: 128
+                    spacing: 16
+                    Image {
+                        source: "images/qt_ambassador_logo.png"
+                        anchors.bottom: parent.bottom
+                    }
+                    Image {
+                        source: "images/cc-by_logo.png"
+                        anchors.bottom: parent.bottom
+                    }
+                    Image {
+                        source: "images/quit_logo.png"
+                        anchors.bottom: parent.bottom
+                    }
+                }
+                Text {
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    horizontalAlignment: Text.AlignHCenter
+                    color: "#909090"
+                    font.pixelSize: settings.fontXS
+                    text: "Copyright 2012 QUIt Coding. Reuse sources freely."
+                }
+            }
+        }
+
+        // Grip to close the view by flicking
+        Image {
+            id: gripImage
+            anchors.right: parent.right
+            anchors.rightMargin: 8
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 8
+            source: "images/grip.png"
+            opacity: 0.25
+            MouseArea {
+                property int pressedY: 0
+                anchors.right: parent.right
+                anchors.bottom: parent.bottom
+                anchors.bottomMargin: priv.endCurly - 16
+                anchors.margins: -16
+                width: 90
+                height: 80
+                onPressed: {
+                    showCurtainAnimation.stop();
+                    hideCurtainAnimation.stop();
+                    pressedY = mouseY
+                }
+                onPositionChanged: {
+                    curtainEffect.rightHeight = root.height - (pressedY - mouseY) - 8
+                }
+                onReleased: {
+                    if (mouseY < -root.height*0.2) {
+                        root.hide();
+                    } else {
+                        root.show();
+                    }
+                }
+            }
+        }
+    }
+
+    CurtainEffect {
+        id: curtainEffect
+        anchors.fill: viewItem
+        source: ShaderEffectSource { sourceItem: viewItem; hideSource: true }
+        rightHeight: 0
+        leftHeight: rightHeight
+        Behavior on leftHeight {
+            SpringAnimation { spring: .4; damping: .05; mass: .5 }
+        }
+        // Hide smoothly when curtain closes
+        opacity: 0.004 * rightHeight
+    }
+}
diff --git a/content/InfoViewItem.qml b/content/InfoViewItem.qml
new file mode 100644
index 0000000..f814c60
--- /dev/null
+++ b/content/InfoViewItem.qml
@@ -0,0 +1,28 @@
+import QtQuick 2.0
+
+Item {
+    id: root
+    property alias text: textItem.text
+    property alias image: imageItem.source
+    // Switch image & text positions
+    property bool switchedLayout: false
+
+    width: parent.width
+    height: Math.max(imageItem.height, textItem.paintedHeight)
+
+    Image {
+        id: imageItem
+        x: root.switchedLayout ? 16 : parent.width - width - 10
+        y: 8
+    }
+
+    Text {
+        id: textItem
+        width: parent.width - imageItem.width - 40
+        x: root.switchedLayout ? parent.width - width - 16 : 16
+        y: 8
+        color: "#ffffff"
+        font.pixelSize: settings.fontS
+        wrapMode: Text.WordWrap
+    }
+}
diff --git a/content/MainView.qml b/content/MainView.qml
new file mode 100644
index 0000000..be212d0
--- /dev/null
+++ b/content/MainView.qml
@@ -0,0 +1,259 @@
+import QtQuick 2.0
+import QtQuick.Particles 2.0
+import QtGraphicalEffects 1.0
+
+Item {
+    id: root
+
+    // Set this to blur the mainView when showing something on top of it
+    property real blurAmount: 0
+
+    // Updates the blur shader source, best called right before adding blurAmount
+    function scheduleUpdate() {
+        mainContentSource.scheduleUpdate();
+    }
+
+    anchors.fill: parent
+
+    // Update blur shader source when width/height changes
+    onHeightChanged: {
+        root.scheduleUpdate();
+    }
+    onWidthChanged: {
+        root.scheduleUpdate();
+    }
+
+    Item {
+        id: mainViewArea
+        anchors.fill: parent
+
+        Background {
+            id: background
+        }
+
+        ListView {
+            id: listView
+
+            property real globalLightPosX: lightImage.x / root.width
+            property real globalLightPosY: lightImage.y / root.height
+
+            // Normal-mapped cover shared among delegates
+            ShaderEffectSource {
+                id: coverNmapSource
+                sourceItem: Image { source: "images/cover_nmap.png" }
+                hideSource: true
+                visible: false
+            }
+
+            anchors.fill: parent
+            spacing: -60
+            model: moviesModel
+            delegate: DelegateItem {
+                name: model.name
+            }
+            highlightFollowsCurrentItem: true
+            highlightRangeMode: ListView.StrictlyEnforceRange
+            highlightMoveDuration: 400
+            preferredHighlightBegin: root.height * 0.5 - 140
+            preferredHighlightEnd: root.height * 0.5 - 140
+            cacheBuffer: 4000
+        }
+
+        Text {
+            id: headingText
+            anchors.top: parent.top
+            anchors.topMargin: 30
+            anchors.horizontalCenter: parent.horizontalCenter
+            horizontalAlignment: Text.AlignHCenter
+            width: 400
+            text: "My Movies\nTop 20"
+            style: Text.Outline
+            styleColor: "#b0a030"
+            color: "#d9cf9e"
+            font.pixelSize: settings.fontL
+            opacity: listView.atYBeginning
+            Behavior on opacity {
+                NumberAnimation { duration: 500; easing.type: Easing.InOutQuad }
+            }
+        }
+
+        Text {
+            id: titleText
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.verticalCenterOffset: -40
+            anchors.horizontalCenter: parent.horizontalCenter
+            width: 180 + parent.width * 0.25
+            wrapMode: Text.WordWrap
+            horizontalAlignment: Text.AlignHCenter
+            text: listView.currentIndex+1 + ". " + listView.currentItem.name
+            color: "#ffffff"
+            font.pixelSize: settings.fontL
+            // Note: DropShadow contains original source also so this can be hidden
+            visible: false
+            Behavior on text {
+                SequentialAnimation {
+                    ParallelAnimation {
+                        NumberAnimation { target: titleTextEffect; property: "opacity"; duration: 100; to: 0; easing.type: Easing.InOutQuad }
+                        NumberAnimation { target: titleTextEffect; property: "scale"; duration: 100; to: 0.6; easing.type: Easing.InOutQuad }
+                    }
+                    PropertyAction { target: titleText; property: "text" }
+                    ParallelAnimation {
+                        NumberAnimation { target: titleTextEffect; property: "opacity"; duration: 100; to: 1; easing.type: Easing.InOutQuad }
+                        NumberAnimation { target: titleTextEffect; property: "scale"; duration: 100; to: 1; easing.type: Easing.InOutQuad }
+                    }
+                }
+            }
+        }
+        // TODO: Check, does Dropshadow slowdown notably, does it render when text change animates?
+        DropShadow {
+            id: titleTextEffect
+            anchors.fill: titleText
+            horizontalOffset: 2
+            verticalOffset: 2
+            radius: 12.0
+            samples: 16
+            color: "#000000"
+            source: titleText
+        }
+
+        Image {
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 16
+            anchors.horizontalCenter: parent.horizontalCenter
+            source: "images/qt_logo.png"
+            opacity: listView.atYEnd
+            Behavior on opacity {
+                NumberAnimation { duration: 500; easing.type: Easing.InOutQuad }
+            }
+        }
+
+        // Shooting star + animation + particles
+        AnimatedSprite {
+            id: lightImage
+            width: 64
+            height: 64
+            frameWidth: 64
+            frameHeight: 64
+            frameCount: 16
+            frameRate: 15
+            source: "images/planet_sprite.png"
+            interpolate: true
+            loops: Animation.Infinite
+            visible: settings.showLighting || settings.showShootingStarParticles
+            running: !detailsView.isShown && !infoView.isShown && (settings.showLighting || settings.showShootingStarParticles)
+        }
+
+        PathAnimation {
+            target: lightImage
+            duration: 5000
+            orientation: PathAnimation.RightFirst
+            anchorPoint: Qt.point(lightImage.width/2, lightImage.height/2)
+            running: true
+            paused: detailsView.isShown || infoView.isShown || (!settings.showLighting && !settings.showShootingStarParticles)
+            loops: Animation.Infinite
+            path: Path {
+                id: lightAnimPath
+                startX: root.width*0.4; startY: root.height*0.3
+                PathCurve { x: root.width*0.8; y: root.height*0.2 }
+                PathCurve { x: root.width*0.8; y: root.height*0.7 }
+                PathCurve { x: root.width*0.1; y: root.height*0.6 }
+                PathCurve { x: root.width*0.4; y: root.height*0.3 }
+            }
+        }
+
+        ParticleSystem {
+            anchors.fill: parent
+            paused: detailsView.isShown || infoView.isShown
+
+            // Shooting star particles
+            ImageParticle {
+                source: "images/particle.png"
+                color: "#ffefaf"
+                colorVariation: settings.showColors ? 1.0 : 0.1
+                alpha: 0
+            }
+            Emitter {
+                id: shootingStarEmitter
+                emitRate: settings.showShootingStarParticles ? 100 : 0
+                lifeSpan: 2000
+                x: lightImage.x + lightImage.width/2
+                y: lightImage.y + lightImage.height/2
+                velocity: PointDirection {xVariation: 8; yVariation: 8;}
+                acceleration: PointDirection {xVariation: 12; yVariation: 12;}
+                size: 16
+                sizeVariation: 8
+            }
+            Emitter {
+                id: shootingStarBurst
+                emitRate: 0
+                lifeSpan: 2000
+                x: lightImage.x + lightImage.width/2
+                y: lightImage.y + lightImage.height/2
+                velocity: PointDirection {xVariation: 60; yVariation: 60;}
+                acceleration: PointDirection {xVariation: 40; yVariation: 40;}
+                size: 24
+                sizeVariation: 16
+            }
+
+            // Dust/Smoke particles
+            ImageParticle {
+                groups: ["smoke"]
+                source: "images/smoke.png"
+                color: "#ffffff"
+                alpha: 0.9
+                opacity: 0.5
+                colorVariation: settings.showColors ? 0.5 : 0.0
+                rotationVariation: 180
+            }
+            Emitter {
+                y: root.height * 0.8
+                anchors.horizontalCenter: parent.horizontalCenter
+                width: 200 + parent.width * 0.3
+                height: root.height * 0.3
+                emitRate: settings.showFogParticles ? 20 : 0
+                lifeSpan: 3000
+                lifeSpanVariation: 1000
+                group: "smoke"
+                size: 256
+                sizeVariation: 128
+                acceleration: PointDirection { y: -80; xVariation: 20 }
+            }
+            Emitter {
+                y: root.height * 0.9
+                anchors.horizontalCenter: parent.horizontalCenter
+                width: 200 + parent.width * 0.2
+                height: root.height * 0.2
+                emitRate: settings.showFogParticles ? 30 : 0
+                lifeSpan: 2000
+                group: "smoke"
+                size: 256
+                sizeVariation: 128
+                acceleration: PointDirection { y: -20; xVariation: 40 }
+            }
+            Turbulence {
+                groups: ["smoke"]
+                width: parent.width
+                height: parent.height * 0.8
+                strength: 60
+            }
+        }
+
+        SettingsView {
+            id: settingsView
+        }
+    }
+
+    FastBlur {
+        anchors.fill: mainViewArea
+        radius: root.blurAmount
+        visible: root.blurAmount
+        source: ShaderEffectSource {
+            id: mainContentSource
+            anchors.fill: parent
+            sourceItem: mainViewArea
+            hideSource: false
+            live: false
+            visible: root.blurAmount
+        }
+    }
+}
diff --git a/content/MoviesModel.qml b/content/MoviesModel.qml
new file mode 100644
index 0000000..c2ee561
--- /dev/null
+++ b/content/MoviesModel.qml
@@ -0,0 +1,187 @@
+import QtQuick 2.0
+
+// Dummy model for movies
+ListModel {
+    id: movieModel
+
+    ListElement {
+        name: "Lord of the Rings: The Return of the King"
+        image: "15.png"
+        year: "2003"
+        rating: 8.9
+        director: "Peter Jackson"
+        cast: "Elijah Wood, Viggo Mortensen, Ian McKellen"
+        overview: "While Frodo &amp; Sam continue to approach Mount Doom to destroy the One Ring, unaware of the path Gollum is leading them, the former Fellowship aid Rohan &amp; Gondor in a great battle in the Pelennor Fields, Minas Tirith and the Black Gates as Sauron wages his last war against Middle-Earth."
+    }
+    ListElement {
+        name: "Fight Club"
+        image: "9.png"
+        year: "1999"
+        rating: 8.9
+        director: "David Fincher"
+        cast: "Brad Pitt, Edward Norton, Helena Bonham Carter"
+        overview: "A ticking-time-bomb insomniac and a slippery soap salesman channel primal male aggression into a shocking new form of therapy. Their concept catches on, with underground \"fight clubs\" forming in every town, until an eccentric gets in the way and ignites an out-of-control spiral toward oblivion."
+    }
+    ListElement {
+        name: "Lord of the Rings: The Fellowship of the Ring"
+        image: "13.png"
+        year: "2001"
+        rating: 8.8
+        director: "Peter Jackson"
+        cast: "Elijah Wood, Ian McKellen, Orlando Bloom"
+        overview: "An ancient Ring thought lost for centuries has been found, and through a strange twist in fate has been given to a small Hobbit named Frodo. When Gandalf discovers the Ring is in fact the One Ring of the Dark Lord Sauron, Frodo must make an epic quest to the Cracks of Doom in order to destroy it! However he does not go alone. He is joined by Gandalf, Legolas the elf, Gimli the Dwarf, Aragorn, Boromir and his three Hobbit friends Merry, Pippin and Samwise. Through mountains, snow, darkness, forests, rivers and plains, facing evil and danger at every corner the Fellowship of the Ring must go. Their quest to destroy the One Ring is the only hope for the end of the Dark Lords reign!"
+    }
+    ListElement {
+        name: "Lord of the Rings: The Two Towers"
+        image: "14.png"
+        year: "2002"
+        rating: 8.7
+        director: "Peter Jackson"
+        cast: "Elijah Wood, Ian McKellen, Viggo Mortensen"
+        overview: "Sauron's forces increase. His allies grow. The Ringwraiths return in an even more frightening form. Saruman's army of Uruk Hai is ready to launch an assault against Aragorn and the people of Rohan. Yet, the Fellowship is broken and Boromir is dead. For the little hope that is left, Frodo and Sam march on into Mordor, unprotected. A number of new allies join with Aragorn, Gimli, Legolas, Pippin and Merry. And they must defend Rohan and attack Isengard. Yet, while all this is going on, Sauron's troops mass toward the City of Gondor, for the War of the Ring is about to begin."
+    }
+    ListElement {
+        name: "Gladiator"
+        image: "10.png"
+        year: "2000"
+        rating: 8.5
+        director: "Ridley Scott"
+        cast: "Russell Crowe, Joaquin Phoenix, Connie Nielsen"
+        overview: "Maximus is a powerful Roman general, loved by the people and the aging Emperor, Marcus Aurelius. Before his death, the Emperor chooses Maximus to be his heir over his own son, Commodus, and a power struggle leaves Maximus and his family condemned to death. The powerful general is unable to save his family, and his loss of will allows him to get captured and put into the Gladiator games until he dies. The only desire that fuels him now is the chance to rise to the top so that he will be able to look into the eyes of the man who will feel his revenge."
+    }
+    ListElement {
+        name: "Big Fish"
+        image: "7.png"
+        year: "2003"
+        rating: 8.0
+        director: "Tim Burton"
+        cast: "Ewan McGregor, Albert Finney, Billy Crudup"
+        overview: "The story revolves around a dying father and his son, who is trying to learn more about his dad by piecing together the stories he has gathered over the years. The son winds up re-creating his father's elusive life in a series of legends and myths inspired by the few facts he knows. Through these tales, the son begins to understand his father's great feats and his great failings."
+    }
+    ListElement {
+        name: "Avatar"
+        image: "12.png"
+        year: "2009"
+        rating: 8.0
+        director: "James Cameron"
+        cast: "Sam Worthington, Zoe Saldana, Sigourney Weaver"
+        overview: "When his brother is killed in a robbery, paraplegic Marine Jake Sully decides to take his place in a mission on the distant world of Pandora. There he learns of greedy corporate figurehead Parker Selfridge's intentions of driving off the native humanoid \"Na\'vi\" in order to mine for the precious material scattered throughout their rich woodland. In exchange for the spinal surgery that will fix his legs, Jake gathers intel for the cooperating military unit spearheaded by gung-ho Colonel Quaritch, while simultaneously attempting to infiltrate the Na\'vi people with the use of an \"avatar\" identity. While Jake begins to bond with the native tribe and quickly falls in love with the beautiful alien Neytiri, the restless Colonel moves forward with his ruthless extermination tactics, forcing the soldier to take a stand - and fight back in an epic battle for the fate of Pandora."
+    }
+    ListElement {
+        name: "The Social Network"
+        image: "18.png"
+        year: "2010"
+        rating: 7.9
+        director: "David Fincher"
+        cast: "Jesse Eisenberg, Andrew Garfield, Justin Timberlake"
+        overview: "On a fall night in 2003, Harvard undergrad and computer programming genius Mark Zuckerberg sits down at his computer and heatedly begins working on a new idea. In a fury of blogging and programming, what begins in his dorm room soon becomes a global social network and a revolution in communication. A mere six years and 500 million friends later, Mark Zuckerberg is the youngest billionaire in history... but for this entrepreneur, success leads to both personal and legal complications."
+    }
+    ListElement {
+        name: "300"
+        image: "5.png"
+        year: "2006"
+        rating: 7.8
+        director: "Zack Snyder"
+        cast: "Gerard Butler, Lena Headey, David Wenham"
+        overview: "In the Battle of Thermopylae of 480 BC an alliance of Greek city-states fought the invading Persian army in the mountain pass of Thermopylae. Vastly outnumbered, the Greeks held back the enemy in one of the most famous last stands of history. Persian King Xerxes lead a Army of well over 100,000 (Persian king Xerxes before war has about 170,000 army) men to Greece and was confronted by 300 Spartans, 700 Thespians and other Slave soldiers. Xerxes waited for 10 days for King Leonidas to surrender or withdraw left with no options he moved. The battle lasted for about 3 days and after which all 300 Spartans were killed. The Spartan defeat was not the one expected, as a local shepherd, named Ephialtes, defected to the Persians and informed Xerxes of a separate path through Thermopylae, which the Persians could use to outflank the Greeks."
+    }
+    ListElement {
+        name: "The Last Samurai"
+        image: "2.png"
+        year: "2003"
+        rating: 7.7
+        director: "Edward Zwick"
+        cast: "Tom Cruise, Ken Watanabe, Billy Connolly"
+        overview: "In the 1870s, Captain Nathan Algren, a cynical veteran of the American Civil war who will work for anyone, is hired by Americans who want lucrative contracts with the Emperor of Japan to train the peasant conscripts for the first standing imperial army in modern warfare using firearms. The imperial Omura cabinet's first priority is to repress a rebellion of traditionalist Samurai -hereditary warriors- who remain devoted to the sacred dynasty but reject the Westernizing policy and even refuse firearms. Yet when his ill-prepared superior force sets out too soon, their panic allows the sword-wielding samurai to crush them. Badly wounded Algren's courageous stand makes the samurai leader Katsumoto spare his life; once nursed to health he learns to know and respect the old Japanese way, and participates as advisor in Katsumoto's failed attempt to save the Bushido tradition, but..."
+    }
+    ListElement {
+        name: "The Bolt"
+        image: "1.png"
+        year: "2008"
+        rating: 7.1
+        director: "Byron Howard, Chris Williams"
+        cast: "John Travolta, Miley Cyrus, Susie Essman"
+        overview: "Bolt, an American White Shepherd, has lived his whole life on the set of his action TV show, where he believes he has superpowers. When separated from the studio by accident, he meets a female alley cat named Mittens and a hamster named Rhino. He's trying to find the way home, to the studio. Along the way, he learns that he doesn't have superpowers and that the show is not real."
+    }
+    ListElement {
+        name: "The School of Rock"
+        image: "3.png"
+        year: "2003"
+        rating: 7.1
+        director: "Richard Linklater"
+        cast: "Jack Black, Mike White, Joan Cusack"
+        overview: "Down and out rock star Dewey Finn gets fired from his band, and he faces a mountain of debts and depression. He takes a job as a 4th grade substitute teacher at an uptight private school where his attitude and hijinx have a powerful effect on his students. He also meets Zack, a 10-year-old guitar prodigy, who could help Dewey win a \"battle of the bands\" competition, which would solve his financial problems and put him back in the spotlight."
+    }
+    ListElement {
+        name: "Thor"
+        image: "19.png"
+        year: "2011"
+        rating: 7.0
+        director: "Kenneth Branagh"
+        cast: "Chris Hemsworth, Anthony Hopkins, Natalie Portman"
+        overview: "The warrior Thor (Hemsworth) is cast out of the fantastic realm of Asgard by his father Odin (Hopkins) for his arrogance and sent to Earth to live among humans. Falling in love with scientist Jane Foster (Portman) teaches Thor much-needed lessons, and his new-found strength comes into play as a villain from his homeland sends dark forces toward Earth."
+    }
+    ListElement {
+        name: "Charlie and the Chocolate Factory"
+        image: "16.png"
+        year: "2005"
+        rating: 6.9
+        director: "Tim Burton"
+        cast: "Johnny Depp, Freddie Highmore, David Kelly"
+        overview: "When Willy Wonka decides to let five children into his chocolate factory, he decides to release five golden tickets in five separate chocolate bars, causing complete mayhem. The tickets start to be found, with the fifth going to a very special boy, called Charlie Bucket. With his Grandpa, Charlie joins the rest of the children to experience the most amazing factory ever. But not everything goes to plan within the factory."
+    }
+    ListElement {
+        name: "Quantum of Solace"
+        image: "4.png"
+        year: "2008"
+        rating: 6.8
+        director: "Marc Forster"
+        cast: "Daniel Craig, Olga Kurylenko, Mathieu Amalric"
+        overview: "Is there solace in revenge? Bond and \"M\" sniff a shadowy international network of power and corruption reaping billions. As Bond pursues the agents of an assassination attempt on \"M,\" all roads lead to Dominic Greene, a world-renowned developer of green technology. Greene, a nasty piece of work, is intent on securing a barren area of Bolivia in exchange for assisting a strongman stage a coup there. The CIA looks the other way, and only Bond, with help from a retired spy and from a mysterious beauty, stands in Greene's way. \"M\" wonders if she can trust Bond, or if vengeance possesses him. Beyond that, can anyone drawn to Bond live to tell the tale?"
+    }
+    ListElement {
+        name: "Dinosaur"
+        image: "8.png"
+        year: "2000"
+        rating: 6.3
+        director: "Eric Leighton, Ralph Zondag"
+        cast: "D.B. Sweeney, Julianna Margulies, Samuel E. Wright"
+        overview: "During an attack on a pack of Iguanodon, an egg is separated and ends up with the possession of a group of lemurs. The lemurs care for this egg and the young creature born from it, which they call Aladar. When a meteor shower hits earth, Aladar and his family must leave their homeland. Away from home and as close to danger as they have ever been, they meet up with a huge group of dinosaurs, led by Kron and Bruton. All together they are trying to reach the nesting grounds, but it's not going to be easy."
+    }
+    ListElement {
+        name: "Bee Movie"
+        image: "6.png"
+        year: "2007"
+        rating: 6.2
+        director: "Steve Hickner, Simon J. Smith"
+        cast: "Jerry Seinfeld, Renée Zellweger, Matthew Broderick"
+        overview: "When the bee Barry B. Benson graduates from college, he finds that he will have only one job for his entire life, and absolutely disappointed, he joins the team responsible for bringing the honey and pollination of the flowers to visit the world outside the hive. Once in Manhattan, he is saved by the florist Vanessa and he breaks the bee law to thank Vanessa. They become friends and Barry discovers that humans exploit bees to sell the honey they produce. Barry decides to sue the human race, with destructive consequences to nature."
+    }
+    ListElement {
+        name: "Jumper"
+        image: "11.png"
+        year: "2008"
+        rating: 5.9
+        director: "Doug Liman"
+        cast: "Hayden Christensen, Samuel L. Jackson, Jamie Bell"
+        overview: "David Rice is a high school student in Ann Arbor, abandoned by his mother at five, enamored with Millie, a fellow student, and picked on by at least one classmate. On a winter's day, while about to drown, he discovers he can transport himself instantaneously to anyplace on earth. He leaves town, goes to New York City, robs a bank vault, and comes to the attention of a shadowy group of government hunters. Eight years later, the hunters, led by the murderous Roland, get a fix on David. He heads home, searches out Millie, invites her to travel with him, and only later realizes that Roland and his crew are seriously deadly. Is everyone close to David in danger?"
+    }
+    ListElement {
+        name: "The Haunting"
+        image: "17.png"
+        year: "1999"
+        rating: 4.7
+        director: "Jan de Bont"
+        cast: "Liam Neeson, Catherine Zeta-Jones, Owen Wilson"
+        overview: "A remake of the classic 1963 movie \"The Haunting\" about a team of paranormal experts who look into strange occurrences in an ill-fated house. Through the course of the night some will unravel, some will question, and all will fight for their lives as the house fights back."
+    }
+    ListElement {
+        name: "Wild Wild West"
+        image: "20.png"
+        year: "1999"
+        rating: 4.5
+        director: "Barry Sonnenfeld"
+        cast: "Will Smith, Kevin Kline, Kenneth Branagh"
+        overview: "Jim West is a guns-a-blazing former Civil War hero. Artemus Gordon is an inventive U.S. Marshal who excels in disguise. When the United States is threatened by psychotic Confederate Arliss Loveless, President Ulysses Grant teams the duo up to bring him to justice. On a hazard-packed train journey from Washington D.C. to Utah, West and Gordon must combine their skills to best Loveless and his diabolical machines."
+    }
+}
diff --git a/content/RatingsItem.qml b/content/RatingsItem.qml
new file mode 100644
index 0000000..6d22489
--- /dev/null
+++ b/content/RatingsItem.qml
@@ -0,0 +1,32 @@
+import QtQuick 2.0
+
+Item {
+    property real rating: 5.0
+
+    width: emptyRatingStarsImage.width + ratingTextItem.paintedWidth + 4
+    height: 32
+
+    // TODO: Implement ratings in shader + animations, instead of clipping trick
+    Image {
+        id: emptyRatingStarsImage
+        source: "images/stars2.png"
+    }
+    Item {
+        id: ratingImageItem
+        height: 32
+        width: (36 * rating) - 2
+        clip: true
+        Image {
+            source: "images/stars.png"
+        }
+    }
+    Text {
+        id: ratingTextItem
+        anchors.left: emptyRatingStarsImage.right
+        anchors.leftMargin: 4
+        anchors.verticalCenter: ratingImageItem.verticalCenter
+        color: "#ffffff"
+        font.pixelSize: settings.fontM
+        text: "(" + rating.toFixed(1) + ")"
+    }
+}
diff --git a/content/SettingsView.qml b/content/SettingsView.qml
new file mode 100644
index 0000000..7944803
--- /dev/null
+++ b/content/SettingsView.qml
@@ -0,0 +1,138 @@
+import QtQuick 2.0
+
+Item {
+    id: root
+
+    property bool isShown: false
+
+    anchors.fill: parent
+
+    function show() {
+        isShown = true;
+        hideAnimation.stop();
+        showAnimation.restart();
+    }
+    function hide() {
+        isShown = false;
+        showAnimation.stop();
+        hideAnimation.restart();
+    }
+
+    SequentialAnimation {
+        id: showAnimation
+        PropertyAction { target: backgroundItem; property: "visible"; value: true }
+        ParallelAnimation {
+            NumberAnimation { target: backgroundItem; property: "opacity"; to: 1; duration: 250; easing.type: Easing.InOutQuad }
+            NumberAnimation { target: backgroundItem; property: "scale"; to: 1; duration: 500; easing.type: Easing.OutBack }
+        }
+    }
+    SequentialAnimation {
+        id: hideAnimation
+        ParallelAnimation {
+            NumberAnimation { target: backgroundItem; property: "opacity"; to: 0; duration: 500; easing.type: Easing.InOutQuad }
+            NumberAnimation { target: backgroundItem; property: "scale"; to: 0.6; duration: 500; easing.type: Easing.InOutQuad }
+        }
+        PropertyAction { target: backgroundItem; property: "visible"; value: false }
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        enabled: root.isShown
+        onClicked: {
+            root.hide();
+        }
+    }
+
+    Image {
+        id: settingsIcon
+        anchors.left: parent.left
+        anchors.leftMargin: 4
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 4
+        source: "images/settings.png"
+        opacity: backgroundItem.opacity + 0.4
+        MouseArea {
+            anchors.fill: parent
+            anchors.margins: -20
+            onClicked: {
+                if (root.isShown) {
+                    root.hide();
+                } else {
+                    root.show();
+                }
+            }
+        }
+    }
+
+    BorderImage {
+        id: backgroundItem
+        anchors.left: settingsIcon.horizontalCenter
+        anchors.bottom: settingsIcon.verticalCenter
+        width: Math.min(480, parent.width - 60)
+        height: settingsContentColumn.height + 36
+        source: "images/panel_bg.png"
+        border.left : 22
+        border.right : 10
+        border.top : 5
+        border.bottom : 26
+
+        transformOrigin: Item.BottomLeft
+        visible: false
+        opacity: 0
+        scale: 0.6
+
+        Column {
+            id: settingsContentColumn
+            width: parent.width
+            y: 8
+            Switch {
+                text: "Show movies cover lighting?"
+                checked: settings.showLighting
+                onCheckedChanged: {
+                    settings.showLighting = checked;
+                }
+            }
+            Rectangle {
+                anchors.horizontalCenter: parent.horizontalCenter
+                width: parent.width - 32
+                height: 1
+                color: "#404040"
+            }
+            Switch {
+                text: "Show shooting star particles?"
+                checked: settings.showShootingStarParticles
+                onCheckedChanged: {
+                    settings.showShootingStarParticles = checked;
+                }
+            }
+            Rectangle {
+                anchors.horizontalCenter: parent.horizontalCenter
+                width: parent.width - 32
+                height: 1
+                color: "#404040"
+            }
+            Switch {
+                text: "Show fog particles?"
+                checked: settings.showFogParticles
+                onCheckedChanged: {
+                    settings.showFogParticles = checked;
+                }
+            }
+            Rectangle {
+                anchors.horizontalCenter: parent.horizontalCenter
+                width: parent.width - 32
+                height: 1
+                color: "#404040"
+            }
+            Switch {
+                text: "Do you l-o-v-e colors?"
+                checked: settings.showColors
+                onText: "Yes"
+                offText: "No!"
+                onCheckedChanged: {
+                    settings.showColors = checked;
+                }
+            }
+        }
+    }
+}
diff --git a/content/Switch.qml b/content/Switch.qml
new file mode 100644
index 0000000..967c03f
--- /dev/null
+++ b/content/Switch.qml
@@ -0,0 +1,170 @@
+import QtQuick 2.0
+import QtQuick.Particles 2.0
+
+Item {
+    id: root
+
+    property alias text: textItem.text
+    property bool checked: false
+    property string onText: "On"
+    property string offText: "Off"
+
+    QtObject {
+        id: priv
+        property alias checkedPriv: root.checked
+        onCheckedPrivChanged: {
+            if (checkedPriv) switchEffectAnimation.restart();
+        }
+
+        function releaseSwitch() {
+            if (knob.x == 48) switchEffectAnimation.restart();
+            // Don't switch if we are in correct side
+            if ((knob.x == -2 && !checked) || (knob.x == 48 && checked)) {
+                return;
+            }
+            checked = !checked;
+        }
+    }
+
+    width: parent ? parent.width : 200
+    height: 80
+
+    MouseArea {
+        width: parent.width
+        height: parent.height
+        onClicked: {
+            root.checked = !root.checked
+        }
+    }
+
+    Text {
+        id: textItem
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.leftMargin: 22
+        anchors.right: switchBackgroundImage.left
+        elide: Text.ElideRight
+        font.pixelSize: 20
+        color: "#ffffff"
+    }
+
+    Image {
+        id: switchBackgroundImage
+        source: "images/switch_background.png"
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.right: parent.right
+        anchors.rightMargin: 22
+    }
+    Image {
+        id: switchFrameImage
+        source: "images/switch_frame.png"
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.right: parent.right
+        anchors.rightMargin: 21
+        z: 10
+    }
+
+    Item {
+        id: switchItem
+        anchors.fill: switchBackgroundImage
+
+        SequentialAnimation {
+            id: switchEffectAnimation
+            PropertyAction { target: particleSystem; property: "paused"; value: "false" }
+            ScriptAction { script: particleEmitter.pulse(3000) }
+        }
+
+        Image {
+            id: switchOnImage
+            anchors.right: knob.right
+            anchors.rightMargin: 2
+            source: "images/switch_on.png"
+            opacity: knob.x / 48
+
+            // Stars effect
+            ParticleSystem {
+                id: particleSystem
+                anchors.fill: parent
+                paused: true
+                onEmptyChanged: if (empty) particleSystem.pause();
+                ImageParticle {
+                    source: "images/star.png"
+                    rotationVariation: 180
+                    color:"#ffffff"
+                }
+                Emitter {
+                    id: particleEmitter
+                    width: parent.width
+                    height: 8
+                    emitRate: 16
+                    lifeSpan: 2000
+                    size: 32
+                    sizeVariation: 16
+                    endSize: 8
+                    velocity: PointDirection{ y: 20; x:-2; xVariation: 5; yVariation: 10 }
+                    enabled: false
+
+                }
+                Turbulence {
+                    width: parent.width
+                    height: (parent.height / 2)
+                    strength: 8
+                }
+            }
+        }
+
+        Text {
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.right: knob.left
+            anchors.rightMargin: 6
+            color: "#000000"
+            font.pixelSize: 18
+            font.bold: true
+            text: onText
+        }
+        Text {
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: knob.right
+            anchors.leftMargin: 4
+            color: "#ffffff"
+            font.pixelSize: 18
+            font.bold: true
+            text: offText
+        }
+
+        Image {
+            id: knob
+            source: "images/switch_thumb.png"
+            x: checked ? 48 : -2
+            opacity: 0.4
+            MouseArea {
+                anchors.fill: parent
+                drag.target: knob; drag.axis: Drag.XAxis; drag.minimumX: -2; drag.maximumX: 48
+                onClicked: checked = !checked
+                onReleased: priv.releaseSwitch();
+            }
+            Behavior on x {
+                NumberAnimation { duration: 250; easing.type: Easing.InOutQuad }
+            }
+        }
+    }
+
+    // Mask out switch parts which should be hidden
+    ShaderEffect {
+        id: shaderItem
+        property variant source: ShaderEffectSource { sourceItem: switchItem; hideSource: true }
+        property variant maskSource: ShaderEffectSource { sourceItem: switchBackgroundImage; hideSource: true }
+
+        anchors.fill: switchBackgroundImage
+
+        fragmentShader: "
+            varying highp vec2 qt_TexCoord0;
+            uniform highp float qt_Opacity;
+            uniform sampler2D source;
+            uniform sampler2D maskSource;
+            void main(void) {
+                gl_FragColor = texture2D(source, qt_TexCoord0.st) * (texture2D(maskSource, qt_TexCoord0.st).a) * qt_Opacity;
+            }
+        "
+    }
+}
diff --git a/content/images/1.png b/content/images/1.png
new file mode 100644
index 0000000..15c16d0
--- /dev/null
+++ b/content/images/1.png
diff --git a/content/images/10.png b/content/images/10.png
new file mode 100644
index 0000000..d1bbf39
--- /dev/null
+++ b/content/images/10.png
diff --git a/content/images/11.png b/content/images/11.png
new file mode 100644
index 0000000..d2bf2f4
--- /dev/null
+++ b/content/images/11.png
diff --git a/content/images/12.png b/content/images/12.png
new file mode 100644
index 0000000..92031de
--- /dev/null
+++ b/content/images/12.png
diff --git a/content/images/13.png b/content/images/13.png
new file mode 100644
index 0000000..d28b3ea
--- /dev/null
+++ b/content/images/13.png
diff --git a/content/images/14.png b/content/images/14.png
new file mode 100644
index 0000000..9755a27
--- /dev/null
+++ b/content/images/14.png
diff --git a/content/images/15.png b/content/images/15.png
new file mode 100644
index 0000000..a1b6efb
--- /dev/null
+++ b/content/images/15.png
diff --git a/content/images/16.png b/content/images/16.png
new file mode 100644
index 0000000..7a4a520
--- /dev/null
+++ b/content/images/16.png
diff --git a/content/images/17.png b/content/images/17.png
new file mode 100644
index 0000000..33853b1
--- /dev/null
+++ b/content/images/17.png
diff --git a/content/images/18.png b/content/images/18.png
new file mode 100644
index 0000000..a04e29e
--- /dev/null
+++ b/content/images/18.png
diff --git a/content/images/19.png b/content/images/19.png
new file mode 100644
index 0000000..8af7536
--- /dev/null
+++ b/content/images/19.png
diff --git a/content/images/2.png b/content/images/2.png
new file mode 100644
index 0000000..30deff4
--- /dev/null
+++ b/content/images/2.png
diff --git a/content/images/20.png b/content/images/20.png
new file mode 100644
index 0000000..78b8acb
--- /dev/null
+++ b/content/images/20.png
diff --git a/content/images/3.png b/content/images/3.png
new file mode 100644
index 0000000..0a2675e
--- /dev/null
+++ b/content/images/3.png
diff --git a/content/images/4.png b/content/images/4.png
new file mode 100644
index 0000000..7d4620b
--- /dev/null
+++ b/content/images/4.png
diff --git a/content/images/5.png b/content/images/5.png
new file mode 100644
index 0000000..bfd1d61
--- /dev/null
+++ b/content/images/5.png
diff --git a/content/images/6.png b/content/images/6.png
new file mode 100644
index 0000000..7ae2086
--- /dev/null
+++ b/content/images/6.png
diff --git a/content/images/7.png b/content/images/7.png
new file mode 100644
index 0000000..a1b1925
--- /dev/null
+++ b/content/images/7.png
diff --git a/content/images/8.png b/content/images/8.png
new file mode 100644
index 0000000..fcfa8d4
--- /dev/null
+++ b/content/images/8.png
diff --git a/content/images/9.png b/content/images/9.png
new file mode 100644
index 0000000..c066c29
--- /dev/null
+++ b/content/images/9.png
diff --git a/content/images/background.png b/content/images/background.png
new file mode 100644
index 0000000..f88c905
--- /dev/null
+++ b/content/images/background.png
diff --git a/content/images/background3.png b/content/images/background3.png
new file mode 100644
index 0000000..b3c15c9
--- /dev/null
+++ b/content/images/background3.png
diff --git a/content/images/button.png b/content/images/button.png
new file mode 100644
index 0000000..1f1c375
--- /dev/null
+++ b/content/images/button.png
diff --git a/content/images/cc-by_logo.png b/content/images/cc-by_logo.png
new file mode 100644
index 0000000..d264c4e
--- /dev/null
+++ b/content/images/cc-by_logo.png
diff --git a/content/images/cover_nmap.png b/content/images/cover_nmap.png
new file mode 100644
index 0000000..e613d9b
--- /dev/null
+++ b/content/images/cover_nmap.png
diff --git a/content/images/grip.png b/content/images/grip.png
new file mode 100644
index 0000000..66118f9
--- /dev/null
+++ b/content/images/grip.png
diff --git a/content/images/info.png b/content/images/info.png
new file mode 100644
index 0000000..0f9d3c3
--- /dev/null
+++ b/content/images/info.png
diff --git a/content/images/panel_bg.png b/content/images/panel_bg.png
new file mode 100644
index 0000000..fd25e7e
--- /dev/null
+++ b/content/images/panel_bg.png
diff --git a/content/images/particle.png b/content/images/particle.png
new file mode 100644
index 0000000..5c83896
--- /dev/null
+++ b/content/images/particle.png
diff --git a/content/images/planet_sprite.png b/content/images/planet_sprite.png
new file mode 100644
index 0000000..c97a69c
--- /dev/null
+++ b/content/images/planet_sprite.png
diff --git a/content/images/qt_ambassador_logo.png b/content/images/qt_ambassador_logo.png
new file mode 100644
index 0000000..dec13bb
--- /dev/null
+++ b/content/images/qt_ambassador_logo.png
diff --git a/content/images/qt_logo.png b/content/images/qt_logo.png
new file mode 100644
index 0000000..53e4806
--- /dev/null
+++ b/content/images/qt_logo.png
diff --git a/content/images/qt_logo2.png b/content/images/qt_logo2.png
new file mode 100644
index 0000000..748392d
--- /dev/null
+++ b/content/images/qt_logo2.png
diff --git a/content/images/quit_logo.png b/content/images/quit_logo.png
new file mode 100644
index 0000000..f1ad50e
--- /dev/null
+++ b/content/images/quit_logo.png
diff --git a/content/images/sc1.png b/content/images/sc1.png
new file mode 100644
index 0000000..3e21076
--- /dev/null
+++ b/content/images/sc1.png
diff --git a/content/images/sc2.png b/content/images/sc2.png
new file mode 100644
index 0000000..54befbd
--- /dev/null
+++ b/content/images/sc2.png
diff --git a/content/images/sc3.png b/content/images/sc3.png
new file mode 100644
index 0000000..f71cec8
--- /dev/null
+++ b/content/images/sc3.png
diff --git a/content/images/sc4.png b/content/images/sc4.png
new file mode 100644
index 0000000..d0797a1
--- /dev/null
+++ b/content/images/sc4.png
diff --git a/content/images/sc5.png b/content/images/sc5.png
new file mode 100644
index 0000000..d9461c4
--- /dev/null
+++ b/content/images/sc5.png
diff --git a/content/images/settings.png b/content/images/settings.png
new file mode 100644
index 0000000..4215bee
--- /dev/null
+++ b/content/images/settings.png
diff --git a/content/images/smoke.png b/content/images/smoke.png
new file mode 100644
index 0000000..be0cedf
--- /dev/null
+++ b/content/images/smoke.png
diff --git a/content/images/star.png b/content/images/star.png
new file mode 100644
index 0000000..0d592cf
--- /dev/null
+++ b/content/images/star.png
diff --git a/content/images/stars.png b/content/images/stars.png
new file mode 100644
index 0000000..a997e1b
--- /dev/null
+++ b/content/images/stars.png
diff --git a/content/images/stars2.png b/content/images/stars2.png
new file mode 100644
index 0000000..50e3200
--- /dev/null
+++ b/content/images/stars2.png
diff --git a/content/images/switch_background.png b/content/images/switch_background.png
new file mode 100644
index 0000000..bd9a4ca
--- /dev/null
+++ b/content/images/switch_background.png
diff --git a/content/images/switch_frame.png b/content/images/switch_frame.png
new file mode 100644
index 0000000..8404a53
--- /dev/null
+++ b/content/images/switch_frame.png
diff --git a/content/images/switch_on.png b/content/images/switch_on.png
new file mode 100644
index 0000000..bc9fccb
--- /dev/null
+++ b/content/images/switch_on.png
diff --git a/content/images/switch_thumb.png b/content/images/switch_thumb.png
new file mode 100644
index 0000000..e8f7451
--- /dev/null
+++ b/content/images/switch_thumb.png
diff --git a/main.cpp b/main.cpp
new file mode 100644
index 0000000..81c1c85
--- /dev/null
+++ b/main.cpp
@@ -0,0 +1,18 @@
+#include <QGuiApplication>
+#include <QQuickView>
+
+int main(int argc, char* argv[])
+{
+    QGuiApplication app(argc,argv);
+    QQuickView view;
+    view.setResizeMode(QQuickView::SizeRootObjectToView);
+    view.setSource(QUrl::fromLocalFile(QCoreApplication::applicationDirPath() + QLatin1String("/Qt5_CinematicExperience.qml")));
+
+    const QString lowerArgument = QString::fromLatin1(argv[1]).toLower();
+    if (lowerArgument == QLatin1String("--fullscreen")) {
+        view.showFullScreen();
+    } else {
+        view.show();
+    }
+    return app.exec();
+}