function c_hover(curId,id,progress){
    oCurseur = $(curId);
    if(progress){
        i=0;
        prev = oCurseur.previousSiblings();
        prev.each(function(prevElmt, index) {
            if(prevElmt.className!='cElmt_clicked')
                prevElmt.className='cElmt_hover';
            i++;
        });
        next = oCurseur.nextSiblings();
        next.each(function(nextElmt, index) {
            if(nextElmt.className!='cElmt_clicked')
                nextElmt.className='cElmt cElement'+i%2;
            i++;
        });
    }else{
        i=0;
        nodeList = oCurseur.siblings();
        nodeList.each(function(childElmt, index) {
            if(childElmt.className != 'cElmt_start' && childElmt.className != 'cElmt_end' && childElmt.className != 'cElmt_clicked'){
                c_out(childElmt,"","",i);
            }
            i++;
        });
    }
    $(curId).className='cElmt_hover';
}
function c_out(oCurseurId,id,progress,pos){
    oCurseur = $(oCurseurId);
    oCurseur.className='cElmt cElement'+pos%2;
}
function c_click(curId,id,value,progress){
    oCurseur = $(curId);
    idInput="value_"+id;
    $(idInput).value=value;
    idCurseur="curseur_"+id;
    i=0;
    nodeList = oCurseur.siblings();
    nodeList.each(function(childElmt, index) {
        if(childElmt.className != 'cElmt_start' && childElmt.className != 'cElmt_end'){
            //$("debug").innerHTML+=childElmt.className;
            c_out(childElmt,"","",i);
            childElmt.onmouseover = function(){c_hover(childElmt,"",progress);}
            childElmt.onmouseout = function(){c_out(childElmt,"","",i);}
        }
        i++;
    });
    $(curId).className='cElmt_clicked';
    $(curId).onmouseover=function(){};
    $(curId).onmouseout=function(){};
//    $("debug").innerHTML=getProperties(nodeList);
}

function curseur (name,id,nbElmt) {
    var param = new Array();
    var nbElmt;
    var connection;
    var progress;
    this.name = name;
    this.nbElmt = nbElmt;
    this.id = id;
    this.addParam = function (param,value){
        this.param[param]=value;
    }
   
    this.render = function (output){
        strRender = 
        '<div class="curseur" id="curseur_'+this.id+'">'+
            '<div class="cElmt_start" id="cElmt0" onmouseover="c_hover(this.nextSibling.id,\''+this.id+'\','+this.progress+')" '+
//                'onmouseout="c_out(this.nextSibling,\''+this.id+'\','+this.progress+')" '+
                'onclick="c_click(this.nextSibling.id,\''+this.id+'\',1,'+this.progress+')" '+
                '></div>';
        i=1;
        while(i<=this.nbElmt){
            divId = 'cElmt'+i;
            strRender += 
            '<div class="cElmt" id="'+divId+'" '+
                'onmouseover="c_hover(this.id,\''+this.id+'\','+this.progress+')" '+
                'onmouseout="c_out(this.id,\''+this.id+'\','+this.progress+')" '+
                'onclick="c_click(this.id,\''+this.id+'\','+i+','+this.progress+')" '+
                //((this.param["width"])?'style="width:'+this.param["width"]+'px"':'')+
                '></div>';
            i++;
        }
            strRender += 
            '<div class="cElmt_end" id="cElmt'+i+'" onmouseover="c_hover(this.previousSibling.id,\''+this.id+'\','+this.progress+')" '+
//                'onmouseout="c_out(this+previousSibling,\''+this.id+'\','+this.progress+')" '+
                'onclick="c_click(this.previousSibling.id,\''+this.id+'\',1,'+this.progress+')" '+
                '></div>'+
        '</div>'+
        '<input id="value_'+this.id+'" type="hidden" value="0" size="1"/>';
        return strRender;
    }
}