/** 
 * @fileoverview This file is to be used for ui base class of AJAX Dev Library
 * @author 
 * @version 1.0 
 */
$package("js.ui");

var rootPanel = document.body;

js.ui.Point = 
function(x, y){
	if (!x)
		x = 0;
	if (!y)
		y = 0;
    this.x = x;
	this.y = y;
}
/**
 * Changes the point to have the specified location.
 * @param  {int} X
 * @param  {int} Y
 */
js.ui.Point.prototype.setLocation = function(x, y) { 
	this.x = x;
	this.y = y;
}

/**
 * Construct Dimension inherits from Object.
 * @param {int} Width
 * @param {int} Height
 * @class Dimension is the Dimension class.  
 * @see Object Object is the base class for this
 */
js.ui.Dimension = 
function (width, height){
	if (!width)
		width = 0;
	if (!height)
		height = 0;
	this.width = width;
	this.height = height;
}
/**
 * Sets the size of this Dimension object to the specified size..
 * @param  {Dimension} dimension
 * @param  {int} Width
 */
js.ui.Dimension.prototype.setSize = function(width,height) { 
	this.width = width;
	this.height = height;
}
/**
 * Construct Rectangle  inherits from Object.
 * @param {int} x
 * @param {int} y
 * @param {int} Width
 * @param {int} Height
 * @class Rectangle  is the Rectangle class.  
 * @see Object Object  is the base class for this
 */
js.ui.Rectangle = 
function (x,y,width,height) {
   	if (!x)
		x = 0;
	if (!y)
		y = 0;
	if (!width)
		width = 0;
	if (!height)
		height = 0;
	this.x = x;
	this.y = y;
	this.width = width;
	this.height = height;
}
/**
 * Checks whether or not this Rectangle contains the point at the specified location (x, 
y).not.not implement
 * @param  {int} x
 * @param  {int} y
 */
 /**
 * Checks whether or not this Rectangle contains the specified Point. not implement
 * @param  {Point} point 
 */
js.ui.Rectangle.prototype.contains = function(x,y) {
	var x1 = this.x;
	var x2 = this.width;
	var y1 = this.y;
	var y2 = this.height;
	if((x-x1)<x2 &&(x-x1)> 0 &&(y-y1)<y2 && (y-y1)>0) return true;
	else return false;

}
/**
 * Construct MouseEvent inherits from Object.
 * @class MouseEvent  is the MouseEvent class.
 * @see Object Object is the base class for this
 */
js.ui.MouseEvent = function(){
	if(browser.isIE){
		this.leftButton=1;
		this.rightButton=2;
		this.middleButton=4;
	}
	else{
		this.leftButton=0;
		this.rightButton=2;
		this.middleButton=1;
	}
}

var MouseEvent = new js.ui.MouseEvent();

/**
 * Construct Component  inherits from Object.
 * @class Component  is the Component class.
 * @see Object Object  is the base class for this
 */
js.ui.Component = 
function(){
}

js.ui.Component.prototype = new js.lang.BaseObject();


js.ui.Component.prototype.popupMenu = null;


js.ui.Component.prototype.ui = null;

js.ui.Component.prototype.getUI = function (){
	if(this.ui) return this.ui;
	this.ui = this.getDomNode();
	this.ui.owner = this;
    this.ui.oncontextmenu = js.ui.Component.default_oncontextmenu;
	this.bindUI();
	return this.ui;
}
js.ui.Component.prototype.setUI = function (ui){
	this.ui = ui;
	ui.owner = this;
	this.bindUI();
}

js.ui.Component.prototype.bindUI = function (){
}

js.ui.Component.prototype.getDomNode = function (id){
	if(!id) id = this.getNativeClass();
	var classNode = document.getElementById(id);
	if (!classNode)
		throw "NativeClass not exists.";
	var node = classNode.cloneNode(true);
	node.id = "";
	return node;
}

js.ui.Component.prototype.getNativeClass = function (){
}

/**
 * add a listener of msg
 * @param {int} msg
 * 
 */
js.ui.Component.prototype.addListener = function (msg) {
	browser.addListener(this, msg);
}
/**
 * remove a listener of msg
 * @param {int} msg
 * 
 */
js.ui.Component.prototype.removeListener = function (msg) {
	browser.removeListener(this, msg);
}

