~dpm/ubuntu-rssreader-app/enable-translations

import QtQuick 2.0
import QtGraphicalEffects 1.0
import Ubuntu.Components 0.1
import "databasemodule_v2.js" as DB
import "./imgSeparator.js" as ImageSeparator

Item {
    id: organicGridRoot

    anchors.fill: parent

    property var rectangleList: []
    property int tag_id
    property bool isAll: false
    property var feedArray: []

    Component.onCompleted: {
        prepareComponents()
    }

    property var delegateComponents: []

    function prepareComponents() {
        var componentsPath = "article_items/" + "Article"
        var alignNames = ["TextA", "TextB", "OneImgA", "FullImg"]
        for (var i = 0; i < alignNames.length; i++) {
            var componentName = componentsPath + alignNames[i] + ".qml";
            delegateComponents[i] = Qt.createComponent(componentName);
        }
    }

    /*!
      * \brief check collision of two article items
      * To team: little bit faster and much more readable.
      */
    function checkCollision(rect1, rect2) {
        return (rect1.y  <= rect2.y + rect2.height) &&
                 (rect2.y <= rect1.y + rect1.height) &&
                 (rect1.x <= rect2.x + rect2.width) &&
                 (rect2.x <= rect1.x + rect1.width)
    }

    /*!
      * \brief Returns a margin within given numbers. Used to make the view
      * look more organic.
      */
    function randomMargin() {
        return units.gu(2 /*3 + Math.random() * 4*/);
    }

    /*!
      * Adds a given article to the model. Also adds metadata about the
      * model to the article.
      */
    function addArticleToModel(article) {
        article.model = articleModel
        article.modelIndex = articleModel.count
        articleModel.append(article)
    }


    /*!
      * Clears all articles from the model and the view.
      */
    function clear() {
        for(var i in rectangleList) {
            rectangleList[i].destroy()
        }

        articleModel.clear()
        rectangleList = []
    }

    /*!
      * Reloads the organic view. See inline comments for details.
      */
    function reload() {
        console.time("reload_grid")
        clear()
        // Decide if we should load all articles in our database or a subset.
        if (!isAll)
        {
            for (var j=0; j < feedArray.length ; j++)
            {
                var feedArticles = DB.loadArticles({"isAll": false, "feedId": feedArray[j].id});
                for(var i = 0; i < feedArticles.rows.length; i++) {
                    addArticleToModel(feedArticles.rows[i])
                }
            }
        }
        else if (tag_id == -2) {
            var favArticles = DB.loadFavouriteArticles()
            for (var i = 0; i < favArticles.rows.length; i++)
            {
                addArticleToModel(favArticles.rows[i])
            }
        }
        else {
            var feedArticles = DB.loadArticles({"isAll": true});
            for (var i = 0; i < feedArticles.rows.length; i++)
            {
                addArticleToModel(feedArticles.rows[i])
            }
        }

        // Initial values for the starting column of items
        var xEdge = 0;
        var lastColumnX = 0;
        var y = randomMargin();

        // A hard-coded sequence that gives an organic look, but is not
        // completely random
        var sequence = [0,1,0,1,2,1,0,0,2,1,0,1,0,0];
        // var componentsPath = "article_items/" + "Article"

        for(var i = 0; i < articleModel.count; i++) {
            var article = articleModel.get(i);
//            var imageArray = ImageSeparator.separate(article.content)
            var imageArray = [article.image]
//            console.log("imageArray: ", imageArray)
            var hasImage = (article.image !== "");

            // Pick the type of size we will use for this item from the sequence
            var sizeType = sequence[i % sequence.length];
            var alignType = Math.round(Math.random())
//            if(hasImage) {
//                alignType = parseInt(Math.random() * 4);
//            } else {
//                alignType = parseInt(Math.random() * 2);
//            }

            //var alignName
            var alignIndex

            if(!hasImage) {
                switch(alignType) {
                case 0:
                    //alignName = "TextA"
                    alignIndex = 0
                    break;
                case 1:
                    //alignName = "TextB"
                    alignIndex = 1
                    break;
                }
                //noImageName += "NoImage";
                sizeType = 0;
            }
            else {
                switch(alignType) {
                case 0:
                    //alignName = "OneImgA"
                    alignIndex = 2
                    break;
                case 1:
                    //alignName = "FullImg"
                    alignIndex = 3
                    break;
                }
            }

            var component = delegateComponents[alignIndex] //Qt.createComponent(componentName);

            var properties = {
                "rss_item": article,
                "imageArray": imageArray,
                "rss_model": articleModel,
                "model_index": article.modelIndex
            }

            // This is the actual item that will be on display
            var articleItem = component.createObject(itemContainer /*organicFlickable.contentItem*/, properties);

            if(y + articleItem.height > organicGridRoot.height)  {
                y = randomMargin();
                xEdge = lastColumnX;
            }

            // The xEdge is where the last "column" of items were placed last
            // This keeps us moving forward in x-direction
            var x = xEdge + randomMargin();

            // We add some extra random margin to make it look a bit more organic
            x += randomMargin();

            articleItem.x = x
            articleItem.y = y

            // Check for collisions with all other items
            // mrqtros: Now we are look only at 0xA last items.
            //for(var j = 0; j < rectangleList.length; j++) { // mrqtros
            for(var j = Math.max(0, rectangleList.length - 0xA); j < rectangleList.length; j++) {
                var rect2 = rectangleList[j]
                if(checkCollision(articleItem, rect2)) {
                    articleItem.x = rect2.x + rect2.width + randomMargin();
                }
            }

            // Did we move the x-edge value further to the right than before?
            lastColumnX = Math.max(articleItem.x, lastColumnX);

            rectangleList.push(articleItem)

            // Increment y for the next item
            y += articleItem.height + randomMargin();
        }

        organicFlickable.scrollToStart()
        console.timeEnd("reload_grid")
    }

    /*!
      * use Flickable as articles container
      */
    Flickable {
        id: organicFlickable
        anchors.fill: parent
        contentWidth: itemContainer.width /*contentItem.childrenRect.width*/
        contentHeight: parent.height

        Item {
            id: itemContainer
            //            color: "white"
            anchors {
                left: parent.left
                top: parent.top
            }

            width: childrenRect.width + units.gu(6)
            height: parent.height
        }

//        Behavior on contentX {
//            NumberAnimation {
//                duration: 600
//                easing.type: Easing.InOutQuart
//            }
//        }

        function scrollToStart() {
            contentX = 0
        }
    }

    ListModel
    {
        id: articleModel
    }
}