var SalonToggle=new Class({
Implements: [Events,Options],
options:{
toggleCaptionElement: 'h2',
toggleSectionElement: 'div.content',
openClass: 'open',
closedClass: 'closed',
toggleImageOpen: $empty,
toggleImageClosed: $empty,
toggleImageStyles:{float: 'left',margin: '3px 3px 0 0',border: 'none'},
toggleLinkStyle:{cursor: 'pointer'}
},
initialize: function(element,options){
this.container=element
this.setOptions(options)
this.toggleCaption=this.container.getChildren(this.options.toggleCaptionElement)
this.toggleCaption=this.toggleCaption[0]
this.toggleCaption.setStyles(this.options.toggleLinkStyle)
this.section=this.container.getChildren(this.options.toggleSectionElement)
this.section=this.section[0]
this.slide=new Fx.Slide(this.section,{
duration: 350,
onComplete : function(){
if(this.container.hasClass(this.options.openClass)){
this.section.getParent().removeClass('hidden')
this.section.setStyle('margin-top','0')
this.section.getParent().setStyle('height','auto')
}else{
this.section.getParent().setStyle('height','auto')
this.section.setStyle('margin-top','0')
this.section.getParent().addClass('hidden')}
}.bind(this)
})
this.toggleImage=new Element('img')
this.toggleImage.addClass('toggleImage')
if(this.container.hasClass(this.options.openClass)){
this.toggleImage.setProperty('src',this.options.toggleImageOpen)
}else{
this.toggleImage.setProperty('src',this.options.toggleImageClosed)
this.container.addClass(this.options.closedClass)
this.section.getParent().addClass('hidden')}
this.toggleImage.setStyles(this.options.toggleImageStyles)
this.toggleCaption.grab(this.toggleImage,'top')
this.toggleCaption.addEvent('click',this.toggle.bind(this))
},
toggle: function(){
if(this.container.hasClass(this.options.openClass)){
this.toggleImage.setProperty('src',this.options.toggleImageClosed)
this.container.addClass(this.options.closedClass)
this.container.removeClass(this.options.openClass)
this.section.getParent().setStyle('height','auto')
this.section.getParent().removeClass('hidden')
}else{
this.toggleImage.setProperty('src',this.options.toggleImageOpen)
this.container.addClass(this.options.openClass)
this.container.removeClass(this.options.closedClass)
this.section.getParent().setStyle('height','0')
this.section.getParent().removeClass('hidden')}
this.slide.toggle()}
})
window.addEvent('domready',function(){
var toggles=$$('.toggle')
toggles.each(function(toggle){
new SalonToggle(toggle,{
toggleCaptionElement: 'h2',
toggleSectionElement: 'div.content',
openClass: 'open',
closedClass: 'closed',
toggleImageOpen: '/fileadmin/style/icon/minus.gif',
toggleImageClosed: '/fileadmin/style/icon/plus.gif',
toggleImageStyles:{float: 'right',margin: '5px 0 0 0',border: 'none'},
toggleLinkStyle:{cursor: 'pointer'}
})
})
})