var panelSlide = new Class({
	options: {
		panels: []
		
	}, 
	initialize: function(options){
		this.setOptions(options)
		this.panels = [];
		this.effects = [];
		
		this.addPanels(this.options.panels);
		$(this.options.panels[1]).setStyles({cursor:'pointer'});
	},
	addPanels: function(panels) {
		$$(panels).each(function(panel, i){
			this.panels.include($(panel));
			
			this.effects[this.panels.indexOf(panel)] = new Fx.Tween(panel, {property: 'width',duration: 300,transition: Fx.Transitions.Quad.easeIn, wait: false});
			
			var idx = this.panels.indexOf(panel);
			$(panel).addEvent('click', this.expandPanel.bind(this, idx));
			
			
		}, this);
	},
	expandPanel: function(iToShow){
			var now = this.now;          
			if(!$chk(now)) { now = 0; }
			var currentPanel = this.panels[now];
			var panel = this.panels[iToShow];
			function slideOut(s){
				this.effects[this.panels.indexOf(s)].start(702).chain(function(){
						s.setStyles({
							cursor:'auto'
						});
						
						
					}.bind(this));				
            };
			this.linkEffects
			if(panel) {

					if($chk(now) && now != iToShow){	
							this.effects[now].start(256).chain(function(){
								
								
								}.bind(this));
							slideOut.apply(this, [panel]);
							$(currentPanel).setStyles({cursor:'pointer'});
							$(panel).setStyles({cursor:'auto'});
					} else {
						slideOut.apply(this, [panel]);
					}
					this.now = iToShow;
			}
	}
});

panelSlide.implement(new Options, new Events);

window.addEvent('load', function(){new panelSlide({panels: $$('.panel')});});