/*
 * $Id$
 *
 * Copyright (C) 2003 Bruno Beaufils <beaufils@lifl.fr>
 *
 * Un programme permettant d'avoir une barre de navigation vaguement inspiree
 * par le look and feel de celle trouve sur le site de mon fournisseur d'acces
 * ADSL http://www.nerim.net.
 *
 * Pour avoir un joli menu (max 2 niveaux) il suffit d'editer les parametres
 * du debut de fichier (couleur, police, etc) puis de remplir les tableaux
 * label, lien, sous_label et sous_lien. 
 * 
 * Voici un exemple a trois items :
 * 
 * .
 * |-- accueil       -> index.html
 * |-- enseignement  -> ens/index.html
 * |   |-- Autres    -> ens/autres.html
 * |   |-- DA2I      -> ens/da2i/index.html
 * |   `-- IUT       -> ens/iut/index.html
 * `-- recherche     -> recherche/index.html
 * 
 * Et son equivalent dans les tableaux 
 * 
 * label[0]=accueil
 * label[1]=enseignement
 * label[2]=recherche
 * 
 * lien[0]=index.html
 * lien[1]=ens/index.html
 * lien[2]=recherche/index.html
 * 
 * sous_label[1][0]=Autres
 * sous_label[1][1]=DA2I
 * sous_label[1][2]=IUT
 * 
 * sous_lien[1][0]=ens/autres.html
 * sous_lien[1][0]=ens/da2i/index.html
 * sous_lien[1][0]=ens/iut/index.html
 *
 * Il suffit ensuite d'ajouter dans votre page HTML, a l'endroit ou le menu
 * doit apparaitre un truc du genre :
 *
 *  <script type="text/javascript" src="barrenav.js"></script>
 *
 */

/*
 * Parametres du menu
 */
fond_inactif = "yellow"; /* 3073C1";*/
avant_inactif = "blue";

fond_actif = "#6699CC";
avant_actif = "white";

couleur_bordure = "white";

taille_police = "11px";

type_police = "Verdana, sans-serif";

hauteur_menu=1;

/*
 * Declarations globales
 */
var isDHTML = 0;
var isID = 0;
var isAll = 0;
var isLayers = 0;
var label = new Array;
var lien = new Array;
var sous_label = new Array;
var sous_lien = new Array;

/*
 * Le menu principal
 */
label[0] = 'SMAC';
lien[0] = 'http://www.lifl.fr/SMAC/';

label[1] = 'SimuLE';
lien[1] = 'http://www.lifl.fr/SMAC/projects/simule';

label[2] = 'Présentation';
lien[2] = 'http://www.lifl.fr/SMAC/projects/simule/#presentation';

label[3] = 'Membres';
lien[3] = 'http://www.lifl.fr/SMAC/projects/simule/#membres';

label[4] = 'Démonstrations';
lien[4] = 'http://www.lifl.fr/SMAC/projects/simule/#exemples';

label[5] = 'Publications';
lien[5] = 'http://www.lifl.fr/SMAC/projects/simule/#publications';

label[6] = 'Contacts';
lien[6] = 'http://www.lifl.fr/SMAC/#contacts';

/*
 * Les sous-menus
 */
for (i=0; i<label.length; i++)
{
  sous_label[i] = new Array;
  sous_lien[i] = new Array;
}

sous_label[2][0] = 'Objectifs';
sous_lien[2][0] = 'http://www.lifl.fr/SMAC/projects/simule/#presentation';

sous_label[2][1] = 'Application à la biologie';
sous_lien[2][1] = 'http://www.lifl.fr/SMAC/projects/simule/#biologie';

sous_label[3][0] = 'Enseignants-chercheurs';
sous_lien[3][0] = 'http://www.lifl.fr/SMAC/projects/simule/#chercheurs';

sous_label[3][1] = 'Étudiants';
sous_lien[3][1] = 'http://www.lifl.fr/SMAC/projects/simule/#etudiants';

sous_label[4][0] = 'Membrane';
sous_lien[4][0] = 'http://www.lifl.fr/SMAC/projects/simule/membrane.html';

sous_label[4][1] = 'Feedback négatif';
sous_lien[4][1] = 'http://www.lifl.fr/SMAC/projects/simule/fbn.html';

sous_label[4][2] = 'Vues possibles';
sous_lien[4][2] = 'http://www.lifl.fr/SMAC/projects/simule/flocking.html';

/*
 *
 * RIEN N'EST A MODIFIER APRES CETTE LIGNE
 *
 */

/****************************************************************************/

function determine_navigateur ()
{
  if(document.getElementById)
    {
      isID = 1;
      isDHTML = 1;
    }
  else
    {
      if(document.all)
        {
          isAll = 1;
          isDHTML = 1;
        }
      else
        {
          browserVersion = parseInt(navigator.appVersion);
          if((navigator.appName.indexOf('Netscape') != -1)
             && (browserVersion == 4))
            {
              isLayers = 1;
              isDHTML = 1;
            }
        }
    }
}

/****************************************************************************/

