/**
 * Stores a setter function and reuses it to perform smooth
 * animation on demand
 * 
 * @param {Function} setter updating the value to be animated
 */
var Animator = function(setter) {
    this._setter = setter;
    this._current = 0;
    this._target = null;
    this._delta = null;
    this._animTimeout = null;
}


/**
 * Changes the value instantly (the most reasonable strategy
 * selected instead in case when animation is running)
 * 
 * @param {Number} val to set
 */
Animator.prototype.jump = function(val) {
    if (this._animTimeout) {
        var c = this._current,
            t = this._target, // old target
            v = val;          // new target

        if ((t > c && v > t) ||
            (t < c && v < t)) {
            // value beyond the target, speeding up
            this._delta *= (v-c)/(t-c);
            this._target = val;
        } else if ((t > c && v < c) ||
                   (t < c && v > c)) {
            // value in the opposite direction, jumping
            this._clearTimeout();
            this._applyValue(val);
        } else {
            // value prior to the target, same direction
            // simply updating the target
            this._target = val;
        }
    } else {
        this._applyValue(val);
    }
}


/**
 * Changes the value smoothly
 * 
 * @param {Number} val to be finally reached
 */
Animator.prototype.slide = function(val) {
    this._target = val;

    if (this._target != this._current) {
        this._delta = (this._target-this._current)*
            cfg.animationDelay/cfg.animationTime;
    }  // otherwise will stop upon the next tick

    if (!this._animTimeout) {
        this._tick();
    }
}


/**
 * Performs a single animation step
 */
Animator.prototype._tick = function() {
    if (Math.abs(this._target - this._current) <
        Math.abs(this._delta)) {
        if (this._animTimeout) {
            this._clearTimeout();
        }

        this._applyValue(this._target);
    } else {
        var me = this;
        this._animTimeout = setTimeout(
            function(){me._tick();}, cfg.animationDelay
        );

        this._applyValue(this._current+this._delta);
    }
}
    

/**
 * Applies current animation frame
 * 
 * @param {Number} value to apply
 */
Animator.prototype._applyValue = function(value) {
    this._current = value;
    this._setter(value);
}


/**
 * Clears animation timeout
 */
Animator.prototype._clearTimeout = function() {
    clearTimeout(this._animTimeout);
    this._animTimeout = null;
}


 // stores the images along with the stretched canvas
var imgCache = {};


/**
 * Represents a single cached stretchable image
 * 
 * Loads an image, creates a stretched canvas
 */
var CachedImg = function(url) {
    if (typeof imgCache[url] != 'undefined') {
        return imgCache[url];
    } else {
        imgCache[url] = this;

        this._url = url;
        this._touchTimeout = null;
        this._ready = new wl.Whenable;
        this.whenReady = this._ready.getSubscriber();

        this._sides = {};  // stretched canvases
        this._data = {};

        this._SVGImage = null;
        this._SVGImageId = null;

        this._download();
    }
}


/**
 * Loads the image
 */
CachedImg.prototype._download = function() {
    if (!this._url) {
        this._init(null);
        this._ready.emit();
    } else {
        this._img = elemSample.img.cloneNode(false);
        this._img.src = this._url;
        this._img.style.display = 'none';

        var me = this;
        this._img.addEventListener('load', function() {
            me._img.parentNode.removeChild(me._img);
            me._init(me._img);
            me._ready.emit();
        }, false);

        this._img.addEventListener('error', function() {
            me._img.parentNode.removeChild(me._img);
            me._init(null);
            me._ready.emit();
        }, false);
        
        document.body.appendChild(this._img);
    }
}


/**
 * Creates the cached copy of rotated canvas (if needed), and
 * returns it afterwards
 * 
 * @param {String} dir direction
 */
CachedImg.prototype.getSide = function(dir) {
    if (typeof this._sides[dir] == 'undefined') {
        this._sides[dir] = this._rotate(this._sides.north, dir);
    }

    return this._sides[dir];
}


/**
 * Creates (if not done yet) an SVG image element containing the
 * stretched image and stored in the common  element,
 * returns its id
 * 
 * @param {String} id of an SVG element with the stretched image
 */
