function getBase(obj) {
		var baseX = obj.offsetLeft - 0;
		var baseY = obj.offsetTop - 0;
		
		while (obj && obj.tagName && (obj.tagName != "BODY")) {
			obj = obj.parentNode;
			if (obj.style.position == "absolute") {
				baseX += obj.offsetLeft - 0;
				baseY += obj.offsetTop - 0;
			}
		}
			
		
		var bodyElement = document.body;
		if (document.documentElement && (bodyElement.scrollTop == 0) && (bodyElement.scrollLeft == 0)) {
			bodyElement = document.documentElement;
		}
		var scY = parseInt(bodyElement.scrollTop);
		var scX = parseInt(bodyElement.scrollLeft);
		
		return new Array(baseX - scX,baseY - scY);
	}
  	//--------------------------------------------------------------------------------------------------------------	
  	function createRect(div) {
  		var rect = document.createElement("div");
		rect.style.position = "absolute";
		rect.style.width = "15px";
		rect.style.height = "15px";
		//rect.style.position = "absolute";
		rect.setAttribute("working","0");
		rect.className = "rectClassOn rectClassDone";
		
		if (div.getAttribute("positionPointer") && (div.getAttribute("positionPointer") != "")) {
			var positionPointer = document.createElement("img");
			positionPointer.src = div.getAttribute("positionPointer");
			rect.appendChild(positionPointer);
		}
		div.appendChild(rect);
		return rect;
  	}
  	//--------------------------------------------------------------------------------------------------------------	
	function clickRect(div,e) {
		var rect = null;
		if (!div.rect) {
			rect = createRect(div);
			div.rect = rect;
		}
		else {
			rect = div.rect;
		}
		
		if (rect.getAttribute("working") == "1") {
			rect.setAttribute("working","0");
			rect.className = "rectClassOn rectClassDone";
			return;
		}
		else {
			rect.setAttribute("working","1");
			rect.className = "rectClassOn";
		}
		
		var base = getBase(div);
		var baseX = base[0];
		var baseY = base[1];
		
		var x = 0;
		var y = 0;
		if (e) {
			x = e.clientX - baseX;
			y = e.clientY - baseY;
		}
		var divW = parseInt(div.clientWidth);
		var divH = parseInt(div.clientHeight);
		if (x > divW) {
			x = divW;
		}
		if (x < 0) {
			x = 0;
		}
		
		if (y > divH) {
			y = divH;
		}
		if (y < 0) {
			y = 0;
		}
		
		rect.setAttribute("startX",x);
		rect.setAttribute("startY",y);
		rect.setAttribute("endX",x);
		rect.setAttribute("endY",y);
		showRect(rect);
	}
	//--------------------------------------------------------------------------------------------------------------	
	function showRect(rect) {
		var div = rect.parentNode;
		var startX = parseInt(rect.getAttribute("startX"));
		if (!startX) {
			startX = 0;
		}
		var startY = parseInt(rect.getAttribute("startY"));
		if (!startY) {
			startY = 0;
		}
		var endX = parseInt(rect.getAttribute("endX"));
		if (!endX) {
			endX = 0;
		}
		var endY = parseInt(rect.getAttribute("endY"));
		if (!endY) {
			endY = 0;
		}
		
		if (div.getAttribute("positionPointer") && (div.getAttribute("positionPointer") != "")) {
			endX = startX;
			endY = startY;
		}
		
		var minx = (startX < endX) ? startX : endX;
		var miny = (startY < endY) ? startY : endY;
		var maxx = (startX > endX) ? startX : endX;
		var maxy = (startY > endY) ? startY : endY;
		
		// do not place out of the imae
		
		rect.style.left = minx+"px";
		rect.style.top = miny+"px";
		
		if (div.getAttribute("positionPointer") && (div.getAttribute("positionPointer") != "")) {
			rect.setAttribute("working","0");
			rect.className = "";
			rect.style.width = "";
			rect.style.height = "";
			return;
		}
		
		rect.style.width = (maxx - minx) + "px";
		if (rect.style.width == "0px") {
			rect.style.width = "1px";
		}
		rect.style.height = (maxy - miny) + "px";
		if (rect.style.height == "0px") {
			rect.style.height = "1px";
		}
		
	}
	//--------------------------------------------------------------------------------------------------------------	
	function resizeRect(div,e) {
		if (!div.rect) {
			return;
		}
		var rect = div.rect;
		if (rect.getAttribute("working") == "0") {
			return;
		}
		if (div.getAttribute("positionPointer") && (div.getAttribute("positionPointer") != "")) {
			return;
		}
		
		var base = getBase(div);
		var baseX = base[0];
		var baseY = base[1];
		var x = e.clientX - baseX;
		var y = e.clientY - baseY;
		var divW = parseInt(div.clientWidth);
		var divH = parseInt(div.clientHeight);
		if (x > divW) {
			x = divW;
		}
		if (x < 0) {
			x = 0;
		}
		
		if (y > divH) {
			y = divH;
		}
		if (y < 0) {
			y = 0;
		}
		
		rect.setAttribute("endX",x);
		rect.setAttribute("endY",y);
		showRect(rect);
	}
	//--------------------------------------------------------------------------------------------------------------	
	function getRectData(img) {
		var ret = new Array();
		var div = img.parentNode;
		if (div.rect) {
			var rect = div.rect;
			
			var startX = parseInt(rect.getAttribute("startX"));
			if (!startX) {
				startX = 0;
			}
			var startY = parseInt(rect.getAttribute("startY"));
			if (!startY) {
				startY = 0;
			}
			var endX = parseInt(rect.getAttribute("endX"));
			if (!endX) {
				endX = 0;
			}
			var endY = parseInt(rect.getAttribute("endY"));
			if (!endY) {
				endY = 0;
			}
			
			var minx = (startX < endX) ? startX : endX;
			var miny = (startY < endY) ? startY : endY;
			var maxx = (startX > endX) ? startX : endX;
			var maxy = (startY > endY) ? startY : endY;
			
			var x = minx;
			var y = miny;
			var w = maxx - minx;
			var h = maxy - miny;
			/*
			alert("get maxx="+maxx+" minx="+minx+" maxy="+maxy+" miny="+miny);
			alert("get x="+x+" y="+y+" w="+w+" h="+h);
			*/
			ret[0] = x;
			ret[1] = y;
			ret[2] = w;
			ret[3] = h;
		}
		return ret;
	}
	//--------------------------------------------------------------------------------------------------------------	
	function setRectData(img,x,y,w,h) {
		
		var div = img.parentNode;
		if (!div.rect) {
			rect = createRect(div);
			div.rect = rect;
		}
		else {
			rect = div.rect;
		}
		
		if (div.getAttribute("positionPointer") && (div.getAttribute("positionPointer") != "")) {
			w = 0;
			h = 0;
		}
		
		x = parseInt(x);y = parseInt(y);w = parseInt(w);h = parseInt(h);
		var divW = parseInt(div.clientWidth);
		var divH = parseInt(div.clientHeight);
		if (x > divW) {
			x = divW;
		}
		if (x < 0) {
			x = 0;
		}
		
		if (y > divH) {
			y = divH;
		}
		if (y < 0) {
			y = 0;
		}
		
		if (w <= 0) {
			w = 0;
		}
		if (h <= 0) {
			h = 0;
		}
		
		if ((x + w) > divW) {
			w = divW - x;
		}
		if ((y +h) > divH) {
			h = divH - y;
		}

		rect.setAttribute("startX",x);
		rect.setAttribute("startY",y);
		rect.setAttribute("endX",x + w);
		rect.setAttribute("endY",y + h);
		
		showRect(rect);
	}	
	//--------------------------------------------------------------------------------------------------------------	
	function startRect(img) {
		var div = img.parentNode;
		
		if (img.clientWidth == 0) {
			
			if (img.id != "") {
				setTimeout("startRect(document.getElementById('"+img.id+"'));",200);
			}
			return;
		}
		div.style.width = img.clientWidth + "px";
		div.style.height = img.clientHeight + "px";
		div.style.overflow = "hidden";
		
		
		if (img.getAttribute("positionPointer")) {
			div.setAttribute("positionPointer",img.getAttribute("positionPointer"));
		}
		div.startRectDone = true;
		
	}
	//=============================================================================
	// Function Name: Name
	// Function Parameter: <Parameter Name>:<parameter description>
	// Function Parameter: 
	// Function Description: <description>
	// Function Results: <return value if any>
	//=============================================================================
	function setOtherRectAjax(res,img) {
		
		var div = img.parentNode;
		var data = res.split("<D>");
		var dataids = ","+img.getAttribute("dataids") +",";
		for (var d=0; d< data.length; d+=4) {
			if (data[d].search(/([^=]+)=(.*)/) != -1) {		// title
				continue;
			}
			else if (data[d+2].indexOf("?pos=") == -1) {
				continue;
			}
			else if (dataids && (dataids.indexOf(","+data[d]+",") != -1)) {
				continue;
			}
			else {
				if (data[d+2].search(/[\&\?]pos=([0-9,]+)/) != -1) {
					var rect = createRect(div);
					
					var xywh = RegExp.$1.split(",");
					for (var i = xywh.length; i < 4; i++) {
						xywh[i] = "";
					}
					var x = parseInt(xywh[0]);
					var y = parseInt(xywh[1]);
					var w = parseInt(xywh[2]);
					var h = parseInt(xywh[3]);
					if (!w) {
						w = 15;
					}
					if (!h) {
						h = 15;
					}
					rect.setAttribute("startX",x);
					rect.setAttribute("startY",y);
					rect.setAttribute("endX",x + w);
					rect.setAttribute("endY",y + h);
					showRect(rect);
					if (div.getAttribute("positionPointer") && (div.getAttribute("positionPointer") != "")) {	// hide position pointer image
						rect.firstChild.style.visibility = "hidden";
					}
					rect.className = "rectClassOther";
					rect.setAttribute("title",data[d]+" "+data[d+1]);
				}
			}
		}
	}

	//=============================================================================
	// Function Name: Name
	// Function Parameter: <Parameter Name>:<parameter description>
	// Function Parameter: 
	// Function Description: <description>
	// Function Results: <return value if any>
	//=============================================================================
	function setOtherRect(img) {
		var url = img.getAttribute("otherRectUrl");
		if (!url || !getAJAX) {
			return;
		}
		getAJAX(url,setOtherRectAjax,null,null,img);
	}

	//--------------------------------------------------------------------------------------------------------------	
	function removeRect(img) {
  		var div = img.parentNode;
  		if (!div.rect) {
  			return;
  		}
  		var rect = div.rect;
  		div.removeChild(rect);
  		div.rect = null;
  	}
  	//--------------------------------------------------------------------------------------------------------------	
	// add filter opacity if IE
	if (document.all) {
		for (var i = 0; i < document.styleSheets.length; i++ ) {
			for (var r = 0; r < document.styleSheets[i].rules.length; r++) {
				if ((document.styleSheets[i].rules[r].selectorText.indexOf(".rectClass") == 0) && document.styleSheets[i].rules[r].style.opacity) {
					var opacity = document.styleSheets[i].rules[r].style.opacity;
					document.styleSheets[i].rules[r].style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+opacity*100+")";
				}
			}
		}
	}