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

Item {
    id: layer

    property string value: ""

    signal okClicked()

    function updateValue() {
        layer.value = (38 - manager.starsCount(1));
    }

    Item {
        id: frame

        opacity: 0.0
        visible: false
        anchors.fill: parent

        MouseArea {
            anchors.fill: parent
        }

        Rectangle {
            opacity: 0.6
            color: "black"
            anchors.fill: parent
        }

        HelpCard {
            id: helpCard

            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter

            text: qsTr("Earn stars to unlock levels")

            Image {
                id: centerImage
                anchors {
                    horizontalCenter: parent.horizontalCenter
                    top: parent.top
                    topMargin: 34 * scaleFactor
                }

                source: "image://cache/widgets/helpcard/_cards/remaining_stars.png"
            }

            Rectangle {
                color: "blue"
                opacity: 0.0
                anchors.fill: archedText
            }

            ArchedText { // TODO
                id: archedText
                width: 210 * scaleFactor
                height: 65 * scaleFactor

                anchors {
                    bottom: centerImage.bottom
                    bottomMargin: centerImage.height / 15.0
                    horizontalCenter: centerImage.horizontalCenter
                }

                inverted: true
                text: qsTr("remaining")
                textColor: "#3a2416"
                textSize: 20 * scaleFactor
                charSpace: 0.06
            }

            Label {
                id: remainingText

                anchors {
                    bottom: helpCard.verticalCenter
                    bottomMargin: 18 * scaleFactor
                    horizontalCenter: helpCard.horizontalCenter
                }

                text: layer.value
                color: "#3b2416"
                fontSize: 38 * scaleFactor
            }

            Label {
                id: starsText

                anchors {
                    top: remainingText.bottom
                    topMargin: -4
                    horizontalCenter: remainingText.horizontalCenter
                }

                text: qsTr("STARS")
                color: "#3b2416"
                fontSize: 14 * scaleFactor
            }

            ImageButton {
                anchors.top: helpCard.bottom
                anchors.horizontalCenter: helpCard.horizontalCenter
                anchors.topMargin: 16
                onClicked: layer.okClicked();
                source: "image://cache/widgets/helpcard/ok.png"
            }
        }
    }

    states: State {
        name: "opened"

        PropertyChanges {
            target: frame
            visible: true
            opacity: 1.0
        }
    }

    transitions: Transition {
        to: "opened"
        reversible: true

        SequentialAnimation {
            PropertyAction {
                target: frame
                properties: "visible"
            }
            NumberAnimation {
                target: frame
                properties: "opacity"
                duration: 200
            }
        }
    }
}