/*
	Class: MooSelectSlide
		"Drop-down" sur un element a la facon d'un select avec effet "slide"
		
	Note:
		L'acces au clavier n'est pas correcte sur tous les navigateurs

	Example:
		(start code)
		(end)
	*/


	var MooSelectSlide = new Class({
		initialize: function(selectSlideElement) {
			if(!$(selectSlideElement)) {
				throw new Error("MooSelectSlide : l'element id='"+selectSlideElement+"' est introuvable. "); return false;
			}
			var itemButton = $(selectSlideElement).getElement("a[name=itemButton]");
			var itemContent = $(selectSlideElement).getElement("div[name=itemContent]");
			if(!itemButton) {
				throw new Error("MooSelectSlide : l'element id='"+selectSlideElement+"' ne contient pas de fils dont name=itemButton. "); return false;
			}
			if(!itemContent) {
				throw new Error("MooSelectSlide : l'element id='"+selectSlideElement+"' ne contient pas de fils dont name=itemContent. "); return false;
			}
			$extend(itemContent,{
				slideObj: null,
				styleObj: null,
				init: function(){
					this.slideObj = new Fx.SlideMooSelectSlide(this,{wait:false});
					if(window.ie) { // on corrige  un petit probleme de calage sous ie
						this.slideObj.wrapper.setStyle("margin-top","-2px");
					}
					this.slideObj.hide('vertical');
				},
				hide: function(){
					this.slideObj.slideOut('vertical');
				},
				show: function(){
					itemContent.style['display'] = 'block';
					this.slideObj.slideIn('vertical');
				}
			});
			itemContent.init();
			$(selectSlideElement).addEvent('mouseenter', function() {itemContent.show()});
			$(selectSlideElement).addEvent('mouseleave', function() {itemContent.hide()});
			// pour ce qui suit, c'est en attendant les evennements mootools 'focusenter' et 'focusleave' :-)
			$(selectSlideElement).addEvent('focus', function() {itemContent.show()});
			$(selectSlideElement).addEvent('blur', function() {itemContent.hide()});
			itemButton.addEvent('focus', function() {itemContent.show()});
			return this;
		}
	});
	
	/**
	 * Correction du plugin Fx.Slide utilise par MooSelectSlide
	 * Problème rencontré sous Safari, l'appel this.element.getStyles('margin') generait une erreur
	 */

	Fx.SlideMooSelectSlide = Fx.Base.extend({

		options: {
			mode: 'vertical'
		},

		initialize: function(el, options){
			var myObj = this;
			this.element = $(el);
			if(window.webkit) {
				this.wrapper = new Element('div', {'styles': {'overflow': 'hidden','margin':'0px 0px 0px 0px'}}).injectAfter(this.element).adopt(this.element);
			} else {
				this.wrapper = new Element('div', {'styles': $extend(this.element.getStyles('margin'), {'overflow': 'hidden'})}).injectAfter(this.element).adopt(this.element);
			}
			this.element.setStyle('margin', 0);
			//this.wrapper.setStyle("margin-top","-2px");
			this.setOptions(options);
			this.now = [];
			this.parent(this.options);
			if (window.webkit419) this.addEvent('onComplete', function(){
				this.element.remove().inject(this.wrapper);
			});
		},

		setNow: function(){
			for (var i = 0; i < 2; i++) this.now[i] = this.compute(this.from[i], this.to[i]);
		},

		vertical: function(){
			this.margin = 'margin-top';
			this.layout = 'height';
			this.offset = this.element.offsetHeight;
		},

		horizontal: function(){
			this.margin = 'margin-left';
			this.layout = 'width';
			this.offset = this.element.offsetWidth;
		},

		/*
		Property: slideIn
			Slides the elements in view horizontally or vertically.

		Arguments:
			mode - (optional, string) 'horizontal' or 'vertical'; defaults to options.mode.
		*/

		slideIn: function(mode){
			this[mode || this.options.mode]();
			return this.start([this.element.getStyle(this.margin).toInt(), this.wrapper.getStyle(this.layout).toInt()], [0, this.offset]);
		},

		/*
		Property: slideOut
			Sides the elements out of view horizontally or vertically.

		Arguments:
			mode - (optional, string) 'horizontal' or 'vertical'; defaults to options.mode.
		*/

		slideOut: function(mode){
			this[mode || this.options.mode]();
			return this.start([this.element.getStyle(this.margin).toInt(), this.wrapper.getStyle(this.layout).toInt()], [-this.offset, 0]);
		},

		/*
		Property: hide
			Hides the element without a transition.

		Arguments:
			mode - (optional, string) 'horizontal' or 'vertical'; defaults to options.mode.
		*/

		hide: function(mode){
			this[mode || this.options.mode]();
			return this.set([-this.offset, 0]);
		},

		/*
		Property: show
			Shows the element without a transition.

		Arguments:
			mode - (optional, string) 'horizontal' or 'vertical'; defaults to options.mode.
		*/

		show: function(mode){
			this[mode || this.options.mode]();
			return this.set([0, this.offset]);
		},

		/*
		Property: toggle
			Slides in or Out the element, depending on its state

		Arguments:
			mode - (optional, string) 'horizontal' or 'vertical'; defaults to options.mode.

		*/

		toggle: function(mode){
			if (this.wrapper.offsetHeight == 0 || this.wrapper.offsetWidth == 0) return this.slideIn(mode);
			return this.slideOut(mode);
		},

		increase: function(){
			this.element.setStyle(this.margin, this.now[0] + this.options.unit);
			this.wrapper.setStyle(this.layout, this.now[1] + this.options.unit);
		}

	});