var SlideItMoo=new Class({
Implements: [Options],
options:{
overallContainer: null,
elementScrolled: null,
thumbsContainer: null,
itemsVisible:5,
elemsSlide: null,
itemsSelector: null,
itemWidth: null,
showControls:1,
transition: Fx.Transitions.linear,
duration: 800,
direction: 1,
autoSlide: false,
mouseWheelNav: false
},
initialize: function(options){
this.setOptions(options)
if($(this.options.thumbsContainer)!= null)
{
	this.elements=$(this.options.thumbsContainer).getElements(this.options.itemsSelector);
}
else
{
	this.elements = '';
}
this.totalElements=this.elements.length
if(this.totalElements<=this.options.itemsVisible)return
this.elementWidth=this.options.itemWidth || this.elements[0].getSize().x
this.currentElement=0
this.direction=this.options.direction
this.autoSlideTotal=this.options.autoSlide+this.options.duration
this.begin()
},
begin: function(){
this.setContainersSize()
this.myFx=new Fx.Morph(this.options.thumbsContainer,{
wait: true,
transition: this.options.transition,
duration: this.options.duration
})
this.addControls()
if(this.options.mouseWheelNav&&!this.options.autoSlide){
$(this.options.thumbsContainer).addEvent('mousewheel',function(ev){
new Event(ev).stop()
this.slide(-ev.wheel)
}.bind(this))}
if(this.options.autoSlide)
this.startAutoSlide()
},
setContainersSize: function(){
$(this.options.overallContainer).set({
styles:{
'width': this.options.itemsVisible*this.elementWidth+50*this.options.showControls}
})
$(this.options.elementScrolled).set({
styles:{
'width': this.options.itemsVisible*this.elementWidth}
})
$(this.options.thumbsContainer).set({
styles:{
'width': this.totalElements*(this.elementWidth+10)}
})
},
addControls: function(){
if(!this.options.showControls)return
this.fwd=new Element('div',{
'class': 'SlideItMoo_forward',
'events':{
'click':this.slide.pass(1,this)}
})
this.bkwd=new Element('div',{
'class': 'SlideItMoo_back',
'events':{
'click': this.slide.pass(-1,this)}
})
$(this.options.overallContainer).adopt(this.fwd,this.bkwd)
},
slide: function(direction){
if(this.started)return
this.direction=direction
var currentIndex=this.currentIndex()
if(this.options.elemsSlide&&this.options.elemsSlide>1&&this.endingElem==null){
this.endingElem=this.currentElement
for(var i=0;i<this.options.elemsSlide;i++){
this.endingElem+=direction
if(this.endingElem>=this.totalElements)this.endingElem=0
if(this.endingElem<0)this.endingElem=this.totalElements-1}}
if(this.direction==-1){
this.rearange()
$(this.options.thumbsContainer).setStyle('margin-left',-this.elementWidth)}
this.started=true
this.myFx.start({
'margin-left': this.direction==1 ?-this.elementWidth : 0
}).chain(function(){
this.rearange(true)
if(this.options.elemsSlide){
if(this.endingElem !==this.currentElement)this.slide(this.direction)
else this.endingElem=null}
}.bind(this))
},
rearange: function(rerun){
if(rerun)this.started=false
if(rerun&&this.direction==-1){
return}
this.currentElement=this.currentIndex(this.direction)
$(this.options.thumbsContainer).setStyle('margin-left',0)
if(this.currentElement==1&&this.direction==1){
this.elements[0].injectAfter(this.elements[this.totalElements-1])
return}
if((this.currentElement==0&&this.direction==1)||(this.direction==-1&&this.currentElement==this.totalElements-1)){
this.rearrangeElement(this.elements.getLast(),this.direction==1 ? this.elements[this.totalElements-2] : this.elements[0])
return}
if(this.direction==1){
this.rearrangeElement(this.elements[this.currentElement-1],this.elements[this.currentElement-2])}
else{
this.rearrangeElement(this.elements[this.currentElement],this.elements[this.currentElement+1])}
},
rearrangeElement: function(element,indicator){
this.direction==1 ? element.injectAfter(indicator): element.injectBefore(indicator)
},
currentIndex: function(){
var elemIndex=null
switch(this.direction){
case 1:
elemIndex=this.currentElement>=this.totalElements-1 ? 0 : this.currentElement+this.direction
break
case-1:
elemIndex=this.currentElement==0 ? this.totalElements-1 : this.currentElement+this.direction
break}
return elemIndex
},
startAutoSlide: function(){
this.startIt=this.slide.bind(this).pass(this.direction||1)
this.autoSlide=this.startIt.periodical(this.autoSlideTotal,this)
this.elements.addEvents({
'mouseover':function(){
$clear(this.autoSlide)
}.bind(this),
'mouseout':function(){
this.autoSlide=this.startIt.periodical(this.autoSlideTotal,this)
}.bind(this)
})}
})