// JavaScript Document
var customSelect = function (id, titre,besoinConnec)
{
	Dom.getElementsBy(function(e){ if(typeof(e.id) != 'undefined' && e.id != null && e.id != ''){return e.id == id}else{ return false;}}, 'select', document.body, function(e) {
		
		//config
		var selectEnCours = e;
		var idSelect = selectEnCours.id;
		var idSelectSelectionne = idSelect+"_valeur";
		var idInputHidden = idSelect+"_inputCache";
        var idDivOption = idSelect+"_div_option";    
		
		
		//recupere contener du select
		var divParent = e.parentNode ;
		
		var imgParentBG = Dom.getStyle(divParent, 'backgroundImage');
		var timg = imgParentBG.split('/');
		var tnameImg = timg[timg.length-1].split('.');
		var imgParentBGactif = "";
		for(var i = 0; i < timg.length-1; i++)
		{
				imgParentBGactif += timg[i]+'/';
		}
		imgParentBGactif += tnameImg[0]+"_actif."+tnameImg[1];
		divParent.id = idSelect+"_custom";
		divParent.title = "selectCustom";
		//div qui indique le resultat
		var divResult = document.createElement("span");
		divResult.onclick = function(){
			
		
		};
		divResult.style.cursor = "pointer";
		divResult.id = idSelectSelectionne;
		divResult.appendChild(document.createTextNode(titre)) ;
		divParent.appendChild(divResult);	
		
		//stockage des option du select
		var tabOptHtml = new Array();
		var tabOptValue = new Array();
		var tabOptOnclick = new Array();
		Dom.getElementsBy(function(e){return true}, 'option', e, function(e) {
			
			tabOptHtml[tabOptHtml.length] = e.innerHTML;
			tabOptValue[tabOptValue.length] = e.value;
			tabOptOnclick[tabOptOnclick.length] = e.onclick;
		});
		//creation du contener des option
		var divContenerOption = document.createElement("div");
        divContenerOption.id = idDivOption ;
		divContenerOption.className = "selectCustom";
		divContenerOption.style.backgroundColor = "#f5f5f5";
		divContenerOption.style.color = "#000000";  
		divContenerOption.style.textAlign = "center";  
		var largString = Dom.getStyle(divParent, 'width');
		var tLarg = largString.split('p');
		
		var paddingLeftString =  Dom.getStyle(divParent, 'paddingLeft');
		var tpaddingLeftStr = paddingLeftString.split('p');
		var paddingLeft = tpaddingLeftStr[0];
		
		
		var paddingRightString =  Dom.getStyle(divParent, 'paddingRight');
		var tpaddingRightStr = paddingRightString.split('p');
		var paddingRight = tpaddingRightStr[0];
		
        divContenerOption.style.width = (parseInt(tLarg[0])+parseInt(paddingRight)+parseInt(paddingLeft))+'px';
		divContenerOption.style.marginLeft = '-'+parseInt(paddingLeft)+'px';
		divContenerOption.style.height = "150px";
        divContenerOption.style.overflowY = "auto";
		divContenerOption.style.overflowX = "hidden";
		divContenerOption.style.position = "relative";
		divContenerOption.style.display = "none";
		divContenerOption.style.zIndex = 50;
		
		var divBarreSeparation = document.createElement("div");
			divBarreSeparation.style.height = "15px";
		
		var separateur = document.createElement("div");
			separateur.style.height = "1px";
			separateur.style.width = (parseInt(tLarg[0])+parseInt(paddingRight)+parseInt(paddingLeft)-10)+'px';
			separateur.style.marginLeft = "5px";
			separateur.style.marginTop = "5px";
			separateur.style.backgroundColor = "#d9d9d9"
			
		divBarreSeparation.appendChild(separateur);
		divContenerOption.appendChild(divBarreSeparation);
		
		//replir le contener des options
		for(var i = 0 ; i<tabOptHtml.length ; i++)
		{
			var divSpanValueOption = document.createElement("div");
			divSpanValueOption.style.height = "15px";
			divSpanValueOption.style.cursor = "pointer";
			divSpanValueOption.title = i;
			divSpanValueOption.appendChild(document.createTextNode(tabOptHtml[i]));
			divSpanValueOption.className = "selectCustom";
			divSpanValueOption.onclick = function(){
			    
                Dom.get(idSelectSelectionne).innerHTML =tabOptHtml[this.title];
				Dom.get(inputCacher).value = tabOptValue[this.title];
				if(typeof(tabOptOnclick[this.title]) == 'function')
                {
                    tabOptOnclick[this.title]();  
                }
                
                //creationSelect(tabOptHtml[this.title]);
                
			}
			divContenerOption.appendChild(divSpanValueOption);	
		}
		
		//ajout des element et suppression du selec
		divParent.appendChild(divContenerOption);	
		
		
		//creation des angles inferieur
		var divContenerAngles = document.createElement("div");
		
		var divContenerD = document.createElement("div");
		divContenerD.style.flaot = "right";
		divContenerD.style.backgroundImage = "url(images/angleDroite.png)";
		divContenerD.style.width = "7px";
		divContenerD.style.height = "7px";
		
		var divContenerG = document.createElement("div");
		divContenerG.style.flaot = "left";
		divContenerG.style.backgroundImage = "url(images/angleGauche.png)";
		divContenerG.style.width = "7px";
		divContenerG.style.height = "7px";
		
		divContenerAngles.appendChild(divContenerG);	
		divContenerAngles.appendChild(divContenerD);	
		
		
		divParent.removeChild(selectEnCours);
		
		//creation de l'input pour stocker la valeur du select
		var inputCacher = document.createElement("input");
        inputCacher.name = titre ;
		inputCacher.id = idInputHidden;
		inputCacher.type = "hidden";
		divParent.appendChild(inputCacher);	
		
		
		
		
		//gestion du select
		YAHOO.util.Event.addListener(divParent, "click", function(ev) {
			
			var control = true;
			if(besoinConnec)
			{
			
				if(!gestionSiteNQ.visiteurConnecte)
				{
					control = false;
					alert(tab_traduction_gmap['geocast_connexion_obligatoire'])
				}
			}
			
			if(control)
			{
				if(Dom.getStyle(divContenerOption,'display') == 'none')
				{
					Dom.setStyle(divContenerOption,'display','block');
					Dom.setStyle(divParent,'backgroundImage',imgParentBGactif);
				} 
				else
				{
					Dom.setStyle(divContenerOption,'display','none');
					Dom.setStyle(divParent,'backgroundImage',imgParentBG);
				} 
			}
		});

		
		
		
		
		YAHOO.util.Event.addListener(document.body, "click", function(ev) {
				
				if(typeof(ev.target) == 'object' && divResult != ev.target &&  !Dom.isAncestor( divParent , ev.target ) && ev.target.className != "selectCustom" && ev.target.title != "selectCustom")
				{
					
					Dom.setStyle(divContenerOption,'display','none');
					Dom.setStyle(divParent,'backgroundImage',imgParentBG);
				}
			
		});	
	});
};