function node_addEventListener(node, type, method)
{
	if(node.addEventListener){
		node.addEventListener(type, function(eventObj){
			var self = eventObj.target;
			if(self.nodeType == 9) // document
				self = eventObj.currentTarget;
			if(self.nodeType == 3) // #text (safari fix)
				self = self.parentNode;
			method.apply(self, [eventObj]);
		}, false);
	}else if(node.attachEvent){
		node.attachEvent('on'+type, function(){
			var self = window.event.srcElement;
			method.apply(self, [window.event]);
		});
	}
}
function PullDownBox(el, boxId, containerId)
{
	this.node = el;
	this.boxId = boxId;
	this.containerId = containerId;
	this.box = document.getElementById(boxId);
	this.container = document.getElementById(containerId);
	this.node.control = this.box.control = el.control = this;
	this.nodeRect = Rect.elementRect(this.node);
	this.id = PullDownBox.prototype.id++;
	PullDownBox.instances[this.id] = this;
	this.box.style.position = "relative";
	this.expanded = false;
}
PullDownBox.prototype.id = 0;
PullDownBox.instances = new Array();

PullDownBox.attach = function(el, boxId, containerId)
{
	var pullDownBox = new PullDownBox(el,boxId, containerId);
	node_addEventListener(el, "mouseout", function(eventObj){
			var node = this;
			while(!node.control)
				node = node.parentNode;
			if(node.control){
				var p = Point.convertEvent(eventObj);
				var rect = Rect.elementRect(node.control.container);
				if(!pointInRect(p, rect) && !pointInRect(p, node.control.nodeRect))
					node.control.collapse();
			}
		});
	node_addEventListener(pullDownBox.box, "mouseout", function(eventObj){
			var node = this;
			while(!node.control)
				node = node.parentNode;
			if(node.control){
				var p = Point.convertEvent(eventObj);
				var rect = Rect.elementRect(node);
				if(!pointInRect(p, rect) && !pointInRect(p, node.control.nodeRect))
					node.control.collapse();
			}
		});
}
PullDownBox.prototype.interval = 5;
PullDownBox.prototype.numberOfSteps = 10;
PullDownBox.prototype.doCollapse = function(y, h, step)
{
	y += step;
	if(y >= h){
		this.container.style.owerflow = "";
		this.container.style.visibility = "hidden";
	}else{
		this.box.style.top = -y + "px";
		window.setTimeout("PullDownBox.instances[" + this.id + "].doCollapse(" + y + "," + h + "," + step + ")", this.interval);
	}
}
PullDownBox.prototype.doExpand = function(y, step)
{
	y -= step;
	if(y <= 0){
		this.box.style.top = 0;
		this.container.style.owerflow = "";
	}else{
		this.box.style.top = -y + "px"
		window.setTimeout("PullDownBox.instances[" + this.id + "].doExpand(" + y + "," + step + ")", this.interval);
	}
}

PullDownBox.prototype.collapse = function()
{
	if(this.expanded){
		var r0 = Rect.elementRect(this.box);
		var step = Math.ceil(r0.height/this.numberOfSteps);
		this.container.style.overflow = "hidden";
		window.setTimeout("PullDownBox.instances[" + this.id + "].doCollapse(0," + r0.height + "," + step + ")", this.interval);
		this.expanded = false;
	}
}
PullDownBox.prototype.expand = function()
{
	if(!this.expanded){
		var r0 = Rect.elementRect(this.box);
		var step = Math.ceil(r0.height/this.numberOfSteps);
		this.container.style.top = (this.nodeRect.y + this.nodeRect.height) + "px";
		this.box.style.top = -r0.height + "px";
		this.container.style.overflow = "hidden";
		this.container.style.visibility = "visible";
		window.setTimeout("PullDownBox.instances[" + this.id + "].doExpand(" + r0.height + "," + step + ")", this.interval);
		this.expanded = true;
	}
}


PullDownBox.showPullDownBox = function(el, boxId, containerId)
{
	if(!el.control)
		PullDownBox.attach(el, boxId, containerId);
	el.control.expand();
}