var SalonSlider=new Class({
Implements: [Events,Options],
options:{
onChange: $empty,
onClick: $empty,
onClickCurrent: $empty,
onSlideStart: $empty,
slideOnClick: true,
currentOnStart: 0,
duration: 300,
transition: new Fx.Transition(Fx.Transitions.Expo).easeOut,
itemSelector: 'li',
itemWidth: 100
},
initialize: function(element,options){
this.slide=element
this.setOptions(options)
this.navigationContainer=new Element('div')
this.navigationContainer.addClass('slideNavigation')
this.navigationContainer.wraps(this.slide)
this.container=new Element('div')
this.container.addClass('jsSlider')
this.container.wraps(this.navigationContainer)
this.buttonLeft=new Element('div')
this.buttonLeft.addClass('buttonLeft')
this.buttonLeft.addEvent('click',function(){
this.slideLeft()
}.bind(this))
this.buttonRight=new Element('div')
this.buttonRight.addClass('buttonRight')
this.buttonRight.addEvent('click',function(){
this.slideRight()
}.bind(this))
this.container.grab(this.buttonLeft,'bottom')
this.container.grab(this.buttonRight,'bottom')
this.items=this.slide.getChildren(this.options.itemSelector)
this.items.each(function(item,index){
$extend(item,{index: index})
if(this.options.slideOnClick){
item.addEvents({'click': this.clickTo.bind(this,index)})}
}.bind(this))
this.currentIndex=this.options.currentOnStart
this.fixIndex()
this.slide.setStyle('width',this.items.length*this.options.itemWidth+5)
this.fx=new Fx.Tween(this.slide,{
duration: this.options.duration,
transition: this.options.transition,
onComplete: function(){
this.slideComplete()
}.bind(this)
})
this.fx.start('left',-this.currentIndex*this.options.itemWidth)
},
slideComplete: function(){
this.items[this.currentIndex].addClass('current')
this.fireEvent('change',this.items[this.currentIndex])
},
clickTo: function(index){
if(this.currentIndex==index){
this.fireEvent('clickCurrent',this.items[index])
}else{
this.fireEvent('click',this.items[index])}
this.slideTo(index)
return false
},
slideTo: function(index){
var tempIndex=this.currentIndex
this.currentIndex=index
this.fixIndex()
if(tempIndex==this.currentIndex){return;}
this.items.each(function(item,index){item.removeClass('current')},this)
this.fx.cancel()
this.fx.start('left',-this.currentIndex*this.options.itemWidth)
this.fireEvent('slideStart',this.items[this.currentIndex])
},
slideLeft: function(){
this.slideTo(this.currentIndex-1)
},
slideRight: function(){
this.slideTo(this.currentIndex+1)
},
fixIndex: function(){
if(this.currentIndex<0){
this.currentIndex=0}
if(this.currentIndex>=this.items.length){
this.currentIndex=this.items.length-1}
if(this.currentIndex==0){
this.buttonLeft.addClass('buttonLeftDisabled')
}else{
this.buttonLeft.removeClass('buttonLeftDisabled')}
if(this.currentIndex==this.items.length-1){
this.buttonRight.addClass('buttonRightDisabled')
}else{
this.buttonRight.removeClass('buttonRightDisabled')}}
})
window.addEvent('domready',function(){
var gals=$$('ul.gallery')
gals.each(function(item,index){
var container=item.getParent()
var imageContainer=new Element('div')
imageContainer.addClass('imageContainer')
var image=new Element('img')
container.grab(imageContainer,'bottom')
var description=new Element('div')
description.addClass('imageDescription')
description.addClass('hidden')
imageContainer.grab(image)
container.grab(description,'bottom')
new SalonSlider(item,{
currentOnStart:0,
itemWidth:89,
duration:750,
galleryImage: image,
galleryDescription: description,
onChange: function(el){
var bu=el.getChildren('span')
if(bu.length>0){
bu=bu[0].get('text').trim()
}else{
bu=''}
var img=el.getChildren('a')
if(img.length>0){
img=img[0].get('href')
}else{
img=''}
this.options.galleryImage.setProperty('src','/fileadmin/style/img/load.gif')
this.options.galleryImage.setStyle('padding-top','200px')
this.options.galleryImage.setProperty('alt',img)
var image=new Asset.image(img,{
onload: function(){
if(this.target.getProperty('alt')==img){
if(this.target){
this.target.setStyle('padding-top',(this.target.getParent().getStyle('height').toInt()-this.get('height'))/2)
this.target.setProperty('src',this.getProperty('src'))
this.target.setProperty('alt','')}}}
})
$extend(image,{target: this.options.galleryImage})
if(bu){
this.options.galleryDescription.removeClass('hidden')
}else{
this.options.galleryDescription.addClass('hidden')}
this.options.galleryDescription.set('text',bu)
},
onSlideStart: function(){
this.options.galleryImage.setProperty('src','/fileadmin/style/img/load.gif')
this.options.galleryImage.setStyle('padding-top','200px')
},
onClick: function(el){
var a=el.getChildren('a')
a.each(function(item,index){
item.blur()
})
},
})
})
})