//-----------------------------------
// A set of functions to embded figures in html
// Figures can be either a single figure and caption or a set of
// figures and captions linked by buttons or select controls.
// S H Vale October 2004
// Rev 1
// (C) SH Vale 2004
//-----------------------------------

// Element objects contain information pertaining to grouped figures and captions linked by buttons or select controls
// Maximum number of elements on page
maxElements=5;
// Actual number of elements on page
numElements=0;
// Array of Element objects containing figures on page
elements = new Array(maxElements);
// Maximum number of figures in an element
var maxFigures = 10;

// Constructor for the Element object.
// The filenames for the figures in each element are of type abcd_x.jpg, where x = 1 to number of figures in element
// fileroot : path for figure filename before the file number
// fileext: filename extension for figure filename
// numFigures : number of figures in the element
// maincaptionid : id of HTML element containing main caption for figures
// captionid : id of HTML element containing sub caption for figures
// imageid : id of HTML element for the figure
// selectid : id of the HTML containing the select control
// buttonnextid : id of the HTML element containing the next button
// buttonprevid : id of the HTML element containing the previous button

function Element(fileRoot,fileExt,numFigures,maincaptionid,captionid,imageid,selectid,buttonnextid,buttonprevid){
  this.fileRoot=fileRoot;
  this.fileExt=fileExt;
  this.numFigures=numFigures;
  this.currentFigure=1;
  this.captions=new Array(maxFigures);
  this.maincaptionid=maincaptionid;
  this.captionid=captionid;
  this.imageid=imageid;
  this.selectid=selectid;
  this.buttonnextid=buttonnextid;
  this.buttonprevid=buttonprevid;

  this.setCaption=Element_setCaption;
  this.updateFigure=Element_updateFigure;
  this.filename=Element_filename;
  this.nextfig=Element_nextfig;
  this.prevfig=Element_prevfig;
  this.fillSelect=Element_fillSelect;
  this.setButtons=Element_setButtons;
}

// -------------------------------------------------------------
// Element method setCaption to specify the caption for a figure
// numfigure : number of figure for caption
// caption : caption to use

function Element_setCaption(numfigure,caption){
  if(numfigure>maxFigures)
    return;
  this.captions[numfigure-1]=caption;
}

// --------------------------------------------------------------
// Element method updateFigure to show a particular element figure and caption
// numfigure : number of figure to display

function Element_updateFigure(numfigure){

  setPointer();    //Set the mouse pointer to an hourglass (reset in the image onLoad event)
  var image_el = document.getElementById(this.imageid);
  image_el.src = this.filename(numfigure);
  image_el.title = this.captions[numfigure-1];
  var caption_el = document.getElementById(this.captionid);
  if (caption_el==null)
   return true;
  var new_txt = document.createTextNode(this.captions[numfigure-1]);
  caption_el.replaceChild(new_txt, caption_el.childNodes[0]);
  return true;
}

// ----------------------------------------------------------------
// Element method filename returns the full filename for a figure
// numfigure : number of figure in element for which filename is required

function Element_filename(numfigure){
  return(this.fileRoot+"_"+numfigure+"."+this.fileExt);
}

// -----------------------------------------------------------------
// Element method nextfig displays the next figure in the element set (used when button next is pressed)

function Element_nextfig(){
  if(this.currentFigure==this.numFigures)
    return false;
  this.currentFigure++;
  this.updateFigure(this.currentFigure);
  this.setButtons();
  return true;
}

// -----------------------------------------------------------------
// Element method nextfig displays the previous figure in the element set (used when button previous is pressed)

function Element_prevfig(){
  if(this.currentFigure==1)
    return false;
  this.currentFigure--;
  this.updateFigure(this.currentFigure);
  this.setButtons();
  return true;
}

// ------------------------------------------------------------------
// Element method fillSelect fills the select control with the captions specified in the method setCaption

function Element_fillSelect(){
  var select_el=document.getElementById(this.selectid);
  for(i=0;i<this.numFigures;i++){
    select_el.options[i]=new Option(this.captions[i],i+1)
  }
}

// ------------------------------------------------------------------
// Enable/disable next/previous buttons depending on number of image being displayed.

function Element_setButtons(){
  bprev = (this.currentFigure==1);
  bnext = (this.currentFigure==this.numFigures);
  buttondisable(bprev,this.buttonprevid);
  buttondisable(bnext,this.buttonnextid);
}

// ------------------------------------------------------------------
// Function to enable or disable a button control
// status : boolean, true if button is NOT to work
// buttonid : id of button control

function buttondisable(status,buttonid){
   var obut = document.getElementById(buttonid);
   obut.disabled=status;
}

// ------------------------------------------------------------------
// Append a number to a text string
// name : text string
// numelement : number to append
// return value is the text string with the number appended

function appendnumber(name,numelement){
  return (name+numelement);
}

