(function(){

		var $ = document.id;
		this.liquidSlider = new Class({
		 
			Implements: [Events, Chain, Options],
			
			Binds:['slidePane'],
			
			initialize: function(options) {
				this.setOptions(options);
				
				this.container = $$(this.options.container)[0];
				this.panes = $$(this.options.panes), this.panes = this.panes.setStyle('width', 100/this.panes.length + '%');
				this.wrap = $$(this.options.wrap)[0].setStyle('width', this.panes.length * 100 + '%');
				this.duration = this.options.duration || 400;
				this.slideTransition = this.options.transition || Fx.Transitions.Quad.easeOut;
				this.heightTransition = this.options.transition || Fx.Transitions.Expo.easeOut;
				
				this.arrows = (this.options.arrows) ? $$(this.options.arrows[0], this.options.arrows[1]) : false; // takes an array of two elements always - [ left, right ] - in a way, it is a ghetto validation of corect arrow input.
				this.navLi = (this.options.navLi) ? $$(this.options.navLi) : false;
				this.navClass = (this.options.navClass) ? this.options.navClass : 'current';
				this.triggers = (this.options.triggers) ? this.options.triggers : false;  // takes comma seperated string assembled as follows: ['#someSelector, eventName, paneNumber','.anotherSelector, eventName, paneNumber']
				
				this.currentPane = this.options.startPane || 0;
				
				this.slideFx = new Fx.Tween(this.wrap, {unit: '%', duration: this.duration, transition: this.slideTransition, link: 'cancel',
					onStart:function(){ this.fireEvent('slideStart'); }.bind(this),
					onComplete:function(){ this.fireEvent('slideComplete'); }.bind(this)
				});
				this.heightFx = new Fx.Tween(this.container, {duration: this.duration, transition: this.heightTransition, link: 'cancel',
					onStart:function(){ },
					onComplete:function(){ }
				});	
				
				if(this.arrows){
					this.arrows[0].addEvent('click', function(){
						(this.currentPane == 0) ? this.slidePane(this.panes.length - 1) : this.slidePane(this.currentPane - 1); 
					}.bind(this));
					this.arrows[1].addEvent('click', function(){
						(this.currentPane == this.panes.length - 1) ? this.slidePane(0) : this.slidePane(this.currentPane + 1); 
					}.bind(this));
				}
				if(this.navLi){
					this.navLi.each(function(e, i){
						e.addEvent('click', function(){
							this.slidePane(i);
						}.bind(this));
					}.bind(this));
				}
				if(this.triggers){
					this.triggers.each(function(e){
						var trigger = e.split(',');
						$$(trigger[0]).addEvent(trigger[1], function(){
							this.slidePane(trigger[2].toInt());
						}.bind(this));
					}.bind(this));
				}
				
				this.slidePane(this.currentPane, true);
				
			},
			slidePane: function(pane, startup){
				if(this.navLi){
					this.navLi.removeClass(this.navClass);
					this.navLi[pane].addClass(this.navClass);
				}
				
				this.slideFx.start('left', pane*(-100));
				if(!startup){ this.container.setStyle('height', this.panes[this.currentPane].getSize().y); }
				this.heightFx.start('height', this.panes[pane].setStyle('height', 'auto').getSize().y ).chain(function(){	
					this.panes.filter(function(e,i){ return i != pane; }).setStyle('height', 1);
					this.container.setStyle('height', 'auto');
					if(startup){
						this.fireEvent('init');
					}
				}.bind(this));
				
				this.currentPane = pane;
			}
			
		});

	})();