/****************************************************************************
**
** Copyright (C) 2011 Nokia Institute of Technology.
** All rights reserved.
** Contact: Manager (renato.chencarek@openbossa.org)
**
** This file is part of the Incredible Circus project.
**
** GNU Lesser General Public License Usage
**
** This file may be used under the terms of the GNU Lesser General Public
** License version 2.1 as published by the Free Software Foundation and
** appearing in the file LICENSE.LGPL included in the packaging of this
** file. Please review the following information to ensure the GNU Lesser
** General Public License version 2.1 requirements will be met:
** http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
**
****************************************************************************/

import Circus 1.0
import QtQuick 1.1

Item {
    id: rect
    clip: true

    signal clicked(int index)

    property alias model: view.model
    property alias currentIndex: view.currentIndex

    function updateStars() {
        totalStarsLabel.text = manager.starsCount()
    }

    Row {
        id: row
        spacing: 5

        anchors {
            top: parent.top
            topMargin: 25 * scaleFactor
            horizontalCenter: parent.horizontalCenter
        }

        Image {
            height: 30 * scaleFactor

            fillMode: Image.PreserveAspectFit
            source: "image://cache/screens/level/star.png"
        }

        Label {
            anchors.verticalCenter: parent.verticalCenter

            text: qsTr("TOTAL")
            effect: SimpleText.Decal
            fontSize: 24 * scaleFactor
            color: "#05b3b2"
        }

        Label {
            id: totalStarsLabel

            anchors.verticalCenter: parent.verticalCenter
            effect: SimpleText.Digit
            fontSize: 24 * scaleFactor
            color: "#a56d26"
            horizontalAlignment: SimpleText.AlignLeft
            text: manager.starsCount()
        }
    }

    Component {
        id: delegate

        Item {
            id: logoContainer
            width: 200 * scaleFactor
            height: view.height

            z: zoom
            smooth: true

            property real dist: Math.abs(view.contentX - x + view.preferredHighlightBegin)
            property real zoom: Math.max(0.6, 1.0 - 0.4 * dist / Math.max(1, width))

            Component.onCompleted: {
                if (modelData.url != "") {
                    state = "";
                }
            }

            Image {
                id: logo
                scale: zoom
                anchors.verticalCenter: parent.verticalCenter
                anchors.verticalCenterOffset: (parent.width / logo.width) < 0.8 ? 9 * scaleFactor : 0
                anchors.horizontalCenter: parent.horizontalCenter

                source: modelData.logoPath
            }

            Image {
                id: lockIcon
                visible: false
                source: "image://cache/widgets/carousel/lock.png"
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter

                Image {
                    id: star
                    visible: false
                    property int index: 1
                    anchors.centerIn: lockIcon
                    source: "image://cache/widgets/carousel/_light/" + index + ".png"
                }
            }

            states: State {
                name: "locked"
                when: modelData.locked
                PropertyChanges { target: logo; opacity: 0.5; }
                PropertyChanges { target: lockIcon; opacity: 1.0; visible: true; }
            }

            transitions: Transition {
                from: "locked"; to: "";
                SequentialAnimation {
                    PauseAnimation { duration: 200; }
                    PropertyAction { target: star; property: "visible"; value: true; }
                    NumberAnimation { target: star; properties: "index"; duration: 400; from: 1; to: 8; }
                    PropertyAction { target: lockIcon; property: "visible"; }
                    PropertyAction { target: star; property: "visible"; value: false; }
                    NumberAnimation { target: logo; properties: "opacity"; duration: 200; from: 1.0; to: 0.5; }
                    NumberAnimation { target: logo; properties: "opacity"; duration: 200; from: 0.5; to: 1.0; }
                    NumberAnimation { target: logo; properties: "opacity"; duration: 200; from: 1.0; to: 0.5; }
                }
            }
        }
    }

    ListView {
        id: view

        anchors {
            topMargin: -16
            top: row.bottom
            left: parent.left
            right: parent.right
            bottom: parent.bottom
        }

        // performance issues
        interactive: false
        cacheBuffer: 9999
        preferredHighlightBegin: view.width / 2.0 - highlightItem.width / 2.0
        preferredHighlightEnd: view.width / 2.0 + highlightItem.width / 2.0
        highlightRangeMode: ListView.StrictlyEnforceRange
        delegate: delegate
        orientation: ListView.Horizontal

        // XXX: We are not using regular ListView flick interaction
        // due to some problems on S60 platform. So we rolled out
        // our own implementation.
        MouseArea {
            property int lastX: 0
            property int pressX: 0
            property int clickThreshold: 10
            property int pressedIndex: -1

            anchors.fill: parent
            onPressed: {
                snapAnimation.running = false;
                pressX = mouse.x;
                lastX = pressX;
                pressedIndex = currentIndex;
            }

            onPositionChanged: {
                var diffX = lastX - mouse.x;
                view.contentX += diffX;
                lastX = mouse.x;
            }

            onReleased: {
                snapAnimation.from = view.contentX;
                snapAnimation.to = (view.currentIndex * view.highlightItem.width) - view.preferredHighlightBegin;
                snapAnimation.running = true;
                lastX = 0;
                if (Math.abs(pressX - mouse.x) <= clickThreshold) {
                    rect.clicked(currentIndex);
                }
            }
        }

        PropertyAnimation {
            id: snapAnimation
            duration: 200
            target: view
            property: "contentX"
        }

        Component.onCompleted: currentIndex = 0;
    }
}