/*class resizing component*/ 
function TResizeObject() {
	this.el        = null; //pointer to the object
	this.dir    = "";      //type of current resize (n, s, e, w, ne, nw, se, sw)
	this.grabx = null;     //Some useful values
	this.graby = null;
	this.padding = 20;
	this.width = null;
	this.height = null;
	this.left = null;
	this.top = null;
}
	
var OnResizeComplete = null;

function TResizer() {   
    this.activeobject = null;
    this.OnResizeComplete = null;
    this.resizableclassname = "popup";
    this._getdirection = function (el) {
	    var xPos, yPos, offset, dir;
	    dir = "";

	    xPos = window.event.offsetX;
	    yPos = window.event.offsetY;

	    offset = 8; //The distance from the edge in pixels

	    if (yPos<offset) dir += "n";
	    else if (yPos > el.offsetHeight-offset) dir += "s";
	    if (xPos<offset) dir += "w";
	    else if (xPos > el.offsetWidth-offset) dir += "e";

	    return dir;
    }
    this.OnMouseDown = function () {
	    var el = (event.srcElement||event.target);
    	
	    if ((el == null)||(el.className != this.resizableclassname)) {
		    this.activeobject = null;
		    return;
	    }		

	    dir = this._getdirection(el);
	    if (dir == "") return;

	    this.activeobject = new TResizeObject();
    		
	    this.activeobject.el = el;
	    this.activeobject.dir = dir;
	    
	    this.activeobject.grabx = window.event.clientX;
	    this.activeobject.graby = window.event.clientY;
	    this.activeobject.width = el.offsetWidth;
	    this.activeobject.height = el.offsetHeight;
	    this.activeobject.left = el.offsetLeft;
	    this.activeobject.top = el.offsetTop;

	    window.event.returnValue = false;
	    window.event.cancelBubble = true;
    }

    this.OnMouseUp = function () {
	    if (this.activeobject != null) {
		    this.activeobject = null;
	    }
	    if (this.OnResizeComplete)
	        this.OnResizeComplete();
    }    
    this.OnMouseMove = function () {
	    var el, xPos, yPos, str, xMin, yMin;
	    xMin = 8; //The smallest width possible
	    yMin = 8; //             height

	    el = (event.srcElement||event.target);
	    
	    if (el == null)
	        return;

	    if (el.className == this.resizableclassname) {
		    str = this._getdirection(el);
	        //Fix the cursor	
		    if (str == "") str = "default";
		    else str += "-resize";
		    el.style.cursor = str;
	    }
    	
        //Dragging starts here
	    if(this.activeobject != null) {
		    if (dir.indexOf("e") != -1)
			    this.activeobject.el.style.width = Math.max(xMin, this.activeobject.width - this.activeobject.padding + window.event.clientX - this.activeobject.grabx) + "px";
    	
		    if (dir.indexOf("s") != -1)
			    this.activeobject.el.style.height = Math.max(yMin, this.activeobject.height - this.activeobject.padding + window.event.clientY - this.activeobject.graby) + "px";

		    if (dir.indexOf("w") != -1) {
			    this.activeobject.el.style.left = Math.min(this.activeobject.left + window.event.clientX - this.activeobject.grabx, this.activeobject.left + this.activeobject.width - xMin) + "px";
			    this.activeobject.el.style.width = Math.max(xMin, this.activeobject.width - window.event.clientX + this.activeobject.grabx) + "px";
		    }
		    if (dir.indexOf("n") != -1) {
			    this.activeobject.el.style.top = Math.min(this.activeobject.top + window.event.clientY - this.activeobject.graby, this.activeobject.top + this.activeobject.height - yMin) + "px";
			    this.activeobject.el.style.height = Math.max(yMin, this.activeobject.height - window.event.clientY + this.activeobject.graby) + "px";
		    }
    		
		    window.event.returnValue = false;
		    window.event.cancelBubble = true;
	    } 
    }

}
var Resizer = new TResizer();

Resizer.OnResizeComplete = function () {	
	TScalableImage.Refresh();
}

document.onmousedown = function () { Resizer.OnMouseDown(); }
document.onmouseup   = function () { Resizer.OnMouseUp(); }
document.onmousemove = function () { Resizer.OnMouseMove(); }