var SVGImageCounter = 0;
CachedImg.prototype.getSVGImageId = function() {
    if (!this._SVGImage) {
        this._SVGImageId ='SVG-Image-'+(SVGImageCounter++)+'-'+UQ;
        var canvas = this._sides.north;
        var url = util.getCanvasDataURL(canvas);
        var defs = util.getCommonSVGDefs();
        this._SVGImage = util.genSVGElement('image', defs, {
            id     : this._SVGImageId,
            x      : '0',
            y      : '0',
            width  : util.px(canvas.width),
            height : util.px(canvas.height),
            preserveAspectRatio : 'none'
        });

        this._SVGImage.setAttributeNS(
            util._xlinkNS, 'xlink:href', url[0]
        );
    }

    return this._SVGImageId;
}


/**
 * Updates image geometry without changing it. Needed for IE,
 * otherwise it will not redraw
 */
CachedImg.prototype.touchSVGImage = function() {
    if (IS_IE && this._SVGImage) {
        if (this._touchTimeout) {
            clearTimeout(this._touchTimeout);
        }

        var me = this;
        this._touchTimeout = setTimeout(
            function() {
                me._touch();
            }, 10
        );
    }
}

CachedImg.prototype._touch = function() {
    this._SVGImage.setAttribute(
        'height', util.px(this._data.stretchedSize)
    );
}


/**
 * @returns {Object} additional data
 */
CachedImg.prototype.getData = function() {
    return this._data;
}


/**
 * After the image is loaded (or failed to load), ininitializes
 * the CachedImg object with its stretched canvas images, and with
 * some additional data later used for animation
 * 
 * @param {Element} image to initalize from, null for load failure
 */
CachedImg.prototype._init = function(image) {
    var original = this._genImageCanvas(image);
    var stretched = this._stretch(original);
    this._sides.north = stretched.canvas;
    this._data = this._genData(stretched.canvas);
    this._data.points = stretched.points;
    this._data.origSize = original.height;
}


/**
 * Generates a canvas containing the data from the provided image,
 * or the default data if image failed to load
 * 
 * @param {Element} image to initalize from, null for load failure
 * 
 * @returns {Element} canvas
 */
CachedImg.prototype._genImageCanvas = function(image) {
    var result;
    if (image) {
        result = util.img2canvas(image);
    } else {
        result = util.getDefaultCanvas();
    }

    return result;
}



/**
 * Stretches the given canvas data and returns the new canvas with
 * the stretched content. The image is stretched in a special way,
 * so that horizontal pixels density is unchanged, but the
 * vertical density is decreased from top to bottom. Pixels on the
 * top edge have the same density as the original image, while the
 * pixels on the bottom edge are 4 times vertically stretched.
 * 
 * The density function
 * 
 *   ro(x) = 45/68*x*x - 24/17*x + 1
 * 
 * results from the following conditions:
 * 
 * 1) ro(0) = 1 (destiny at the top edge equals the orig. image)
 * 2) ro(1) = 1/4 (density at the bottom is 4 times less)
 * 3) ro'(1) = ro2'(0), where:
 *    ro2(x) = 1/4 * ro(x/4), which is a density of the same
 *    image, linearly stretched four times. The last condition
 *    means that the speed of density change for the two images
 *    attached one to another is continuous
 * 
 * @param {Element} canvas containing the original image
 * 
 * @returns {Object} stretched canvas and density points
 */
