import QtQuick 1.1
import com.nokia.meego 1.0

Page {
    //id: scanPage
    anchors.fill: parent

    Rectangle {
        id: scanwrapper
        anchors.fill: parent
        color: "gray"

        Item {
            id: videoWidget
            // this will be where the video is shown
            height: 100 //480
            width: 100// 480
            //anchors { top: parent.top; left: parent.left; }

            Rectangle {
                anchors.fill: videoWidget
                color: "yellow"
            }
        }


        Rectangle {
            id: scanButtonRow
            width: childrenRect.width
            height: childrenRect.height

            onWidthChanged: {
                console.log("scanButtonRow is now:" , width);
            }

            color: "blue"
            //height:  Math.max(scanButton.height, openButton.height)
            //anchors { top: videoWidget.bottom; left: parent.left; }
            //anchors.left: scanwrapper.left

            Button {
                id: scanButton
                text: "Scan"
                anchors {
                    top: parent.top
                    left: parent.left
                }

                onWidthChanged: {
                    console.log("scanButton is now:" , width);
                }
                //width:  Math.round(parent.width/2)
                onClicked: {  }
            }

            Rectangle {
                id: spacer
                height: 10
                anchors {
                    top: scanButton.bottom;
                    left: parent.left
                }
            }

            Button {
                id: openButton
                text: "Open image"
                anchors {
                    top:  spacer.bottom;
                    left: parent.left
                }
                //width:  Math.round(parent.width/2)
                onClicked: {  }
                onWidthChanged: {
                    console.log("openButton is now:" , width);
                }
            }

        }
    }



    states: [

        State {
            name: "Landscape"
            when: !inPortrait
            PropertyChanges {
                target:  videoWidget
                height: 100 //450 // need to avoid the toolbar
                width: 100 // 450
            }

            AnchorChanges {
                target:  videoWidget
                anchors.left: scanwrapper.left
                anchors.top: scanwrapper.top
                //anchors.verticalCenter: scanwrapper.verticalCenter
                //anchors.horizontalCenter: None
            }

            // --------------------------------

//            PropertyChanges {
//                target: scanButtonRow
//                width: Math.min(250, 480 - videoWidget.width)
//            }

            AnchorChanges {
                target: scanButtonRow
                anchors.left: videoWidget.right
                //anchors.right: scanwrapper.right
                //anchors.horizontalCenter: None
                anchors.verticalCenter: scanwrapper.verticalCenter
                //anchors.horizontalCenter:  videoWidget.width + (scanwrapper.width - videoWidget.width)/2
            }
        },

        State {
            name: "Portrait"
            when: inPortrait

            PropertyChanges {
                target:  videoWidget
                height: 100 //480
                width: 100 //480 // full screen width
            }

            AnchorChanges {
                target:  videoWidget
                anchors.top: scanwrapper.top
                anchors.horizontalCenter: scanwrapper.horizontalCenter
                //anchors.right: scanwrapper.right
                //anchors.bottom: scanButtonRow.top
            }
            // --------------------------------

            PropertyChanges {
                target:  scanButtonRow
                width: 250
            }
            AnchorChanges {
                target:  scanButtonRow
                anchors.top: videoWidget.bottom
                //anchors.left: scanwrapper.left
                anchors.horizontalCenter: scanwrapper.horizontalCenter
                //anchors.verticalCenter: (scanwrapper.height - videoWidget.height)/2

            }

        }

    ]


}