/*
To enable "resize" and/or "move" add class="MagicControlAll" attribute to html element. For example:
<table runat="server" id="table1" class="MagicControlAll" border="1">
...
</table>
See MagicControlHandler.css for other css available class names.

For AJAX UpdatePanel Support add following script after asp:ScriptManager:
<script type="text/javascript">
Sys.Application.add_load(MagicControlInitialize);
</script>

On master page use the following script to override the name of input element:
<script type="text/javascript">
MagicControlClass.prototype.FormElement = 'ctl00_MagicControl';
</script>
*/

MagicControlClass.prototype.MoveArea = 16;
MagicControlClass.prototype.ResizeArea = 16;
MagicControlClass.prototype.zIndexStart = 1000;
MagicControlClass.prototype.FormElement = 'MagicControl';

function MagicControlClass(htmlobject, eventobject) {
    this.Control = htmlobject;
    this.OffsetLeft = htmlobject.offsetLeft;
    this.OffsetTop = htmlobject.offsetTop;
    this.Left = 0;
    this.Top = 0;
    this.ScrollTop = 0;
    this.ScrollLeft = 0;
    var o = htmlobject;
    while (o.tagName != 'HTML') {
        if (o.style.position == 'absolute') {
            this.Left += o.offsetLeft;
            this.Top += o.offsetTop;
        }
        o = o.parentNode;
        if (o.scrollLeft) this.ScrollLeft += o.scrollLeft;
        if (o.scrollTop) this.ScrollTop += o.scrollTop;
    }
    this.Width = htmlobject.offsetWidth;
    this.Height = htmlobject.offsetHeight;
    this.MouseX = eventobject.clientX;
    this.MouseY = eventobject.clientY;
    this.PaddingBottom = (this.Control.style.paddingBottom) ? MagicControlClass.prototype.ResizeArea : 0;
}
function MagicControlMoving() {
    with (this) return (MouseY - Top < MoveArea - ScrollTop) ? true : false;
}
function MagicControlResizing() {
    with (this) return (MouseY - Top > Height - ResizeArea - ScrollTop && MouseX - Left > Width - ResizeArea - ScrollLeft) ? true : false;
}
function MagicControlMoveTo(X, Y) {
    with (this) {
        var L = OffsetLeft + X - MouseX;
        if (L < 0) L = 0;
        Control.style.left = L + 'px';
        var T = OffsetTop + Y - MouseY;
        if (T < 0) T = 0;
        Control.style.top = T + 'px';
    }
}
function MagicControlResizeTo(X, Y) {
    with (this) {
        if (Control.className.indexOf('MagicControlWidth') >= 0 || Control.className.indexOf('MagicControlSize') >= 0 || Control.className.indexOf('MagicControlAll') >= 0) {
            var W = Width + X - MouseX;
            if (W < ResizeArea) W = ResizeArea;
            Control.style.width = W + 'px';
        }
        if (Control.className.indexOf('MagicControlHeight') >= 0 || Control.className.indexOf('MagicControlSize') >= 0 || Control.className.indexOf('MagicControlAll') >= 0) {
            var H = Height + Y - MouseY - PaddingBottom;
            if (H < ResizeArea - PaddingBottom) H = ResizeArea - PaddingBottom;
            Control.style.height = H + 'px';
        }
    }
}

MagicControlClass.prototype.Moving = MagicControlMoving;
MagicControlClass.prototype.Resizing = MagicControlResizing;
MagicControlClass.prototype.MoveTo = MagicControlMoveTo;
MagicControlClass.prototype.ResizeTo = MagicControlResizeTo;