CachedImg.prototype._stretch = function(canvas) {
    var w = canvas.width;
    var h = canvas.height;

    // if webkit throws an error for a local image,
    // restart Chrome with --allow-file-access-from-files
    // (otherwise load an image from the same origin)
    var data1 = canvas.getContext('2d').getImageData(0, 0, w, h);
    var h2 = h * 68 / 35;
    var h2floor = Math.floor(h2);

    var stretchedCanvas = util.genCanvas(w, h2floor);
    var ctx2 = stretchedCanvas.getContext('2d');
    var data2 = ctx2.createImageData(w, h2floor);
    var D1 = data1.data;
    var D2 = data2.data;

    var ro;        // current density value
    var y2;        // y, stretched image
    var y1;        // y, original image (calculated, float)
    var y1_floor;  // y, original image (floored)
    var y2_norm;   // y2 / h2 (normalized, 0 <= y2_norm <= 1)
    var y2_norm_2; // y2_norm squared
    var y1_norm;   // calculated normalized y of the orig img

    var rate0;     // ratios of the current pixel,
    var rate1;     // and the one on the next row

    var row = w*4; // imageData row (4 channels)
    var idx1;      // current pixel start idx (original image)
    var idx2;      // current pixel start idx (stretched image)

    var col;       // runs through columns (pixels)
    var ch;        // runs through color channels

    // saves the current coordinate of the stretched image
    // indexed by original coordinate (so that it is possible to
    // restore current position of the stretched image by the
    // coordinate of the original image)
    var points = [];

    var _15_68 = 15/68;
    var _12_17 = 12/17;
    var _45_68 = 45/68;
    var _24_17 = 24/17;

    // generating image
    for (y2 = 0; y2 < h2floor; y2++) {
        y2_norm = y2/h2;
        y2_norm_2 = y2_norm * y2_norm;
        // destiny at the point of y2
        ro = _45_68 * y2_norm_2 - _24_17 * y2_norm + 1;

        // normalized coordinate of the original image
        // calculated as antiderivative of density function
        y1_norm =  _15_68 * y2_norm_2 * y2_norm
                 - _12_17 * y2_norm_2
                 +          y2_norm;

        // current y-coordinate on the original image
        y1 = y1_norm * h2;
        y1_floor = Math.floor(y1);

        points[y1_floor] = y2;
       
        rate0 = Math.min(ro, y1_floor + 1 - y1);
        rate1 = ro - rate0;

        idx1 = row*y1_floor;
        idx2 = row*y2;

        for (col = 0; col < w; col++) {
            for (ch = 0; ch < 4; ch++) {
                D2[idx2+ch] = Math.round((
                    rate0 *  D1[idx1+ch] +
                    rate1 * (D1[idx1+ch+row]||0)
                ) / ro);
            }

            idx1 += 4;
            idx2 += 4;
        }
    }

    ctx2.putImageData(data2, 0, 0);

    return {
        canvas: stretchedCanvas,
        points: points
    };
}


/**
 * Generates the canvas rotated in the given direction
 * 
 * @param {Element} north original canvas element
 * @param {String} dir direction to rotate the canvas
 * 
 * @returns {Element} rotated canvas
 */
CachedImg.prototype._rotate = function(north, dir) {
    var w = north.width;
    var h = north.height;

    var rotated;
    if (util.isVertical[dir]) {
        rotated = util.genCanvas(w,h);
    } else {
        rotated = util.genCanvas(h,w);
    }

    var ctx = rotated.getContext('2d');

    switch (dir) {
    case 'east':
        ctx.rotate(Math.PI/2);
        ctx.drawImage(north, 0, -h);
        break;
    case 'south':
        ctx.rotate(Math.PI);
        ctx.drawImage(north, -w, -h);
        break;
    case 'west':
        ctx.rotate(-Math.PI/2);
        ctx.drawImage(north, -w, 0);
        break;
    }

    return rotated;
}


/**
 * Calculates additional data for the given stretched canvas
 * element later reused for animation
 * 
 * @param {Element} canvas to generate data for
 * 
 * @returns {Object} data
 */
CachedImg.prototype._genData = function(canvas) {
    var w = canvas.width;
    var h = canvas.height;

    // size of the side layer
    var maxIntensity = 0;
    var curSize = h;
    for (var i = 1; i < cfg.blocksNumber; i++) {
        curSize /= 4;
        maxIntensity += Math.floor(curSize);
    }

    // how many virtual elements do we need to reach 1 px
    var virtualNum = 1 + Math.ceil(Math.log(1/h) / Math.log(1/4));
    
    // total height of all virtual elements altogether
    var virtualSize = 0;
    curSize = h;
    for (i = 1; i < virtualNum; i++) {
        curSize /= 4;
        virtualSize += Math.floor(curSize);
    }
    
    return {
        // size of the stretched image
        stretchedSize : h,
        // texture size along the side
        sideSize      : w,
        // maximal size of the indicator layer
        maxIntensity : maxIntensity,
        // values used during calculations
        virtualPow   : 1-Math.pow(1/4, virtualNum-1),
        virtualSize3 : virtualSize*3
    };
};


/**
 * Represents an element upgraded with the resize event detector
 * 
 * @param {Element} elem to upgarde
 * @param {Boolean} isBody true if element is body
 * @param {Function} listener to be issued on resize
 */
