/* Sert à "skinner" un sélect de formulaire */
/* Utilisé pour le champs de recherche */

var SkinSelect = new Class({
	options: {
		autoSize: true,
		element: false,
		type: 'select',
		width: 200,
		listwidth: false
	},
	initialize: function(options){
		this.setOptions(options);
		this.label = this.getSelectedItem().getText();
		
		this.liste = this.getItems();
		this.dl = new Element('dl',{'class':'select','styles':{'width':this.options.width}});
		var dt = new Element('dt',{'styles':{'width':this.options.width}}).addEvent('click',this.showHideItems.bindWithEvent(this));
		dt.addEvent('mouseover', this.over)
		dt.addEvent('mouseout', this.out)
		var span = new Element('span')
		this.em = new Element('em').setText(this.label);
		this.em.injectInside(span)
		span.injectInside(dt)
		this.dd = new Element('dd',{'styles':{'display':'none'}});
		if(this.options.listwidth){this.dd.setStyles({'width':this.options.listwidth})}
		var ul = new Element('ul');
		
		
		this.liste.each(function(item){
			var li = new Element('li');
			if(!item.disabled){
				//alert(item.text.value);
				var a = new Element('a')
				a.prop = []
				a.prop['index']= item.index;
				if(this.isSelectedItem(a.prop['index'])){
					li.addClass('actif')
				}
				a.prop['class'] = this;
				a.prop['associatedElement'] = this.options.element
				a.prop['parentEm'] = this.em
				a.prop['parentLi']= li
				a.prop['parentDd']= this.dd
				a.setText(item.label);
				a.addEvent('click', this.setItem.bindWithEvent(a))
				a.addEvent('mouseover', this.over)
				a.addEvent('mouseout', this.out)
				a.injectInside(li);
			}else{
				var em = new Element('em').setText(item.label);
				em.injectInside(li);
			}
			li.injectInside(ul);
		}, this)
		
		ul.injectInside(this.dd);
		
		dt.injectInside(this.dl);
		this.dd.injectInside(this.dl);
		this.dl.injectAfter(this.options.element)
		this.divcache = new Element('div');
		
		this.divcache.injectAfter(this.options.element)
		this.options.element.injectInside(this.divcache)
		
		this.divcache.setStyle('overflow','hidden')
		this.divcache.setStyle('height','0')
		this.divcache.setStyle('width','0')
		this.divcache.setStyle('margin','0')
		this.divcache.setStyle('padding','0')
		this.divcache.setStyle('float','left')
		
		this.divcache.setStyle('position','absolute')
		this.divcache.setStyle('top','0')
		this.divcache.setStyle('left','0')
		//this.divcache.setStyle('display','none')
	},
	over:function(){
		this.addClass('rollover');
	},
	out:function(){
		this.removeClass('rollover');
	},
	getSelectedItem: function(){
		if(this.options.type == 'select'){
			var el = this.options.element;
			var elSelected = false;
			el.getElements('option').each(function(item){
				if(item.getProperty('selected')){
					elSelected = item;
				}
			});
			return elSelected;
		}
	},
	isSelectedItem: function(index){
		if(this.options.type == 'select'){
			var el = this.options.element;
			var returnValue = false;
			el.getElements('option').each(function(item,indexItem){
				if(item.getProperty('selected') && index == indexItem){
					returnValue = true;
				}
			});
			return returnValue;
		}
	},
	getItems: function(){
		if(this.options.type == 'select'){
			var el = this.options.element;
			var aList = [];
			el.getElements('option').each(function(item, index){
				aList.push({index:index, label:item.getText(), disabled:item.getProperty('disabled')});
			})
			return aList;
		}
	},
	showHideItems: function(event){
		if(this.dd.getStyle('display')=='none'){
			//show
			this.dd.injectAfter($('contenant'))
			var posDl = this.dl.getCoordinates();
			this.dd.setStyles({
								  'display': 'block',
								  'top':posDl.top + posDl.height-1,
								  'left':posDl.left
								  });
			
			this.dd.addClass('selectEndPage')
		}else{
			//hide
			this.dd.setStyle('display', 'none');
			this.dd.injectInside(this.dl)
			this.dd.removeClass('selectEndPage')
			this.dd.getElements('a').each(function(item){item.removeClass('rollover')})
		}
	},
	setItem: function(event){
		event.preventDefault()
		this.prop['class'].getSelectedItem().setProperty('selected','')
		this.prop['associatedElement'].getElements('option')[this.prop['index']].setProperty('selected','selected')
		this.prop['parentEm'].setText(this.prop['associatedElement'].getElements('option')[this.prop['index']].getText())
		this.prop['parentDd'].getElements('li').each(function(item){
			item.removeClass('actif')
		})
		this.prop['parentLi'].addClass('actif')
		this.prop['class'].showHideItems()
		if(this.prop['associatedElement'].onchange){
			this.prop['associatedElement'].onchange()
		}
	}
});

SkinSelect.implement(new Options, new Events);