import Qt 4.7
import QtMultimediaKit 1.1
import "../components"

Rectangle {
    id: view

    property alias source1: video.source

    function start() { video.play() }

    width: 360
    height: 640
    color: "#1d1c3e"

    Video {
        id: video
        x: 25
        y: 50
        height: 250
        width: 250
        source: ""
        autoLoad: false
        // Start animation once playback starts
        //onStarted: view.state = "down"
        volume: 0.35
    }

	TextButton {
		id: exitButton
		text: "Exit"
		anchors { top: parent.top; right: parent.right; margins: 10 }
		onClicked: {
			video.stop()
            app.close()
		}
	}

	TextButton {
		id: pauseButton
		text: "Pause"
		anchors {  bottom: parent.bottom; right: parent.right; margins: 10 }
		onClicked: {
			video.pause()
		}
	}
	
	TextButton {
		id: playButton
		text: "Play"
		anchors { bottom: parent.bottom; left: parent.left; margins: 10 }
		onClicked: {
			video.play()
		}
	}
	
	TextButton {
		id: stopButton
		text: "Stop!"
		anchors {  bottom: parent.bottom; horizontalCenter: parent.horizontalCenter; margins: 10 }
		onClicked: {
			view.state = ""
		}
	}
	
	TextButton {
		id: startButton
		text: "Move!"
		anchors {  top: parent.top; horizontalCenter: parent.horizontalCenter; margins: 10 }
		onClicked: {
			view.state = "down"
		}
	}
	
    states: [
        State {
            name: "down"
            PropertyChanges {
                target: video
                y: 340
            }
        },
        State {
            name: "right"
            PropertyChanges {
                target: video
                x: 250
            }
        }
    ]

    transitions: [
        Transition {
            from: "*"
            to: "down"
            SequentialAnimation {
                NumberAnimation {
                    properties: "y"
                    easing.type: Easing.InOutCubic
                    duration: 1500
                }
                ScriptAction { script: { view.state = "baseState" } }
            }
        },
        Transition {
            from: "down"
            to: "baseState"
            SequentialAnimation {
                NumberAnimation {
                    properties: "y"
                    easing.type: Easing.InOutCubic
                    duration: 1500
                }
                ScriptAction { script: { view.state = "right" } }
            }
        },
        Transition {
            from: "baseState"
            to: "right"
            SequentialAnimation {
                NumberAnimation {
                    properties: "x"
                    easing.type: Easing.InOutCubic
                    duration: 1500
                }
                ScriptAction { script: { view.state = "baseState" } }
            }
        },
        Transition {
            from: "right"
            to: "baseState"
            SequentialAnimation {
                NumberAnimation {
                    properties: "x"
                    easing.type: Easing.InOutCubic
                    duration: 1500
                }
                ScriptAction { script: { view.state = "down" } }
            }
        }
    ]
}