/*jslint nomen: true, debug: true, evil: true, vars: true, browser: true,
  devel: true */
/*global _, $ */


var ElementOnView = function(options){

    this.options = options;
    this.items = $(options.item_selector);
    this.window = $(window);

    this.mostly_on_middle = options.mostly_on_middle;
    this.mostly_over_middle = options.mostly_over_middle;
    this.mostly_down_middle = options.mostly_down_middle;

    window.addEventListener('scroll', _.bind(this.scrollMoves, this),  false);

};

ElementOnView.prototype = {

    scrollMoves: function(e){

        /* filtra todos los items que se encuentran dentro de la vista */
        var on_view = _.filter(this.items, _.bind(this.isOnView, this));

        if (on_view.length == 1) {

            /* si solo un item se encuentra en la pantalla */
            this.mostly_on_middle(on_view[0]);

        } else if (on_view) {

            /* si mas de uno se encuentra en la pantalla */
            var on_middle = _.min(
                on_view,
                _.bind(this.on_middle, this)
            );
            this.mostly_on_middle(on_middle);

            /* los elementos que se encuentran mas alejado del medio */
            off_middle = _.filter(
                on_view,
                function(elem){ return elem !== on_middle; }
            );


            if (this.isOverMiddle(off_middle[0])) {

                /* si se encuentra lejos del medio y por encima de él */
                this.mostly_over_middle(off_middle[0]);

            } else {

                /* en caso contrario se encuentra debajo y el scroll esta
                 * subiendo
                 */
                this.mostly_down_middle(off_middle[0]);
            }

        }

    },

    isOnView: function(elem){

       /* todos los elementos que se encuentran dentro de la vista: lo que se
        * ve en la pantalla y lo que ya fue escroleado hacia la parte
        * superior
        */

        var elem = $(elem);
        /* tope y fondo scrolleado */
        var viewTop = this.window.scrollTop();
        var viewBottom = viewTop + this.window.height();
        /* tope y fondo absoluto */
        var elemTop = elem.offset().top;
        var elemBottom = elemTop + elem.height();
        /* se encuentra o no en el rango visible de la pantalla */
        return (elemTop >= viewTop && elemTop <= viewBottom) ||
            (elemBottom >= viewTop && elemBottom <= viewBottom) ||
            (elemTop <= viewTop && elemBottom >= viewBottom);

    },

    isOverMiddle: function(elem){

        var elem = $(elem);
        var middle = this.get_middle_view();

        return middle > (elem.offset().top + elem.height());

    },

    get_middle_view: function(){

        return this.window.scrollTop() + (this.window.height()/2);
    },

    on_middle: function(elem){

        var middle = this.get_middle_view();
        var elem = $(elem);

        return _.min([
            Math.abs(middle - elem.offset().top),
            Math.abs(middle - (elem.offset().top + elem.height()))
        ]);

    }
};