var SalonSlider = new Class({

	Implements: [Events, Options],
	
	options: {
		onChange: $empty, // fired when an item is finally scrolled to center, parameter: the current item element
		onClick: $empty, // fired when an item is clicked (not fired if slideOnClick == false), parameter: the clicked item element
		onClickCurrent: $empty, // fired when the current item is clicked (not fired if slideOnClick == false), parameter: the clicked item element
		onSlideStart: $empty, // fired when the sliding starts, parameter: none
		slideOnClick: true, // clicking an item scrolls it to center (allowes normal and multiple links in one item) 
		currentOnStart: 0, // index of the initially active item
		duration: 300, // duration of the slide tween
		transition: new Fx.Transition(Fx.Transitions.Expo).easeOut, // transition of the slide tween
		itemSelector: 'li', // css selector for the items (children of element)
		itemWidth: 76 // overall width of one item element (all items must have the same width)
	},
	
	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);
			
		this.navigationContainer.addEvent('mousewheel', function(event) {
				event = new Event(event);
			 	event.stop();
				/* Mousewheel UP */
				if (event.wheel > 0) {
					this.slideLeft();
				} 
				/* Mousewheel DOWN*/
				else if (event.wheel < 0) {
					this.slideRight();
				}
			}.bind(this));
		
	},
	
	
	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:76,
				duration:750,
				galleryImage: image, 
				galleryDescription: description,
				onChange: function(el){
					//alert('change '+el.index);
					// this: the gallery object
					// el: the current item element
					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='';
					}
					//alert(this.options.galleryImage.getParent().getParent().get('class'));

					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) {
									// alert(this.get('height'));
									// alert(this.target.getParent().getStyle('height').toInt());
									//alert((this.target.getParent().getStyle('height').toInt()-this.get('height'))/2);//.getStyle('height').toInt-this.height)/2); 
								    if (this.target) {
					
								    	this.target.setStyle('padding-top', Math.max(0,(this.target.getParent().getStyle('height').toInt()-this.get('height').toInt())/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){
					//alert('click '+el.index);
					// this: the gallery object
					// el: the current item element
				},
				onClickCurrent: function(el){
					//alert('click current '+el.index);
					// this: the gallery object
					// el: the current item element
				}
			})
	});
});