<public:component>
<public:attach event="onmousedown" onevent="startResize()" />
<script>

var _orgWidth, _orgHeight, _orgLeft, _orgTop, _dw, _dh, _dx, _dy;

function getLeft() {
	return window.screenLeft - getInsets().left;
}

function getTop() {
	return window.screenTop - getInsets().top;
}

function getInsets() {
	var oldScreenLeft = window.screenLeft;
	var oldScreenTop = window.screenTop;

	if (window._insets == null)
		window._insets = {left: 5, top: 80};
	
	window.moveTo(oldScreenLeft - window._insets.left, oldScreenTop - window._insets.top);
	
	var newScreenLeft = window.screenLeft;
	var newScreenTop = window.screenTop;
	
	var res = {
		left:	newScreenLeft - oldScreenLeft + window._insets.left,
		top:	newScreenTop - oldScreenTop + window._insets.top
	};
	
	
	window.moveTo(oldScreenLeft - res.left, oldScreenTop - res.top);
	
	window._insets = res;
	
	return res;
}

function getInnerSize() {
	var el = element.document.compatMode == "CSS1Compat" ? element.document.documentElement : element.document.body;
	return {
		width:	el.clientWidth,
		height:	el.clientHeight
	};
}

function getSize() {
	// Store old size
	var oldInnerSize = getInnerSize();
	
	// if no previous diff calculated assume one
	if (window._diff == null)
		window._diff = {width: 10, height: 90};
	
	// resize to known size
	window.resizeTo(oldInnerSize.width + window._diff.width, oldInnerSize.height + window._diff.height);
	
	// calculate inner size again
	var newInnerSize = getInnerSize();
	
	// store diff result
	var diff = {
		width:	oldInnerSize.width - newInnerSize.width + window._diff.width,
		height:	oldInnerSize.height - newInnerSize.height + window._diff.height
	};
	
	// restore size to old size
	window.resizeTo(oldInnerSize.width + diff.width, oldInnerSize.height + diff.height);
	
	// backup diff for future calculations
	window._diff = diff;
	
	return {
		width:	oldInnerSize.width + diff.width,
		height:	oldInnerSize.height + diff.height
	};
}


function startResize() {

	var size = getSize();

	_orgWidth = size.width;
	_orgHeight = size.height;
	_orgLeft = getLeft();
	_orgTop = getTop();
	_dw = event.screenX - size.width;
	_dh = event.screenY - size.height;
	_dx = event.screenX - _orgLeft;
	_dy = event.screenY - _orgTop;
	
	element.attachEvent("onmousemove", doResize);
	element.attachEvent("onmouseup", endResize);
	element.attachEvent("onlosecapture", endResize);
	element.setCapture();

	event.cancelBubble = true;
}

function doResize() {
	var dir = element.getAttribute("resizedirection");
	
	var width = _orgWidth;
	var height = _orgHeight;
	var left = _orgLeft;
	var top = _orgTop;

	if (/e/i.test(dir)) {
		width = event.screenX - _dw;
	}
	else if (/w/i.test(dir)) {
		width = Math.max(100, _orgWidth + _orgLeft - event.screenX + _dx);
		left = _orgWidth + _orgLeft - width;
	}

	if (/s/i.test(dir)) {
		height = event.screenY - _dh;
	}
	else if (/n/i.test(dir)) {
		height = Math.max(100, _orgHeight + _orgTop - event.screenY + _dy);
		top = _orgHeight + _orgTop - height;
	}

	window.resizeTo(width, height);
	window.moveTo(left, top);
}

function endResize() {
	element.detachEvent("onmousemove", doResize);
	element.detachEvent("onmouseup", endResize);
	element.detachEvent("onlosecapture", endResize);
	element.releaseCapture();
}


</script>
</public:component>