var Resizer = function(elem, isBody, listener) {
    this._elem = elem;
    this._isBody = isBody;
    this._listener = listener;

    if (this._isBody) {
        window.addEventListener('resize', this._listener, false);

        // initially updating geometry
        if (document.readyState == "complete") {
            this._listener();
        } else {
            window.addEventListener("load", this._listener, false);
        }
    } else {
        this._detector = elemSample.object.cloneNode(false);
        util.setStyle(this._detector, {
            display       : 'block',
            position      : 'absolute',
            top           : '0px',
            left          : '0px',
            height        : '100%',
            width         : '100%',
            overflow      : 'hidden',
            pointerEvents : 'none',
            zIndex        : -2048   // specially for IE
        });

        var me = this;
        this._detector.onload = function() {
            this.contentDocument.defaultView.addEventListener(
                'resize', me._listener, false
            );

            // initially updating geometry
            me._listener();
        }

        this._detector.type = 'text/html';

        if (IS_IE) {
            this._elem.appendChild(this._detector);
            this._detector.data = 'about:blank';
        } else {
            this._detector.data = 'about:blank';
            this._elem.appendChild(this._detector);
        }
    }
};



/**
 * Removes the resize detector from the element
 */
Resizer.prototype.destroy = function() {
    if (this._isBody) {
        window.removeEventListener(
            'resize', this._listener, false
        );
    } else {
        this._elem.removeChild(this._detector);
    }
}



/**
 * Represents a scrollable element shipped with a scrolling
 * indicator on each of four sides
 * 
 * @param {Element} elem to create scrollable indicators for
 */
var Intence = function(elem) {
    this._destroyed = false;
    this._elem = elem;
    this._isBody = (this._elem.nodeName.toLowerCase() == 'body');

    this._cmp = {};  // elements created upon scrollbar removal
    this._sideReady = {}; // info about which sides are initialized
    this._images = {}; // CachedImg instances for each side
    this._indicators = {};  // Indicator instances

    this._totals = {};  // total dimensions for each direction
    this._sizes = {};
    this._addendum = {};  // added to the scroll to prevent jump
    this._lastOrigCoord = {};

    this._createElemStructure();

    var rect = this._cmp.scroller.getBoundingClientRect();
    var scrollWidth = this._cmp.scroller.scrollWidth;
    var scrollHeight = this._cmp.scroller.scrollHeight;

    var i, dir;
    for (i = 0; i < util.dir.length; i++) {
        dir = util.dir[i];
        this._indicators[dir] = null;
        this._sideReady[dir] = false;
        this._addendum[dir] = 0;
        this._lastOrigCoord[dir] = 0;
        
        this._totals[dir] =
            util.isVertical[dir] ? scrollHeight : scrollWidth;
        this._sizes[dir] =
            util.isVertical[dir] ? rect.height : rect.width;
    }

    this._loadImages();
}


/**
 * Returns element
 */
Intence.prototype.getElem = function() {
    return this._elem;
}


/**
 * Upgrades the element with a set of additional elements one
 * inside another so that the scrollbars are properly hidden, but
 * the container geometry is preserved
 * 
 * The resulting structure consists of the following elements:
 * 
 * elem  - initial scrollable element, its original content is
 *  │      taken over, and moves into the container (see below)
 *  │
 *  └─ wrapper  - fits into the elem, has position: relative, so
 *      │         that hosted elements with absolutie position can
 *      │         also fit into the element
 *      │
 *      ├─ resizer  - html object, detects elem resize
 *      │
 *      └─ contextor  - initiates a new stacking context, so that
 *          │          internal z-indices do not mess with the
 *          │          external content
 *          │
 *          ├─ scroller    - the new scrollable element with
 *          │   │            scrollbars (outside of the bounds and
 *          │   │            thus not visible), has z-index: 0 and
 *          │   │            absolute position, which initializes
 *          │   │            another stacking context for the
 *          │   │            hosted content
 *          │   │
 *          │   └─ pusher   - has explicit dimensions updated by
 *          │       │         the resizer event handler, pushes
 *          │       │         the scrollabrs of the scroller out
 *          │       │         of the bounds, has float:left to set
 *          │       │         up a new block formatting context
 *          │       │         (otherwise contained floats would
 *          │       │         affect scroller's geometry)
 *          │       │
 *          │       └─ container  - hosts original content, takes
 *          │           │           over the external margins
 *          │           │           if root elem is body
 *          │           ├─ ...
 *          │           ├─ ...    - original content taken over
 *          │           ├─ ...      from the root elem
 *          │           :
 *          │
 *          │
 *          ├─ west side    - indicator sides, ordered to put
 *          ├─ east side      north and south on top (z-index
 *          ├─ south side     is not used since it messes-up
 *          └─ north side     in IE9)
 */
