/* 
#####################################################
#####################################################
##												   ##
##		Document JS développé pour le site		   ##		
##			http://www.gueuleton.com/			   ##
##												   ##
##			Propriété de ce document			   ##
##												   ##
##			  Simon Jean-Philippe				   ##
##		document créer le 25 janvier 2009		   ##
##				mis à jour le 					   ##
##												   ##
#####################################################
#####################################################
*/


var Select = Class.create({
						  
	initialize : function(idNameSelect,IdInsertContener,positionContener,styleSelect) {
		
		if(typeof(styleSelect)=='undefined') {
			var style = '1';
		} else {
			var style = '2';
		}
		
		//id et name du lelement
		this.idNameSelect = idNameSelect ;
		//id ou linsertin du contener se fera
		this.IdInsertContener = IdInsertContener ;
		//position du contener de l'endroit ou il est implanté
		this.positionContener = positionContener ;
		//selection de lelement parent ou sera insérer le select personnalisé
		this.idParentSelect = $(this.idNameSelect).up().id;
		
		var valueSelect = '';
		var valueDefautSelect = Array('-','Aucunes importance ') ;
		var widthMax = '' ;
		//selection des options du select 
		
		$$('.option_'+idNameSelect+'').each(function(element) {
				valueSelect += '<label class="itemSelect_'+idNameSelect+'" id="'+element.value+'" style="font-size:12px; display:block; height:20px; width:auto; line-height:20px; color:#000000;"onMouseOut="javascript: this.style.background =\'#e6e6d8\'" onMouseOver="javascript: this.style.background =\'#FFFFFF\'">&nbsp;'+element.innerHTML+'&nbsp;</label>';
			
			if(parseInt(element.innerHTML.length*8)>widthMax) {
				widthMax = element.innerHTML.length*8 ;
			}
			
			//alert(element.selected);
			if(element.selected==true) {
				valueDefautSelect = Array(element.value,element.innerHTML);
			}
		});
		//alert(widthMax);
		
		//suppression de l'element select
		$(this.idParentSelect).update('');
		
		//construction de l'element UL
		var elementUL = Builder.node('ul', {
			id : 'E_'+this.idNameSelect,
			className: 'Liste' 
		});
			//construction des elements LI
			var elementLI_1 = Builder.node('li', {
				style: 'background:url(images/decoupage/select_border_left'+( (style==1) ? '' : '_2' )+'.png) no-repeat; width:5px; height:18px; float:left;'
			});
			
			var elementLI_2 = Builder.node('li', {
				style: 'background:url(images/decoupage/select_border_middle'+( (style==1) ? '' : '_2' )+'.png) repeat-x; width:auto; height:18px; float:left; line-height:18px; color:#000000;',
				id : 'itemSelect_'+this.idNameSelect+''
			});
			
			var elementLI_3 = Builder.node('li', {
				style: 'background:url(images/decoupage/select_border_right'+( (style==1) ? '' : '_2' )+'.png) no-repeat; width:18px; height:18px; float:left;'
			});
			
		//attachement du select personnalisé
		$(this.idParentSelect).appendChild(elementUL);
			//attachement des elements li 
			$('E_'+this.idNameSelect).appendChild(elementLI_1);
			$('E_'+this.idNameSelect).appendChild(elementLI_2);
			$('E_'+this.idNameSelect).appendChild(elementLI_3);
	
		$('itemSelect_'+this.idNameSelect).update('&nbsp;'+valueDefautSelect[1]+'&nbsp;');
	
		//creation de lemement contenant tous les items poru le select personnalisé 
		var elementContener = Builder.node('div', {
			id:  'contenerItem_'+this.idNameSelect+'',
			style: 'display:; visibility:hidden; z-index:1000; background-color:#'+( (style==1) ? '000000' : '68685D' )+'; position:absolute; '+this.positionContener+' width:'+widthMax+'px;'
			//className : '' 
		});
		
			var elementLabelContener = Builder.node('div', {
				id:  'label_'+this.idNameSelect+'',
				style : 'position:relative; top:1px; left:3px; overflow:hidden; background-color:#e6e6D8;' 
			});
			
		//inclusion de conteneur du select a lendroit choisi
			$(this.IdInsertContener).appendChild(elementContener);
			$('contenerItem_'+this.idNameSelect).appendChild(elementLabelContener);
			
			//remplissage des item du select
			$('label_'+this.idNameSelect+'').innerHTML = valueSelect;
			
			
			$$('.itemSelect_'+idNameSelect).each(function(ee) {
				//alert(ee.getStyle('width'));				 
			});
			
			//modification de la taille de lelement parent 
			var styleParent_w = parseInt($('label_'+this.idNameSelect+'').getStyle('width'));
			var styleParent_h = parseInt($('label_'+this.idNameSelect+'').getStyle('height'));
			//alert(styleParent_w);
			//alert(styleParent_h);
			$('label_'+this.idNameSelect+'').setStyle({ height: styleParent_h+'px', width:styleParent_w+'px' });
			$('contenerItem_'+this.idNameSelect).setStyle({ height: (styleParent_h+2)+'px', width: (styleParent_w+6)+'px' });
			
			
		//ajout des observers sur les item du select personnalisé
		var idNameSelect = this.idNameSelect;
		var overSelect = false;
		$$('.itemSelect_'+idNameSelect+'').each(function(el) {
			el.observe('click', function() {
				$('itemSelect_'+idNameSelect).update(el.innerHTML);
				$(idNameSelect).value = el.id;
				$('contenerItem_'+idNameSelect).setStyle({ visibility: 'hidden' });
			});
			el.observe('mouseover',function() {
				overSelect = true ;
			});
			el.observe('mouseout',function() {
				overSelect = false ;
			});
		});
		
		var displayStyleContener = 'hidden';
		
		//ajout de l'observer sur lelement select
		$('E_'+this.idNameSelect).observe('click', function(event) {
				
			//verification du display du contener des item du select
			 displayStyleContener = $('contenerItem_'+idNameSelect).getStyle('visibility');
			 //alert(displayStyleContener);
			 if(displayStyleContener=='hidden') {
				 $('contenerItem_'+idNameSelect).setStyle({ visibility: 'visible' });
				displayStyleContener = 'visible';
			 } else {
				 $('contenerItem_'+idNameSelect).setStyle({ visibility: 'hidden' });
				 displayStyleContener = 'hidden';
			 }
			Event.stop(event);
		});
		
		Event.observe(document,'mousedown',function() {
			
			if(displayStyleContener=='visible' && !overSelect) {
				$('contenerItem_'+idNameSelect).setStyle({ visibility: 'hidden' });
				displayStyleContener = 'hidden';
			}
		});
		
		//ajout de lobserver blur
		/*$('E_'+this.idNameSelect).observe('onBlur', function() {
			//verification du display du contener des item du select
			 displayStyleContener = $('contenerItem_'+idNameSelect).getStyle('visibility');
			 if(displayStyleContener=='hidden') {
				 $('contenerItem_'+idNameSelect).setStyle({ visibility: '' });
			 } else {
				 $('contenerItem_'+idNameSelect).setStyle({ visibility: 'hidden' });
			 }
		});*/
		
		
		//insertion du champs caché pour l'element select
		$('E_'+this.idNameSelect).insert('<input type="hidden" name="'+this.idNameSelect+'" id="'+this.idNameSelect+'" value="'+valueDefautSelect[0]+'">');
	}
	
});