/*******************************************
	
		Made by Hamt.     09.08.26

	사용법 : 
////////////////////////////////
	<div id=ranking style='border:1px solid gray;width:200px;'>
	</div>

	<s cript>
	var hr = new HamtRanking('hr', 'ranking', 19);
	hr.AddItem('1. 동해물과');
	hr.AddItem('2. 백두산이');
	hr.AddItem('3. 마르고');
	hr.Run();

	function update()
	{
		hr.UpdateItem('1. 남산위의');
		hr.UpdateItem('2. 저소나무');
		hr.UpdateItem('3. 철갑을');	
		hr.Update();
	}
	
	setInterval('update()', 10000);
</s cript>
////////////////////////

*****************************************************/
var HamtRanking = function(objName, objid, itemheight)// 객체 명, 랭킹div ID, 목록 개당 높이(px)
{

	this.speed = 30; // x / 1000초. 값이 클수록 늦어진다



	var objName = objName;
	var height = itemheight;
	var count = count;
	var box = document.getElementById(objid);

	var container = document.createElement('div');

	var htmls = [];
	var updatehtmls = [];
	var view_divs = [];
	var hidden_divs = [];

	var actionitemindex = 0;

	this.AddItem = function(html)
	{
		htmls[htmls.length] = html;
	}
	this.UpdateItem = function(html)
	{
		updatehtmls[updatehtmls.length] = html;
	}
	this.Run = function()
	{
		for(var i = 0 ; i < htmls.length ; i++)
		{
			var div = document.createElement('div');
			div.style.padding = '0px';
			div.style.margin = '0px';
			div.style.height = height+'px';
			div.style.overflow = 'hidden';
			div.style.position = 'relative';
			

			var hidediv = document.createElement('div');
			hidediv.style.padding = '0px';
			hidediv.style.margin = '0px';
			hidediv.style.height = height+'px';
			hidediv.style.position = 'absolute';
			hidediv.style.top = -height+'px';

			hidden_divs[hidden_divs.length] = hidediv;

			var viewdiv = document.createElement('div');
			viewdiv.style.padding = '0px';
			viewdiv.style.margin = '0px';
			viewdiv.style.height = height+'px';
			viewdiv.style.position = 'absolute';
			viewdiv.style.top = '0px';

			view_divs[view_divs.length] = viewdiv;


			viewdiv.innerHTML = htmls[i];
			updatehtmls[updatehtmls.length] = htmls[i];

			div.appendChild(hidediv);
			div.appendChild(viewdiv);

			container.appendChild(div);
		}
		box.appendChild(container);
		this.Update();
	}
	this.Update = function()
	{
		for(var i = 0 ; i < hidden_divs.length ; i++)
		{
			var data = (updatehtmls[i]) ? updatehtmls[i] : '' ;
			hidden_divs[i].innerHTML = data;
		}
		this.Action();
	}

	///////////////// private

	this.Action = function()
	{
		//alert(actionitemindex);
		var vobj = view_divs[actionitemindex];
		var hobj = hidden_divs[actionitemindex];

		var vy = parseInt(vobj.style.top.split('px')[0]);
		var hy = parseInt(hobj.style.top.split('px')[0]);

		if(vy == 0)
			Transparent(vobj, 50); //투명처리

		vobj.style.top = (vy+1)+'px';
		hobj.style.top = (hy+1)+'px';

		if(hy+1 == 0)
			actionitemindex++;

		if(actionitemindex <  view_divs.length)
			setTimeout(objName+'.Action()', this.speed);
		else
		{
			ActionEnd();
		}
	}
	
	function ActionEnd()
	{
		actionitemindex = 0;
		updatehtmls = [];
		for(var i = 0 ; i < view_divs.length; i++)
		{
			Transparent(view_divs[i], 100);
			view_divs[i].innerHTML = hidden_divs[i].innerHTML;
			view_divs[i].style.top = '0px';
			hidden_divs[i].style.top = -height+'px';
		}
	}

	function Transparent(obj, num)//num이 높을수록 진함
	{
		obj.style.opacity = (num/100);
		obj.style.MozOpacity = (num/100);
		obj.style.KhtmlOpacity = (num/100);
		obj.style.filter = 'alpha(opacity='+num+')';
	}
}