js.ui.Component.default_oncontextmenu = function (event, noEventCancel) {
    if(!event)event=window.event;
	var popupmenu=this.owner.popupMenu;
	if(popupmenu)if(popupmenu.autoPopup) {
		if(this.style.zIndex>=0)
			popupmenu.ui.style.zIndex = this.style.zIndex+1;

		var x = event.clientX ? event.clientX : event.pageX;
		var y = event.clientY ? event.clientY : event.pageY;
/*		if(popupmenu.parentNode.getOffsetLeft){
			x = x-popupmenu.parentNode.getOffsetLeft();
			y = y-popupmenu.parentNode.getOffsetTop();
		}*/
		popupmenu.popup(x+2, y);
		if(!noEventCancel)
			return js.ui.Component.eventCancelBubble(event);
		else
			return true;
	}
}

js.ui.Component.eventCancelBubble = function(event){
	if(!event)event = window.event;
	if(browser.isIE){
		event.cancelBubble = true;
		event.returnValue = false;
	}
	else
		event.stopPropagation();
	return false;
}
js.ui.Component.prototype.show = function(){
	this.getUI().style.display = "";
}

js.ui.Component.prototype.hide = function(){
	this.getUI().style.display = "none";
}

js.ui.Component.prototype.setBounds = function(x, y, w, h){
	this.getUI().style.position = "absolute";
	this.ui.style.left = x;
	this.ui.style.top = y;
	this.ui.style.width = w;
	this.ui.style.height = h;
}
js.ui.Component.prototype.setSize = function(w, h){
	this.getUI().style.width = w;
	this.ui.style.height = h;
}

js.ui.Component.prototype.setOpacity = function(opacity){
	if(!this.ui) this.getUI();
	if(!this.ui.style) return;
	this.opacity = opacity;
	if (browser.isIE){
		if(opacity==null){
			if(this.ui.filters.alpha){
				var op = "alpha(opacity="+this.ui.filters.alpha.opacity+")";
				this.ui.style.filter = this.ui.style.filter.replace(op, "");
			}
		}
		else{
			if(!this.ui.style.filter)
				this.ui.style.filter = "alpha(opacity=" +opacity+ ")";
			else
				this.ui.style.filter += " alpha(opacity=" +opacity+ ")";
			if(typeof(this.ui.filters)!="unknown")
				if(this.ui.filters.alpha) this.ui.filters.alpha.opacity = opacity;
		}
	}
	else{
		if(opacity==null)
			this.ui.style.MozOpacity = null;
		else
			this.ui.style.MozOpacity = opacity/100;
	}
	
}

js.ui.Component.prototype.center = function (){
	this.ui.style.position = "absolute";
	var left = (document.documentElement.clientWidth-this.ui.offsetWidth) / 2  + js.util.Utils.prototype.getBodyScrollXY().x;
	if(left<0) left = 0;
	this.ui.style.left = left + "px";
	var top = (document.documentElement.clientHeight-this.ui.offsetHeight) / 2 + js.util.Utils.prototype.getBodyScrollXY().y;
	if(top<0) top = 0;
	this.ui.style.top = top + "px";
}


js.ui.Component.prototype.setMoveable = function(enable_move){
	this.moveable = enable_move;
	var ui = this.getUI();
	if(enable_move){
		ui.onmousedown = js.ui.Component.__onmousedown;
		ui.onmousemove = js.ui.Component.__onmousemove;
		ui.onmouseup = js.ui.Component.__onmouseup;
		ui.ondragstart = js.ui.Component.__ondragstart;
		ui.ondrag = js.ui.Component.__ondrag;
		ui.ondragend = js.ui.Component.__ondragend;
	}
	else{
		ui.onmousedown = null;
		ui.onmousemove = null;
		ui.onmouseup = null;
		ui.ondragstart = null;
		ui.ondrag = null;
		ui.ondragend = null;
	}
}

js.ui.Component.prototype.borderWidth = 10;

