Slider = function(element, opts)
{
	this.element = this.getElement(element);	
	this.id = this.element.id;
	this.boxWidth = 172;
	this.pageSize = 3;
	this.currPage = 0;
	this.interval = 50;
	
	Slider.setOptions(this, opts, true);

	if (Slider.onloadDidFire)
		this.attachBehaviors();
	else
		Slider.loadQueue.push(this);	

}

Slider.onloadDidFire = false;
Slider.loadQueue = [];

Slider.addLoadListener = function(handler)
{
	if (typeof window.addEventListener != 'undefined')
		window.addEventListener('load', handler, false);
	else if (typeof document.addEventListener != 'undefined')
		document.addEventListener('load', handler, false);
	else if (typeof window.attachEvent != 'undefined')
		window.attachEvent('onload', handler);
};

Slider.processLoadQueue = function(handler)
{
	Slider.onloadDidFire = true;
	var q = Slider.loadQueue;
	var qlen = q.length;
	for (var i = 0; i < qlen; i++)
		q[i].attachBehaviors();
};

Slider.addLoadListener(Slider.processLoadQueue);

Slider.prototype.getElement = function(ele)
{
	if (ele && typeof ele == "string")
		return document.getElementById(ele);
	return ele;
};

Slider.addEventListener = function(element, eventType, handler, capture)
{
	try
	{
		if (element.addEventListener)
			element.addEventListener(eventType, handler, capture);
		else if (element.attachEvent)
			element.attachEvent("on" + eventType, handler);
	}
	catch (e) {}
};

Slider.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
{
	if (!optionsObj)
		return;
	for (var optionName in optionsObj)
	{
		if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
			continue;
		obj[optionName] = optionsObj[optionName];
	}
};

Slider.prototype.getElementChildren = function(element)
{
	var children = [];
	var child = element.firstChild;
	while (child)
	{
		if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
			children.push(child);
		child = child.nextSibling;
	}
	return children;
};


Slider.prototype.attachBehaviors = function() {
	var childs = this.getElementChildren(this.element);
	var self = this;
	for (i=0;i<childs.length;i++)
		switch (childs[i].className) {
		case 'arrow_left':
			this.btnLeft=childs[i];
			Slider.addEventListener(childs[i], "click", function(e) { return self.goLeft(e); }, false);
			break;
		case 'arrow_right':
			this.btnRight=childs[i];
			Slider.addEventListener(childs[i], "click", function(e) { return self.goRight(e); }, false);
			break;
		case 'mask':
			this.mask = childs[i];
			this.container = this.getElementChildren(childs[i])[0];
			this.currLeft=0;
			this.toLeft=0;
			this.boxes = this.getElementChildren(this.container);			
			break;
		}
	this.gotoPage();
}

Slider.prototype.goLeft = function(e)
{
	this.currPage--;
	this.gotoPage();
};

Slider.prototype.goRight = function(e)
{
	this.currPage++;
	this.gotoPage();
};

Slider.prototype.gotoPage = function() 
{
	this.toLeft=-this.boxWidth*this.pageSize*this.currPage;
	this.startAnimation();
}

Slider.prototype.startAnimation = function()
{
	var self = this;
	this.playing = true;
	this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
}

Slider.prototype.stepAnimation = function()
{
	if (Math.abs(this.toLeft-this.currLeft)<2) {
		this.currLeft=this.toLeft;
		this.container.style.left= this.currLeft + 'px';
		this.stopAnimation();
	} else {
		this.currLeft+=(this.toLeft-this.currLeft)/2;
		this.container.style.left= this.currLeft + 'px';
		this.startAnimation();
	}
}

Slider.prototype.stopAnimation = function()
{
	if (this.currPage<1)
		this.btnLeft.style.visibility="hidden";
	else
		this.btnLeft.style.visibility="";

	if (this.currPage>=(Math.floor((this.boxes.length-1)/this.pageSize)))
		this.btnRight.style.visibility="hidden";
	else
		this.btnRight.style.visibility="";
}