Intence.prototype._createElemStructure = function() {
    this._createElements();
    this._createResizer();
    this._createSides();
}


/**
 * Creates a set of elements
 */
Intence.prototype._createElements = function() {
    this._cmp.wrapper   = elemSample.div.cloneNode(false);
    this._cmp.contextor = elemSample.div.cloneNode(false);
    this._cmp.scroller  = elemSample.div.cloneNode(false);
    this._cmp.pusher    = elemSample.div.cloneNode(false);
    this._cmp.container = elemSample.div.cloneNode(false);

    var style = {
        elem : {
            overflow : 'hidden',
            padding : '0px'
        },
        wrapper : {
            position : 'relative',
            overflow : 'hidden',
            width    : '100%',
            height   : '100%'
        },
        contextor : {
            position : 'absolute',
            overflow : 'hidden',
            width    : '100%',
            height   : '100%'
        },
        scroller : {
            position  : 'absolute',
            overflow  : 'scroll',
            zIndex   : 0
        },
        pusher : {
            'float' : 'left'
        },
        container : {}
    };

    this._origStyle = {overflow : this._elem.style.overflow};
    if (this._isBody) {
        var margins = [
            'margin', 'marginTop', 'marginRight',
            'marginBottom', 'marginLeft'
        ];

        var cs = window.getComputedStyle(this._elem, null);
        var i, m;
        for (i = 0; i < margins.length; i++) {
            m = margins[i];
            style.container[m] = cs[m];
            this._origStyle[m] = this._elem.style[m];
        }

        style.elem.margin = 0;
    }

    util.setStyle(this._elem, style.elem);
    util.setStyle(this._cmp.wrapper, style.wrapper);
    util.setStyle(this._cmp.contextor, style.contextor);
    util.setStyle(this._cmp.scroller, style.scroller);
    util.setStyle(this._cmp.pusher, style.pusher);
    util.setStyle(this._cmp.container, style.container);

    impl.stackingContext(this._cmp.contextor);
    
    var id = this._elem.getAttribute('id');
    if (id) {
        this._cmp.scroller.setAttribute('id', id+'-scroller');
    }

    util.attachChildren(
        this._cmp.container, util.detachChildren(this._elem)
    );

    this._cmp.pusher.appendChild(this._cmp.container);
    this._cmp.scroller.appendChild(this._cmp.pusher);
    this._cmp.contextor.appendChild(this._cmp.scroller);
    this._cmp.wrapper.appendChild(this._cmp.contextor);
    this._elem.appendChild(this._cmp.wrapper);
}


/**
 * Creates the resizer and subscribes to resize event
 */
Intence.prototype._createResizer = function() {
    var me = this;
    var listener = function() {
        me._setGeometry();
        me._indicate();
    }

    this._resizer =
        new Resizer(this._cmp.wrapper, this._isBody, listener);
}


/**
 * Creates sides to later host the indicators. Sides created in an
 * order so that north and south are on top. Z-index is not used,
 * since then sides would mess-up with external content in IE9
 * (where stacking context is not appled to contextor)
 */
Intence.prototype._createSides = function() {
    this._sides = {};
    var order = ['west','east','south','north'];

    var dir;
    for (var i = 0; i < order.length; i++) {
        dir = order[i];
        this._sides[dir] = createSideElement(dir);
        this._cmp.contextor.appendChild(this._sides[dir]);
    }
}


/**
 * Removes additional elements created by _createElemStructure
 * thus restoring the element into its original state
 */
Intence.prototype._restoreElemStructure = function() {
    this._resizer.destroy();
    
    var children = util.detachChildren(this._cmp.container);
    util.detachChildren(this._elem);

    for (var prop in this._origStyle) {
        if (this._origStyle.hasOwnProperty(prop)) {
            this._elem.style[prop] = this._origStyle[prop];
        }
    }
    
    util.attachChildren(this._elem, children);
}


