source: trunk/themes/smartpocket/js/thumb.arrange.js @ 26349

function SPTLine(margin, rowHeight) {
        this.elements = new Array;
        this.margin = margin;
        this.rowHeight = rowHeight;
        this.maxHeight = 0;
}

SPTLine.prototype = {
        width: 0,
        elementsWidth: 0,
        firstThumbIndex: 0,

        add: function($elt, absIndex) {
                if (this.elements.length === 0)
                        this.firstThumbIndex = absIndex;
                if (!$elt.data("w"))
                {
                        var w=$elt.width(), h=$elt.height();
                        if (h > this.rowHeight) {
                                w = Math.round(w * this.rowHeight/h);
                                h = this.rowHeight;
                        }
                        $elt.data("w", w)
                                .data("h", h);
                }

                var eltObj = {
                        $elt: $elt,
                        w: $elt.data("w"),
                        h: $elt.data("h")
                };
                this.elements.push(eltObj);

                if (eltObj.h > this.maxHeight)
                        this.maxHeight = eltObj.h;

                this.width += this.margin + eltObj.w;
                this.elementsWidth += eltObj.w;
        },

        clear: function() {
                if (!this.elements.length) return;
                this.width = this.elementsWidth = 0;
                this.maxHeight = 0;
                this.elements.length = 0;
        }
}


function SPThumbs(options) {
        this.opts = options;

        this.$thumbs = $('.thumbnails');
        if (this.$thumbs.length==0) return;
        this.$thumbs.css('text-align', 'left');

        this.opts.extraRowHeight = 0;
        if (window.devicePixelRatio > 1) {
                var dpr = window.devicePixelRatio;
                this.opts.extraRowHeight = 6; /*loose sharpness but only for small screens when we could "almost" fit with full sharpness*/
                this.opts.rowHeight = Math.round(this.opts.rowHeight / dpr ) + this.opts.extraRowHeight;
        }
        this.process();

        var that = this;
        $(window).on('resize', function() {
                if (Math.abs(that.$thumbs.width() - that.prevContainerWidth)>1)
                        that.process();
        })
                .on('RVTS_loaded', function(evt, down) {
                        that.process( down && that.$thumbs.width() == that.prevContainerWidth ? that.prevLastLineFirstThumbIndex : 0);
                } );
}

SPThumbs.prototype = {
        prevContainerWidth:0,
        prevLastLineFirstThumbIndex: 0,

        process: function(startIndex) {
                startIndex = startIndex ? startIndex : 0;
                var containerWidth  = this.$thumbs.width()
                        , maxExtraMarginPerThumb = 1;
                this.prevContainerWidth = containerWidth;

                var $elts = $('li.liVisible>a>img', this.$thumbs)
                        , line  = new SPTLine(this.opts.hMargin, this.opts.rowHeight);

                for (var i=startIndex; i<$elts.length; i++) {
                        var $elt = $( $elts[i] );

                        line.add($elt, i);
                        if (line.width >= containerWidth - maxExtraMarginPerThumb * line.elements.length) {
                                this.processLine(line, containerWidth);
                                line.clear();
                        }
                };

                if(line.elements.length)
                        this.processLine(line, containerWidth, true);
                this.prevLastLineFirstThumbIndex = line.firstThumbIndex;
        },

        processLine: function(line, containerWidth, lastLine) {
                var toRecover, eltW, eltH
                        , rowHeight = line.maxHeight ? line.maxHeight : line.elements[0].h;

                if (line.width / containerWidth > 1.01) {
                        var ratio = line.elementsWidth / (line.elementsWidth + containerWidth - line.width);
                        var adjustedRowHeight = rowHeight / (1 + (ratio-1) * 0.95 );
                        adjustedRowHeight = 6 * Math.round( adjustedRowHeight/6 );
                        if (adjustedRowHeight < rowHeight / ratio ) {
                                adjustedRowHeight = Math.ceil( rowHeight / ratio );
                                var missing = this.opts.rowHeight - this.opts.extraRowHeight - adjustedRowHeight;
                                if (missing>0 && missing<6)
                                        adjustedRowHeight += missing;
                        }
                        if (adjustedRowHeight < rowHeight)
                                rowHeight = adjustedRowHeight;
                }
                else if (lastLine)
                        rowHeight = Math.min( rowHeight, this.opts.rowHeight - this.opts.extraRowHeight);

                toRecover = line.width - containerWidth;
                if (lastLine)
                        toRecover = 0;

                for(var i=0; i<line.elements.length; i++) {
                        var eltObj = line.elements[i]
                                , eltW=eltObj.w
                                , eltH=eltObj.h
                                , eltToRecover;

                        if (i==line.elements.length-1)
                                eltToRecover = toRecover;
                        else
                                eltToRecover = Math.round(toRecover * eltW / line.elementsWidth);

                        toRecover -= eltToRecover;
                        line.elementsWidth -= eltW;

                        if (eltH > rowHeight ) {
                                eltW = Math.round( eltW * rowHeight/eltObj.h );
                                eltH = rowHeight;
                                eltToRecover -= eltObj.w - eltW;
                                if (lastLine)
                                        eltToRecover = 0;
                        }

                        this.reposition(eltObj.$elt, eltW, eltH, eltW-eltToRecover, rowHeight);
                }
        },

        reposition: function($img, imgW, imgH, liW, liH) {
                $img.attr("width", imgW)
                        .attr("height", imgH);

                $img.closest("li").css( {
                        width: liW+"px",
                        height: liH+"px"
                });

                $img.parent("a").css( {
                        left: Math.round((liW-imgW)/2)+"px",
                        top: Math.round((liH-imgH)/2)+"px"
                });
        }

}