var Motion = function(config)
{
	this.config = config;
	this.el = this.config.el;
	this.step = this.config.step;
	this.init();
}

Motion.prototype = {
	init : function()
	{
		if(this.el == null)
		{}
		if(typeof(this.el) == "string")
		{
			this.el = document.getElementById(this.el);
		}
		this.el.style.left = this.config.from[0] + "px";
		this.el.style.top = this.config.from[1] + "px";
		this.steps = parseInt(this.config.time / this.step);
		this.x_step = parseInt((this.config.to[0] - this.config.from[0]) / this.steps);
		this.y_step = parseInt((this.config.to[1] - this.config.from[1]) / this.steps);
	},
	setTimer : function()
	{
		var _move = function(scope){
			return function(){
				scope.move();
			}
		}
		this.timer = setInterval(_move(this), this.step);
	},
	clearTimer : function()
	{
		clearInterval(this.timer);
	},
	isReached : function()
	{
		var from = this.config.from;
		var to = this.config.to;
		var left = parseInt(this.el.style.left);
		var top = parseInt(this.el.style.top);
		if(to[0] >= from[0])
		{
			if(to[1] >= from[1])
			{
				return (left >= to[0]) && (top >= to[1]);
			}else{
				return (left >= to[0]) && (top <= to[1]);
			}
		}else{
			if(to[1] >= from[1])
			{
				return (left <= to[0]) && (top >= to[1]);
			}else{
				return (left <= to[0]) && (top <= to[1]);
			}
		}
	},
	move : function()
	{
		var left = parseInt(this.el.style.left);
		var top = parseInt(this.el.style.top);
		if(this.isReached())
		{
			this.el.style.left = this.config.to[0] + "px";
			this.el.style.top = this.config.to[1] + "px";
			this.clearTimer();
		}
		left += this.x_step;
		top += this.y_step;
		this.el.style.left = left + "px";
		this.el.style.top = top + "px";
	},
	animate : function()
	{
		this.setTimer();
	}
};

var Scroller = function(config)
{
	this.config = config;

	this.init();
}
Scroller.prototype = {
	init : function()
	{
		this.createHtml();
		this.setTimer();
		this.nextImg = this.config.number;
	},
	setTimer : function()
	{
		var _scroll = function(scope){
			return function()
			{
				scope.scroll();
			}
		};
		this.timer = setInterval(_scroll(this), this.config.velocity);
	},
	clearTimer : function()
	{
		clearInterval(this.timer);
	},
	createHtml : function()
	{
		this.config.box = document.getElementById(this.config.box);
		this.config.box.style.height = (this.config.height + 2*this.config.gap) + "px";
		var inner = document.createElement("div");
		inner.className = "inner_box";
		inner.style.height = this.config.height +  2*this.config.gap + "px";
		inner.style.width = (this.config.width + 2* this.config.gap) * this.config.number + "px";
		this.inner = inner;
		this.config.box.appendChild(inner);
		for(var i = 0; i < this.config.number && i < this.config.images.length; i++)
		{
			var a = document.createElement("a");
			var img = document.createElement("img");
			a.href = this.config.images[i].link;
			a.target = this.config.images[i].target;
			a.title = this.config.images[i].alt;
			img.src = this.config.images[i].img;
			img.alt = this.config.images[i].alt;
			img.width = this.config.width;
			img.height = this.config.height;
			a.style.left = this.getLeft(i) + "px";
			a.style.top = this.getTop() + "px";
			a.appendChild(img);
			this.inner.appendChild(a);
			this.bind(img);
		}
	},
	scroll : function(str)
	{
		// Add a image to the images list
		this.addImg();
		// shift the images list to the left
		this.shiftImg();
		// remove the first image
		var _removeFirst = function(scope)
		{
			return function(){
				scope.removeFirst();
			}
		}
		setTimeout(_removeFirst(this), 300);
	},
	shiftImg : function()
	{
		var childs = this.inner.childNodes;
		for(var i = 0; i < childs.length; i++)
		{
			var left = parseInt(childs[i].style.left, 10);
			var top = parseInt(childs[i].style.top, 10);
			var newleft = this.getLeft(i-1);
			var motionConfig = {
				el : childs[i],
				from : [left, top],
				to : [newleft + 6, top],
				time : 200,
				step : 10
			};
			var motion = new Motion(motionConfig);
			motion.animate();
		}
	},
	addImg : function()
	{
		var a = document.createElement("a");
		var i = this.nextImg;
		a.href = this.config.images[i].link;
		a.target = this.config.images[i].target;
		a.title = this.config.images[i].alt;
		var img = document.createElement("img");
		img.src = this.config.images[this.nextImg].img;
		img.alt = this.config.images[i].alt;
		img.style.height = this.config.height + "px";
		img.style.width = this.config.width + "px";
		a.style.left = this.getLeft(this.config.number) + "px";
		a.style.top = this.getTop() + "px";
		this.nextImg++;
		if(this.nextImg == this.config.images.length)
		{
			this.nextImg = 0;
		}
		a.appendChild(img);
		this.bind(img);
		this.inner.appendChild(a);
	},
	removeFirst : function()
	{
		var child = this.inner.childNodes[0];
		this.inner.removeChild(child);
	},
	getWidth : function()
	{
		return this.config.width + 2 * this.config.gap;
	},
	getTop : function()
	{
		return this.config.gap;
	},
	getLeft : function(i)
	{
		return (this.config.width + 2 * this.config.gap) * i;
	},
	bind : function(el)
	{
		var _self = this;
			el.onmouseover = function()
			{
				_self.onMouseOver();
			}
			el.onmouseout = function()
			{
				_self.onMouseOut();
			}
	},
	onMouseOver : function()
	{
		this.pause();
	},
	onMouseOut : function()
	{
		this.start();
	},
	pause : function()
	{
		this.clearTimer();
	},
	start : function()
	{
		this.setTimer();
	},
	stop : function()
	{
		this.clearTimer();
	}
};

window.onload = function(e){
	var scroller = new Scroller(config);
}