/**
 * Updates the subcomponents geometry according to the element
 * dimensions
 */
Intence.prototype._setGeometry = function() {
    var geom = this._cmp.wrapper.getBoundingClientRect();
    util.setStyle(this._cmp.pusher, {
        width  : util.px(Math.ceil(geom.width)),
        height : util.px(Math.ceil(geom.height))
    });
}


/**
 * Initiates loading of images corresponding to each side
 */
Intence.prototype._loadImages = function() {
    var me = this;
    var sideInitialized = {};
    var defaultUrl = this._elem.getAttribute('scrollimg')||'';
    var img, dir, url;
    for (var i = 0; i < util.dir.length; i++) {
        dir = util.dir[i];
        url = this._elem.getAttribute(
            'scrollimg'+dir
        );

        img = new CachedImg(url||defaultUrl);
        sideInitialized[dir] = new wl.Whenable;
        img.whenReady(
            (function(dir, img){
                 return function() {
                     if (!me._destroyed) {
                         me._indicators[dir] = new Indicator(
                             dir,
                             me._cmp.contextor,
                             me._sides[dir],
                             img
                         );

                         me._sideReady[dir] = true;
                         sideInitialized[dir].emit();
                     }
                 }
             })(dir, img)
        );

        this._images[dir] = img;
    }
    
    wl.whenAll(
        sideInitialized.north.getSubscriber(),
        sideInitialized.east.getSubscriber(),
        sideInitialized.south.getSubscriber(),
        sideInitialized.west.getSubscriber()
    )(function(){
        me._indicate(true);
    });

    this._cmp.scroller.addEventListener(
        'scroll', function(){me._indicate();}, false
    );
}


/**
 * Updates the scrolling indicators on each side according to the
 * current scroll state of the element
 * 
 * @param {Boolean} init true to perform initial indicate
 */
Intence.prototype._indicate = function(init) {
    var geom = this._cmp.wrapper.getBoundingClientRect();
    var scrollInfo = this._getScrollInfo();
    var beyond = this._getBeyond(geom, scrollInfo);
    var infinite = this._getInfinite();

    for (var i = 0; i < util.dir.length; i++) {
        var dir = util.dir[i];
        if (this._sideReady[dir]) {
            var indicator = this._indicators[dir];
            var data = this._images[dir].getData();

            var sizesChanged = this._haveSizesChanged(dir, geom);
            var totalsChanged =
                this._haveTotalsChanged(dir, scrollInfo);

            var origCoord = this._getOrigCoord(
                dir, beyond, data.origSize,
                totalsChanged || sizesChanged
            );

            var areaSize =
                util.isVertical[dir] ? geom.height : geom.width;

            var intensity = this._getIntensity(
                beyond[dir], infinite[dir],
                data.maxIntensity, areaSize
            );

            var sideOffset =
                beyond[util.isVertical[dir] ? 'west':'north'];

            if (dir == 'north' || dir == 'east') {
                sideOffset = -sideOffset;
            }

            indicator.update(
                geom.width, geom.height, // area geometry
                data.points[origCoord],  // scrolling amount
                sideOffset,              // side offset
                intensity, totalsChanged, init // intensity
            );
        }
    }
}


/**
 * @returns {Object} the area scrolling information
 */
Intence.prototype._getScrollInfo = function() {
    var scroller = this._cmp.scroller;
    return {
        width  : scroller.scrollWidth,
        height : scroller.scrollHeight,
        top    : scroller.scrollTop,
        left   : scroller.scrollLeft
    };
}


/**
 * For the scrollable area returns the amount of pixels scrollable
 * beyond each side
 * 
 * For Opera and zoomed page the distances may be non-integer and
 * it might not be possible to scroll to the end, so the method
 * rounds-up the values
 * 
 * @param {Object} geom geometry returned by getBoundingClientRect
 * @param {Object} scroll area scroll information
 * 
 * @returns {Object}
 */
Intence.prototype._getBeyond = function(geom, scroll) {
    return {
        north : this._fixCoord(scroll.top),
        south : this._fixCoord(
            scroll.height - scroll.top - geom.height
        ),
        west  : this._fixCoord(scroll.left),
        east  : this._fixCoord(
            scroll.width - scroll.left - geom.width
        )
    };
}


