/**********************************
 *	·Ñ¸µ ½ºÅ©¸³Æ® using prototype
 *	ÃÖÁ¾¼öÁ¤ÀÏ : 2008-06-04
 *	ÃÖÁ¾¼öÁ¤ÀÚ : °í¿Õ±¹
 **********************************/

/**********************************
 * ¿µ¿ªºÎºÐ style="position:relative;" ¹Ýµå½Ã ÇÊ¿ä
 * Slider('¿µ¿ª', '¸®½ºÆ®', 'left or up', '½Ã°£', '¿òÁ÷ÀÌ´Â °Å¸®(px)', '¸ØÃçÀִ½ð£');
 * right , down ¾ÆÁ÷ ¹Ì±¸Çö
 **********************************/

/**********************************
 *	»ç¿ë¿¹
	<style>
	#logo_area{
		position:relative;
		height:100px;
		width:300px;
		text-align:left;
	}

	div.logo_list{
		width:300;
		height:100px;
	}
	</style>
	<div id="logo_area">
		<div class="logo_list" style="background-color:#FFFF00;">
		³»¿ë1
		</div>
		<div class="logo_list" style="background-color:#FF00FF;">
		³»¿ë2
		</div>
	</div>
	<script language="JavaScript" type="text/JavaScript" src="/js/prototype.js"></script>
	<script language="JavaScript" type="text/JavaScript" src="/js/slider.js"></script>
	<script language="JavaScript" type="text/JavaScript">

	Event.observe(window,'load', function() {

		var slider = new Slider('logo_area', 'div.logo_list', 'up', 50, 5, 3);

		Event.observe($('logo_area'),'mouseover', function(){
			slider.stop();
		});
		Event.observe($('logo_area'),'mouseout', function(){
			slider.start();
		});
		Event.observe($('logo_area'),'mousedown', function(){
			slider.next();
		});
	});

	</script>
 **********************************/
