function show_rows()
{
    $('rows').style.visibility='visible';
}

function hide_rows()
{
    $('rows').style.visibility='hidden';
}

function form_submit()
{
    var selection;

	$('save_form_params').innerHTML='';
    for (var i in resizer)
    {
        selection = resizer[i].get_selection();
        create_input('save_form_params', i, 'x0', selection['x']);
        create_input('save_form_params', i, 'y0', selection['y']);
        create_input('save_form_params', i, 'x1', selection['x'] + selection['w']);
        create_input('save_form_params', i, 'y1', selection['y'] + selection['h']);
        create_input('save_form_params', i, 'z_index', $('img_fragment_' + i).style.zIndex);
    }
    $('save_form').submit();
}

function create_input(container, i, name, value)
{
    var input = document.createElement('INPUT');
    input.id = name + "_" + i;
    input.type = "hidden";
    input.name = name + "[]";
    input.value = value;
    $(container).appendChild(input);
}


function add_fragment(img_name)
{
    var img = document.createElement('IMG');
    img.style.position = "absolute";
    img.style.top = "0px";
    img.style.left = "0px";
    img.style.zIndex = z_index++;
    img.id="img_fragment_" + fragment_index;
    img.src=img_name;
    img.style.visibility = 'hidden';
    img.onload = function(){
        var k = img.offsetWidth/img.offsetHeight;

        if (img.offsetWidth >= img.offsetHeight)
        {
            img.style.width = edit_image_width/2 + "px";
            if (Prototype.Browser.IE)
                img.style.height = (edit_image_width/2) / k;
        }
        else
        {
            img.style.height = edit_image_height/2 + "px";
            if (Prototype.Browser.IE)
                img.style.width = (edit_image_height/2) * k;
        }

        create_input('save_form', fragment_index, 'fragment', img_name);

        var r = resizer[fragment_index] = new CResizer();
        var y = (edit_image_height - img.offsetHeight)/2;
        var x = (edit_image_width - img.offsetWidth)/2;

        var edit_image_info = {
            'th_width':'10',
            'th_height':'10',
            'thumb_size':{
                'h':img.offsetHeight,
                'w':img.offsetWidth,
                'x':x,
                'y':y
            },
            'size':{
                'height':edit_image_height,
                'width':edit_image_width,
                'ext':edit_image_ext
            }
        };

        img.style.display = 'none';
        img.style.visibility = 'visible';

        r.init(fragment_index, edit_image_src, edit_image_info);

        $('fragment').style.visibility = "visible";
        img.style.visibility = 'visible';

        img.onmousedown = function(e){
            r.button_status = 0;
            r.is_move = 0;
            r.is_resize = 1;
            img.style.zIndex = z_index++;

            $('image').onmouseup = r.img_up;
            $('fragment').style.cursor = 'move';
            $('fragment').onmousemove = $('image').onmousemove = null;
            $('fragment').onmousedown = r.frg_down;
            $('fragment').onmouseup = r.frg_up;
            document.onmouseup = null;

            r.__init_pos(true);

            $('fragment').style.visibility = "visible";

            var resize_squares = [$('n'), $('nw'), $('w'), $('sw'), $('s'), $('se'), $('e'), $('ne')];
            for (var i = 0; i < resize_squares.length; i++)
            {
                resize_squares[i].onmousedown = r.rs_down;
                resize_squares[i].onmouseup = r.rs_up;
                resize_squares[i].onmousemove = r.rs_resize;
            }
			$('c').onclick = r.delete_fragment;

        }
		$('c').onclick = r.delete_fragment
        $('savebutton').disabled = false;
        fragment_index++;

    }
    $('image').appendChild(img);
}

function delete_fragment(i)
{
    $('fragment').style.visibility = "hidden";
    delete resizer[i];
    var el = $('img_fragment_' + i);
    el.parentNode.removeChild(el);
    el = $('fragment_' + i);
    el.parentNode.removeChild(el);
}

