var box = new Array()                                                                   ;   //  Tableau contenant les futurs boites

function boite( id) {
    var 
        page            ,
        y_pos           ,
        vitesse = 10    ,
        ie      = (navigator.appName=="Microsoft Internet Explorer")? 1 :0,             //  Teste rapide du navigateur pour certains calcul de largeur de calque
        t       = new Array(),
        id_tmp
    ;

    //  Recupère les informations de la balise a remplacer
    id_tmp      = document.getElementById(id)                                           ;
    text        = id_tmp.innerHTML                                                      ;
    longueur    = id_tmp.offsetWidth                                                    ;
    hauteur     = id_tmp.offsetHeight                                                   ;
    //  Redefinis quelques propriété de la balise "usurpé"...
    with(id_tmp){
        innerHTML   = ''                                                                ;   //  Supprime le texte
        className   = ''                                                                ;   //  Supprime ca classe de base
        with(style) {
            position    ='relative' ;
            overflow    ='hidden'   ;
            styleFloat  ='left'     ;
            cssFloat    ='left'     ;
        }
    };
    
    //  Création des objets DOM
    t.b         = document.createElement('div')                                         ;   //  Créer la boite
    t.b.id      = id+"_cadre"
    t.texte     = document.createElement('div')                                         ;   //  Zone de texte
    t.texte.id  = id+"_texte"
    t.sV        = document.createElement('div')                                         ;   //  Zone du scrollbar vertical
    t.sV.id     = id+"_sV"                                                              ;   //  Bouton haut
    t.sV_H      = document.createElement('a')                                       
    t.sV_H.id   = id+"_up"                          
    t.sV_B      = document.createElement('a')                                           ;   //  Bouton bas
    t.sV_B.id   = id+"_down"                                    
    t.sV_E      = document.createElement('span')                                        ;   //  Espace entre les 2 boutons
    t.sV_E.id   = id+"_esp"
    t.sV_D      = document.createElement('span')                                        ;   //  Barre de défilement
    t.sV_D.id   = id+"_def"                                                     
    t.img_h     = document.createElement('img')                                         ;
    t.img_b     = document.createElement('img')                                         ;
    t.txt       = document.createTextNode("")                                           ;   //  Créer le node du texte
    t.texte.appendChild(t.txt)                                                          ;   //  Rattache le texte txt a texte 
    
    box[id]     = new Array()                                                           ;   //  On Créer un nouveau tableau
    bx          = new Array()                                                           ;   //  Nouveau tableau reference des objets qui vont etres créer.
    box[id].obj = new Array()                                                           ;   //  reférence pour appel des objets 
    
    //  Integration des objets DOM dans la pages
    bx.txt      = t.b.appendChild   ( t.texte)                                          ;   //  Rattache texte a la boite
    bx.b_H_I    = t.sV_H.appendChild( t.img_h)                                          ;   //  rattache l'image au lien haut   
    bx.b_B_I    = t.sV_B.appendChild( t.img_b)                                          ;   //  Rattache l'image au lien bas
    bx.b_H      = t.sV.appendChild  ( t.sV_H)                                           ;   //  Lien haut 
    bx.sV_E     = t.sV.appendChild  ( t.sV_E)                                           ;   //  spaceur
    bx.sV_D     = t.sV_E.appendChild( t.sV_D)                                           ;   //  spaceur
    bx.b_B      = t.sV.appendChild  ( t.sV_B)                                           ;   //  Lien bas
    bx.scrl     = t.b.appendChild   ( t.sV)                                             ;   //  Rattache le scrollbar a boite
    bx.b        = id_tmp.appendChild( t.b)                                              ;   //  Créer la boite
    
    //  Applique style
    //  Images > ! Placer en début pour eviter bug ie par défaut prend 30px pour les images
    with( bx.b_H_I) {                                                                   ;   //  Image du haut
        src="images/up.png";
        style.width="9px";
        style.height="9px"
    };var i_H_lg = parseInt( bx.b_H_I.offsetWidth),i_H_ht = parseInt( bx.b_H_I.offsetHeight)
    with( bx.b_B_I) {                                                                   ;   //  Image du bas
        src="images/down.png";
        style.width="9px";
        style.height="9px"
    };var i_B_lg = parseInt( bx.b_B_I.offsetWidth),i_B_ht = parseInt( bx.b_B_I.offsetHeight)
    with( bx.b_B)   {                                                                   ;   //  Lien haut (balise <a>)
        with(style){
            title="Clic pour scanner les canaux radio vers le bas";
            display= "block";
            width=i_H_lg+"px";
            height=i_H_ht+"px"
        }
    };var b_B_lg = parseInt( bx.b_B.offsetWidth),b_B_ht = parseInt( bx.b_B.offsetHeight)    
    with( bx.b_H)   {                                                                   ;   //  Lien bas (balise <a>)
        with(style){
        title="Clic pour scanner les canaux radio vers le haut";
            display="block";
            width= i_B_lg+"px";
            height= i_B_ht+"px";
        }
    };var b_H_lg = parseInt( bx.b_H.offsetWidth),b_H_ht = parseInt( bx.b_H.offsetHeight)    
    with( bx.b)     {                                                                   ;   //  calque principal 
        with( style){
            width=longueur+"px";
            height=hauteur+"px";
            clip= "rect(0px, "+longueur+"px, "+hauteur+"px, 0px)";
        }
    };var b_ht   = parseInt(bx.b.offsetHeight),b_lg = parseInt(bx.b.offsetWidth)
    with( bx.sV_E)  {                                                                   ;   //  Calque d'espace du scroll Vertical 
        with( style){
            height=b_ht-(b_H_ht+b_B_ht+((ie)? 4 : 0))+"px"
            width=i_B_lg+"px"
        }
    }
    var sV_ht = parseInt( bx.sV_E.offsetHeight)
    
    with( bx.scrl)  {                                                                   ;   //  Calque scroll vertical contenant les img,a, et espace scroll vertical
        with( style){
            position= "relative";
            left= longueur-(b_B_lg+( (ie)? 2:0))+"px";
            width= b_B_lg+( (ie)? 2:0)+"px";
            height= b_ht+"px"
        }
    };var s_lg = parseInt( bx.scrl.offsetWidth)
    with( bx.txt)   {                                                                   ;   //  Calque du texte
        with( style){
            top= 0+"px";
            width=longueur-( s_lg+((ie)? 4 : 0))+"px";
            height= "auto"
        }
    }
    with( bx.sV_D)  {                                                                   ;   //  barre de défillement vertical
        with(style) {
            display="block"
            position="relative";
            top="0px"
            width="auto";
            height="100%";
            backgroundColor="#000000"
        }
    }
    
    //  Applique le css de la feuilles de style d'origine
    bx.b.className      = "box"
    bx.txt.className    = "box_texte"
    bx.scrl.className   = "scroll_V"
    bx.sV_E.className   = "scroll_V_esp"
    
    //  Stock les informations propre a chaque objet
    bx.id               = id_tmp                                                        ;   //  Stock le nom de l'id parent 
    bx.ie               = ie                                                            ;   //  Test navigateur
    bx.css              = bx.txt.style                                                  ;   //  Raccourcie style pour texte
    bx.timer            = 0                                                             ;   //  objet de l'interval initialement 0
    bx.txt.innerHTML    = text                                                          ;   //  On intègre le texte recupere de la balise d'origine id
    bx.delai            = (ie)? 50:3                                                    ;   //  Interval de rappel monter/descendre  regler en fonction ie/firefox
    bx.vitesse          = parseInt( vitesse)                                            ;   //  arrondie vitesse
    bx.v_pos            = parseInt( bx.css.top)                                         ;   //  arrondie top du div [box[id]]_texte
    box[id].top         = bx.v_pos
    box[id].obj         = bx
    
    //  Création des fonctions associées au nouvel objet
    box[id].monter  = function(e,a)     {                                               //  Appeler par onmousedown,onmousewheel,le par interval                                    
        var el  = box[e].obj,
            lm  = parseInt(el.txt.offsetHeight)-(parseInt(el.id.offsetHeight)   )       ,   //  Calcul la limite a ne pas dépasser 
            maj =   'box["'+e+'"].monter("'+e+'")'                                      ;   //  Créer le rappel de la fonction

        if(parseInt(el.css.top)>-lm)    {                                               //  Dans le cas ou c'est bon
            el.sV_D.style.top   = (box[id].scrolling)? box[id].pos()+"px" : ''          ;   // box[id].scrolling>ligne 181 | on déplace la barre de défilement 
            el.css.top          = parseInt( el.css.top)-( el.vitesse)+"px"              ;   //  On Decremente la hauteur du calque txt
            
            if(a!=false)    {                                                           //  Si c'est par onmousedown,onmousewheel
                box[id].timer   = setTimeout( maj, el.delai)                            ;   //   on initialise l'interval et la stock
            }
        }
    }
    box[id].descendre = function(e,a)   {                                               //  Appeler par onmousedown,onmousewheel,le par interval
        var el  = box[e].obj,
            maj ='box["'+e+'"].descendre("'+e+'")'                                      ;   //  Créer le rappel de la fonction
        if(parseInt(el.css.top)<box[e].top) {                                           //  Dans le cas ou c'est bon
            el.sV_D.style.top   = (box[id].scrolling)? box[id].pos()+"px" :''           ;   // Meme princpe que pour box[id].monter
            el.css.top          = parseInt(el.css.top)+(el.vitesse)+"px"                ;   //  Idem

            if(a!=false)    {                                                           ;   //  Idem
                box[id].timer   = setTimeout( maj, el.delai)                            ;   //  Idem
            }
        }
    }
    box[id].pos = function()            {                                               //  Calcul en fct de la position du texte la position de la barre de défilement
        var el  = box[id].obj,
            tHp = Math.abs((el.txt.offsetTop*100)/el.txt.offsetHeight)                  ;
        return parseInt( (tHp/100)*el.sV_E.offsetHeight)                                ;   //  Renvoie le resultats ligne 155 & 157
            
    }
    box[id].initScroll  = function()    {                                               //  Gestion de positionement du scroll vertical
        es  = box[id].obj.sV_E.offsetHeight                                             ;   //  Hauteur de la zone entre les 2 boutons
        Ht  = box[id].obj.txt.offsetHeight                                              ;   //  Hauteur total du texte 
        Hb  = box[id].obj.id.offsetHeight                                               ;   //  Hauteur du div conteneur
        pHb = (Hb*100)/Ht                                                               ;   //  Calcul en % de la taille  
        box[id].scrolling = false                                                       ;   //  Initialise cette variable pour le scrolling
        if(Hb<Ht)   {                                                                   //  Si le texte necessite le scrolling on l'active
            box[id].obj.sV_D.style.top  = "1px"                                         ;   //  Positionne la barre de défilement
           // box[id].obj.sV_D.style.height = parseInt((pHb/100)*es)+"px"                 ;   //  Calcul la hauteur de la barre de défilement
           box[id].obj.sV_D.style.height = 5+"px"
           box[id].scrolling = true                                                    ;
        }   
    }
    if(ie)  {                                                                           //  Traitement curseur et scroll de la molette spécifique a IE
        with( bx.b_B){style.cursor="hand"};with( bx.b_H){style.cursor="hand"}
        box[id].wheel   = function(id)  {
            if (event.wheelDelta >= 120)    {
                box[id].descendre(id,false)
                box[id].descendre(id,false)
                box[id].descendre(id,false)
            }
            else if (event.wheelDelta <= -120)  {
                box[id].monter(id,false)
                box[id].monter(id,false)
                box[id].monter(id,false)
            }
        }
    }
    box[id].load = function()           {                                               ;   //  Charge les evenements de la sourie
        el                  = box[id].obj
        el.b_H.onmousedown  = function(){box[id].descendre(id)}
        el.b_B.onmousedown  = function(){box[id].monter(id)}
        el.b_H.onmouseup    = function(){clearTimeout(box[id].timer)}
        el.b_B.onmouseup    = function(){clearTimeout(box[id].timer)}
        el.id.onmousewheel  = function(){box[id].wheel(id)}
    }
    
    box[id].load()                                                                      ;   
    return box[id]                                                                      ;   //  Remplace box[id] par l'objet créer
}