var LIMIT=20;
var SPEED=20;


// call func(node,obj) for all children
function enumNodes(root,func,obj)
{
	for(var i=0;i<root.childNodes.length;i++) {
		var node=root.childNodes[i];
		if(node.hasChildNodes()) enumNodes(node,func,obj);
		func(node,obj);
		}
}



function popPane(el,W,H,initor,processor)
{
	if(!W) W=300;
	if(!H) H=200;
	if(processor) this.proc=processor;

	var obj = el.getBoundingClientRect();
	this.left = obj.left;
	this.top = obj.top;
	var offset= self.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || (document.body && document.body.scrollTop);
	this.top+=offset;

	this.width=el.offsetWidth;
	this.height=el.offsetHeight;


	//getSystemMetrics
	var win_width=window.innerWidth ? window.innerWidth : document.body.offsetWidth;
	var win_height=window.innerHeight ? window.innerHeight : document.body.offsetHeight;
	if(window.innerWidth){
		win_width = window.innerWidth;
		win_height = window.innerHeight;
	} else if (document.documentElement && document.documentElement.clientWidth){
		win_width = document.documentElement.clientWidth;
		win_height = document.documentElement.clientHeight;
	} else if (document.body.clientWidth){
		win_width = document.body.clientWidth;
		win_height = document.body.clientHeight;
	}


	this.e_top=win_height/2 - H/2 + offset;
	this.e_left=win_width/2 - W/2;
	this.e_width=W;
	this.e_height=H;


	var root = document.body;

	var idiv=document.createElement('div');
	this.idiv=idiv;
	idiv.obj=this;
	root.appendChild(idiv);

	idiv.style.backgroundColor="#FFFFFF";
	idiv.style.backgroundImage="url(handle.gif)";
	idiv.style.backgroundRepeat="no-repeat";
	idiv.style.backgroundPosition="bottom right";
	idiv.style.border="1px solid black";
	idiv.style.position="absolute";
	idiv.style.zIndex=10;
//	idiv.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=80);"; 
//	idiv.style.mozOpacity=0.8;	// Mozilla 1.6 and below
//	idiv.style.opacity=0.8; 	// others

	this.idiv.innerHTML=initor(el.innerHTML);

	this.on();

	return this;
}


popPane.prototype.on=function()
{
	this.pos=0;
	this.step=1;

	var _this=this;
	this.timer=setInterval(function(){
		_this.anima();
		_this.pos+=_this.step;
		_this.step++;
		if(_this.pos >= LIMIT) {
			if(_this.timer) {
				clearInterval(_this.timer);
				_this.timer=0;
				}
			_this.pos=LIMIT;
			_this.anima();
			}
		},
	SPEED);
}


popPane.prototype.off=function()
{
	if(this.timer) {
		clearInterval(this.timer);
		this.timer=0;
		}

	var root = document.body;
	root.removeChild(this.idiv);
}


popPane.prototype.anima=function()
{
	var progr=this.pos;
	if(this.proc) {
		enumNodes(this.idiv,function(node,prc){prc(node,progr);},this.proc);	// call func(node,obj) for all children
		}

	var l=(this.e_left - this.left) * this.pos / LIMIT + this.left;
	var t=(this.e_top - this.top) * this.pos / LIMIT + this.top;
	var w=(this.e_width - this.width) * this.pos / LIMIT + this.width;
	var h=(this.e_height - this.height) * this.pos / LIMIT + this.height;

	this.idiv.style.left=l+'px';
	this.idiv.style.top=t+'px';
	this.idiv.style.width=w+'px';
	this.idiv.style.height=h+'px';
}