import QtQuick 2.2
import QtQuick.Controls 1.0
import QtGraphicalEffects 1.0
import QtQuick.Window 2.1
import QtQuick.Controls.Styles 1.1
import QtQuick.Layouts 1.1

Rectangle {
    id:topLevel
    width: 640
    height: 480
    property string currentText: "starting"
    property int loop: 0
    function act() {
        var vrns = [ "XYZ 987", "ABC 123", "GRY 776", "JOE 100" ]
        currentText = vrns[loop];
        sightingsPanel.imageVrn = vrns[loop];
        sightingsListPanel.imageVrn = vrns[loop];
        if (loop == 3)
            loop = 0;
        else
            loop = loop+1;
    }
    Timer {
        interval: 11000; running: true; repeat: true
        onTriggered: act();
    }
    ColumnLayout {
        anchors.fill: parent
        Rectangle {
            id: actionBar
            height:  50
            Layout.fillWidth: true
            color: "blue"
            Button { id: bottom
                width: 100
                height: parent.height * 2 / 3
                anchors.verticalCenter: parent.verticalCenter
                anchors.right: parent.right
                anchors.rightMargin: 10
                text: grid.isPortrait ? "Landscape" : "Portrait";
                MouseArea { id: place
                   anchors.fill: parent
                   onClicked:  grid.isPortrait = !grid.isPortrait;
                }
            }
        }

        GridLayout {
            id: grid
            property bool isPortrait: Screen.primaryOrientation  === Qt.PortraitOrientation || Screen.primaryOrientation  === Qt.InvertedPortraitOrientation
//            property bool isPortrait: true
            onIsPortraitChanged: console.log("---------", (isPortrait ? "Now portrait" : "Now landscape"))
            flow: (isPortrait ? GridLayout.TopToBottom : GridLayout.LeftToRight)
            Layout.fillWidth: true
            Layout.fillHeight: true     // Initial layout
            // Subsequent, dynamic layout, required only if action bar height changes
            height: parent.height - actionBar.height - parent.spacing
            anchors { bottom: parent.bottom;  }

            SightingPanel { id: sightingsPanel; Layout.fillHeight: true; Layout.fillWidth: true; }
            SightingsListPanel { id: sightingsListPanel; Layout.fillHeight: true; Layout.fillWidth: true;
                localVrnOrigin: sightingsPanel.mapToItem(sightingsListPanel, sightingsPanel.mappedVrnOrigin.x, sightingsPanel.mappedVrnOrigin.y, sightingsPanel.mappedVrnOrigin.width, sightingsPanel.mappedVrnOrigin.height);
            }
        }
    }
}