function MagicControlMousedown(e) {
    if (!e) e = event;
    var MagicControlObject = new MagicControlClass(this, e);
    for (var i = 0; i < document.MagicControlList.length; i++) {
        var o = document.getElementById(document.MagicControlList[i]);
        if (o.id == this.id) {
            document.MagicControlList.splice(i, 1);
            document.MagicControlList[document.MagicControlList.length] = this.id;
            o = document.getElementById(document.MagicControlList[i]);
        }
        o.style.zIndex = MagicControlClass.prototype.zIndexStart + i + 1;
    }
    if (MagicControlObject.Resizing() || MagicControlObject.Moving()) {
        document.MagicControlObject = MagicControlObject;
        e.cancelBubble = true;
        return false;
    }
}
function MagicControlMousemove(e) {
    if (!document.MagicControlObject) return;
    if (!e) e = event;
    with (document.MagicControlObject) {
        if (Resizing())
            ResizeTo(e.clientX, e.clientY)
        else if (Moving())
            MoveTo(e.clientX, e.clientY)
        e.cancelBubble = true;
        return false;
    }
}
function MagicControlMouseup(e) {
    if (!document.MagicControlObject) return;
    with (document.MagicControlObject) {
        var L = parseInt(Control.style.left);
        var T = parseInt(Control.style.top);
        var W = parseInt(Control.style.width);
        var H = parseInt(Control.style.height);
        if (!isNaN(L) || !isNaN(T) || !isNaN(W) || !isNaN(H)) {
            if (isNaN(L)) L = '-';
            if (isNaN(T)) T = '-';
            if (isNaN(W)) W = '-';
            if (isNaN(H)) H = '-';
            if (Control.className.indexOf('MagicControlWidth') >= 0) H = '-';
            if (Control.className.indexOf('MagicControlHeight') >= 0) W = '-';
            var FormElement = document.forms[0][FormElement];
            if (FormElement) {
                var ObjectParams = FormElement.value.split(';');
                FormElement.value = Control.id + ',' + L + ',' + T + ',' + W + ',' + H + ',' + Control.style.zIndex;
                for (var op = 0; op < ObjectParams.length; op++)
                    if (ObjectParams[op].length > 0)
                    if (ObjectParams[op].substring(0, Control.id.length + 1) != Control.id + ',')
                    FormElement.value += ';' + ObjectParams[op];
            }
        }
    }
    document.MagicControlObject = null;
    e.cancelBubble = true;
    return false;
}

function MagicControlInitialize() {
    document.AutoID = new Array();
    document.MagicControlList = new Array();
    var divs = document.getElementsByTagName('*');
    for (var i = 0; i < divs.length; i++) {
        if (divs[i].className.indexOf('MagicControl') >= 0) {
            if (!divs[i].id) {
                var AUTOID = null;
                var o = divs[i];
                while (o.tagName != 'BODY') {
                    o = o.parentNode;
                    if (o.id) if (o.id.indexOf('_AUTO_') < 0) {
                        if (!document.AutoID[o.id]) document.AutoID[o.id] = 1; else document.AutoID[o.id]++;
                        divs[i].id = o.id + '_AUTO_' + document.AutoID[o.id];
                        break;
                    }
                }
            }
            document.MagicControlList[document.MagicControlList.length] = divs[i].id;
            divs[i].onmousedown = MagicControlMousedown;
            if ((divs[i].className.indexOf('MagicControlWidthScroll') >= 0) || (divs[i].className.indexOf('MagicControlHeightScroll') >= 0) ||
                (divs[i].className.indexOf('MagicControlSizeScroll') >= 0) || (divs[i].className.indexOf('MagicControlAllScroll') >= 0))
                divs[i].style.paddingBottom = MagicControlClass.prototype.ResizeArea + 'px';
            if ((divs[i].className.indexOf('MagicControlMove') >= 0) || (divs[i].className.indexOf('MagicControlAll') >= 0))
                divs[i].style.position = 'absolute';
            divs[i].style.zIndex = MagicControlClass.prototype.zIndexStart + document.MagicControlList.length;
        }
    }
    var FormElement = document.forms[0][MagicControlClass.prototype.FormElement];
    if (FormElement) {
        var ObjectParams = FormElement.value.split(';');
        for (var op = 0; op < ObjectParams.length; op++) if (ObjectParams[op].length > 0) {
            var ObjectParam = ObjectParams[op].split(',');
            if (ObjectParam.length > 5) {
                var htmlobject = document.getElementById(ObjectParam[0]);
                if (htmlobject != null) {
                    if (!isNaN(ObjectParam[1])) htmlobject.style.left = ObjectParam[1] + 'px';
                    if (!isNaN(ObjectParam[2])) htmlobject.style.top = ObjectParam[2] + 'px';
                    if (!isNaN(ObjectParam[3])) htmlobject.style.width = ObjectParam[3] + 'px';
                    if (!isNaN(ObjectParam[4])) htmlobject.style.height = ObjectParam[4] + 'px';
                    if (!isNaN(ObjectParam[5])) htmlobject.style.zIndex = ObjectParam[5];
                }
            }
        }
    } else {
        alert('FORM element must contain input element with id=' + MagicControlClass.prototype.FormElement + '!');
    }
    if (window.addEventListener) { // not ie
        document.addEventListener("mousemove", MagicControlMousemove, false);
        document.addEventListener("mouseup", MagicControlMouseup, false);
    }
    else if (window.attachEvent) { // ie
        document.attachEvent('onmousemove', MagicControlMousemove);
        document.attachEvent('onmouseup', MagicControlMouseup);
    }
}

if (window.addEventListener) // not ie
    window.addEventListener("load", MagicControlInitialize, false);
else if (window.attachEvent) // ie
    window.attachEvent('onload', MagicControlInitialize);