var CS_select_ids = new Array();

function addListener(elt, type, fonction)
{
    if( elt.addEventListener) {
        elt.addEventListener( type, fonction, false);
    } else {
        elt.attachEvent("on"+type, fonction);
    }
}

addListener(window, "load", custom_select);

// calcule le décalage à gauche
function calculateOffsetLeft(r){
    return calculateOffset(r,"offsetLeft");
}

// calcule le décalage vertical
function calculateOffsetTop(r){
    return calculateOffset(r,"offsetTop");
}

function calculateOffset(r,attr){
    var kb=0;
    while(r){
        kb+=r[attr];
        r=r.offsetParent;
    }
    return kb;
}

// Est appelé au chargement de la page, recherche tous les select pour les customiser
function custom_select()
{
	var selects = document.getElementsByTagName('select');
    document.onkeydown=CS_onKeyDownHandler;

	for (var i = 0 ; i < selects.length ; ++i)  {
		if (selects[i].className == 'custom_select')  {
			CS_customize(selects[i], i);
		}
	}
}

// Crée l'élement input et l'élément ul
function CS_customize(select_elt, nb)
{
    var parent_elt = select_elt.parentNode;
    if(select_elt.id == '')
    {
        select_elt.id = 'CS_id_select_'+nb;
    }
    CS_select_ids[nb] = select_elt.id;
    
    var input_elt = document.createElement('input');
    input_elt.style.width = select_elt.offsetWidth - 4 + 'px';
    input_elt.className = 'CS_input';
    input_elt.id = 'CS_id_input_'+nb;
    input_elt.value = select_elt.options[select_elt.selectedIndex].innerHTML.replace(' $ ', ' (') + ')';
    input_elt.readOnly = true;

    input_elt.onclick = function(event) { CS_ouvrir_menu('CS_id_ul_'+nb, 0); }
    input_elt.onkeyup=CS_onKeyUpHandler;
    input_elt.onblur=CS_onBlurHandler;

    if(select_elt.nextSibling != null)
    {
        select_elt.parentNode.insertBefore(input_elt, select_elt.nextSibling);
    }
    else
    {
        select_elt.parentNode.appendChild(input_elt);
    }
    select_elt.style.display = 'none';
    
    var ul = document.createElement('ul');
    ul.className = 'CS_ul';
    ul.id = 'CS_id_ul_'+nb;
    ul.style.width = input_elt.style.width;
    ul.style.position = 'absolute';
    ul.style.top = calculateOffsetTop(input_elt) + input_elt.offsetHeight + 'px';
    ul.style.left = calculateOffsetLeft(input_elt) + 1 + 'px';
    ul.style.width = input_elt.style.width;
    
    var options_elt = select_elt.options;
    for (var i=0; i<options_elt.length; i++) {
        var li = document.createElement('li');
        li.value_select = options_elt[i].value;
        li.id = 'CS_id_li_'+nb+'_'+i;
        
        var tab = options_elt[i].text.split(' $ ');
        
        var txt = '<table style="width:100%;"><tr id="tr'+i+'"><td style="width:50%;">'+tab[0]+'</td><td style="width:50%;">'+tab[1]+'</td></tr></table>';        

        if(options_elt[i].selected == true)
        {
            li.className = 'CS_li_selected';
        }
        if(options_elt[i].title != '')
        {
            li.title = options_elt[i].title;
        }        
        addListener(li, "mouseover", function(event) { CS_li_mouseover(event, 0) });
        addListener(li, "mousedown", function(event) {
             // accès evenement compatible IE/Firefox
            if(!event&&window.event) {
                event=window.event;
            }
            var elt = event.target || event.srcElement;
            CS_li_click(elt, true); 
        });
        
        li.innerHTML = txt;
        
        var tr = li.firstChild.firstChild.firstChild;
        
        addListener(tr, "mouseover", function(event) { CS_li_mouseover(event, 0) });

        var td = li.firstChild.firstChild.firstChild.firstChild;
        
        addListener(td, "mouseover", function(event) { CS_li_mouseover(event, 0) });

       
        ul.appendChild(li);
    }
    document.body.appendChild(ul);

    //Gestion de la hauteur du ul
    ul.className = 'CS_ul_open';
    if(ul.offsetHeight > 300)
    {
        ul.style.height = '300px';
        ul.style.overflow = 'auto';
    }
    ul.className = 'CS_ul';
}