js.ui.Component.prototype.setResizeable = function(enable_resize){
	this.resizeable = enable_resize;
	var ui = this.getUI();
	if(enable_resize){
		ui.onmousedown = js.ui.Component.__onmousedown;
		ui.onmousemove = js.ui.Component.__onmousemove;
		ui.onmouseup = js.ui.Component.__onmouseup;
		ui.ondragstart = js.ui.Component.__ondragstart;
		ui.ondrag = js.ui.Component.__ondrag;
		ui.ondragend = js.ui.Component.__ondragend;
		ui.onmouseout = js.ui.Component.__onmouseout;
	}
	else{
		ui.onmousedown = null;
		ui.onmousemove = null;
		ui.onmouseup = null;
		ui.ondragstart = null;
		ui.ondrag = null;
		ui.ondragend = null;
		ui.onmouseout = null;
	}
}
js.ui.Component.prototype.setDragable = function(enable_drag) { 
	this.dragable = enable_drag;
	var ui = this.getUI();
	if(enable_drag){
		ui.onmousedown = js.ui.Component.__onmousedown;
		ui.onmousemove = js.ui.Component.__onmousemove;
		ui.onmouseup = js.ui.Component.__onmouseup;
		ui.ondragstart = js.ui.Component.__ondragstart;
		ui.ondrag = js.ui.Component.__ondrag;
		ui.ondragend = js.ui.Component.__ondragend;
	}
	else{
		ui.onmousedown = null;
		ui.onmousemove = null;
		ui.onmouseup = null;
		ui.ondragstart = null;
		ui.ondrag = null;
		ui.ondragend = null;
	}
}

/**
 * Gets the OffsetLeft by parent
 * @param  {js.ui.Container} parent
 * @return {int}
 */
js.ui.Component.prototype.getOffsetLeft = function(parent, scroll) { 
   var x = 0; 
   var el = this.getUI(); 
   while(el){ 
      x += el.offsetLeft-el.scrollLeft; 
	  if(scroll) x -= el.scrollLeft;
	  if(el.offsetParent==parent) break;
      el = el.offsetParent; 
   }
   return x;
} 
/**
 * Gets the OffsetTop by parent
 * @param  {js.ui.Container} parent
 * @return {int}
 */
js.ui.Component.prototype.getOffsetTop = function(parent, scroll) { 
   var y = 0; 
   var el = this.getUI(); 
   while(el){ 
      y += el.offsetTop-el.scrollTop;
	  if(el.offsetParent==parent) break;
      el = el.offsetParent; 
   }
   return y;
} 
js.ui.Component.prototype.getOffsetZIndex = function(parent) { 
   var el = this.getUI(); 
   var zIndex = el.style.zIndex; 
   if(!parent) parent== document.body;
   while(el){ 
	  if(el.offsetParent==parent) break;
      zIndex = el.style.zIndex; 
      el = el.offsetParent; 
   }
   if(zIndex==null) zIndex = 1;
   return zIndex;
}

js.ui.Component.__onmousedown = function(event) {
	if(!event)event = window.event;
	var owner = this.owner;
	if(event.button == MouseEvent.leftButton 
		&& (owner.dragable || owner.moveable || owner.resizeable)){//left button
		var x = event.clientX ? event.clientX : event.pageX;
		var y = event.clientY ? event.clientY : event.pageY;
		owner.__oldX = x;
		owner.__oldY = y;
		owner.__oldOffsetLeft = this.offsetLeft;
		owner.__oldOffsetTop = this.offsetTop;
		owner.__oldOffsetWidth = this.offsetWidth;
		owner.__oldOffsetHeight = this.offsetHeight;
		if(owner.__willResize) owner.__isResize = true;
		if(!owner.__isResize) owner.__isDrag = true;
		owner.__isStartDrag = false;
		return js.ui.Component.eventCancelBubble(event);
	}
}
js.ui.Component.__onmouseup = function(event) { 
	var __this;
	if(window.captureEventObject)
		__this = window.captureEventObject;
	else __this = this;
	var owner = __this.owner;
	if(!owner) return;
	if(owner.__isDrag || owner.__isResize){
		if(!event)event = window.event;
		if(owner.moveable && owner.__isDrag ){
			var x = event.clientX ? event.clientX : event.pageX;
			var y = event.clientY ? event.clientY : event.pageY;
			if(owner.__isStartDrag){
				if(x) __this.style.left = owner.__oldOffsetLeft + x-owner.__oldX + "px";
				if(y){
					var top = owner.__oldOffsetTop + y-owner.__oldY;
					if(top>=0) __this.style.top = top + "px";
				}
				if(__this.style.position == 'relative'){
					if(__this.parentNode.childNodes.length>1){
						__this.style.position = "absolute";
					}
				}
			}
//			if(__this.ondragend)
//				__this.ondragend(event);
		}
		if(owner.__isStartDrag){
			if(__this.ondragend)
				__this.ondragend(event);
		}
		if(browser.isIE)
			this.releaseCapture();
		else{
			window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
		}
		if(owner.__isStartDrag){
			owner.__isStartDrag = false;
			js.ui.Component.eventCancelBubble(event);
		}
	}
	owner.__isDrag = false;
	owner.__isResize = false;
	window.captureEventObject = null;
}