var Slider = Class.create();
Slider.prototype = {
	initialize: function(area, items, direction, time, term, wait_time) {
		this.area = $(area);
		
		this.items = $$(items);
		this.time = time;
		//this.time = 1000;
		this.wait_time = wait_time * 1000;
		this.direction = direction;
		//this.direction = 'left';
		switch(this.direction) {
			case 'up':
			case 'left':
				this.term = term;
				break;
			case 'down':
			case 'right':
				this.term = term * -1;
				break;
		}

		var pos = Position.realOffset(area);

		this.top = pos[1];
		this.left = pos[0];

		this.isPlay = true;
		this.start_item = 0;
		this.moving_step=0;

		this.currentlyExecuting = false;

		for(i=0; i<this.items.length; i++) {
			this.items[i].hide();
			this.items[i].setStyle({'position':'absolute'});
		}

		this.start();
	},
	set: function() {
		if (this.iswait) {
			clearTimeout(this.wait);
			this.iswait = false;
		}
		var cur = this.start_item;

		var cnt = 0;
		var step = 0;
		var rect_top = 0;
		var rect_right = 0;
		var rect_bottom = 0;
		var rect_left = 0;
		var next = false;
		if (this.direction=='left') {
			if(this.moving_step>this.items[this.start_item].offsetWidth)
				this.moving_step = this.items[this.start_item].offsetWidth;
			step = this.left - this.moving_step;
		} else if (this.direction == 'up') {
			if(this.moving_step>this.items[this.start_item].offsetHeight)
				this.moving_step = this.items[this.start_item].offsetHeight;
			step = this.top - this.moving_step;
		} else if (this.direction=='right') {
			if(this.moving_step>this.items[this.start_item].offsetWidth)
				this.moving_step = this.items[this.start_item].offsetWidth;
			step = this.left - this.moving_step;
		}
		
		for(i=0; i<this.items.length; i++) {
			if (this.direction=='left') {
				if (step<this.left + this.area.offsetWidth || i<2) {
					this.items[cur].show();
					this.items[cur].style.left = step;
					rect_top = 0;
					rect_bottom = this.area.offsetHeight;
					rect_left = this.left-step;
					if(step+this.items[cur].offsetWidth>this.left+this.area.offsetWidth)
						rect_right = this.items[cur].offsetWidth-((step+this.items[cur].offsetWidth)-(this.left+this.area.offsetWidth));
					else
						rect_right = this.items[cur].offsetWidth;
					this.items[cur].setStyle({'clip':'rect('+rect_top+'px '+rect_right+'px '+rect_bottom+'px '+rect_left+'px)'});
					step = step + this.items[cur].offsetWidth;
					cur++;
					if(cur==this.items.length)	cur = 0;
				} else {
					this.items[cur].hide();
				}
				//$('log').innerHTML +=  step + '    ' + rect_left + '::::' + rect_top + '::::' + rect_right + '::::' + rect_bottom + '<br >';
			} else if (this.direction == 'up') {
				if(step<this.top+this.area.offsetHeight || i<2) {
					this.items[cur].show();
					this.items[cur].style.top = step;
					rect_top = this.top-step;
					if(step>=this.top + this.area.offsetHeight)
						rect_bottom = 0;
					else
						rect_bottom = rect_top+this.area.offsetHeight;
					rect_right = this.area.offsetWidth;
					this.items[cur].setStyle({'clip':'rect('+rect_top+'px '+rect_right+'px '+rect_bottom+'px '+rect_left+'px)'});

					step = step + this.items[cur].offsetHeight;
					cur++;
					if(cur==this.items.length)	cur = 0;
				} else {
					this.items[cur].hide();
				}
			} else if (this.direction=='right') {
				if(step<this.left + this.area.offsetWidth || i<2) {
					this.items[cur].show();
					this.items[cur].style.left = step;
					rect_top = 0;
					rect_bottom = this.area.offsetHeight;

					rect_left = this.left+step;
//					if(step+this.items[cur].offsetWidth>this.left+this.area.offsetWidth)
					rect_right = this.left + this.area.offsetWidth - step;
//					else
//						rect_right = this.items[cur].offsetWidth;

					this.items[cur].setStyle({'clip':'rect('+rect_top+'px '+rect_right+'px '+rect_bottom+'px '+rect_left+'px)'});
					step = step - this.items[cur].offsetWidth;
					cur--;
					if(cur<0)	cur = this.items.length-1;
					
				} else {
					this.items[cur].hide();
				}
				//$('log').innerHTML +=  this.left + '  ' + this.area.offsetWidth + '  ' + step + '  ' + rect_left + '::::' + rect_top + '::::' + rect_right + '::::' + rect_bottom + '<br >';
				//$('log').innerHTML +=  i + '::::' + this.left+ '::::' + this.area.offsetWidth + '::::' + this.start_item+ ':::' + cur + '<br />';
			}

		}
		//$('log').innerHTML +=  '------------------------------------<br />';

		switch(this.direction) {
			case 'up':
			case 'left':
				this.moving_step = this.moving_step + this.term;
				var next_item = this.start_item+1;
				if(next_item==this.items.length)	next_item = 0;
				break;
			case 'down':
			case 'right':
				this.moving_step = this.moving_step + this.term;
				var next_item = this.start_item-1;
				if(next_item<0)	next_item = this.items.length-1;
				break;
		}

		

		if (this.direction=='left') {
			if(parseInt(this.items[next_item].getStyle('left'))<=this.left)	next = true;
		} else if (this.direction == 'up') {
			if(parseInt(this.items[next_item].getStyle('top'))<=this.top)	next = true;
		} else if (this.direction=='right') {
			if(parseInt(this.items[next_item].getStyle('left') - this.items[next_item].offsetWidth)>=0)	{
				next = true;
				alert('next');
			}
		}

		if(this.isPlay) {
			if(next) {
				this.start_item = next_item;
				this.moving_step = 0;
				this.stop();
				this.iswait = true;
				this.wait = setTimeout(this.start.bind(this), this.wait_time);
			}
		}
	},
	wait: function() {
		clearInterval(this.timer);
	},
	onTimerEvent: function() {
		if (!this.currentlyExecuting) {
			try {
				this.currentlyExecuting = true;
				this.execute();
			} finally {
				this.currentlyExecuting = false;
			}
		}
	},
	execute: function() {
		this.set();
	},
	stop : function()
	{
		this.isPlay = false;
		clearInterval(this.timer);
	},
	start : function()
	{
		this.isPlay = true;
		if (this.timer) {
			clearInterval(this.timer);
		}
		this.timer = setInterval(this.onTimerEvent.bind(this), this.time);
		this.set();
	},
	next : function()
	{
		this.start_item++;
		if(this.start_item==this.items.length)	this.start_item = 0;
		this.moving_step = 0;
		clearInterval(this.timer);
		this.set();
	},
	prev : function()
	{
		if(this.start_item==0)	 this.start_item = this.items.length-1;
		else	this.start_item--;
		this.moving_step = 0;
		clearInterval(this.timer);
		this.set();
	}
};