import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Particles 2.0

Rectangle {
    signal clicked
    property string title
    property string message1
    property string message2
    id: dialog
    visible: false
    anchors.fill: parent
    color: Qt.rgba(0, 0, 0, 0);
    state: "hidden"

    states: [
        State {
            name: "shown"
            PropertyChanges {
                target: dialog
                color: Qt.rgba(0, 0, 0, 0.5)
                visible: true
            }
            PropertyChanges {
                target: shaderEffect
                amplitude: 0.02
            }

            PropertyChanges {
                target: emitter
                enabled: true

            }
            PropertyChanges {
                target: dialogContent
                opacity: 1
            }

            PropertyChanges {
                target: translate
                y: 0
            }

            PropertyChanges {
                target: shaderAnim
                isRunning: true
            }
        }
    ]

    Translate {
        id: translate
        y: -dialogContent.height*2

    }

    transitions: [
        Transition {
            from: "hidden"
            to: "shown"
            SequentialAnimation{
                ParallelAnimation {
                    PropertyAnimation { target:  translate;  property:'y'; duration : 300 }
                    PropertyAnimation { target: dialogContent; property: 'opacity'; duration: 300 }
                }
                ColorAnimation { target:  dialog;  property:'color'; duration : 500 }
            }
        },
        Transition {
            from: "shown"
            to: "hidden"
            SequentialAnimation{
                ParallelAnimation {
                    PropertyAnimation { target:  translate;  property:'y'; duration : 300 }
                    PropertyAnimation { target: dialogContent; property: 'opacity'; duration: 300 }
                }
                ColorAnimation { target:  dialog;  property:'color'; duration : 500 }
                PropertyAction { target: emitter; property: 'enabled' }
                PropertyAction { target: dialog; property: 'visible'; }
            }
        }
    ]

    function show()
    {
        dialog.state = "shown";
    }

    function hide()
    {
        dialog.state = "hidden"
    }

    MouseArea {
        anchors.fill: dialog
        onClicked: {
            dialog.clicked();
        }
    }

    ParticleSystem{ id: bubbles }

    ImageParticle{
        system: bubbles
        source: "bubble.png"
        opacity: 0.5
    }
    Emitter{
        id: emitter
        enabled: false
        system: bubbles
        anchors.fill: parent
        size: 4

        sizeVariation: 14
        acceleration: PointDirection{ y: -6; xVariation: 4 }
        emitRate: 50
        lifeSpan: 3000
    }


    Rectangle {
        id: dialogContent
        color: "#4fa46b"
        opacity: 0
        height: parent.height/2
        width: parent.width/2
        anchors.centerIn: parent
        transform: translate
        border.width: 5
        border.color: "#2e5f3e"



        ScrollView {
            id: scroll
            anchors.fill: parent
            anchors.margins: 24


            Column  {
                spacing: 20

                Text {
                    id: txt
                    color: 'white'
                    text: dialog.title
                    width: scroll.width
                    wrapMode: Text.WordWrap
                    font {
                        pointSize: 22
                        bold: true
                    }
                }

                Text {
                    color: 'white'
                    text: dialog.message1
                    width: scroll.width
                    wrapMode: Text.WordWrap
                    font.pointSize: 12
                }

                Text {
                    color: 'white'
                    text: dialog.message2
                    width: scroll.width
                    wrapMode: Text.WordWrap
                    font.pointSize: 12
                }
            }
        }

        ShaderEffect{
            id: shaderEffect
            anchors.fill: scroll
            property var source: ShaderEffectSource {
                sourceItem: scroll
                smooth: true
                hideSource: true
            }
            property real amplitude: 0
            property real frequency: 20
            property real time: 0
            NumberAnimation {
                property bool isRunning: false
                onIsRunningChanged: isRunning ? shaderAnim.start() : shaderAnim.stop();
                id: shaderAnim
                target: shaderEffect
                property: 'time'
                from: 0
                to: Math.PI * 2
                duration: 600
                loops: Animation.Infinite;
            }
            fragmentShader: "
                    uniform highp float amplitude;
                    uniform highp float frequency;
                    uniform highp float time;
                    uniform sampler2D source;
                    uniform lowp float qt_Opacity;
                    varying highp vec2 qt_TexCoord0;
                    void main() {
                        highp vec2 p = sin(time + frequency * qt_TexCoord0);
                        gl_FragColor = qt_Opacity * texture2D(source, qt_TexCoord0 + amplitude * vec2(p.y, -p.x));
                    }"
        }

    }
}