var $=function(id){return typeof(id)=="string"?document.getElementById(id):id;}
function Drawing(id,speed,step,timeout){
	this.id=$(id);
	this.Div=document.createElement("div");
	this.Div.Id="Drawing_temId";
	this.Div.style.height="0px";
	this.Div.style.overflow="hidden";
	this.timeout=timeout;
	this.ostep=step;
	this.step=step;
	this.offsetHeight=function(){
		return this.Div.scrollHeight;
	}
	this.onstart=function(){};
	this.onend=function(){};
	this.oh=0;
	this.timer=null;
	this.load=function(){
	    document.body.appendChild(this.Div);
	    this.Div.innerHTML=this.id.innerHTML;
	    this.id.style.overflow="hidden";
	    this.oh=this.offsetHeight();
	    this.display("none");
	}
	this.start=function(){
	    this.display("block");
		this.onstart();
		this.open();
	}
	this.open=function(){
		if(!this.oh){this.oh=this.offsetHeight();}
		if(!this.id.style.height)this.id.style.height="0px";
		var $=this;
		var nh=$.id.style.height;
		if(parseInt(this.id.style.height)<(this.oh-this.step)){
			$.id.style.height=parseInt(nh)+this.step+++"px";
			setTimeout(function(){$.open();},speed);
		}else{
			clearTimeout(this.timer);
			this.timer=null;
			$.step=$.ostep;
			if(timeout)this.timer=setTimeout(function(){$.close();},timeout*1000);else $.close();
		}
	}
	this.close=function(){
		if(this.timer)clearTimeout(this.timer);this.timer=null;
		var $=this;
		var nh=this.id.style.height;
		if(parseInt(this.id.style.height)>this.step){
			$.id.style.height=parseInt(nh)-this.step+++"px";
			return this.timer=setTimeout(function(){$.close();},speed);
		}else{
			clearTimeout(this.timer)
			this.timer=null;
			this.id.style.display="none";
			this.Div.style.display="none";
			document.body.removeChild(this.Div);
			this.onend();
		}
	}
	this.display=function(v){
	    this.id.style.display=v;
	}
}
function AddEventListener(element,eventName,observer,useCapture){
	if (element.addEventListener) {
		 element.addEventListener(eventName, observer, useCapture);
    }else if (element.attachEvent) {
		 element.attachEvent('on' + eventName, observer);
    }
}
var demo=new Drawing("demo",10,10,8)
demo.load();
AddEventListener(window,"load",function(){setTimeout(function(){demo.start()},3000)},false);