// ------------------------------------------------------------------
// Function to be called in HTML to show a set of grouped figures linked by next and previous buttons
// fileroot : path for figure filename before the file number
// fileext: filename extension for figure filename
// numFigures : number of figures in the element
// maincaption : text for main caption
// return value is reference to Element object containing this data

function showFigureSet(fileroot,fileext,numfigures,maincaption){
  return(showFig(fileroot,fileext,numfigures,maincaption,"button"));
}

// ------------------------------------------------------------------
// Function to be called in HTML to show a set of grouped figures linked a select control
// fileroot : path for figure filename before the file number
// fileext: filename extension for figure filename
// numFigures : number of figures in the element
// maincaption : text for main caption
// initialtext (optional) : text to place before the select control
// return value is reference to Element object containing this data

function showFigureSelect(fileroot,fileext,numfigures,maincaption,initialtext){
  return(showFig(fileroot,fileext,numfigures,maincaption,"select",initialtext));
}

// ------------------------------------------------------------------
// Function to show a grouped set of figures
// fileroot : path for figure filename before the file number
// fileext: filename extension for figure filename
// numFigures : number of figures in the element
// maincaption : text for main caption
// option : "select" or "button"
// initialtext (optional) : text to place before the select control
// return value is reference to Element object containing this data

function showFig(fileroot,fileext,numfigures,maincaption,option,initialtext){

  button = (option=="button");
  sel = (option=="select");
  if(numElements==maxElements)
    return (0);
  numElements++;
  maincaptionid=appendnumber("idmaincaption",numElements);
  captionid=appendnumber("idcaption",numElements);
  imageid=appendnumber("idimage",numElements);
  selectid=appendnumber("idselect",numElements);
  buttonnextid=appendnumber("idbuttonnext",numElements);
  buttonprevid=appendnumber("idbuttonprev",numElements);
  elements[numElements-1]=new Element(fileroot,fileext,numfigures,maincaptionid,captionid,imageid,selectid,buttonnextid,buttonprevid);
  strelement="elements["+(numElements-1)+"]";

  document.write('<p style="margin-top: 0; margin-bottom: 0" align="center">');

  if(initialtext!=null)
    document.write(initialtext);

  if(button){
    document.write('<input type="button" id="'+buttonprevid+'" value="Previous figure" onClick="javascript:'+strelement+'.prevfig()">');
    document.write('<input type="button" id="'+buttonnextid+'" value="Next figure" onClick="javascript:'+strelement+'.nextfig()"></p>');
  }else if(sel){
    document.write('<select size="1" id="'+selectid+'" name="'+selectid+'" onChange="javascript:'+strelement+'.updateFigure(this.value)"></select></p>');
    //Note that with Mozilla this would not work by supplying eg, "idselect1.value" as the argument to updateFigure; had to use this.value
  }

  document.write('<p style="margin-top: 0; margin-bottom: 0" class="tinyblacktext" align="center">');
  document.write('<img border="0" id="'+imageid+'" onLoad="javascript:resetPointer()" onError="javascript:resetPointer()"></p>'); 

  document.write('<table border="0" cellpadding="0" cellspacing="0" width="100%" >');
  document.write('<tr><td class="tinyblacktext" id="'+maincaptionid+'" align="center">'+maincaption+'</td></tr>');
  if(button){
    document.write('<tr><td class="tinyblacktext" style="font-style:italic" id="'+captionid+'" align="center">subcaption</td></tr>');
    buttondisable(true,buttonprevid);
  }
  document.write('</table>');
  return(elements[numElements-1]);

}

// ------------------------------------------------------------------
// set the mouse pointer to an hourglass

function setPointer() { 
  if (document.all){

    for (var i=0;i < document.all.length; i++)
      document.all(i).style.cursor = 'wait';
  }
} 
// ------------------------------------------------------------------
// set the mouse pointer to default

function resetPointer() {
  if (document.all){
    for (var i=0;i < document.all.length; i++) 
      document.all(i).style.cursor = 'auto' ;
  }
}

// ------------------------------------------------------------------
// Embed a single figure in html
// filename : filename of figure
// caption : caption for figure

function showFigure(filename, caption){
  document.write('<p style="margin-top: 0; margin-bottom: 0" class="tinyblacktext" align="center">');
  document.write('<img border="0" name="image" src="'+filename+'" title="'+caption+'"></p>');
  document.write('<table border="0" cellpadding="0" cellspacing="0" width="100%" >');
  document.write('<tr><td class="tinyblacktext" id="idmaincaption" align="center">'+caption+'</td></tr>');
  document.write('</table>');
}

// -------------------------------------------------------------------
// Display an image given <fileroot><number>.<extension> at the HTML IMG component comp ID

function changeImage(fileroot, number, extension, compID ){
  var image_el = document.getElementById(compID);
  image_el.src = fileroot+number+"."+extension;
}