var SkMultiItemSlide = new Class({
	
	Implements: [Events, Options],

	options: {
		infinite : false,
		contentSelector : '.slidecontent',
		itemSelector : '.slidebloc',
		arrowPrevious : 'div.arrowprevious',
		arrowNext: 'div.arrownext',
		itemSize : 200,
		deroulWay : 'horizontal',
		deroulSpeed : 600,
		deroulFx : Fx.Transitions.Quad.easeInOut,
		animOnload : true
	},

	initialize: function(dmain, options){
		this.setOptions(options);
		this.main = $(dmain);
		this.curItem = 0;
		this.canPlay = true;
		this.margin = (this.options.deroulWay == 'horizontal') ? 'margin-left' : 'margin-top';
		this.dcontent = this.main.getElement(this.options.contentSelector);
		this.dprev = this.main.getElement(this.options.arrowPrevious);
		this.dnext = this.main.getElement(this.options.arrowNext);
		this.dprev.addEvent('click', function(){this.moveItem(-1);}.bind(this));
		this.dnext.addEvent('click', function(){this.moveItem(+1);}.bind(this));
		
		this.els = this.main.getElements(this.options.itemSelector);
		
		if ( this.els.length == 0) return;
		
		var styleAtt =  (this.options.deroulWay == 'horizontal') ? 'width' : 'height';
		this.sizeItem = this.els[0].getStyle(styleAtt).toInt();
		this.sizeSlide = this.dcontent.getStyle(styleAtt).toInt();
		this.sizeContent = this.els.length * this.sizeItem;
		this.maxVisibleItems = Math.round(this.sizeSlide/this.sizeItem);
		this.dmove = new Element('div', {'styles':{'overflow':'hidden','position':'absolute','width':this.dcontent.getStyle('width'),'height':this.dcontent.getStyle('height')}});
		this.els.inject(this.dmove);
		this.dmove.inject(this.dcontent);
		this.dmove.setStyle(styleAtt, this.sizeContent+'px');
		
		if ( this.sizeContent <= this.sizeSlide ){
			var margin = Math.round( (this.sizeContent - this.sizeSlide) / 2 );
			this.dmove.setStyle(this.margin, -margin+'px');
		}
		else if(this.options.infinite){
			this.fullSizeContent = this.sizeContent+(this.maxVisibleItems*this.sizeItem);
			this.dmove.setStyle(styleAtt, this.fullSizeContent+'px');
			for(var i=0,j=this.maxVisibleItems;i<j;i++){
				this.els[i].clone().setStyle('display','block').setStyle(this.margin,(this.sizeContent+(i*this.sizeItem))+'px').inject(this.dmove);
			}
			this.dprev.style.display = 'block';
			this.dnext.style.display = 'block';
		}
		if ( this.options.animOnload == true ) {
			for(var i=0,j=this.els.length;i<j;i++){
				this.els[i].style.display = 'block';
				var myFx = new Fx.Tween(this.els[i]);
				myFx.start(this.margin, (i*this.sizeItem));
			}
		}
		else {
			for(var i=0,j=this.els.length;i<j;i++){
				this.els[i].setStyle(this.margin, (i*this.sizeItem) );
				this.els[i].style.display = 'block';
			}
			
		}
		this.checkArrowDisplay();
		
	},
		
	checkArrowDisplay: function(){
		if ( this.options.infinite ){
			this.canPlay = true;
			return;
		}
		if ( this.sizeContent <= this.sizeSlide ) return;
		var decal = this.dmove.getStyle(this.margin).toInt();
		this.dprev.style.display = ( decal == 0 ) ? 'none' : 'block';
		this.dnext.style.display = ( decal == (this.sizeSlide - this.sizeContent) ) ? 'none' : 'block';
		this.canPlay = true;
	},
	
	moveItem: function(way){
		if ( this.canPlay == false ) return false;
		
		var start_pos = this.dmove.getStyle(this.margin).toInt();
		var final_pos = start_pos - (this.sizeItem * way);
		
		if ( this.options.infinite ){
			if ( final_pos > 0 ){
				start_pos -= this.sizeContent;
				final_pos -= this.sizeContent;
				this.dmove.setStyle(this.margin, start_pos);
			}
			else if ( final_pos < -this.sizeContent){
				start_pos += this.sizeContent;
				final_pos += this.sizeContent;
				this.dmove.setStyle(this.margin, start_pos);
			}
		}
		
		var styleAtt = {};
		styleAtt[this.margin] = final_pos;
		this.canPlay = false;
		new Fx.Morph(this.dmove, {
			wait: false,
			duration: this.options.deroulSpeed,
			transition: this.options.deroulFx
		}).addEvent('complete', 
			this.checkArrowDisplay.bind(this)
		).start(styleAtt);
	}

});