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

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



    Flipable {
        id: flipable
        front: flickableBack
        back: flickableFront

        width: parent.width
        height: parent.height

        property bool flipped: false
        property int targetAngle: 0

        state: "back"

        transform: Rotation {
            id: rotation
            origin.x: flipable.width/2
            origin.y: flipable.height/2
            axis.x: 0; axis.y: 1; axis.z: 0     // set axis.y to 1 to rotate around y-axis
            angle: 0    // the default angle
        }

        states: [State {
            name: "back"
            PropertyChanges { target: rotation; angle: 180 }
            when: flipable.flipped
        }, State {
                name: "front"
                PropertyChanges { target: rotation; angle: 0 }
                when: !flipable.flipped
        }]

        transitions: Transition {
            NumberAnimation { target: rotation; property: "angle"; easing.type: Easing.InOutQuad; duration: 500 }
        }

        function flipRight() {
            targetAngle = rotation.angle + 180
            flipable.flipped = !flipable.flipped
            //flipped = !flipped
        }

        function flipLeft() {
            targetAngle = rotation.angle - 180
            flipable.flipped = !flipable.flipped
            //flipped = !flipped
        }
    }

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

        flickDeceleration: 1500;
        //flickableDirection: Flickable.VerticalFlick

        property bool contentIsReady: false
        Rectangle {
            id: boundsRecFront
            color: "white"
            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;
                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: {
                    flickableFront.contentX = buffer //flickable.width/2
                    flickableFront.contentIsReady = true
                    flipable.flipRight();
                }


            }

    //        onFlickStarted: {
    //            console.log("start contentx"+contentX)
    //            console.log("start contenty"+contentY)
    //        }
        }
        Behavior on contentX {
            id: contentXBehavior
            enabled: flickableFront.contentIsReady
            NumberAnimation { duration: 200 }
        }
        onMovingHorizontallyChanged: {
            if (!movingHorizontally && (!atXBeginning || !atXEnd)) {
                flickableFront.contentX = buffer //flickable.width/2
            }
        }

        onAtXBeginningChanged: {
            if (atXBeginning && contentIsReady) {
                flickableBack.contentIsReady = false
                //console.log("previous")
                articlePage.mainArticleId = controller.getNextId(articlePage.feedid,articlePage.mainArticleId)
//                if (flipable.side == Flipable.Back) {
//                    webViewFront.html = controller.getArticle(articlePage.feedid, articlePage.mainArticleId);
//                } else {
                    webViewBack.html = controller.getArticle(articlePage.feedid, articlePage.mainArticleId);
//                }
                //flickableBack.contentY = 0
                flickableFront.contentX = buffer
                //flipable.flipped = !flipable.flipped
                //flipable.flipLeft()
            }
        }

        onAtXEndChanged: {
            if (atXEnd && contentIsReady) {
                //console.log("next")
                flickableBack.contentIsReady = false
                articlePage.mainArticleId = controller.getPreviousId(articlePage.feedid,articlePage.mainArticleId)
//                if (flipable.side == Flipable.Back) {
//                    webViewFront.html = controller.getArticle(articlePage.feedid, articlePage.mainArticleId);
//                } else {
                    webViewBack.html = controller.getArticle(articlePage.feedid, articlePage.mainArticleId);
//                }
                //flickableBack.contentY = 0
                flickableFront.contentX = buffer
                //flipable.flipped = !flipable.flipped
                //flipable.flipRight();
            }
        }
    }


    Flickable {
        id: flickableBack
        //anchors.fill: screen;
        height: articlePage.height;
        width: articlePage.width;
        contentWidth: boundsRecBack.width
        contentHeight: boundsRecBack.height
        //contentWidth: childrenRect.width; contentHeight: childrenRect.height
        //interactive: parent.vertPanningEnabled;

        flickDeceleration: 1500;
        //flickableDirection: Flickable.VerticalFlick

        property bool contentIsReady: false
        Rectangle {
            id: boundsRecBack
            color: "white"
            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;
                preferredWidth: articlePage.width
                //preferredHeight: articleView.height
                //scale: 1.25;
                transformOrigin: Item.TopLeft
                //scale: slider.value;
                settings.defaultFontSize: articlePage.webviewFontSize

                onLoadFinished: {
                    flickableBack.contentX = buffer //flickable.width/2
                    flickableBack.contentIsReady = true
                    flipable.flipRight();
                }


            }

    //        onFlickStarted: {
    //            console.log("start contentx"+contentX)
    //            console.log("start contenty"+contentY)
    //        }
        }
        Behavior on contentX {
            id: contentXBehaviorBack
            enabled: flickableBack.contentIsReady
            NumberAnimation { duration: 200 }
        }
        onMovingHorizontallyChanged: {
            if (!movingHorizontally && (!atXBeginning || !atXEnd)) {
                flickableBack.contentX = buffer //flickable.width/2
            }
        }

        onAtXBeginningChanged: {
            if (atXBeginning && contentIsReady) {
                flickableFront.contentIsReady = false
                //console.log("previous")
                articlePage.mainArticleId = controller.getNextId(articlePage.feedid,articlePage.mainArticleId)
//                if (flipable.side == Flipable.Back) {
                    webViewFront.html = controller.getArticle(articlePage.feedid, articlePage.mainArticleId);
//                } else {
//                    webViewBack.html = controller.getArticle(articlePage.feedid, articlePage.mainArticleId);
//                }
                //flickableFront.contentY = 0
                //flickableBack.contentX = buffer
                //flipable.flipped = !flipable.flipped
                //flipable.flipLeft()
            }
        }

        onAtXEndChanged: {
            if (atXEnd && contentIsReady) {
                flickableFront.contentIsReady = false
                //console.log("next")
                articlePage.mainArticleId = controller.getPreviousId(articlePage.feedid,articlePage.mainArticleId)
//                if (flipable.side == Flipable.Back) {
                    webViewFront.html = controller.getArticle(articlePage.feedid, articlePage.mainArticleId);
//                } else {
//                    webViewBack.html = controller.getArticle(articlePage.feedid, articlePage.mainArticleId);
//                }
                //flickableFront.contentY = 0
                //flickableBack.contentX = buffer
                //flipable.flipped = !flipable.flipped
                //flipable.flipRight();
            }
        }
    }



