// ***************************************************************************
//                                    Constants    
// ***************************************************************************
// Constants for the over event.
var  sOverBorderColor     = "white #888888 #888888 white";
var  sOverPadding         = "1px 3px 3px 1px";

// Constants for the out event.
var  sOffBorderColor      = "#555555";
var  sOffPadding          = "2px";

// Constants for the down.
var  sDownBorderColor     = "#888888 white white #888888";
var  sDownPadding         = "3px 1px 1px 3px";

// Diapo stuff
var MAXDIAPO= 68;


// ***************************************************************************
//                                    Variables
// ***************************************************************************
var diapoCnt= rnd(MAXDIAPO);

// Diapo description
var emptyDescription= null;
var diapoDescription= new Object ();
var imageNode= null;

// ***************************************************************************
//                                 Button Handlers
// ***************************************************************************
// The user pass over the button.
//
// Parameters:
//  - eButton             The button.
function control_over (eButton)
{
  eButton.style.borderColor= sOverBorderColor;
  eButton.style.padding= sOverPadding;

  window.status= eButton.title;
} // END control_over ()

// The user get out the button area.
//
// Parameters:
//  - eButton             The button.
function control_out (eButton)
{
  eButton.style.borderColor= sOffBorderColor;
  eButton.style.padding= sOffPadding;

  window.status= '';
} // END control_out ()

// The user press the button.
//
// Parameters:
//  - eButton             The button.
function control_down (eButton, action)
{
  eButton.style.borderColor= sDownBorderColor;
  eButton.style.padding= sDownPadding;

  // Do the action!
  if (action.indexOf("pred5") != -1)
    diapoCnt= diapoCnt + MAXDIAPO - 5;
  else if (action.indexOf("pred") != -1)
    diapoCnt= diapoCnt + MAXDIAPO - 1;
  else if (action.indexOf("next5") != -1)
    diapoCnt= diapoCnt + 5;
  else if (action.indexOf("next") != -1)
    diapoCnt++;
  else if (action.indexOf("rand") != -1)
    diapoCnt= rnd(MAXDIAPO);

  diapoCnt= diapoCnt % MAXDIAPO;
  showImage (diapoCnt);
} // END control_down ()

// The user release the button.
//
// Parameters:
//  - eButton             The button.
function control_up (eButton)
{
  eButton.style.borderColor= sOverBorderColor;
  eButton.style.padding= sOverPadding;

  window.status= eButton.title;
} // END control_up ()


// ***************************************************************************
//                                 Misc Functions
// ***************************************************************************
// Return a random number in the [0..n[ range.
function rnd (max)
{
  value= Math.random() * max;
  value= Math.round(value) % max;
  return value;
} // END rnd  ()

function showImage (imgIdx)
{
  // Show the new image
  var path= "diapo/diapo" + imgIdx + ".jpg";
  imageNode.setAttribute('src', path);

  // Show the description
  desc= document.getElementById("DiapoDescription");
  if (desc.hasChildNodes())
  {
    // Get old
    oldNode= desc.childNodes.item(0);

    // Make new
    newNode= diapoDescription[imgIdx];
  
    // Replace
    desc.appendChild(newNode);
    if (newNode != oldNode)
      desc.removeChild(oldNode);
  }
} // END showImage ()

function init ()
{
  initDiv= document.getElementById("initContainer");

  // Get the descriptions from the hidden structure and set them on the right place!
  for (i = 0; i < MAXDIAPO; i++)
  {
    target= "Diapo" + i;
    diapoDescription[i]= document.getElementById(target);
    initDiv.removeChild(diapoDescription[i]);
  }

  // The emtpy topic
  emptyDescription= document.getElementById("emptyTopic");
  initDiv.removeChild(emptyDescription);

  // The image
  imageNode= document.getElementById("DiapoImage");

  // First image
  showImage(diapoCnt);
} // END init ()