var W3CDOM = ( document.createElement && document.getElementsByTagName );

/*  GLOBALS  */
var mouseOvers = new Array();
var mouseOuts  = new Array();
var offset  = 0;
var timerID = 0;
var largeur = 1200;
var suffix  = '.gif';

window.onload = filmstrip_install;

function filmstrip_install() {

  if( !W3CDOM ) { return; }
  /*  PREPARE TRIGGERS  */
  var e = document.getElementById('fgauche');
    e.onmouseover = goFastLeft;
    e.onmouseout  = goHaltLeft;
    mouseOuts['fgauche'] = new Image();
    mouseOuts['fgauche'].src = e.src;
    
  var e = document.getElementById('gauche');
    e.onmouseover = goLeft;
    e.onmouseout  = goHaltLeft;
    mouseOuts['gauche'] = new Image();
    mouseOuts['gauche'].src = e.src;
    
  var e = document.getElementById('fdroit');
    e.onmouseover = goFastRight;
    e.onmouseout  = goHaltRight;
    mouseOuts['fdroit'] = new Image();
    mouseOuts['fdroit'].src = e.src;
    
  var e = document.getElementById('droit');
    e.onmouseover = goRight;
    e.onmouseout  = goHaltRight;
    mouseOuts['droit'] = new Image();
    mouseOuts['droit'].src = e.src;

  /*  INIT FILMSTRIP */
  ss = document.getElementById( 'view' );
  ss.style.left = 0;
  ss.style.top = 5;

}

function goFastLeft() {

  imgOn = new Image();
  imgOn.src = document.gauche.src;
  imgOn.src = imgOn.src.substring( 0,imgOn.src.lastIndexOf('.')) +'_on' +suffix;
  document.gauche.src = imgOn.src;

  imgOn = new Image();
  imgOn.src = document.fgauche.src;
  imgOn.src = imgOn.src.substring( 0,imgOn.src.lastIndexOf('.')) +'_on' +suffix;
  document.fgauche.src = imgOn.src;

  doLeft( -5 );
}

function goLeft() {

  imgOn = new Image();
  imgOn.src = document.gauche.src;
  imgOn.src = imgOn.src.substring( 0,imgOn.src.lastIndexOf('.')) +'_on' +suffix;
  document.gauche.src = imgOn.src;

  doLeft( -2 );
}

function goHaltLeft() {

  document.gauche.src  = mouseOuts['gauche'].src;
  document.fgauche.src = mouseOuts['fgauche'].src;
  halt();
}

function goFastRight() {

  imgOn = new Image();
  imgOn.src = document.droit.src;
  imgOn.src = imgOn.src.substring( 0,imgOn.src.lastIndexOf('.')) +'_on' +suffix;
  document.droit.src = imgOn.src;
  imgOn = new Image();
  imgOn.src = document.fdroit.src;
  imgOn.src = imgOn.src.substring( 0,imgOn.src.lastIndexOf('.')) +'_on' +suffix;
  document.fdroit.src = imgOn.src;

  doRight( 5 );
}

function goRight() {

  imgOn = new Image();
  imgOn.src = document.droit.src;
  imgOn.src = imgOn.src.substring( 0,imgOn.src.lastIndexOf('.')) +'_on' +suffix;
  document.droit.src = imgOn.src;

  doRight( 2 );
}

function goHaltRight() {
  document.droit.src  = mouseOuts['droit'].src;
  document.fdroit.src = mouseOuts['fdroit'].src;
  halt();
}

function halt() {
  clearTimeout( timerID );
}

function doLeft( delta ) {
  if( Math.abs( offset ) < largeur ) {
    ss.style.left = parseInt(ss.style.left) + delta + "px";
    offset += delta;
    timerID = setTimeout( 'doLeft('+delta+')',30 );
  } else {
    halt();
  }
}

function doRight( delta ) {
  if( offset <= 0 ) {
    ss.style.left = parseInt(ss.style.left) + delta + "px";
    offset += delta;
    timerID = setTimeout( 'doRight('+delta+')',30 );
  } else {
    halt();
  }
}