Subversion Repositories Applications.framework

/*

 * iviewer Widget for jQuery UI

 * https://github.com/can3p/iviewer

 *

 * Copyright (c) 2009 - 2012 Dmitry Petrov

 * Dual licensed under the MIT and GPL licenses.

 *  - http://www.opensource.org/licenses/mit-license.php

 *  - http://www.gnu.org/copyleft/gpl.html

 *

 * Author: Dmitry Petrov

 * Version: 0.7.7

 */

( function( $, undefined ) {

//this code was taken from the https://github.com/furf/jquery-ui-touch-punch

var mouseEvents = {

        touchstart: 'mousedown',

        touchmove: 'mousemove',

        touchend: 'mouseup'

    },

    gesturesSupport = 'ongesturestart' in document.createElement('div');

/**

 * Convert a touch event to a mouse-like

 */

function makeMouseEvent (event) {

    var touch = event.originalEvent.changedTouches[0];

    return $.extend(event, {

        type:    mouseEvents[event.type],

        which:   1,

        pageX:   touch.pageX,

        pageY:   touch.pageY,

        screenX: touch.screenX,

        screenY: touch.screenY,

        clientX: touch.clientX,

        clientY: touch.clientY,

        isTouchEvent: true

    });

}

var mouseProto = $.ui.mouse.prototype,

    _mouseInit = $.ui.mouse.prototype._mouseInit;

mouseProto._mouseInit = function() {

    var self = this;

    self._touchActive = false;

    this.element.bind( 'touchstart.' + this.widgetName, function(event) {

        if (gesturesSupport && event.originalEvent.touches.length > 1) { return; }

        self._touchActive = true;

        return self._mouseDown(makeMouseEvent(event));

    })

    var self = this;

    // these delegates are required to keep context

    this._mouseMoveDelegate = function(event) {

        if (gesturesSupport && event.originalEvent.touches && event.originalEvent.touches.length > 1) { return; }

        if (self._touchActive) {

            return self._mouseMove(makeMouseEvent(event));

        }

    };

    this._mouseUpDelegate = function(event) {

        if (self._touchActive) {

            self._touchActive = false;

            return self._mouseUp(makeMouseEvent(event));

        }

    };

    $(document)

        .bind('touchmove.'+ this.widgetName, this._mouseMoveDelegate)

        .bind('touchend.' + this.widgetName, this._mouseUpDelegate);

    _mouseInit.apply(this);

}

/**

 * Simple implementation of jQuery like getters/setters

 * var val = something();

 * something(val);

 */

var setter = function(setter, getter) {

    return function(val) {

        if (arguments.length === 0) {

            return getter.apply(this);

        } else {

            setter.apply(this, arguments);

        }

    }

};

/**

 * Internet explorer rotates image relative left top corner, so we should

 * shift image when it's rotated.

 */

var ieTransforms = {

        '0': {

            marginLeft: 0,

            marginTop: 0,

            filter: 'progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod="auto expand")'

        },

        '90': {

            marginLeft: -1,

            marginTop: 1,

            filter: 'progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=-1, M21=1, M22=0, SizingMethod="auto expand")'

        },

        '180': {

            marginLeft: 0,

            marginTop: 0,

            filter: 'progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, SizingMethod="auto expand")'

        },

        '270': {

            marginLeft: -1,

            marginTop: 1,

            filter: 'progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=1, M21=-1, M22=0, SizingMethod="auto expand")'

        }

    },

    // this test is the inversion of the css filters test from the modernizr project

    useIeTransforms = function() {

        var modElem = document.createElement('modernizr'),

		mStyle = modElem.style,

		omPrefixes = 'Webkit Moz O ms',

		domPrefixes = omPrefixes.toLowerCase().split(' '),

        	props = ("transform" + ' ' + domPrefixes.join("Transform ") + "Transform").split(' ');

        for ( var i in props ) {

            var prop = props[i];

            if ( !$.contains(prop, "-") && mStyle[prop] !== undefined ) {

                return false;

            }

        }

        return true;

    }();

$.widget( "ui.iviewer", $.ui.mouse, {

    widgetEventPrefix: "iviewer",

    options : {

        /**

        * start zoom value for image, not used now

        * may be equal to "fit" to fit image into container or scale in %

        **/

        zoom: "fit",

        /**

        * base value to scale image

        **/

        zoom_base: 100,

        /**

        * maximum zoom

        **/

        zoom_max: 800,

        /**

        * minimum zoom

        **/

        zoom_min: 25,

        /**

        * base of rate multiplier.

        * zoom is calculated by formula: zoom_base * zoom_delta^rate

        **/

        zoom_delta: 1.4,

        /**

        * whether the zoom should be animated.

        */

        zoom_animation: true,

        /**

        * if true plugin doesn't add its own controls

        **/

        ui_disabled: false,

        /**

         * If false mousewheel will be disabled

         */

        mousewheel: true,

        /**

        * if false, plugin doesn't bind resize event on window and this must

        * be handled manually

        **/

        update_on_resize: true,

        /**

        * event is triggered when zoom value is changed

        * @param int new zoom value

        * @return boolean if false zoom action is aborted

        **/

        onZoom: jQuery.noop,

        /**

        * event is triggered when zoom value is changed after image is set to the new dimensions

        * @param int new zoom value

        * @return boolean if false zoom action is aborted

        **/

        onAfterZoom: jQuery.noop,

        /**

        * event is fired on drag begin

        * @param object coords mouse coordinates on the image

        * @return boolean if false is returned, drag action is aborted

        **/

        onStartDrag: jQuery.noop,

        /**

        * event is fired on drag action

        * @param object coords mouse coordinates on the image

        **/

        onDrag: jQuery.noop,

        /**

        * event is fired on drag stop

        * @param object coords mouse coordinates on the image

        **/

        onStopDrag: jQuery.noop,

        /**

        * event is fired when mouse moves over image

        * @param object coords mouse coordinates on the image

        **/

        onMouseMove: jQuery.noop,

        /**

        * mouse click event

        * @param object coords mouse coordinates on the image

        **/

        onClick: jQuery.noop,

        /**

        * event is fired when image starts to load

        */

        onStartLoad: null,

        /**

        * event is fired, when image is loaded and initially positioned

        */

        onFinishLoad: null,

        /**

        * event is fired when image load error occurs

        */

        onErrorLoad: null

    },

    _create: function() {

        var me = this;

        //drag variables

        this.dx = 0;

        this.dy = 0;

        /* object containing actual information about image

        *   @img_object.object - jquery img object

        *   @img_object.orig_{width|height} - original dimensions

        *   @img_object.display_{width|height} - actual dimensions

        */

        this.img_object = {};

        this.zoom_object = {}; //object to show zoom status

        this._angle = 0;

        this.current_zoom = this.options.zoom;

        if(this.options.src === null){

            return;

        }

        this.container = this.element;

        this._updateContainerInfo();

        //init container

        this.container.css("overflow","hidden");

        if (this.options.update_on_resize == true) {

            $(window).resize(function() {

                me.update();

            });

        }

        this.img_object = new $.ui.iviewer.ImageObject(this.options.zoom_animation);

        if (this.options.mousewheel) {

            this.container.bind('mousewheel.iviewer', function(ev, delta)

                {

                    //this event is there instead of containing div, because

                    //at opera it triggers many times on div

                    var zoom = (delta > 0)?1:-1,

                        container_offset = me.container.offset(),

                        mouse_pos = {

                            //jquery.mousewheel 3.1.0 uses strange MozMousePixelScroll event

                            //which is not being fixed by jQuery.Event

                            x: (ev.pageX || ev.originalEvent.pageX) - container_offset.left,

                            y: (ev.pageY || ev.originalEvent.pageX) - container_offset.top

                        };

                    me.zoom_by(zoom, mouse_pos);

                    return false;

                });

            if (gesturesSupport) {

                var gestureThrottle = +new Date();

                var originalScale, originalCenter;

                this.img_object.object()

                    // .bind('gesturestart', function(ev) {

                    .bind('touchstart', function(ev) {

                        originalScale = me.current_zoom;

                        var touches = ev.originalEvent.touches,

                            container_offset;

                        if (touches.length == 2) {

                            container_offset = me.container.offset();

                            originalCenter = {

                                x: (touches[0].pageX + touches[1].pageX) / 2  - container_offset.left,

                                y: (touches[0].pageY + touches[1].pageY) / 2 - container_offset.top

                            };

                        } else {

                            originalCenter = null;

                        }

                    }).bind('gesturechange', function(ev) {

                        //do not want to import throttle function from underscore

                        var d = +new Date();

                        if ((d - gestureThrottle) < 50) { return; }

                        gestureThrottle = d;

                        var zoom = originalScale * ev.originalEvent.scale;

                        me.set_zoom(zoom, originalCenter);

                        ev.preventDefault();

                    }).bind('gestureend', function(ev) {

                        originalCenter = null;

                    });

            }

        }

        //init object

        this.img_object.object()

            //bind mouse events

            .click(function(e){return me._click(e)})

                .prependTo(this.container);

        this.container.bind('mousemove', function(ev) { me._handleMouseMove(ev); });

        this.loadImage(this.options.src);

        if(!this.options.ui_disabled)

        {

            this.createui();

        }

        this._mouseInit();

    },

    destroy: function() {

        $.Widget.prototype.destroy.call( this );

        this._mouseDestroy();

        this.img_object.object().remove();

        this.container.off('.iviewer');

        this.container.css('overflow', ''); //cleanup styles on destroy

    },

    _updateContainerInfo: function()

    {

        this.options.height = this.container.height();

        this.options.width = this.container.width();

    },

    update: function()

    {

        this._updateContainerInfo()

        this.setCoords(this.img_object.x(), this.img_object.y());

    },

    loadImage: function( src )

    {

        this.current_zoom = this.options.zoom;

        var me = this;

        this._trigger('onStartLoad', 0, src);

        this.container.addClass("iviewer_loading");

        this.img_object.load(src, function() {

            me._imageLoaded(src);

        }, function() {

            me._trigger("onErrorLoad", 0, src);

        });

    },

    _imageLoaded: function(src) {

        this.container.removeClass("iviewer_loading");

        this.container.addClass("iviewer_cursor");

        if(this.options.zoom == "fit"){

            this.fit(true);

        }

        else {

            this.set_zoom(this.options.zoom, true);

        }

        this._trigger('onFinishLoad', 0, src);

    },

    /**

    * fits image in the container

    *

    * @param {boolean} skip_animation

    **/

    fit: function(skip_animation)

    {

        var aspect_ratio = this.img_object.orig_width() / this.img_object.orig_height();

        var window_ratio = this.options.width /  this.options.height;

        var choose_left = (aspect_ratio > window_ratio);

        var new_zoom = 0;

        if(choose_left){

            new_zoom = this.options.width / this.img_object.orig_width() * 100;

        }

        else {

            new_zoom = this.options.height / this.img_object.orig_height() * 100;

        }

      this.set_zoom(new_zoom, skip_animation);

    },

    /**

    * center image in container

    **/

    center: function()

    {

        this.setCoords(-Math.round((this.img_object.display_width() - this.options.width)/2),

                -Math.round((this.img_object.display_height() - this.options.height)/2));

    },

    /**

    *   move a point in container to the center of display area

    *   @param x a point in container

    *   @param y a point in container

    **/

    moveTo: function(x, y)

    {

        var dx = x-Math.round(this.options.width/2);

        var dy = y-Math.round(this.options.height/2);

        var new_x = this.img_object.x() - dx;

        var new_y = this.img_object.y() - dy;

        this.setCoords(new_x, new_y);

    },

    /**

     * Get container offset object.

     */

    getContainerOffset: function() {

        return jQuery.extend({}, this.container.offset());

    },

    /**

    * set coordinates of upper left corner of image object

    **/

    setCoords: function(x,y)

    {

        //do nothing while image is being loaded

        if(!this.img_object.loaded()) { return; }

        var coords = this._correctCoords(x,y);

        this.img_object.x(coords.x);

        this.img_object.y(coords.y);

    },

    _correctCoords: function( x, y )

    {

        x = parseInt(x, 10);

        y = parseInt(y, 10);

        //check new coordinates to be correct (to be in rect)

        if(y > 0){

            y = 0;

        }

        if(x > 0){

            x = 0;

        }

        if(y + this.img_object.display_height() < this.options.height){

            y = this.options.height - this.img_object.display_height();

        }

        if(x + this.img_object.display_width() < this.options.width){

            x = this.options.width - this.img_object.display_width();

        }

        if(this.img_object.display_width() <= this.options.width){

            x = -(this.img_object.display_width() - this.options.width)/2;

        }

        if(this.img_object.display_height() <= this.options.height){

            y = -(this.img_object.display_height() - this.options.height)/2;

        }

        return { x: x, y:y };

    },

    /**

    * convert coordinates on the container to the coordinates on the image (in original size)

    *

    * @return object with fields x,y according to coordinates or false

    * if initial coords are not inside image

    **/

    containerToImage : function (x,y)

    {

        var coords = { x : x - this.img_object.x(),

                 y :  y - this.img_object.y()

        };

        coords = this.img_object.toOriginalCoords(coords);

        return { x :  util.descaleValue(coords.x, this.current_zoom),

                 y :  util.descaleValue(coords.y, this.current_zoom)

        };

    },

    /**

    * convert coordinates on the image (in original size, and zero angle) to the coordinates on the container

    *

    * @return object with fields x,y according to coordinates

    **/

    imageToContainer : function (x,y)

    {

        var coords = {

                x : util.scaleValue(x, this.current_zoom),

                y : util.scaleValue(y, this.current_zoom)

            };

        return this.img_object.toRealCoords(coords);

    },

    /**

    * get mouse coordinates on the image

    * @param e - object containing pageX and pageY fields, e.g. mouse event object

    *

    * @return object with fields x,y according to coordinates or false

    * if initial coords are not inside image

    **/

    _getMouseCoords : function(e)

    {

        var containerOffset = this.container.offset();

            coords = this.containerToImage(e.pageX - containerOffset.left, e.pageY - containerOffset.top);

        return coords;

    },

    /**

    * set image scale to the new_zoom

    *

    * @param {number} new_zoom image scale in %

    * @param {boolean} skip_animation

    * @param {x: number, y: number} Coordinates of point the should not be moved on zoom. The default is the center of image.

    **/

    set_zoom: function(new_zoom, skip_animation, zoom_center)

    {

        if (this._trigger('onZoom', 0, new_zoom) == false) {

            return;

        }

        //do nothing while image is being loaded

        if(!this.img_object.loaded()) { return; }

        zoom_center = zoom_center || {

            x: Math.round(this.options.width/2),

            y: Math.round(this.options.height/2)

        }

        if(new_zoom <  this.options.zoom_min)

        {

            new_zoom = this.options.zoom_min;

        }

        else if(new_zoom > this.options.zoom_max)

        {

            new_zoom = this.options.zoom_max;

        }

        /* we fake these values to make fit zoom properly work */

        if(this.current_zoom == "fit")

        {

            var old_x = zoom_center.x + Math.round(this.img_object.orig_width()/2);

            var old_y = zoom_center.y + Math.round(this.img_object.orig_height()/2);

            this.current_zoom = 100;

        }

        else {

            var old_x = -this.img_object.x() + zoom_center.x;

            var old_y = -this.img_object.y() + zoom_center.y

        }

        var new_width = util.scaleValue(this.img_object.orig_width(), new_zoom);

        var new_height = util.scaleValue(this.img_object.orig_height(), new_zoom);

        var new_x = util.scaleValue( util.descaleValue(old_x, this.current_zoom), new_zoom);

        var new_y = util.scaleValue( util.descaleValue(old_y, this.current_zoom), new_zoom);

        new_x = zoom_center.x - new_x;

        new_y = zoom_center.y - new_y;

        new_width = Math.floor(new_width);

        new_height = Math.floor(new_height);

        new_x = Math.floor(new_x);

        new_y = Math.floor(new_y);

        this.img_object.display_width(new_width);

        this.img_object.display_height(new_height);

        var coords = this._correctCoords( new_x, new_y ),

            self = this;

        this.img_object.setImageProps(new_width, new_height, coords.x, coords.y,

                                        skip_animation, function() {

            self._trigger('onAfterZoom', 0, new_zoom );

        });

        this.current_zoom = new_zoom;

        this.update_status();

    },

    /**

    * changes zoom scale by delta

    * zoom is calculated by formula: zoom_base * zoom_delta^rate

    * @param Integer delta number to add to the current multiplier rate number

    * @param {x: number, y: number=} Coordinates of point the should not be moved on zoom.

    **/

    zoom_by: function(delta, zoom_center)

    {

        var closest_rate = this.find_closest_zoom_rate(this.current_zoom);

        var next_rate = closest_rate + delta;

        var next_zoom = this.options.zoom_base * Math.pow(this.options.zoom_delta, next_rate)

        if(delta > 0 && next_zoom < this.current_zoom)

        {

            next_zoom *= this.options.zoom_delta;

        }

        if(delta < 0 && next_zoom > this.current_zoom)

        {

            next_zoom /= this.options.zoom_delta;

        }

        this.set_zoom(next_zoom, undefined, zoom_center);

    },

    /**

    * Rotate image

    * @param {num} deg Degrees amount to rotate. Positive values rotate image clockwise.

    *     Currently 0, 90, 180, 270 and -90, -180, -270 values are supported

    *

    * @param {boolean} abs If the flag is true if, the deg parameter will be considered as

    *     a absolute value and relative otherwise.

    * @return {num|null} Method will return current image angle if called without any arguments.

    **/

    angle: function(deg, abs) {

        if (arguments.length === 0) { return this.img_object.angle(); }

        if (deg < -270 || deg > 270 || deg % 90 !== 0) { return; }

        if (!abs) { deg += this.img_object.angle(); }

        if (deg < 0) { deg += 360; }

        if (deg >= 360) { deg -= 360; }

        if (deg === this.img_object.angle()) { return; }

        this.img_object.angle(deg);

        //the rotate behavior is different in all editors. For now we  just center the

        //image. However, it will be better to try to keep the position.

        this.center();

        this._trigger('angle', 0, { angle: this.img_object.angle() });

    },

    /**

    * finds closest multiplier rate for value

    * basing on zoom_base and zoom_delta values from settings

    * @param Number value zoom value to examine

    **/

    find_closest_zoom_rate: function(value)

    {

        if(value == this.options.zoom_base)

        {

            return 0;

        }

        function div(val1,val2) { return val1 / val2 };

        function mul(val1,val2) { return val1 * val2 };

        var func = (value > this.options.zoom_base)?mul:div;

        var sgn = (value > this.options.zoom_base)?1:-1;

        var mltplr = this.options.zoom_delta;

        var rate = 1;

        while(Math.abs(func(this.options.zoom_base, Math.pow(mltplr,rate)) - value) >

              Math.abs(func(this.options.zoom_base, Math.pow(mltplr,rate+1)) - value))

        {

            rate++;

        }

        return sgn * rate;

    },

    /* update scale info in the container */

    update_status: function()

    {

        if(!this.options.ui_disabled)

        {

            var percent = Math.round(100*this.img_object.display_height()/this.img_object.orig_height());

            if(percent)

            {

                this.zoom_object.html(percent + "%");

            }

        }

    },

    /**

     * Get some information about the image.

     *     Currently orig_(width|height), display_(width|height), angle, zoom and src params are supported.

     *

     *  @param {string} parameter to check

     *  @param {boolean} withoutRotation if param is orig_width or orig_height and this flag is set to true,

     *      method will return original image width without considering rotation.

     *

     */

    info: function(param, withoutRotation) {

        if (!param) { return; }

        switch (param) {

            case 'orig_width':

            case 'orig_height':

                if (withoutRotation) {

                    return (this.img_object.angle() % 180 === 0 ? this.img_object[param]() :

                            param === 'orig_width' ? this.img_object.orig_height() :

                                                        this.img_object.orig_width());

                } else {

                    return this.img_object[param]();

                }

            case 'display_width':

            case 'display_height':

            case 'angle':

                return this.img_object[param]();

            case 'zoom':

                return this.current_zoom;

            case 'src':

                return this.img_object.object().attr('src');

            case 'coords':

                return {

                    x: this.img_object.x(),

                    y: this.img_object.y()

                };

        }

    },

    /**

    *   callback for handling mousdown event to start dragging image

    **/

    _mouseStart: function( e )

    {

        $.ui.mouse.prototype._mouseStart.call(this, e);

        if (this._trigger('onStartDrag', 0, this._getMouseCoords(e)) === false) {

            return false;

        }

        /* start drag event*/

        this.container.addClass("iviewer_drag_cursor");

        //#10: fix movement quirks for ipad

        this._dragInitialized = !(e.originalEvent.changedTouches && e.originalEvent.changedTouches.length==1);

        this.dx = e.pageX - this.img_object.x();

        this.dy = e.pageY - this.img_object.y();

        return true;

    },

    _mouseCapture: function( e ) {

        return true;

    },

    /**

     * Handle mouse move if needed. User can avoid using this callback, because

     *    he can get the same information through public methods.

     *  @param {jQuery.Event} e

     */

    _handleMouseMove: function(e) {

        this._trigger('onMouseMove', e, this._getMouseCoords(e));

    },

    /**

    *   callback for handling mousemove event to drag image

    **/

    _mouseDrag: function(e)

    {

        $.ui.mouse.prototype._mouseDrag.call(this, e);

        //#10: imitate mouseStart, because we can get here without it on iPad for some reason

        if (!this._dragInitialized) {

            this.dx = e.pageX - this.img_object.x();

            this.dy = e.pageY - this.img_object.y();

            this._dragInitialized = true;

        }

        var ltop =  e.pageY - this.dy;

        var lleft = e.pageX - this.dx;

        this.setCoords(lleft, ltop);

        this._trigger('onDrag', e, this._getMouseCoords(e));

        return false;

    },

    /**

    *   callback for handling stop drag

    **/

    _mouseStop: function(e)

    {

        $.ui.mouse.prototype._mouseStop.call(this, e);

        this.container.removeClass("iviewer_drag_cursor");

        this._trigger('onStopDrag', 0, this._getMouseCoords(e));

    },

    _click: function(e)

    {

        this._trigger('onClick', 0, this._getMouseCoords(e));

    },

    /**

    *   create zoom buttons info box

    **/

    createui: function()

    {

        var me=this;

        $("<div>", { 'class': "iviewer_zoom_in iviewer_common iviewer_button"})

                    .bind('mousedown touchstart',function(){me.zoom_by(1); return false;})

                    .appendTo(this.container);

        $("<div>", { 'class': "iviewer_zoom_out iviewer_common iviewer_button"})

                    .bind('mousedown touchstart',function(){me.zoom_by(- 1); return false;})

                    .appendTo(this.container);

        $("<div>", { 'class': "iviewer_zoom_zero iviewer_common iviewer_button"})

                    .bind('mousedown touchstart',function(){me.set_zoom(100); return false;})

                    .appendTo(this.container);

        $("<div>", { 'class': "iviewer_zoom_fit iviewer_common iviewer_button"})

                    .bind('mousedown touchstart',function(){me.fit(this); return false;})

                    .appendTo(this.container);

        this.zoom_object = $("<div>").addClass("iviewer_zoom_status iviewer_common")

                                    .appendTo(this.container);

        $("<div>", { 'class': "iviewer_rotate_left iviewer_common iviewer_button"})

                    .bind('mousedown touchstart',function(){me.angle(-90); return false;})

                    .appendTo(this.container);

        $("<div>", { 'class': "iviewer_rotate_right iviewer_common iviewer_button" })

                    .bind('mousedown touchstart',function(){me.angle(90); return false;})

                    .appendTo(this.container);

        this.update_status(); //initial status update

    }

} );

/**

 * @class $.ui.iviewer.ImageObject Class represents image and provides public api without

 *     extending image prototype.

 * @constructor

 * @param {boolean} do_anim Do we want to animate image on dimension changes?

 */

$.ui.iviewer.ImageObject = function(do_anim) {

    this._img = $("<img>")

            //this is needed, because chromium sets them auto otherwise

            .css({ position: "absolute", top :"0px", left: "0px"});

    this._loaded = false;

    this._swapDimensions = false;

    this._do_anim = do_anim || false;

    this.x(0, true);

    this.y(0, true);

    this.angle(0);

};

/** @lends $.ui.iviewer.ImageObject.prototype */

(function() {

    /**

     * Restore initial object state.

     *

     * @param {number} w Image width.

     * @param {number} h Image height.

     */

    this._reset = function(w, h) {

        this._angle = 0;

        this._swapDimensions = false;

        this.x(0);

        this.y(0);

        this.orig_width(w);

        this.orig_height(h);

        this.display_width(w);

        this.display_height(h);

    };

    /**

     * Check if image is loaded.

     *

     * @return {boolean}

     */

    this.loaded = function() { return this._loaded; };

    /**

     * Load image.

     *

     * @param {string} src Image url.

     * @param {Function=} loaded Function will be called on image load.

     */

    this.load = function(src, loaded, error) {

        var self = this;

        loaded = loaded || jQuery.noop;

        this._loaded = false;

        //If we assign new image url to the this._img IE9 fires onload event and image width and

        //height are set to zero. So, we create another image object and load image through it.

        var img = new Image();

        img.onload = function() {

            self._loaded = true;

            self._reset(this.width, this.height);

            self._img

                .removeAttr("width")

                .removeAttr("height")

                .removeAttr("style")

                //max-width is reset, because plugin breaks in the twitter bootstrap otherwise

                .css({ position: "absolute", top :"0px", left: "0px", maxWidth: "none"})

            self._img[0].src = src;

            loaded();

        };

        img.onerror = error;

        //we need this because sometimes internet explorer 8 fires onload event

        //right after assignment (synchronously)

        setTimeout(function() {

            img.src = src;

        }, 0);

        this.angle(0);

    };

    this._dimension = function(prefix, name) {

        var horiz = '_' + prefix + '_' + name,

            vert = '_' + prefix + '_' + (name === 'height' ? 'width' : 'height');

        return setter(function(val) {

                this[this._swapDimensions ? horiz: vert] = val;

            },

            function() {

                return this[this._swapDimensions ? horiz: vert];

            });

    };

    /**

     * Getters and setter for common image dimensions.

     *    display_ means real image tag dimensions

     *    orig_ means physical image dimensions.

     *  Note, that dimensions are swapped if image is rotated. It necessary,

     *  because as little as possible code should know about rotation.

     */

    this.display_width = this._dimension('display', 'width'),

    this.display_height = this._dimension('display', 'height'),

    this.display_diff = function() { return Math.floor( this.display_width() - this.display_height() ) };

    this.orig_width = this._dimension('orig', 'width'),

    this.orig_height = this._dimension('orig', 'height'),

    /**

     * Setter for  X coordinate. If image is rotated we need to additionaly shift an

     *     image to map image coordinate to the visual position.

     *

     * @param {number} val Coordinate value.

     * @param {boolean} skipCss If true, we only set the value and do not touch the dom.

     */

    this.x = setter(function(val, skipCss) {

            this._x = val;

            if (!skipCss) {

                this._finishAnimation();

                this._img.css("left",this._x + (this._swapDimensions ? this.display_diff() / 2 : 0) + "px");

            }

        },

        function() {

            return this._x;

        });

    /**

     * Setter for  Y coordinate. If image is rotated we need to additionaly shift an

     *     image to map image coordinate to the visual position.

     *

     * @param {number} val Coordinate value.

     * @param {boolean} skipCss If true, we only set the value and do not touch the dom.

     */

    this.y = setter(function(val, skipCss) {

            this._y = val;

            if (!skipCss) {

                this._finishAnimation();

                this._img.css("top",this._y - (this._swapDimensions ? this.display_diff() / 2 : 0) + "px");

            }

        },

       function() {

            return this._y;

       });

    /**

     * Perform image rotation.

     *

     * @param {number} deg Absolute image angle. The method will work with values 0, 90, 180, 270 degrees.

     */

    this.angle = setter(function(deg) {

            var prevSwap = this._swapDimensions;

            this._angle = deg;