import Qt 4.7
import com.nokia.meego 1.0
import QtWebKit 1.0

Item {
    id: articlePage
    property int buffer: 60
    property string feedid: parent.feedid
    property bool zoomEnabled: false
    property bool vertPanningEnabled: true
    width: parent.width; height: parent.height;
    property int webviewFontSize: settings.webviewFontSize

    function next() {
        if (flickableFront.state == "visible") {
            flickableBack.moveFromRight();
        } else {
            flickableFront.moveFromRight();
        }
    }

    function prev() {
        if (flickableFront.state == "visible") {
            flickableBack.moveFromLeft();
        } else {
            flickableFront.moveFromLeft();
        }
    }

    function setNextId() {
        articlePage.mainArticleId = controller.getNextId(articlePage.feedid,articlePage.mainArticleId, settings.hideReadArticles)
    }

    function setPreviousId() {
        articlePage.mainArticleId = controller.getPreviousId(articlePage.feedid,articlePage.mainArticleId, settings.hideReadArticles)
    }

    Component.onCompleted: {
        webViewFront.html = controller.getArticle(articlePage.feedid, articlePage.mainArticleId);
    }

    Flickable {
        id: flickableFront
        //anchors.fill: screen;
        height: articlePage.height;
        width: articlePage.width;
        contentWidth: boundsRecFront.width
        contentHeight: boundsRecFront.height
        boundsBehavior: Flickable.StopAtBounds
        //contentWidth: childrenRect.width; contentHeight: childrenRect.height
        //interactive: parent.vertPanningEnabled;

        flickDeceleration: 5000;
        //flickableDirection: Flickable.VerticalFlick

        property bool contentIsReady: false
        property bool isSwitchable: false
        Rectangle {
            id: boundsRecFront
            color: "white"
            width: webViewFront.html == "" ? articlePage.width : webViewFront.width*webViewFront.scale + 2*buffer
            height: Math.max(articlePage.height,webViewFront.height*webViewFront.scale)

            WebView {
                id: webViewFront
                anchors.horizontalCenter: parent.horizontalCenter
                //url: flipItem.url;
                preferredWidth: articlePage.width
                //preferredHeight: articleView.height
                //scale: 1.25;
                transformOrigin: Item.TopLeft
                //scale: slider.value;
                settings.defaultFontSize: articlePage.webviewFontSize

                onLoadFinished: {
                    flickableFront.contentX = buffer
                    controller.setEntryRead(articlePage.feedid, articlePage.mainArticleId)
                     //flickable.width/2
                    flickableFront.contentIsReady = true
                    switchableTimer.start()
                }

            }
        }

        state: "visible"

        states: [ State {
                name: "visible";
                PropertyChanges { target: flickableFront; x: 0; }
            }, State {
                name: "toRight";
                PropertyChanges { target: flickableFront; x: boundsRecBack.width; }
            }, State {
                name: "toLeft";
                PropertyChanges { target: flickableFront; x: -boundsRecFront.width; }
            }
        ]

        transitions: [
            Transition {
                from: "visible";
                SequentialAnimation {
                    ScriptAction { script: flickableFront.isSwitchable=false; }
                    PropertyAnimation { target: flickableFront
                      easing.type: Easing.InOutSine
                      properties: "x"; duration: 1000 }
                    ScriptAction { script: flickableFront.isSwitchable=true; }
                }
            },
            Transition {
                to: "visible";
                SequentialAnimation {
                    ScriptAction { script: flickableFront.isSwitchable=false; }
                    PropertyAnimation { target: flickableFront
                    easing.type: Easing.InOutSine
                    properties: "x"; duration: 1000 }
                    ScriptAction { script: flickableFront.isSwitchable=true; }
                }
            }

        ]

        Timer {
            // Disable animations/page shifting for 400ms, to give time to the page to setup properly
            id: switchableTimer
            interval: 400
            running: false
            repeat: false
            onTriggered: flickableFront.isSwitchable=true;
        }

        function moveFromLeft() {
            flickableFront.contentIsReady = false
            setPreviousId()
            //articlePage.mainArticleId = controller.getPreviousId(articlePage.feedid,articlePage.mainArticleId)
            webViewFront.html = controller.getArticle(articlePage.feedid, articlePage.mainArticleId);
            state = "toLeft"
            state = "visible"
            flickableBack.state = "toRight"
        }

        function moveFromRight() {
            flickableFront.contentIsReady = false
            setNextId()
            //articlePage.mainArticleId = controller.getNextId(articlePage.feedid,articlePage.mainArticleId)
            webViewFront.html = controller.getArticle(articlePage.feedid, articlePage.mainArticleId);
            state = "toRight"
            state = "visible"
            flickableBack.state = "toLeft"
        }

        Behavior on contentX {
            id: contentXBehavior
            enabled: flickableFront.contentIsReady
            NumberAnimation { duration: 200 }
        }
        onMovingHorizontallyChanged: {
            if (flickableFront.isSwitchable) {
                if (!movingHorizontally && (!atXBeginning || !atXEnd)) {
                    flickableFront.contentX = buffer //flickable.width/2
                }
            }
        }

        onAtXBeginningChanged: {
            if (flickableFront.isSwitchable) {
                if (atXBeginning && contentIsReady) {
                    flickableBack.moveFromLeft()
                }
            }
        }

        onAtXEndChanged: {
            if (flickableFront.isSwitchable) {
                if (atXEnd && contentIsReady) {
                    flickableBack.moveFromRight()
                }
            }
        }

    }


    Flickable {
        id: flickableBack
        //anchors.fill: screen;
        height: articlePage.height;
        width: articlePage.width;
        contentWidth: boundsRecBack.width
        contentHeight: boundsRecBack.height
        boundsBehavior: Flickable.StopAtBounds

        //contentWidth: childrenRect.width; contentHeight: childrenRect.height
        //interactive: parent.vertPanningEnabled;

        flickDeceleration: 5000;
        //flickableDirection: Flickable.VerticalFlick

        property bool contentIsReady: false
        property bool isSwitchable: false
        Rectangle {
            id: boundsRecBack
            color: "white"
            width: webViewBack.html == "" ? articlePage.width : webViewBack.width*webViewBack.scale + 2*buffer // flickable.width
            height: Math.max(articlePage.height,webViewBack.height*webViewBack.scale)

            WebView {
                id: webViewBack
                anchors.horizontalCenter: parent.horizontalCenter
                //url: flipItem.url;
                //html: controller.getArticle(articlePage.feedid, articlePage.mainArticleId);
                preferredWidth: articlePage.width
                //preferredHeight: articleView.height
                //scale: 1.25;
                transformOrigin: Item.TopLeft
                //scale: slider.value;
                settings.defaultFontSize: articlePage.webviewFontSize

                onLoadFinished: {
                    flickableBack.contentX = buffer
                    controller.setEntryRead(articlePage.feedid, articlePage.mainArticleId)
                    flickableBack.contentIsReady = true
                }
            }
        }

        state: "toRight"

        states: [ State {
                name: "visible";
                PropertyChanges { target: flickableBack; x: 0; }
            }, State {
                name: "toRight";
                PropertyChanges { target: flickableBack; x: boundsRecFront.width; }
            }, State {
                name: "toLeft";
                PropertyChanges { target: flickableBack; x: -boundsRecBack.width; }
            }
        ]

        transitions: [
            Transition {
                from: "visible";
                SequentialAnimation {
                    ScriptAction { script: flickableBack.isSwitchable=false; }
                    PropertyAnimation { target: flickableBack
                      easing.type: Easing.InOutSine
                      properties: "x"; duration: 1000 }
                    ScriptAction { script: flickableBack.isSwitchable=true; }
                }
            },
            Transition {
                to: "visible";
                SequentialAnimation {
                    ScriptAction { script: flickableBack.isSwitchable=false; }
                    PropertyAnimation { target: flickableBack
                    easing.type: Easing.InOutSine
                    properties: "x"; duration: 1000 }
                    ScriptAction { script: flickableBack.isSwitchable=true; }
                }
            }
        ]

        function moveFromLeft() {
            flickableBack.contentIsReady = false
            setPreviousId()
            //articlePage.mainArticleId = controller.getPreviousId(articlePage.feedid,articlePage.mainArticleId)
            webViewBack.html = controller.getArticle(articlePage.feedid, articlePage.mainArticleId);
            state = "toLeft"
            state = "visible"
            flickableFront.state = "toRight"
        }

        function moveFromRight() {
            flickableBack.contentIsReady = false
            setNextId()
            //articlePage.mainArticleId = controller.getNextId(articlePage.feedid,articlePage.mainArticleId)
            webViewBack.html = controller.getArticle(articlePage.feedid, articlePage.mainArticleId);
            state = "toRight"
            state = "visible"
            flickableFront.state = "toLeft"
        }

        Behavior on contentX {
            id: contentXBehaviorBack
            enabled: flickableBack.contentIsReady
            NumberAnimation { duration: 200 }
        }

        onMovingHorizontallyChanged: {
            if (flickableBack.isSwitchable) {
                if (!movingHorizontally && (!atXBeginning || !atXEnd)) {
                    flickableBack.contentX = buffer //flickable.width/2
                }
            }
        }

        onAtXBeginningChanged: {
            if (flickableBack.isSwitchable) {
                if (atXBeginning && contentIsReady) {
                    flickableFront.moveFromLeft()
                }
            }
        }

        onAtXEndChanged: {
            if (flickableBack.isSwitchable) {
                if (atXEnd && contentIsReady) {
                    flickableFront.moveFromRight()
                }
            }
        }
    }

    ProgressBar {
        id: updateBarArticles
        minimumValue: 0
        maximumValue: 100
        value: window.updateProgressValue
        visible: window.isUpdateInProgress
        width: parent.width
        anchors.bottom: parent.bottom
    }

    ListModel {
        id: articlesModel



    }
}