var OM_mooSlidePanel = new Class({
	Implements: [Options, Events],
	options: {
		panel: 'scrolling_list',
		slidingPanel: 'list_marques',
		staticPanel: 'list_categories',
		nombreCols: {
			staticPanel: 3,
			slidingPanel: 4
		},
		buttonLabels: [],
		transition: Fx.Transitions.Quad.easeInOut,
		duration: 1000
	},
	initialize: function(options){
		this.setOptions(options);
		this.panel = this.options.panel;
		this.slidingPanel = this.options.slidingPanel;
		this.staticPanel = this.options.staticPanel;
		this.state = {
			staticPanel: true,
			slidingPanel: false
		};
		window.addEvent('domready', this.domReady.bind(this));
	},
	domReady: function(){
		this.panel = $(this.panel);
		if($defined(this.panel)){
			this.slidingPanel = $(this.slidingPanel);
			this.staticPanel = $(this.staticPanel);
			this.panel.set('morph',{
				duration: 750,
				transition: this.options.transition
			});
			if($defined(this.slidingPanel) && $defined(this.staticPanel)){
				this.slidingPanel.set('morph',{
					duration: this.options.duration,
					transition: this.options.transition
				});
				this.spreadElements();
				this.attachEvents();
			};
		};
	},
	attachEvents: function(){
		this.slidingPanel.addEvent('mouseenter', this.openSlidingPanel.bind(this));
		this.staticPanel.addEvent('mouseenter', this.closeSlidingPanel.bind(this));
	},
	openSlidingPanel: function(){
		if(this.state.staticPanel){
			this.slidingPanel.morph({'width': '740px'});
			this.slidingPanel.removeClass('closed');
			this.staticPanel.addClass('closed');
			this.state.staticPanel = false;
			this.state.slidingPanel = true;
			this.handleMoreButtons(1,0);
		};
		
	},
	closeSlidingPanel: function(){
		if(this.state.slidingPanel){
			this.slidingPanel.morph({'width': '375px'});
			this.slidingPanel.addClass('closed');
			this.staticPanel.removeClass('closed');
			this.state.staticPanel = true;
			this.state.slidingPanel = false;
			this.handleMoreButtons(0,1);
		};
	},
	spreadElements: function(){
		this.lists = new Elements([this.slidingPanel.getElement('ul'), this.staticPanel.getElement('ul')]);
		this.lists.each(function(item,index){
			this.container = item.getParent('div');
			this.lis = item.getElements('li');
			this.counter = 0;
			this.nbCols = (index == 0) ? this.options.nombreCols.slidingPanel : this.options.nombreCols.staticPanel;
			this.length = {
				original: this.lis.length,
				updated: (Math.ceil(this.lis.length / this.nbCols))
			};
			for(var i=0; i<this.nbCols; i++){
				var className = (i == 0) ? 'first' : '';
				var ul = new Element('ul', {
					'class': className
				}).inject(this.container);
				
				for(var j=0; j<this.length.updated; j++){
					if(this.counter < this.length.original){
						var li = this.lis[this.counter].clone().inject(ul);
						this.counter++;
					};
				};
				if(i == 0){
					var visibility = (index == 1) ? 'hidden' : 'visible';
					this.moreButton = new Element('li', {
						'class': 'more',
						'html': this.options.buttonLabels[index],
						'styles': {
							'visibility': visibility
						}
					}).inject(ul);
				};
			};
			item.dispose();
		}.bind(this));
		this.lists = this.panel.getElements('ul');
		this.levelElements(this.lists,0);
		this.levelElements(new Elements([this.slidingPanel, this.staticPanel]),20);
		this.showPanel();
	},
	showPanel: function(){
		this.panel.morph({'opacity': 100});
		this.panel.setStyles({
			height: 'auto',
			overflow: 'visible'
		});
	},
	levelElements: function(elements,padding){
		this.height = elements[0].getSize().y;
		elements.each(function(item,index){
			this.height = (item.getSize().y > this.height) ? item.getSize().y : this.height;
		}.bind(this));
		elements.setStyle('height', (this.height-padding) + 'px');
	},
	handleMoreButtons: function(open,close){
		this.moreButtons = this.panel.getElements('ul.first li.more');
		this.moreButtons[close].fade('in');
		this.moreButtons[open].fade('out');
	}
});