function find_DOM(objectID, withStyle)
{
  if (withStyle == 1)
    {
      if (isID)
        {
          return (document.getElementById(objectID).style);
        }
      else
        {
          if (isAll)
            {
              return (document.all[objectID].style);
            }
          else
            {
              if (isLayers)
                {
                  return (document.layers[objectID]);
                }
            }
        }
    }
  else
    {
      if (isID)
        {
          return (document.getElementById(objectID));
        }
      else
        {
          if (isAll)
            {
              return (document.all[objectID]);
            }
          else
            {
              if (isLayers)
                {
                  return (document.layers[objectID]);
                }
            }
        }
    }
}

/****************************************************************************/

function colorie_menu() {
  for(i=0; i<label.length; i++)
    {
      quel_td = "td"+i;
      find_DOM(quel_td,1).background=fond_inactif;
      find_DOM(quel_td,1).color=avant_inactif;
      quel_a = "a"+i;
      find_DOM(quel_a,1).background=fond_inactif;
      find_DOM(quel_a,1).color=avant_inactif;
    }
}

/****************************************************************************/

function active_item(tditem)
{
  colorie_menu();

  tditem.style.background=fond_actif;
  tditem.style.color=avant_actif;
  tditem.getElementsByTagName("a")[0].style.background=fond_actif;
  tditem.getElementsByTagName("a")[0].style.color=avant_actif;
  //  tditem.style.cursor='hand';
}

/****************************************************************************/

function active_sous_item(sous_menu)
{
  element = find_DOM("sous_menu",0);
  l=sous_label[sous_menu].length;
  if (l > 0)
    {
      chaine = '';
      for (i=0; i<l-1; i++)
        {
          chaine += '<a class="sous_menu"\
                        href="'+sous_lien[sous_menu][i]+'"\
                     >'+sous_label[sous_menu][i]+'</a>\
                     <span class="sep"> | </span>';
        }
      chaine += '<a class="sous_menu"\
                    href="'+sous_lien[sous_menu][l-1]+'"\
                 >'+sous_label[sous_menu][l-1]+'</a>';
      element.style.background=fond_actif;
      element.style.color=avant_actif;
    }
  else
    {
      chaine='&nbsp;';
      element.style.background=fond_inactif;
      element.style.color=avant_inactif;
    }
  /* TODO a tester sur Netscape */
  element.innerHTML=chaine;
}

/****************************************************************************/

determine_navigateur();

document.write('\
  <style type="text/css">\
  <!--\
    .barre {\
      background: '+fond_inactif+';\
      color: '+avant_inactif+';\
      font-size: '+taille_police+';\
      font-family: '+type_police+';\
      font-weight: bold;\
      text-decoration: none;\
    }\
    a.menu {\
      background: '+fond_inactif+';\
      color: '+avant_inactif+';\
      font-size: '+taille_police+';\
      font-family: '+type_police+';\
      font-weight: bold;\
      text-decoration: none;\
    }\
    a:hover.menu {\
      background: '+fond_inactif+';\
      color: '+avant_inactif+';\
      font-size: '+taille_police+';\
      font-family: '+type_police+';\
      font-weight: bold;\
      text-decoration: none;\
    }\
    .sous_menu {\
      background: '+fond_inactif+';\
      color: '+avant_inactif+';\
      font-size: '+taille_police+';\
      font-family: '+type_police+';\
      font-weight: bold;\
      text-decoration: none;\
      text-align: center;\
    }\
    a.sous_menu {\
      background: '+fond_actif+';\
      color: '+avant_actif+';\
      font-size: '+taille_police+';\
      font-family: '+type_police+';\
      font-weight: bold;\
      text-decoration: none;\
    }\
    a:hover.sous_menu {\
      background: '+fond_actif+';\
      color: '+avant_actif+';\
      font-size: '+taille_police+';\
      font-family: '+type_police+';\
      font-weight: bold;\
      text-decoration: underline;\
    }\
    .sep {\
      font-weight: normal;\
    }\
    .bordure {\
      background: '+couleur_bordure+';\
    }\
  -->\
  </style>');

document.write('\
  <div class="barre" onleave="javascript:colorie_menu();">\
    <table cellpadding="0" cellspacing="0" border="0" width="100%"\
           summary="Table used for visual layout purpose.">\
      <tr>\
        <td>\
          <table class="bordure" cellpadding="2" cellspacing="1"\
                 border="0" width="100%"\
                 summary="Yet another table used for layout purpose.">\
            <tr>');

for(i=0; i<label.length; i++)
{
  document.write('\
    <td id="td'+i+'"\
        align="center"\
        onclick="window.location.href=\''+lien[i]+'\'"\
        onmouseover="javascript:active_item(this);active_sous_item('+i+')">\
       <a id="a'+i+'" class="menu" href="'+lien[i]+'">'+label[i]+'</a>\
    </td>');
}

document.write('\
            </tr>\
            <tr>\
              <td id="sous_menu" class="sous_menu" valign="middle"\
                  colspan="'+label.length+'">\
                &nbsp;\
              </td>\
            </tr>\
          </table>\
        </td>\
      </tr>\
    </table>\
  </div>');

colorie_menu();

/* Local Variables: */
/* mode: javascript */
/* End: */