function CResizer()
{
    var _this = this;

    var is_ie = (browser_type() == 'ie');
    var button_status = 0;
    var is_move, is_resize, square;

    var _image, _fragment, _img_fragment, _resize_squares, _save_btn;
    var _nw, _sw, _se, _ne, _n, _w, _s, _e, _c, _resize_squares, _prefix;

    var image_w, image_h, image_min_w, image_min_h;
    var min_x, min_y, max_x, max_y;
    var up_x, up_y;
    var x, y, w, h, _x, _y;

    this.init = function(prefix, img_src, img_info)
    {
        _prefix = prefix;
        image_w = parseInt(img_info.size.width);
        image_h = parseInt(img_info.size.height);
        image_min_w = parseInt(img_info.th_width);
        image_min_h = parseInt(img_info.th_height);

        if (img_info.thumb_size)
        {
            _x = parseInt(img_info.thumb_size.x);
            _y = parseInt(img_info.thumb_size.y);
            w  = parseInt(img_info.thumb_size.w);
            h  = parseInt(img_info.thumb_size.h);
        }

        x = 0;
        y = 0;

        button_status = 0;
        is_move = 0;
        is_resize = 0;
        square = null;

        _image = $('image');

        _fragment = $('fragment');
        _img_fragment = $('img_fragment_'+_prefix);

        _nw = $('nw');
        _sw = $('sw');
        _se = $('se');
        _ne = $('ne');
        _n  = $('n');
        _w  = $('w');
        _s  = $('s');
        _e  = $('e');
		_c  = $('c');

        _save_btn = $('savebutton');

        _resize_squares = [_n, _nw, _w, _sw, _s, _se, _e, _ne];
        for (i = 0; i < _resize_squares.length; i++)
        {
            _resize_squares[i].onmousedown = _this.rs_down;
            _resize_squares[i].onmouseup = _this.rs_up;
            _resize_squares[i].onmousemove = _this.rs_resize;
        }

        _image.onmousedown = _this.img_down;
        _image.onmouseup = _this.img_up;

        _fragment.style.cursor = 'move';
        _fragment.onmousemove = _image.onmousemove = null;
        _fragment.onmousedown = _this.frg_down;
        _fragment.onmouseup = _this.frg_up;

        _this.__init_pos(true);
    }
	
    this.__init_pos = function(update_zIndex)
    {
        var coords = getAbsCoords(_image);
        min_x = coords.left;
        min_y = coords.top;
        max_x = min_x + image_w;
        max_y = min_y + image_h;

        x = x == 0 ? _x + min_x : x;
        y = y == 0 ? _y + min_y : y;

        _fragment.style.top = y;
        _fragment.style.left = x;
        _fragment.style.width = w;
        _fragment.style.height = h;
        _fragment.style.display = '';
        _img_fragment.style.top = y;
        _img_fragment.style.left = x;
        _img_fragment.style.width = w;
        _img_fragment.style.height = h;
        _img_fragment.style.display = '';
        update_zIndex && (_fragment.style.zIndex = z_index++);

        this.__show_resize_squares(update_zIndex);
    }

    this.__show_resize_squares = function(update_zIndex)
    {
        this.__place_resize_squares();

        for (i = 0; i < _resize_squares.length; i++)
        {
            _resize_squares[i].style.display = '';
            update_zIndex && (_resize_squares[i].style.zIndex = z_index);
        }
		_c.style.display = '';
    }

    this.__hide_resize_squares = function()
    {
        for (i = 0; i < _resize_squares.length; i++)
        {
            _resize_squares[i].style.display = 'none';
        }
		_c.style.display = 'none';
    }

    this.__place_resize_squares = function()
    {
        var coords = getAbsCoords(_fragment);
        var offsetL = coords.left;
        var offsetT = coords.top;
        var offsetW = _fragment.offsetWidth;
        var offsetH = _fragment.offsetHeight;

        _nw.style.left = offsetL - 6;
        _nw.style.top = offsetT - 6;
        _sw.style.left = offsetL - 7;
        _sw.style.top = offsetT + offsetH - 9;
        _se.style.left = offsetL + offsetW - 9;
        _se.style.top = offsetT + offsetH - 9;
        _ne.style.left = offsetL + offsetW - 10;
        _ne.style.top = offsetT - 6;

        _n.style.left = offsetL + offsetW / 2 - 8;
        _n.style.top = offsetT - 7;
        _w.style.left = offsetL - 7;
        _w.style.top = offsetT + offsetH / 2 - 8;
        _s.style.left = offsetL + offsetW / 2 - 8;
        _s.style.top = offsetT + offsetH - 9;
        _e.style.left = offsetL + offsetW - 9;
        _e.style.top = offsetT + offsetH / 2 - 8;
		
        _c.style.left = offsetL + offsetW - 30;
        _c.style.top = offsetT - 6;
		
    }

    this.img_down = function(ev)
    {
        is_move = 0;
        is_resize = 0;
        _this.__stop_event(ev);
        document.onmouseup = _this.img_up;
    }

    this.img_up = function(ev)
    {
        hide_rows();
        is_move = 0;
        is_resize = 0;
        _this.__show_resize_squares();
        _this.__stop_event(ev);
        document.onmouseup = null;
    }

    this.frg_down = function(ev)
    {
        _image.onmousedown = _this.img_down;
        _image.onmouseup = _this.img_up;
        _fragment.onmousemove = _image.onmousemove = null;

        _this.__init_pos();
        is_move = 1;
        is_resize = 0;
        _this.__hide_resize_squares();

        if (is_ie)
        {
            document.onselectstart = function(){return false}
        }
        else
        {
            document.body.style.MozUserSelect = 'none';
        }
        document.onmouseup = _this.img_up;
        _fragment.onmousemove = _image.onmousemove = _this.frg_move;
        _this.frg_move(ev);
    }

    this.frg_up = function(ev)
    {
        is_move = 0;
        is_resize = 0;
        button_status = 0;

        ev = ev || (ev = window.event);
        var __x = ev.clientX + document.body.scrollLeft;
        var __y = ev.clientY + document.body.scrollTop;

        if (__x < min_x - 50 || __y < min_y - 50 || __x > max_x + 50 || __y > max_y + 50)
        {
            //alert(['event:',__x, __y, ' min:' ,min_x, min_y, ' max:', max_x, max_y]);
            //return;
            delete_fragment(_prefix);
        }
        else
        {
            var s = _img_fragment.style;
            x = parseInt(s.left);
            y = parseInt(s.top);

            //if (parseInt(s.left) < min_x)
            //    x = min_x;
            //
            //if (parseInt(s.top) < min_y)
            //    y = min_y;
            //
            //if (parseInt(s.left) + w > max_x)
            //    x = min_x + image_w - w;
            //
            //if (parseInt(s.top) + h > max_y)
            //    y =  min_y + image_h - h;

            with (_fragment.style)
            {
                left = x;
                top = y;
            }
            with (_img_fragment.style)
            {
                left = x;
                top = y;
            }

            _this.__show_resize_squares();
        }

        _fragment.onmousemove = _image.onmousemove = null;

        if (is_ie)
        {
            document.onselectstart = null;
        }
        else
        {
            document.body.style.MozUserSelect = '';
        }
        _this.__stop_event(ev);
        document.onmouseup = null;
    }

    this.frg_move = function(ev)
    {
        if (is_move == 1)
        {
            ev || (ev = window.event);

            if (button_status != 1)
            {
                button_status = 1;
                dx = ev.clientX - x;
                dy = ev.clientY - y;
            }
            if (button_status == 1)
            {
                up_x = ev.clientX;
                up_y = ev.clientY;
                x = up_x - dx;
                y = up_y - dy;

                with (_fragment.style)
                {
                    left = x;
                    top = y;
                }
                with (_img_fragment.style)
                {
                    left = x;
                    top = y;
                }
            }
        }
     //   _this.__stop_event(ev);
    }

	this.delete_fragment = function(ev)
	{
		delete_fragment(_prefix);
	
	}
	
    this.rs_down = function(ev)
    {
        _this.__init_pos();
        square = this;
        is_resize = 1;
        _fragment.onmousemove = _image.onmousemove = _this.rs_resize;
        if (is_ie)
        {
            document.onselectstart = function(){return false}
        }
        else
        {
            document.body.style.MozUserSelect = 'none';
        }

        _this.__stop_event(ev);
        document.onmouseup = _this.img_up;
    }

    this.rs_up = function(ev)
    {
        is_resize = 0;
        _fragment.onmousemove = _image.onmousemove = null;
        if (is_ie)
        {
            document.onselectstart = null;
        }
        else
        {
            document.body.style.MozUserSelect = '';
        }
        _this.__stop_event(ev);
        document.onmouseup = _this.img_down;

    }

    this.rs_resize = function(ev)
    {
        if (is_resize)
        {
            show_rows();
            ev || (ev = window.event);
            var old_h = h;
            var old_w = w;
            var old_x = x;
            var old_y = y;
            var coords = getAbsCoords(_fragment);
            var offsetL = coords.left - (is_ie ? 1 : 0);
            var offsetT = coords.top;
            var kw = is_ie ? -1 : 0;
            var kh = 0;

            switch (square)
            {
                case _n:
                    h = offsetT + _fragment.offsetHeight - kh - ev.clientY - document.body.scrollTop;
                    y = ev.clientY + document.body.scrollTop;
                    break;
                case _nw:
                    h = offsetT + _fragment.offsetHeight - kh - ev.clientY - document.body.scrollTop;
                    w = offsetL + _fragment.offsetWidth - kw - ev.clientX - document.body.scrollLeft;
                    y = ev.clientY + document.body.scrollTop;
                    x = ev.clientX + document.body.scrollLeft;
                    break;
                case _w:
                    w = offsetL + _fragment.offsetWidth - kw - ev.clientX - document.body.scrollLeft;
                    x = ev.clientX + document.body.scrollLeft;
                    break;
                case _sw:
                    h = ev.clientY + document.body.scrollTop - y;
                    w = offsetL + _fragment.offsetWidth - kw - ev.clientX - document.body.scrollLeft;
                    x = ev.clientX + document.body.scrollLeft;
                    break;
                case _s:
                    h = ev.clientY + document.body.scrollTop - y;
                    break;
                case _se:
                    h = ev.clientY + document.body.scrollTop - y;
                    w = ev.clientX + document.body.scrollLeft - x;
                    break;
                case _e:
                    w = ev.clientX + document.body.scrollLeft - x;
                    break;
                case _ne:
                    h = offsetT + _fragment.offsetHeight - kh - ev.clientY - document.body.scrollTop;
                    w = ev.clientX + document.body.scrollLeft - x;
                    y = ev.clientY + document.body.scrollTop;
            }

            //if (y < min_y)
            //{
            //    h = old_h;
            //    y = min_y;
            //}
            //if (y + h > max_y || h < image_min_h)
            //{
            //    h = old_h;
            //    y = old_y;
            //}
            //if (x < min_x)
            //{
            //    w = old_w;
            //    x = min_x;
            //}
            //
            //if (x + w > max_x || w < image_min_w)
            //{
            //    w = old_w;
            //    x = old_x;
            //}

            with (_fragment.style)
            {
                left = x;
                top = y;
                height = h;
                width = w;
            }
            with (_img_fragment.style)
            {
                left = x;
                top = y;
                height = h;
                width = w;
            }
            _this.__place_resize_squares();
        }
       // _this.__stop_event(ev);
    }

    this.__stop_event = function(ev)
    {
        if (is_ie)
        {
            window.event.cancelBubble = true;
        }
        else
        {
            ev.stopPropagation();
        }
    }

    this.get_selection = function()
    {
        return {
            x: x - min_x,
            y: y - min_y,
            w: w,
            h: h
        }
    }
}