/*
	파일명 : lib.wheelitem.js
	작성자 : 이범민
	용  도 : 이동 아이템 요소(마우스휠 가능)
	호환성 : IE only
	사용법 : 
		<button onclick="wheel.moveUp('menu');">위</button>
		<div id="menu" target_id="menuBar" style="width:100px;height:200px;overflow:hidden;border:solid 1px #FF0000" align="center">
		<div id="menuBar" style="width:90px;border:solid 1px #0000FF">
		</div>
		</div>
		<button onclick="wheel.moveDown('menu');">아래</button>
		<button onclick="addItem();">추가</button>
		
		<script type="text/javascript">
		// ޴ 
		var wheel = new WheelItems(
			'menu',
			{
				'menu1':'<div style="height:50px;border:solid 1px green;">޴1 <a href="javascript:removeItem(\'menu1\');">x</a></div>',
				'menu2':'<div style="height:70px;border:solid 1px green;">޴2 <a href="javascript:removeItem(\'menu2\');">x</a></div>',
				'menu3':'<div style="height:40px;border:solid 1px green;">޴3 <a href="javascript:removeItem(\'menu3\');">x</a></div>',
				'menu4':'<div style="height:30px;border:solid 1px green;">޴4 <a href="javascript:removeItem(\'menu4\');">x</a></div>',
				'menu5':'<div style="height:40px;border:solid 1px green;">޴5 <a href="javascript:removeItem(\'menu5\');">x</a></div>',
				'menu6':'<div style="height:90px;border:solid 1px green;">޴6 <a href="javascript:removeItem(\'menu6\');">x</a></div>',
				'menu7':'<div style="height:50px;border:solid 1px green;">޴7 <a href="javascript:removeItem(\'menu7\');">x</a></div>'
			}
		);
		function removeItem(id) {
			wheel.removeItem(id);
		}
		var itemNum = 8;
		function addItem() {
			wheel.addItem('menu' + itemNum,'<div style="height:50px;border:solid 1px green;">޴'+itemNum+' <a href="javascript:removeItem(\'menu'+itemNum+'\');">x</a></div>');
			itemNum++;
		}
		</script>
*/

WheelItems = function(id, menus) {
	this.id = id;
	this.el = document.getElementById(id);
	this.el.obj = this;
	this.target_id = this.el.getAttribute("target_id");
	this.target = document.getElementById(this.target_id);
	if(this.target == null) return;
	this.target.style.position = 'relative';
	this.target.style.top = '0px';
	this.cur_item = 0;
	this.move_cnt = 0;
	this.items = new Array();
	if (typeof menus == 'object') {
		for(item_id in menus) {
			this.addItem(item_id, menus[item_id], true);
		}
	}
	
	var obj = this;
	this.el.onmousewheel = function() { obj.onwheel(event); return false; };
	this.operHeight();
}
WheelItems.prototype.operHeight = function() {
	setTimeout("WheelItems.prototype._operHeight('" + this.id + "')",100);
}
WheelItems.prototype._operHeight = function(id) {
	obj = id ? document.getElementById(id).obj : this;
	obj.last_item = obj.items.length - 1;
	obj.target_top = obj.el.clientHeight - obj.target.clientHeight;
}
WheelItems.prototype.onwheel = function(event) {
	direction = (event.wheelDelta > 0 ? -1 : 1);
	this.action(direction);
}
WheelItems.prototype.action = function(direction) {
	cal = this.cur_item + this.move_cnt + direction;
	if(cal < 0 || cal >= this.last_item) return;
	if(direction > 0 && this.target_top + this.items[cal].offsetTop + this.items[cal].clientHeight > 0) {
		this.last_item = Math.min(cal + 1,this.items.length - 1);
	}
	this.move_cnt += direction;
	setTimeout("WheelItems.prototype.move('" + this.id + "')",1);
}
WheelItems.prototype.move = function(id) {
	obj = document.getElementById(id).obj;
	direction = obj.move_cnt > 0 ? 1 : -1;
	if(obj.cur_item + direction < 0 ) return;
	velocity = Math.floor((obj.items[obj.cur_item + direction].offsetTop + (obj.target.offsetTop))/2);
	target_top = (obj.parseNumber(obj.target.style.top) - velocity);
	if(velocity == 0) {
		obj.move_cnt -= direction;
		obj.cur_item += direction;
	} else {
		obj.target.style.top = target_top + 'px';
		setTimeout("WheelItems.prototype.move('" + obj.id + "')",50);
	}
}
WheelItems.prototype.parseNumber = function(str) {
	number = '-0123456789';
	num = '';
	for(i=0,cnt=str.length;i<cnt;i++) {
		if(number.indexOf(str.substr(i,1)) > -1) {
			num += str.substr(i,1);
		}
	}
	return Number(num);
}
WheelItems.prototype.addItem = function(id, html, not_dynamic) {
	if(this.findItem(id) == -1) {
		this.items[this.items.length] = this.createElement(this.target, id, html);
		this.operHeight();
		if(!not_dynamic) this.moveLast();
		return true;
	}
	return false;
}
WheelItems.prototype.removeItem = function(id) {
	index = this.findItem(id);
	this.items[index].removeNode(true);
	if (index > -1) {
		arr1 = this.items.slice(0,index);
		arr2 = this.items.slice(index+1,this.items.length)
		this.items = arr1.concat(arr2);
		
		if (this.cur_item == index) {
			if (this.cur_item == (this.items.length - 1)) {
				this.cur_item--;
			} else {
				this.cur_item++;
			}
			this.moveUp();
			this.moveUp();
		} else if (this.last_item <= index) {
			this.moveUp();
		}
		this.operHeight();
		return true;
	}
}
WheelItems.prototype.findItem = function(id) {
	for(i = 0,cnt = this.items.length; i < cnt; i++) {
		if(this.items[i].item_id == id) return i;
	}
	return -1;
}
WheelItems.prototype.createElement = function(target, id, html) {
	div = document.createElement('DIV');
	div.id = this.id + '_' + id + '_' + Math.ceil(Math.random() * 1000);
	div.item_id = id;
	div.innerHTML = html;
	target.appendChild(div);
	return div;
}
WheelItems.prototype.moveUp = function() {
	this.action(-1);
}
WheelItems.prototype.moveDown = function() {
	this.action(1);
}
WheelItems.prototype.moveLast = function() {
	num = this.last_item - this.cur_item;
	if(num > 0) for(i=0;i<num;i++) this.moveDown();
}