//    ListView {
//        id: articleView;
//        model: articlesModel;
//        delegate: viewer;
//        property int webviewFontSize: settings.webviewFontSize
//        orientation: ListView.Horizontal
//        width: parent.width;
//        height: updateBarArticles.visible? parent.height-updateBarArticles.height : parent.height;
//        //onCurrentIndexChanged: articleView.positionViewAtIndex(currentIndex, ListView.Contain)
//        highlightRangeMode: ListView.StrictlyEnforceRange; snapMode: ListView.SnapOneItem
//        cacheBuffer: width;
//        onMovementStarted: articlePage.vertPanningEnabled=false;
//        onMovementEnded: articlePage.vertPanningEnabled=true;
//        highlightMoveDuration: 300;
//        clip: true
//        boundsBehavior: Flickable.DragOverBounds

//        onCurrentIndexChanged: {
//            if (currentIndex >= count-1) {
//                articlesModel.append({articleid: controller.getNextId(feedid, articlesModel.get(currentIndex).articleid)})
//            }
//        }

//        onCountChanged: {
//            if (count == 3) {
//                articleView.currentIndex = 1
//            }
//        }
//    }

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

    ListModel {
        id: articlesModel



    }

    Component {
        id: viewer
        Item {
            id: flipItem;
            width: articleDisplay.width;
            height: articleView.height;

            //property string url: (articleView.visible && Math.abs(articleView.currentIndex-index)<2) ? path: "";
            property string html: controller.getArticle(articlePage.feedid, articleid)
            ArticleDisplay {
                id: articleDisplay
                zoomEnabled: articlePage.zoomEnabled;
                property bool vertPanningEnabled: articlePage.vertPanningEnabled;

                states: [ State {
                        name: 'articleIsRead';
                    when: articleView.currentIndex == index;
                    StateChangeScript {
                        name: "myScript"
                        script: {
                            //flipItem.url=path;
                            controller.setEntryRead(articlePage.feedid, articleid)
//                            if (articlesModel.count==1) {
//                                timer.start()
//                            }
                        }
                    }
                    }
                ]
            }
        }
    }

    Component.onCompleted: {
        articlesModel.append({articleid: mainArticleId})
        //articlesModel.append({articleid: controller.getPreviousId(feedid, mainArticleId)})

        //articleView.currentIndex = 1
    }

//    Timer {
//        id: timer
//        interval: 500; running: false; repeat: false
//        onTriggered: {
//            articlesModel.insert(0,{articleid: controller.getNextId(feedid, mainArticleId)})
//            articlesModel.append({articleid: controller.getPreviousId(feedid, mainArticleId)})
//        }
//    }

}