var  MainPageBox=Class.create();
MainPageBox.prototype={
	element:{},
	items:{},
	currentPos:0,
	highlightImage:null,
	initialize:function(element){
		this.element=element;
		this.buttonLeft=element.getElementsByClassName("main_page_box_arrow_left")[0];
		this.buttonRight=element.getElementsByClassName("main_page_box_arrow_right")[0];
		Event.observe(this.buttonLeft, "click", this.moveLeft.bindAsEventListener(this));
		Event.observe(this.buttonRight, "click", this.moveRight.bindAsEventListener(this));
		this.content=element.getElementsByClassName("main_page_box_content")[0];
		this.container=element.getElementsByClassName("main_page_box_container")[0];
		this.items=this.element.getElementsByClassName("main_page_box_item");
		this.container.style.width=this.items.length*150+"px";
		this.maxPos=this.items.length-Math.floor(this.content.getWidth()/140)-1;
		this.checkButtonStatus();
		for(var i=0, len=this.items.length;i<len;i++){
			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.getElementsByTagName("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="main_page_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;
		}
		posDiff=-(this.currentPos<3?this.currentPos:3);
		var x=120*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;
		}
		posDiff=this.maxPos-this.currentPos<3?this.maxPos-this.currentPos:3;
		var x=120*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("main_page_box_arrow_left_inactive");
		}
		else{
			this.buttonLeft.removeClassName("main_page_box_arrow_left_inactive");
		}
		if(this.currentPos>=this.maxPos){
			this.buttonRight.addClassName("main_page_box_arrow_right_inactive");
		}
		else{
			this.buttonRight.removeClassName("main_page_box_arrow_right_inactive");
		}
	}
}
document.observe('dom:loaded', function () {
	elements=$$(".main_page_box");
	elements.each(function (element){
		new MainPageBox(element);
	});
});