/**
 * Fixes the geometry coordinate / scrolling amount which might be
 * reported as negative or non-integer on some browsers /
 * zoom-levels
 * 
 * @param {Number} val
 * 
 * @returns {Number} fixed coordinate (integer >=0)
 */
Intence.prototype._fixCoord = function(val) {
    return Math.max(0, Math.floor(val));
}


/**
 * Returns the coordinate of the original (unstretched) texture
 * which is synced with the scrolling amount
 * 
 * @param {String} dir direction
 * @param {Object} beyond set of scrolling amounts
 * @param {Number} size (height) of the original texture
 * @param {Boolean} keep true to keep the orig coord and update
 *                       the offset instead
 * 
 * @returns {Number} original coordinate
 */
Intence.prototype._getOrigCoord = function(
    dir, beyond, size, keep
) {
    var origPoint = beyond[dir];

    var result = this._mod(origPoint, size);

    if (keep) {
        var diff = result - this._lastOrigCoord[dir];
        this._addendum[dir] -= diff;
        this._addendum[dir] = this._addendum[dir] % size;
    }

    this._lastOrigCoord[dir] = result;
    result += this._addendum[dir];
    result = this._mod(result, size);

    return result;
}


/**
 * Returns the information about which sides are set as being
 * infinitely scrollable with scrollInfinite.. attributes
 * 
 * @returns {Object}
 */
Intence.prototype._getInfinite = function() {
    var result = {}, dir, i;
    for (i = 0; i < util.dir.length; i++) {
        dir = util.dir[i];
        result[dir] = this._elem.getAttribute(
            'scrollinfinite'+dir
        ) !== null;
    }

    return result;
}



/**
 * Checks if total size of the area changed in the corresponding
 * dimension. This might happen either due to resize or due to
 * dynamically changed geometry - in both cases the intensity mask
 * is updated, but not the blocks coordinates
 * 
 * @param {String} dir direction
 * @param {Object} geom geometry returned by getBoundingClientRect
 * 
 * @returns {Boolean} true if sizes changed, false otherwise
 */
Intence.prototype._haveSizesChanged = function(dir, geom) {
    var changed = false;

    var newSize = util.isVertical[dir] ? geom.height : geom.width;
    if (this._sizes[dir] != newSize) {
        changed = true;
        this._sizes[dir] = newSize;
    }

    return changed;
}


/**
 * Checks if total size of the scrollable distance changed. This
 * might happen either due to resize or due to dynamically changed
 * content - in both cases the intensity mask is updated, but not
 * the blocks coordinates
 * 
 * @param {String} dir direction
 * @param {Object} scroll data of the scroller
 * 
 * @returns {Boolean} true if total dimensions changed
 */
Intence.prototype._haveTotalsChanged = function(dir, scroll) {
    var changed = false;

    var el = this._cmp.scroller;
    var newTotal = util.isVertical[dir] ?
        scroll.height : scroll.width;
    if (this._totals[dir] != newTotal) {
        changed = true;
        this._totals[dir] = newTotal;
    }

    return changed;
}


/**
 * Returns the division remainder (0 to value-1)
 * 
 * @param {Number} value
 * @param {Number} module
 */
Intence.prototype._mod = function(value, module) {
    value = value % module;
    value += module;
    value = value % module;
    if (value == module) {
        value = 0;
    }

    return value;
}


/**
 * Returns the size of the blocks container which depends on the
 * scroll amount beyond the border
 * 
 * @param {Number} beyond number of px beyond the border
 * @param {Boolean} infinite true if side is set as infinite
 * @param {Number} maxSize of the container
 * @param {Number} areaSize visible area size
 * 
 * @returns {Number} current size of the container
 */
Intence.prototype._getIntensity = function(
    beyond, infinite, maxSize, areaSize
) {
    var intensity =
        infinite ? 1 : 1 - 1 / (beyond*cfg.indicatorGain + 1);
    var max = Math.min(maxSize, cfg.indicatorMaxArea * areaSize);
    var pad = 1;
    var size = pad + Math.ceil(intensity * (max-pad))
    return size;
}


/**
 * Removes the additional indicator elements, thus restores the
 * element in its original state
 */
Intence.prototype.destroy = function() {
    this._restoreElemStructure();
    this._destroyed = true;
}