/*

 * imgAreaSelect jQuery plugin

 *

 * Copyright (c) 2008-2013 Michal Wojciechowski (odyniec.net)

 *

 * Dual licensed under the MIT (MIT-LICENSE.txt)

 * and GPL (GPL-LICENSE.txt) licenses.

 *

 * https://github.com/odyniec/imgareaselect

 *

 */

(function($) {

/*

 * Math functions will be used extensively, so it's convenient to make a few

 * shortcuts

 */

var abs = Math.abs,

    max = Math.max,

    min = Math.min,

/**

 * Create a new HTML div element

 *

 * @return A jQuery object representing the new element

 */

function div() {

    return $('<div/>');

}

/**

 * imgAreaSelect initialization

 *

 * @param img

 *            A HTML image element to attach the plugin to

 * @param options

 *            An options object

 */

$.imgAreaSelect = function (img, options) {

    var

        /* jQuery object representing the image */

        $img = $(img),

        /* Has the image finished loading? */

        imgLoaded,

        /* Plugin elements */

        /* Container box */

        $box = div(),

        /* Selection area */

        $area = div(),

        /* Border (four divs) */

        $border = div().add(div()).add(div()).add(div()),

        /* Outer area (four divs) */

        $outer = div().add(div()).add(div()).add(div()),

        /* Handles (empty by default, initialized in setOptions()) */

        $handles = $([]),

        /*

         * Additional element to work around a cursor problem in Opera

         * (explained later)

         */

        $areaOpera,

        /* Image position (relative to viewport) */

        left, top,

        /* Image offset (as returned by .offset()) */

        imgOfs = { left: 0, top: 0 },

        /* Image dimensions (as returned by .width() and .height()) */

        imgWidth, imgHeight,

        /*

         * jQuery object representing the parent element that the plugin

         * elements are appended to

         */

        $parent,

        /* Parent element offset (as returned by .offset()) */

        parOfs = { left: 0, top: 0 },

        /* Base z-index for plugin elements */

        zIndex = 0,

        /* Plugin elements position */

        position = 'absolute',

        /* X/Y coordinates of the starting point for move/resize operations */

        startX, startY,

        /* Horizontal and vertical scaling factors */

        scaleX, scaleY,

        /* Current resize mode ("nw", "se", etc.) */

        resize,

        /* Selection area constraints */

        minWidth, minHeight, maxWidth, maxHeight,

        /* Aspect ratio to maintain (floating point number) */

        aspectRatio,

        /* Are the plugin elements currently displayed? */

        shown,

        /* Current selection (relative to parent element) */

        x1, y1, x2, y2,

        /* Current selection (relative to scaled image) */

        selection = { x1: 0, y1: 0, x2: 0, y2: 0, width: 0, height: 0 },

        /* Document element */

        docElem = document.documentElement,

        /* User agent */

        ua = navigator.userAgent,

        /* Various helper variables used throughout the code */

        $p, d, i, o, w, h, adjusted;

    /*

     * Translate selection coordinates (relative to scaled image) to viewport

     * coordinates (relative to parent element)

     */

    /**

     * Translate selection X to viewport X

     *

     * @param x

     *            Selection X

     * @return Viewport X

     */

    function viewX(x) {

        return x + imgOfs.left - parOfs.left;

    }

    /**

     * Translate selection Y to viewport Y

     *

     * @param y

     *            Selection Y

     * @return Viewport Y

     */

    function viewY(y) {

        return y + imgOfs.top - parOfs.top;

    }

    /*

     * Translate viewport coordinates to selection coordinates

     */

    /**

     * Translate viewport X to selection X

     *

     * @param x

     *            Viewport X

     * @return Selection X

     */

    function selX(x) {

        return x - imgOfs.left + parOfs.left;

    }

    /**

     * Translate viewport Y to selection Y

     *

     * @param y

     *            Viewport Y

     * @return Selection Y

     */

    function selY(y) {

        return y - imgOfs.top + parOfs.top;

    }

    /*

     * Translate event coordinates (relative to document) to viewport

     * coordinates

     */

    /**

     * Get event X and translate it to viewport X

     *

     * @param event

     *            The event object

     * @return Viewport X

     */

    function evX(event) {

        return max(event.pageX || 0, touchCoords(event).x) - parOfs.left;

    }

    /**

     * Get event Y and translate it to viewport Y

     *

     * @param event

     *            The event object

     * @return Viewport Y

     */

    function evY(event) {

        return max(event.pageY || 0, touchCoords(event).y) - parOfs.top;

    }

    /**

     * Get X and Y coordinates of a touch event

     *

     * @param event

     *            The event object

     * @return Coordinates object

     */

    function touchCoords(event) {

        var oev = event.originalEvent || {};

        if (oev.touches && oev.touches.length)

            return { x: oev.touches[0].pageX, y: oev.touches[0].pageY };

        else

            return { x: 0, y: 0 };

    }

    /**

     * Get the current selection

     *

     * @param noScale

     *            If set to <code>true</code>, scaling is not applied to the

     *            returned selection

     * @return Selection object

     */

    function getSelection(noScale) {

        var sx = noScale || scaleX, sy = noScale || scaleY;

    }

    /**

     * Set the current selection

     *

     * @param x1

     *            X coordinate of the upper left corner of the selection area

     * @param y1

     *            Y coordinate of the upper left corner of the selection area

     * @param x2

     *            X coordinate of the lower right corner of the selection area

     * @param y2

     *            Y coordinate of the lower right corner of the selection area

     * @param noScale

     *            If set to <code>true</code>, scaling is not applied to the

     *            new selection

     */

    function setSelection(x1, y1, x2, y2, noScale) {

        var sx = noScale || scaleX, sy = noScale || scaleY;

        selection = {

        };

        selection.width = selection.x2 - selection.x1;

        selection.height = selection.y2 - selection.y1;

    }

    /**

     * Recalculate image and parent offsets

     */

    function adjust() {

        /*

         * Do not adjust if image has not yet loaded or if width is not a

         * positive number. The latter might happen when imgAreaSelect is put

         * on a parent element which is then hidden.

         */

        if (!imgLoaded || !$img.width())

            return;

        /*

         * Get image offset. The .offset() method returns float values, so they

         * need to be rounded.

         */

        /* Get image dimensions */

        imgWidth = $img.innerWidth();

        imgHeight = $img.innerHeight();

        imgOfs.top += ($img.outerHeight() - imgHeight) >> 1;

        imgOfs.left += ($img.outerWidth() - imgWidth) >> 1;

        /* Set minimum and maximum selection area dimensions */

        /*

         * Workaround for jQuery 1.3.2 incorrect offset calculation, originally

         * observed in Safari 3. Firefox 2 is also affected.

         */

        if ($().jquery == '1.3.2' && position == 'fixed' &&

            !docElem['getBoundingClientRect'])

        {

            imgOfs.top += max(document.body.scrollTop, docElem.scrollTop);

            imgOfs.left += max(document.body.scrollLeft, docElem.scrollLeft);

        }

        /* Determine parent element offset */

        parOfs = /absolute|relative/.test($parent.css('position')) ?

            position == 'fixed' ?

                { left: $(document).scrollLeft(), top: $(document).scrollTop() } :

                { left: 0, top: 0 };

        left = viewX(0);

        top = viewY(0);

        /*

         * Check if selection area is within image boundaries, adjust if

         * necessary

         */

        if (selection.x2 > imgWidth || selection.y2 > imgHeight)

            doResize();

    }

    /**

     * Update plugin elements

     *

     * @param resetKeyPress

     *            If set to <code>false</code>, this instance's keypress

     *            event handler is not activated

     */

    function update(resetKeyPress) {

        /* If plugin elements are hidden, do nothing */

        if (!shown) return;

        /*

         * Set the position and size of the container box and the selection area

         * inside it

         */

        $box.css({ left: viewX(selection.x1), top: viewY(selection.y1) })

            .add($area).width(w = selection.width).height(h = selection.height);

        /*

         * Reset the position of selection area, borders, and handles (IE6/IE7

         * position them incorrectly if we don't do this)

         */

        $area.add($border).add($handles).css({ left: 0, top: 0 });

        /* Set border dimensions */

        $border

            .width(max(w - $border.outerWidth() + $border.innerWidth(), 0))

            .height(max(h - $border.outerHeight() + $border.innerHeight(), 0));

        /* Arrange the outer area elements */

        $($outer[0]).css({ left: left, top: top,

            width: selection.x1, height: imgHeight });

        $($outer[1]).css({ left: left + selection.x1, top: top,

            width: w, height: selection.y1 });

        $($outer[2]).css({ left: left + selection.x2, top: top,

            width: imgWidth - selection.x2, height: imgHeight });

        $($outer[3]).css({ left: left + selection.x1, top: top + selection.y2,

            width: w, height: imgHeight - selection.y2 });

        w -= $handles.outerWidth();

        h -= $handles.outerHeight();

        /* Arrange handles */

        switch ($handles.length) {

        case 8:

            $($handles[4]).css({ left: w >> 1 });

            $($handles[5]).css({ left: w, top: h >> 1 });

            $($handles[6]).css({ left: w >> 1, top: h });

            $($handles[7]).css({ top: h >> 1 });

        case 4:

            $handles.slice(1,3).css({ left: w });

            $handles.slice(2,4).css({ top: h });

        }

        if (resetKeyPress !== false) {