js.ui.Component.__onmousemove = function(event){
	if(!event)event = window.event;
	var __this,owner;
	if(window.captureEventObject)
		__this = window.captureEventObject;
	else __this = this;
	if(__this==window) return;
	owner = __this.owner;
	if(!owner.__oldCursor){
		owner.__oldCursor = __this.style.cursor;
		if(!owner.__oldCursor) owner.__oldCursor = "default";
	}

	var x = event.clientX ? event.clientX : event.pageX;
	var y = event.clientY ? event.clientY : event.pageY;
	if(!owner.__isStartDrag && (owner.__isResize || owner.__isDrag)){
		if(x!=owner.__oldX ||	y!=owner.__oldY){
			owner.__isStartDrag = true;
			if(browser.isIE){
				this.setCapture();
			}
			else {
				window.captureEventObject = this;
				window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
				window.__oldonmousemove = window.onmousemove;
				window.__oldonmouseup = window.onmouseup;
				window.onmousemove = this.onmousemove;
				window.onmouseup = this.onmouseup;
			}
		}
	}
	if(owner.__isDrag && owner.__isStartDrag){
		if(owner.dragable){
			if(browser.isIE)
				this.dragDrop();
			else{
				if(__this.ondragstart && !owner.__dragStart)
					__this.ondragstart(event);
				if(__this.ondrag)
					__this.ondrag(event);
			}
		}
		else if(owner.moveable){
			if(__this.ondragstart && !owner.__dragStart)
				__this.ondragstart(event);
			if(__this.ondrag)
				__this.ondrag(event);
		}
	}
	else if(owner.resizeable){
		if(owner.__isResize && owner.__isStartDrag){
			owner.__willResize = false;
			var cursor = __this.style.cursor;
			cursor = cursor.substring(0, 2);
			if(cursor.indexOf("e")!=-1 && x){
				var w = x-__this.owner.getOffsetLeft();
				if(w>=0) __this.style.width = w + "px";
			}
			if(cursor.indexOf("s")!=-1 && y){
				var h = y-__this.owner.getOffsetTop();
				if(h>=0) __this.style.height = h + "px";
			}
			if(cursor.indexOf("w")!=-1 && x){
				var w = owner.__oldOffsetWidth+(owner.__oldX-x);
				if(w>=0) __this.style.width  = w + "px";
				__this.style.left  = owner.__oldOffsetLeft-(owner.__oldX-x) + "px";
			}
			if(cursor.indexOf("n")!=-1 && y){
				var h = owner.__oldOffsetHeight+(owner.__oldY-y);
				if(h>=0) __this.style.height = h + "px";
				__this.style.top  = owner.__oldOffsetTop-(owner.__oldY-y)+"px";
			}
		}
		else{
			var cursor = "";
			owner.__willResize = true;
			if(y<owner.getOffsetTop(null,true)+owner.borderWidth){
				cursor += "n";
			}
			if(y>owner.getOffsetTop(null, true)+__this.offsetHeight-owner.borderWidth 
				&& y<=owner.getOffsetTop(null, true)+__this.offsetHeight){
				cursor += "s";
			}
			if(x>owner.getOffsetLeft(null, true)+__this.offsetWidth-owner.borderWidth 
				&& x<=owner.getOffsetLeft(document.body, true)+__this.offsetWidth){
				cursor += "e";
			}
			if(x<owner.getOffsetLeft(null, true)+owner.borderWidth){
				cursor += "w";
			}
			if(cursor!=""){
				cursor += "-resize";
			}
			if(!cursor){
				owner.__willResize = false;
				cursor = owner.__oldCursor;
			    if(!cursor)	cursor = "default";
			}
			__this.style.cursor = cursor;
			window.status = cursor;
		}
	}
	if(owner.__isStartDrag){
		return js.ui.Component.eventCancelBubble(event);
	}
}
js.ui.Component.__onmouseout = function(event){
	if(!event)event = window.event;
	var owner = this.owner;
	if(owner.__isResize || owner.__isDrag){
		this.onmousemove(event);
		js.ui.Component.eventCancelBubble(event);
	}
}
js.ui.Component.__ondragstart = function(event) {
	if(!event)event = window.event;
	var owner = this.owner;
	if(this.owner.dragable){
		if(!event.dataTransfer)
			event.dataTransfer = new js.lang.Array();
		event.dataTransfer.effectAllowed = "move";
	}
	owner.__dragStart = true;
	if(!owner.__dragView){
		owner.__dragView = new js.ui.Div();
		owner.__dragView.getUI().style.zIndex = this.style.zIndex+1;
		owner.__dragView.getUI().style.position = "absolute";
		owner.__dragView.getUI().onmousemove = function(event){
			if(!event)event = window.event;
		    var x = event.clientX ? event.clientX : event.pageX;
			if(x) this.style.left = x + "px";
		};
	}
	owner.__dragView.getUI().innerHTML = "";
	if(!this.owner.optimizeDisplay) {
		var newnode = this.cloneNode(true);
		newnode.style.position = "static";
		newnode.style.width = "100%";
		newnode.style.height = "100%";
		owner.__dragView.getUI().appendChild(newnode);
		owner.__dragView.setOpacity(50);
	}
	else{
		owner.__dragView.getUI().className = "ui_moving";
	}
	document.body.appendChild(owner.__dragView.getUI());
}

