var Telop = Class.create();

Telop.prototype =
{
	initialize: function(box, interval, direction)
	{
		if (!interval) {
			interval = 5;
		}
		if (direction != "vertical") {
			direction = "horizontal";
		}
		this.box = $(box);
		this.box.innerHTML = "";
		this.box.style.position = 'relative';
		this.box.style.overflow = 'hidden';
		this.doms = new Array();
		this.current = 0;
		this.popCount = 0;
		this.verticalSpeed = 1;
		this.horizontalSpeed = 20;
		this.interval = interval;
		this.direction = direction;
		
		
		Event.observe(window, 'load', this._init.bind(this));
		Event.observe(window, 'unload', this.stop.bind(this));
	},
	
	_init: function()
	{
		this._render();
	},
	
	stop: function()
	{
		if (this.timer) {
			this.timer.stop();
		}
		this.timer = null;
	},
	
	setHtmlArray: function(htmlArray)
	{
		this.doms = new Array();
		for (var i = 0; i < htmlArray.length; i++) {
			var dom = document.createElement("div");
			dom.style.position = 'absolute';
			dom.innerHTML = htmlArray[i];
			this.doms[i] = dom;
		}
	},
	
	unshiftHtml: function(html)
	{
		var dom = document.createElement('div');
		dom.style.position = 'absolute';
		dom.innerHTML = html;
		this.doms.unshift(dom);
	},
	
	popHtml: function()
	{
		this.popCount++;
	},
	
	_render: function()
	{
		var _current = this.current;
		
		if (0 < this.popCount) {
			for (var i = this.popCount; 0 < i; i--) {
				if (this.doms.length <= 0) {
					break;
				}
				this.doms.pop();
			}
			this.popCount = 0;
			if (this.doms.length <= this.current) {
				this.current = 0;
			}
		}
	
		if (this.doms.length <= 0) {
			return;
		}
		
		var nextChild = this.doms[this.current];
		if (!this.box.hasChildNodes()) {
			var _width = Element.getWidth(this.box);
			var _height = Element.getHeight(this.box);
			
			Element.hide(nextChild);
			this.box.appendChild(nextChild);
			if (this.direction == "vertical") {
				nextChild.style.top = _height + "px";
			}
			else {
				nextChild.style.top = ((Element.getHeight(this.box) - Element.getHeight(nextChild)) / 2) + "px";
				nextChild.style.left = _width + "px";
			}
			Element.show(nextChild);
			
			if (this.timer) {
				this.timer.stop();
			}
			
			this.timer = new PeriodicalExecuter(
				this._moveNext.bind(
					this,
					nextChild,
					_width + this.horizontalSpeed - _width % this.horizontalSpeed, 
					_height + this.verticalSpeed - _height % this.verticalSpeed,
					this.direction
				),
				1 / 100
			);
		}
		else if (1 < this.doms.length || 0 < this.doms.length && 0 < _current) {
			if (this.timer) {
				this.timer.stop();
				this.timer = new PeriodicalExecuter(
					this._moveLast.bind(
						this, 
						this.box.firstChild,
						nextChild,
						Element.getWidth(this.box.firstChild),
						Element.getHeight(this.box.firstChild),
						this.direction
					),
					1 / 100
				);
			}
		}
		
		if (this.current < this.doms.length - 1) {
			this.current++;
		}
		else {
			this.current = 0;
		}
	},
	
	_moveLast: function(lastChild, nextChild, width, height, direction)
	{
		if (direction == "vertical") {
			if (lastChild.style.top) {
				lastChild.style.top = (parseInt(lastChild.style.top) - this.verticalSpeed) + "px";
			}
			else {
				lastChild.style.top = (- this.verticalSpeed) + "px";
			}
		}
		else {
			if (lastChild.style.left) {
				lastChild.style.left = (parseInt(lastChild.style.left) - this.horizontalSpeed) + "px";
			}
			else {
				lastChild.style.left = (- this.horizontalSpeed) + "px";
			}
		}

		if (direction == "vertical" && height < - parseInt(lastChild.style.top)
		 || direction == "horizontal" && width < - parseInt(lastChild.style.left))
		{
			var parent = lastChild.parentNode;
			var _width = Element.getWidth(parent);
			var _height = Element.getHeight(parent);
			
			Element.hide(nextChild);
			parent.replaceChild(nextChild, lastChild);
			if (direction == "vertical") {
				nextChild.style.top = _height + "px";
			}
			else {
				nextChild.style.top = lastChild.style.top;
				nextChild.style.left = _width + "px";
			}
			Element.show(nextChild);
			
			if (this.timer) {
				this.timer.stop();
				this.timer = new PeriodicalExecuter(
					this._moveNext.bind(
						this,
						nextChild,
						_width + this.horizontalSpeed - _width % this.horizontalSpeed, 
						_height + this.verticalSpeed - _height % this.verticalSpeed,
						direction
					),
					1 / 100
				);
			}
		}
	},
	
	_moveNext: function(nextChild, width, height, direction)
	{
		if (direction == "vertical") {
			var border = (Element.getHeight(this.box) - Element.getHeight(nextChild)) / 2;
			if (border + this.verticalSpeed < parseInt(nextChild.style.top)) {
				nextChild.style.top = (parseInt(nextChild.style.top) - this.verticalSpeed) + "px";
			}
			else {
				nextChild.style.top = border + "px";
				
				if (this.timer) {
					this.timer.stop();
					this.timer = new PeriodicalExecuter(this._render.bind(this), this.interval);
				}
			}
		}
		else {
			if (this.horizontalSpeed < parseInt(nextChild.style.left)) {
				nextChild.style.left = (parseInt(nextChild.style.left) - this.horizontalSpeed) + "px";
			}
			else {
				nextChild.style.left = "0px";
				
				if (this.timer) {
					this.timer.stop();
					this.timer = new PeriodicalExecuter(this._render.bind(this), this.interval);
				}
			}
		}
	}
}