var  Scroller=Class.create();
Scroller.setWidthByContent=function(element){
	var items=$(element).childElements();
	var length=0;
	items.each(function(element){
		length+=Element.getWidth(element);
	},this);
	
	element.style.width=length+"px";
	return length;
}
Scroller.prototype={
	element:{},
	items:{},
	itemSize:150,
	currentPos:0,
	highlightImage:null,
	initialize:function(element){
		this.element=element;
		this.buttonLeft=element.select(".arrow_left")[0];
		this.buttonRight=element.select(".arrow_right")[0];
		Event.observe(this.buttonLeft, "click", this.moveLeft.bindAsEventListener(this));
		Event.observe(this.buttonRight, "click", this.moveRight.bindAsEventListener(this));
		this.content=element.select(".scroller_content")[0];
		this.container=element.select(".scroller_container")[0];
		this.items=this.element.select(".item");
		//this.items.each(Scroller.setWidthByContent);
		var length=Scroller.setWidthByContent(this.container);
		
		
		this.itemSize=this.itemSize<length/this.items.length?this.itemSize:Math.round(length/this.items.length);
		
		
		
		this.maxPos=Math.ceil((length-this.content.getWidth())/this.itemSize);
		
		this.checkButtonStatus();
		for(var i=0, len=this.items.length;i<len;i++){
			if(this.items[i].hasClassName("highlight")){
				Event.observe(this.items[i], "mousemove", this.highlight.bindAsEventListener(this, this.items[i]));
				Event.observe(this.items[i], "mouseout", this.unHighlight.bindAsEventListener(this, this.items[i]));
			}
		}
	},
	highlight:function(event, item){
		
		img=item.select("img")[0];
		if(this.highlightImage==null){
			this.highlightImage=new Element("img");
			
			$$("body")[0].appendChild(this.highlightImage);
		}
		this.highlightImage.src=img.src.replace(/\/100\//,"/200/");
		this.highlightImage.className="scroller_highlight";
		
		this.highlightImage.style.left=event.pageX+10+"px";
		this.highlightImage.style.top=event.pageY+10+"px";
		
	},
	unHighlight:function(event, item){
		this.highlightImage.remove();
		this.highlightImage=null;
	},
	
	moveLeft:function(){
		if(this.currentPos<=0){
			return;
		}
		var posDiff=-(this.currentPos<3?this.currentPos:3);
		var x=this.itemSize*posDiff;
		this.currentPos+=posDiff;
		
		for(i=0;i<this.items.length;i++){
			this.effect=new Effect.Move(this.items[i], { x: -x,transition: Effect.Transitions.linear,duration: 0.6, queue: { position: 'end', scope: this.element.id+i }});
		}
		this.checkButtonStatus();
	},
	moveRight:function(){
		
		if(this.currentPos>=this.maxPos){
			return;
		}
		var posDiff=this.maxPos-this.currentPos<3?this.maxPos-this.currentPos:3;
		var x=this.itemSize*posDiff;
		this.currentPos+=posDiff;
		for(i=0;i<this.items.length;i++){
			this.effect=new Effect.Move(this.items[i], { x: -x,transition: Effect.Transitions.linear,duration: 0.6, queue: { position: 'end', scope: this.element.id+i }});
		}
		this.checkButtonStatus();
	},
	checkButtonStatus:function(){
		if(this.currentPos<=0){
			this.buttonLeft.addClassName("arrow_left_inactive");
		}
		else{
			this.buttonLeft.removeClassName("arrow_left_inactive");
		}
		if(this.currentPos>=this.maxPos){
			this.buttonRight.addClassName("arrow_right_inactive");
		}
		else{
			this.buttonRight.removeClassName("arrow_right_inactive");
		}
	}
}
document.observe('dom:loaded', function () {
	elements=$$(".scroller");
	elements.each(function (element){
		new Scroller(element);
	});
});