// Est appelé quand on clique sur l'input, affiche l'élement ul
function CS_ouvrir_menu(id, force_close)
{
    var nb = id.split('_')[3];
    
    document.getElementById(id).style.top = calculateOffsetTop(document.getElementById('CS_id_input_'+nb)) + document.getElementById('CS_id_input_'+nb).offsetHeight + 'px';
    if(document.getElementById(id).className == 'CS_ul' && force_close == 0)
    {
        document.getElementById(id).className = 'CS_ul_open';   
    }
    else
    {
        document.getElementById(id).className = 'CS_ul';
    }
}

// Gestion du surlignage
function CS_li_mouseover(event, methode)
{
    if(methode == 0)
    {
        // accès evenement compatible IE/Firefox
        if(!event&&window.event) {
            event=window.event;
        }
        var elt = event.target || event.srcElement;
    }
    else
    {
        var elt = event;
    }
    while(elt.parentNode.nodeName != 'UL')
    {
        elt = elt.parentNode;
    }
    var li_tab = elt.parentNode.getElementsByTagName('li');
    
	for (var i = 0 ; i < li_tab.length ; ++i)  {
		li_tab[i].className = '';
	}

    elt.className = 'CS_li_selected';
}

// Gestion du click sur un élément du select
function CS_li_click(elt, close_ul)
{
    while(elt.parentNode.nodeName != 'UL')
    {
        elt = elt.parentNode;
    }
    var ul_id = elt.parentNode.id
    var tab = ul_id.split('_');
    var nb = tab[tab.length-1];
    
    if(close_ul)
    {
        CS_ouvrir_menu(ul_id, 1);
    }

    document.getElementById('CS_id_input_'+nb).value = elt.firstChild.firstChild.firstChild.firstChild.innerHTML + ' (' + elt.firstChild.firstChild.firstChild.firstChild.nextSibling.innerHTML + ')';
    document.getElementById(CS_select_ids[nb]).value = elt.value_select;
}



// Gestion des touches du clavier

var _lastKeyCode=null;
var _cursorUpDownPressed = false;
var _eventKeycode = null;

// Handler pour le keyup de lu champ texte
var CS_onKeyUpHandler=function(event){
    // accès evenement compatible IE/Firefox
    if(!event&&window.event) {
        event=window.event;
    }

    _eventKeycode=event.keyCode;
    
    if(_eventKeycode==40)
    {
        input_elt = event.target || event.srcElement;
        var tab = input_elt.id.split('_');
        var nb = tab[tab.length-1];
        
        var li_tab = document.getElementById('CS_id_ul_'+nb).getElementsByTagName('li');

    	for (var i = 0 ; i < li_tab.length-1 ; ++i)  {
    		if(li_tab[i].className != '')
    		{
                CS_li_mouseover(li_tab[i+1], 1);
                CS_li_click(li_tab[i+1], false);
                break;
    		}
    	}
    }
    else if(_eventKeycode==38)
    {
        input_elt = event.target || event.srcElement;
        var tab = input_elt.id.split('_');
        var nb = tab[tab.length-1];
        
        var li_tab = document.getElementById('CS_id_ul_'+nb).getElementsByTagName('li');
    
    	for (var i = 1 ; i < li_tab.length ; ++i)  {
    		if(li_tab[i].className != '')
    		{
                CS_li_mouseover(li_tab[i-1], 1);
                CS_li_click(li_tab[i-1], false);
                break;
    		}
    	}
    }
    else if(_eventKeycode==13)
    {
        input_elt = event.target || event.srcElement;
        var tab = input_elt.id.split('_');
        var nb = tab[tab.length-1];
        
        var li_tab = document.getElementById('CS_id_ul_'+nb).getElementsByTagName('li');
    
    	for (var i = 0; i < li_tab.length ; ++i)  {
    		if(li_tab[i].className != '')
    		{
                CS_li_click(li_tab[i], true);
                break;
    		}
    	}
    	return false;
    }
}

// Handler pour le keydown du document
var CS_onKeyDownHandler=function(event){
    // accès evenement compatible IE/Firefox
    if(!event&&window.event) {
        event=window.event;
    }
    // on enregistre la touche ayant déclenché l'evenement
    if(event) {
        _lastKeyCode=event.keyCode;
    }
    
    return;
    if(_lastKeyCode == 13)
    {
        return false;
    }
}

// Handler de blur sur le champ texte
var CS_onBlurHandler=function(event){
    if(!_cursorUpDownPressed){
        // accès evenement compatible IE/Firefox
        if(!event&&window.event) {
            event=window.event;
        }

        input_elt = event.target || event.srcElement;
        var tab = input_elt.id.split('_');
        var nb = tab[tab.length-1];
        //alert(nb);
        CS_ouvrir_menu('CS_id_ul_'+nb, 1);
    }
    _cursorUpDownPressed=false;
};