var mouse_event_origin_x = 0;
var mouse_event_origin_y = 0;

var dragging = false;
var zoomBox = {};
var drawing_zoom = false;

function initialize_area_zoom() {
    var viewport = document.getElementById('svg');

    viewport.addEventListener('mousedown',
        function(event) { 
            dragging = false; 
            document.activeElement.blur();

            mouse_event_origin_x = event.clientX;
            mouse_event_origin_y = event.clientY;

            if (event.shiftKey)
            {
                drawing_zoom = true;

                zoomBox['start_x'] = event.clientX;
                zoomBox['start_y'] = event.clientY;

                $('#divzoom').css({"top": 0, "left": 0, "width": 0, "height": 0 });
                $('#divzoom_inner').css({"width": 0, "height": 0 });
                $('#divzoom').show();
            }
        });

    viewport.addEventListener('mousemove', 
        function(event) {
            if (Math.abs(mouse_event_origin_x - event.clientX) + Math.abs(mouse_event_origin_y - event.clientY) > 2)
            {
                dragging = true; 
            }

            if (event.shiftKey && drawing_zoom)
            {
                var _top = zoomBox['start_y'] > event.clientY ? event.clientY : zoomBox['start_y'];
                var _left = zoomBox['start_x'] > event.clientX ? event.clientX : zoomBox['start_x'];
                var _height = Math.abs(zoomBox['start_y'] - event.clientY);
                var _width = Math.abs(zoomBox['start_x'] - event.clientX);

                var divzoom = document.getElementById('divzoom');
                var divzoom_inner = document.getElementById('divzoom_inner');

                divzoom.style.top = _top + "px";
                divzoom.style.left = _left + "px";
                divzoom.style.width = _width + "px";
                divzoom.style.height = _height + "px";

                var w_ratio = _width / VIEWER_WIDTH;
                var h_ratio = _height / VIEWER_HEIGHT;

                if (w_ratio > h_ratio)
                {
                    divzoom_inner.style.width = h_ratio * VIEWER_WIDTH + "px";
                    divzoom_inner.style.height = _height + "px";
                }
                else
                {
                    divzoom_inner.style.width = _width + "px";
                    divzoom_inner.style.height = w_ratio * VIEWER_HEIGHT + "px";
                }

                // when you drawing rectangle, if you drag over text on the screen browser selects that text
                // with this hack you can continue drawing.
                clearTextSelection(); // in utils.js

            }
        });

    viewport.addEventListener('mouseup', 
        function() {
            if (drawing_zoom)
            {
                var inner_rect = document.getElementById('divzoom_inner').getBoundingClientRect();
                
                if (inner_rect.width > 2 && inner_rect.height > 2)
                {
                    var _dx = (parseInt("0" + $('#svg').position().left) + (VIEWER_WIDTH / 2)) - (inner_rect.left + inner_rect.width / 2);
                    var _dy = (parseInt("0" + $('#svg').position().top)  + (VIEWER_HEIGHT / 2)) - (inner_rect.top + inner_rect.height / 2);
                    pan(_dx,_dy);
                    zoom(VIEWER_WIDTH / inner_rect.width);
                }
            }

            clearTextSelection();
            drawing_zoom=false; 
            zoomBox = {}; 
            $('#divzoom').hide(); 

        });
}