/**
 * 배너를 출력하는 Javascript
 * 
 * 배너를 다양한 형태로 출력하여 주어 사용자에게 제공하기 위한 스크립트
 * 
 * @param	object		json 형식의 배너 정보
 * @param	int			배너시간 초단위
 * @param	type			형태 
 *									virtical, horizontal, rand
 * @node		object		배너가 그려진 Elemenet id
 *
 *img:'http://img0001.echosting.cafe24.com/front/type_b/image/common/top_search.gif',  target:'_blank', link:'http://www.yahoo.co.kr'
 */

var BANNER = {
	elements: [],

	start: function(aBanner, interval, type, element) {
		this.aBanner	= aBanner;
		this.interval		= interval;
		this.type			= type;
		this.element		= element;
		this.imgCnt		= aBanner.length;
		
		
		this.initElement();
		this.initImage();

		this.elements[0].style.display = 'block';
		this.rollingNo	= 1;		
		
		this.setRolling();
	},	

	setRolling: function() {
		this.rollingIntervalId =	setInterval("BANNER.ROLLING.start()", (this.interval*1000));
	},
	
	/**
	 * 작성할 엘레멘트를 초기화 해줌 
	 */
	initElement: function()
	{
		this.setStyle(this.element, {
			position	:'relative',
			width		:this.element.offsetWidth,
			height		:this.element.offsetHeight,
			overflow	:'hidden'
		});
	},

	/**
	 * 사용자 정의 배너 정보를 만들어줍니다.
	 */
	initImage: function()
	{
		for(var i=0; i<this.imgCnt; i++) {
			this.createImage(this.aBanner[i], i);			
		}
	},

	createImage: function(imageInfo, no)
	{
		var node = document.createElement('a');
		node.target				= 	imageInfo.target;
		node.href					=	imageInfo.href;
		node.style.display	= 'none';

		node.onmouseover = function() {
			clearTimeout(BANNER.rollingIntervalId);
		}

		node.onmouseout = function() {
			BANNER.setRolling();
		}

		node.innerHTML = '<img src="'+imageInfo.img+'" alt="배너 '+no+'" />';
		this.element.appendChild(node);
		this.elements[no] = node;
	},

	setStyle: function(node, aStyle) {
		for(k in aStyle) {
			node.style[k] = aStyle[k];
		}
	}
};

BANNER.ROLLING = {
	prevNo: 0,	//이전 NO
	nextNo: 0,
	currentNo: 0,
	repeatNo	: 0,	//반복 No	

	start: function() {
		this.repeatNo = 0;
		this.setRollingNo();
		this[BANNER.type]();
	},

	virtical: function()	{
		BANNER.VIR.start();
	},
	
	horizontal: function() {
		BANNER.HOR.start();
	},

	rand: function() {
		var aPos = ['virtical', 'horizontal'];
		var rand = Math.floor(Math.random() * aPos.length);
		this[aPos[rand]]();
	},


	slide: function()
	{
		BANNER.elements[this.currentNo].style.display = 'block';
		BANNER.elements[this.prevNo].style.display = 'none';
	},

	setRollingNo: function()
	{
		this.prevNo		= (BANNER.rollingNo == 0)								?  (BANNER.imgCnt-1) : (BANNER.rollingNo-1);
		this.nextNo		= (BANNER.rollingNo == BANNER.imgCnt)		?  0 : (BANNER.rollingNo+1);
		this.currentNo	= BANNER.rollingNo;
		
		BANNER.rollingNo++;	
		if(BANNER.rollingNo ==   BANNER.imgCnt) 	 BANNER.rollingNo = 0;
	}
};


BANNER.EFFECT = {

	init: function(offsetSize, execFunc) {
		this.interval									= 30;
		this.moveSize								= offsetSize;
		this.movePx									= this.moveSize/30;
		this.execFunc								= execFunc;		

		this.setZIndex(BANNER.elements[BANNER.ROLLING.prevNo], BANNER.elements[BANNER.ROLLING.currentNo]);
		this.setCurrentElementStyle(this.execFunc());
		this.moveInterval = setInterval("BANNER.EFFECT.execute()",this.interval);
	},

	setCurrentElementStyle: function(aPos) 	{	
		BANNER.setStyle(BANNER.elements[BANNER.ROLLING.currentNo], {
			position	:'absolute',
			display		: 'block',
			top			: aPos.top+'px',
			left			: aPos.left+'px'
		});		
		BANNER.ROLLING.repeatNo++;
	},

	setDisableEffect: function(pNode, cNode) {
		BANNER.setStyle(pNode, {display:'none'});
		BANNER.setStyle(cNode, {position:'static'});
	},
	
	getPos: function()
	{
		var pos = (this.moveSize-(this.movePx*BANNER.ROLLING.repeatNo));
		return  pos < 0 ? -1 : pos;
	},
	
	execute: function() 
	{
		var pos =  this.getPos();		
		if(pos <= 0) {
			this.setDisableEffect(BANNER.elements[BANNER.ROLLING.prevNo],  BANNER.elements[BANNER.ROLLING.currentNo]);
			clearTimeout(this.moveInterval);			
		}		
		this.setCurrentElementStyle(this.execFunc());
	},

	setZIndex: function(preNode, curentNode) {
		BANNER.setStyle(preNode, {zIndex:'10'});
		BANNER.setStyle(curentNode, {zIndex:'11'});
	}
};


BANNER.VIR = {
	start: function() {					
		BANNER.EFFECT.init(BANNER.element.offsetHeight, this.getPos);			
	},
	
	getPos: function() {
		return {top:BANNER.EFFECT.getPos(), left:0};
	}
};


BANNER.HOR = {
	start: function() {					
		BANNER.EFFECT.init(BANNER.element.offsetWidth, this.getPos);			
	},
	
	getPos: function() {
		return {top:0, left:BANNER.EFFECT.getPos()};
	}
};