import QtQuick 1.0
import QtWebKit 1.0
import "content" as Content

Rectangle {
    id: fond
    // SystemPalette { id: palette; colorGroup: SystemPalette.Active }
    width: 420; height: 800
    // width: 800; height: 420
    color: "black" // "#4C4C4B" //#B5BAB4"

    /*    Image {
        id: image1
        rotation: 0
        anchors.fill: parent
        source: "content/background.png"
    }
*/
    /*
    Timer {
        id: timer
        interval: 1000; repeat: true
        running: true
        triggeredOnStart: true
        onTriggered: {
            xmlModel.reload()
        }
    }
*/
    //    Content.RssModel { id: xmlModel }

    Rectangle { id: firstView
        width:  parent.width
        height: parent.height-menu.height
        color: "black"

        Content.SearchModel { id: schModel }
        Content.Loading { anchors.centerIn: parent; visible: schModel.status==XmlListModel.Loading}

        Text {
            width: 180
            text: "Problem.";
            color: "#cccccc"; style: Text.Raised; styleColor: "black"; wrapMode: Text.WordWrap
            visible: schModel.status==XmlListModel.Error; anchors.centerIn: parent
        }

        Content.SearchDelegate { id: schDelegate }

        ListView {
            id: mainView; model: schModel.model; delegate: schDelegate;
            width: parent.width; height: parent.height; x: 0; cacheBuffer: 100;
        }
    }

    /*
        Content.RcDelegate { id: rcDelegate }

        ListView { id: lstRC
            anchors.fill: parent
            model: xmlModel
            delegate: rcDelegate
        }
    } /* */

    Rectangle { id: droite
        x: parent.width
        anchors.verticalCenter: parent.verticalCenter
        opacity: 1
        width: parent.width
        height: parent.height
        // color: "#f93838"
        color: "#DBC293"

        MouseArea {
            anchors.fill: parent
            onClicked: { fond.state = '' }
        }

        Text {
            id: text1
            width: 80
            height: 20
            text: "Panneau droit"
            anchors.leftMargin: 5
            anchors.topMargin: 5
            anchors.left: parent.left
            anchors.top: parent.top
            font.pixelSize: 12
        }
    }

    Content.Config { id: gauche }
    Content.UserChoice { id: userchoice }

    Content.ShadowRectangle { id: menu
        width: fond.width
        height: 70
        color: "#B39A6A" //123662"
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 0
        anchors.horizontalCenter: parent.horizontalCenter
        opacity: 0.8

        Flow {
            id: gridMenu
            width: parent.width-10
            height: parent.height
            anchors.right: parent.right
            //anchors.rightMargin: 10
            anchors.margins: 5
            //anchors.fill: parent
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenterOffset: 8
            //       contentWidth: parent.width
            //     cellWidth: parent.width/4
            //   cellHeight: parent.height

            Image { source: "content/vue.png"; anchors.right: parent.right;
                anchors.verticalCenter: parent.verticalCenter
                MouseArea { anchors.fill: parent
                    onClicked: { fond.state = "Configuration" }
                }
            }
        }
    }

    states: [
        State {
            name: "Parametrage"
            PropertyChanges {
                target: droite
                x: 0
            }
        },
        State {
            name: "Configuration"
            PropertyChanges {
                target: gauche
                y: fond.height-gauche.height-menu.height
            }
        },
        State {
            name: "UserChoice"
            PropertyChanges {
                target: userchoice
                y: fond.height-userchoice.height
            }
        }
    ]

    transitions: Transition {
        NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce; easing.amplitude: 3.0; easing.period: 1.0; duration: 1000 }
    }
}