/****************************************************************************
**
** 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 QtQuick 1.0
import Circus 1.0

Item {
    id: root

    clip: true

    property int pageCount: 4
    property alias model: view.model
    property alias currentIndex: view.currentIndex
    property alias count: view.count
    property int currentPage: Math.round((currentIndex / pageCount) + 1)
    property int totalPages:  Math.ceil(count / pageCount)
    property bool moving: view.moving || view.sliding

    function next() {
        view.moveCurrentIndexRight();
    }

    function prev() {
        view.moveCurrentIndexLeft();
    }

    Component {
        id: delegateComponent

        Item {
            width: view.cellWidth
            height: view.cellHeight

            Image {
                id: icon
                anchors.left: parent.left
                anchors.leftMargin: 26 * scaleFactor
                anchors.verticalCenter: parent.verticalCenter
                source: "image://cache/achievements/" + model.icon +
                        (model.unlocked ? "_unlocked.png" : "_locked.png")
            }

            Column {
                id: text

                anchors.verticalCenter: parent.verticalCenter
                anchors.left: icon.right
                anchors.leftMargin: 10 * scaleFactor
                anchors.right: parent.right
                anchors.rightMargin: 26 * scaleFactor

                Label {
                    id: title

                    anchors {
                        left:  parent.left
                        right: parent.right
                    }

                    height: {
                        if (textSize.width < width)
                            textSize.height;
                        else
                            textSize.height * (Math.ceil(textSize.width / width));
                    }

                    horizontalAlignment: SimpleText.AlignLeft
                    verticalAlignment: SimpleText.AlignBottom
                    text: model.name
                    fontSize: scaleFactor == 1 ? 21 : 24
                    color: "#a56d26"
                }

                Label {
                    id: description

                    anchors {
                        left: parent.left
                        right: parent.right
                    }

                    height: {
                        if (textSize.width < width)
                            textSize.height;
                        else
                            textSize.height * (Math.ceil(textSize.width / width));
                    }

                    horizontalAlignment: SimpleText.AlignLeft
                    verticalAlignment: SimpleText.AlignTop
                    text: model.description
                    fontSize: scaleFactor == 1 ? 16 : 17
                    color: "#00b0b2"
                }
            }

            Image {
                anchors {
                    bottom: parent.bottom
                    left: icon.left
                    leftMargin: -8
                }

                visible: (model.index % pageCount) != (pageCount - 1)
                source: "image://cache/common/divisor.png"
            }
        }
    }

    Component {
        id: listHighlight

        Item {
            width: view.cellWidth
            height: view.cellHeight
            x: view.currentItem ? view.currentItem.x : 0
            y: view.currentItem ? view.currentItem.y : 0

            Behavior on x {
                SequentialAnimation {
                    ScriptAction { script: view.sliding = true }
                    NumberAnimation { duration: 400; easing.type: Easing.InOutQuad }
                    ScriptAction { script: view.sliding = false }
                }
            }
        }
    }

    GridView {
        id: view

        property bool sliding: false

        anchors {
            fill: parent
            bottomMargin: 75 * scaleFactor
        }

        clip: true
        cellWidth: width
        cellHeight: height / root.pageCount - 1
        delegate: delegateComponent
        flow: GridView.TopToBottom
        snapMode: ListView.SnapOneItem
        highlight: listHighlight
        highlightRangeMode: GridView.StrictlyEnforceRange
        highlightMoveDuration: 400
    }

    Label {
        id: currentLabel

        anchors {
            bottom: totalLabel.bottom
            right: totalLabel.left
            rightMargin: 5 * scaleFactor
        }

        width: textSize.width + 1
        text: qsTr("%1").arg(currentPage)
        fontSize: 22
        color: "#6d3c18"
    }

    Label {
        id: totalLabel

        anchors {
            top: parent.top
            topMargin:  (380 - height) * scaleFactor
            right: parent.right
            rightMargin: 32 * scaleFactor
        }

        width: textSize.width + 1
        text: qsTr("OF %2").arg(totalPages)
        fontSize: 18
        color: "#45260d"
    }

}