js.ui.Component.__ondrag = function(event) { 
	if(!event)event = window.event;
	var owner = this.owner;
    var x = event.clientX ? event.clientX : event.pageX;
    var y = event.clientY ? event.clientY : event.pageY;
	owner.__dragView.getUI().style.width = this.offsetWidth + "px";
	owner.__dragView.getUI().style.height = this.offsetHeight + "px";
	if(x && y){
		owner.__dragView.getUI().style.left = this.owner.getOffsetLeft(document.body, true)+x-owner.__oldX + "px";
		owner.__dragView.getUI().style.top = this.owner.getOffsetTop(document.body, true)+y-owner.__oldY + "px";
	}
}

js.ui.Component.__ondragend = function(event) { 
	if(!event)event = window.event;
	var owner = this.owner;
	owner.__dragStart = false;
	if(owner.__dragView){
		if(owner.__dragView.getUI().parentNode==document.body){
			document.body.removeChild(owner.__dragView.getUI());
		}
	}
	if(browser.isIE)
		this.releaseCapture();
	else{
		window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
    }
	owner.__isResize = false;
	owner.__isDrag = false;
	window.captureEventObject = null;
}

/**
 * Construct Container  inherits from Component.
 * @class Container  is the Container class.
 * @see Component Component  is the base class for this
 */
js.ui.Container = 
function() {
	
}

js.ui.Container.prototype = new js.ui.Component();

js.ui.Component.prototype.container = null;

js.ui.Container.prototype.getContainer = function() {
	if(!this.ui) this.getUI();
	return this.container;
}
/**
 *Appends the specified component to the end of this container??with the title be given if 
it exist
 * @param  {Component} component
 * @param  {String} title
 */
js.ui.Container.prototype.add = function(child) {
	var childUI = child;
	if(child.getUI) childUI = child.getUI();
	this.getContainer().appendChild(childUI);	
}

/**
 *Removes the specified component from this container. 
 * @param  {js.ui.Component} the child component
 */
/**
 *Removes the specified component from this container. 
 * @param  {int} the index of the component
 */
js.ui.Container.prototype.remove = function(indexOrobj) {

}
/**
 *Removes all the components from this container. 
 */
js.ui.Container.prototype.removeAll = function() {	
}
/**
 * destory the form
 */
js.ui.Container.prototype.destory = function (){
}

js.ui.Component.prototype.getOuterHTML = function(element )
{   
	if(!element) element = this;
	if(element.outerHTML) return element.outerHTML;
    element=element.cloneNode(true);
    var   outer = document.createElement("DIV");   
    outer.appendChild(element);   
    return   outer.innerHTML;   
}