/*********************************************************
제작자 : 함트 

파라메타 설명
 objName : 생성한 개체 명
layerid : 액션을 부여할 레이어 id
xy : x 또는 y. 가로 액션을 줄 경우 x, 세로 엑션을 줄 경우 y입력.
     x정의시 인라인 스타일로 width가 명시되어야 함. ( <div style='width:300px;'>)
     y정의시 인라인 스타일로 height가 명시되어야 함. ( <div style='height:300px;'>)
[remain] : 안줘도 됨. 줄 경우 숨길때 준 숫자만큼의 픽셀을 남겨둠

************************************************************/
var HOpenClose = function(objName, layerid, xy, remain)//개체명, 리사이즈될 레이어 ID, 수직:x or 수평:y
{
	this.objName = objName;
	this.obj = document.getElementById(layerid);
	this.obj.style.overflow = 'hidden';
	this.xy = xy;

	this.oriwidth = this.obj.style.width.split('px')[0];
	if(!this.oriwidth)
		this.oriwidth = this.obj.offsetWidth;

	this.oriheight = this.obj.style.height.split('px')[0];
	if(!this.oriheight)
		this.oriheight = this.obj.offsetHeight;

	//alert(this.oriwidth);

	this.tan = 0.7;
	this.speed = 10;

	if(!remain)
		remain = 1;
	this.remain = remain;//손잡이를위해 남겨놓을 픽셀 수

	if(this.xy == 'x')
		this.obj.style.width = this.remain+'px';
	else if(this.xy == 'y')
		this.obj.style.height = this.remain+'px';
	else if(this.xy == 'xy')
	{
		this.obj.style.width = this.remain+'px';
		this.obj.style.height = this.remain+'px';
	}
	this.prexmode = 'dec';
	this.xmode = 'stop';
	this.preymode = 'dec';
	this.ymode = 'stop';
	this.bg = document.createElement('div');
	this.bg.style.position='absolute';
	this.bg.style.left = '0px';
	this.bg.style.top = '0px';


	this.bg.style.width = '100%';	
	this.bg.style.height = '100%';	

	this.bg.style.display = 'none';
	this.bg.style.top = '0px';
	this.bg.style.background = "#000";
	this.bg.style.opacity = (50/100);
	this.bg.style.MozOpacity = (50/100);
	this.bg.style.KhtmlOpacity = (50/100);
	this.bg.style.filter = 'alpha(opacity=50)';

	//document.getElementsByTagName('body')[0].insertBefore(this.bg,document.getElementsByTagName('body')[0].firstChild);



	this.reset_size = function()
	{
		this.obj.overflow = '';
		this.obj.style.width = '';
		this.obj.style.height = '';

		this.oriwidth = this.obj.style.width.split('px')[0];
		if(!this.oriwidth)
			this.oriwidth = this.obj.offsetWidth;

		this.oriheight = this.obj.style.height.split('px')[0];
		if(!this.oriheight)
			this.oriheight = this.obj.offsetHeight;

		this.obj.overflow = 'hidden';
		this.obj.style.width = this.oriwidth+'px';
		this.obj.style.height = this.oriheight+'px';

	}
	this.toggle = function()
	{
		var mode = (this.xy == 'x')? this.prexmode : this.preymode;
		//(this.xy == 'y') ? this.preymode : (this.prexmode == 'stop')? this.preymode : this.prexmode;
		
		//alert(mode);
		switch(mode)
		{
			case 'inc' :
				this.hidden();
				break;
			case 'dec' :
				this.view();
				break;
		}
	}
	this.hidden = function()
	{
		this.bg.style.display = 'none';
		
		if(this.xy == 'x')
		{
			this.xmode = 'dec';
			this.hiddenX();
		}
		if(this.xy == 'y')
		{
			this.ymode = 'dec';
			this.hiddenY();
		}
		if(this.xy == 'xy')
		{
			this.xmode = 'dec';
			this.ymode = 'dec';
			this.hiddenX();
			this.hiddenY();
		}
	}
	this.view = function()
	{
		this.bg.style.display = 'block';

		
		if(this.xy == 'x')
		{
			this.xmode = 'inc';
			this.viewX();
		}
		if(this.xy == 'y')
		{
			this.ymode = 'inc';
			this.viewY();
		}
		if(this.xy == 'xy')
		{
			this.xmode = 'inc';
			this.ymode = 'inc';
			this.viewX();
			this.viewY();
		}
	}
////////// private
	this.hiddenX = function()
	{
		if(this.xmode != 'dec')
			return;

		var w = this.obj.style.width.split('px')[0];

		
		w *= this.tan;
		w = parseInt(w);
		if(w > this.remain)//동작중
		{
			this.obj.style.width = w+'px';
			setTimeout(this.objName+'.hiddenX()', this.speed);
			return;
		}
		else
		{
			//alert('end');
			this.obj.style.width = this.remain+'px';
			this.xmode = 'stop';
			this.prexmode = 'dec';
		}		
	}
	this.hiddenY = function()
	{
		if(!this.remain)
			this.remain = 1;
		//alert(this.ymode);
		if(this.ymode != 'dec')
			return;

		var h = this.obj.style.height.split('px')[0];

		
		h *= this.tan;
		h = parseInt(h);
		//alert(h);
		if(h > this.remain)//동작중
		{
			this.obj.style.height = h+'px';
			setTimeout(this.objName+'.hiddenY()', this.speed);
			return;
		}
		else
		{
			this.obj.style.height = this.remain+'px';
			this.ymode = 'stop';
			this.preymode = 'dec';
		}		
	}
	this.viewX = function(prew)
	{
		//alert('view x xmode = '+this.xmode);
		if(this.xmode != 'inc')
			return;

		var w = this.obj.style.width.split('px')[0];
		if(!w)
			w = 1;

		w = parseInt(w) + (this.oriwidth - w) * (1-this.tan);
		w = parseInt(w);

		//alert('prew : '+prew+', w : '+w);

		if(w != prew && w < this.oriwidth)//동작중
		{
			
			this.obj.style.width = w+'px';
			setTimeout(this.objName+'.viewX('+w+')', this.speed);
			return;
		}
		else
		{
			//alert('end');
			this.obj.style.width = this.oriwidth+'px';
			this.xmode = 'stop';
			this.prexmode = 'inc';
		}		
	}
	this.viewY = function(preh)
	{
		
		if(this.ymode != 'inc')
			return;

		var h = this.obj.style.height.split('px')[0];
		if(!h)
			h = 1;
		
		h = this.oriheight - (this.oriheight-h) * this.tan;
		h = parseInt(h);
		//alert(preh+', '+h);
		if(h != preh &&h < this.oriheight)//동작중
		{
			this.obj.style.height = h+'px';
			setTimeout(this.objName+'.viewY('+h+')', this.speed);
			return;
		}
		else
		{
			//alert('end');
			this.obj.style.height = this.oriheight+'px';
			this.ymode = 'stop';
			this.preymode = 'inc';
		}		
	}
}