// Mark's Image Rotator

// All the images must have the same dimensions.

// Make a place for your image on the page.  Set the width and height to the dimensions of your images.
//    <div id="mirot_div" style="width:400px; height:300px; " >
//      <img src="/path/YourFirstImage.jpg" id="mirot_img" width="400" height="300" onclick="mirot_Clicked()" /> 
//    </div>

// Insert all the images, inserting the one already in the img tag last.
//  mirot_AddImg('/path/YourSecondImage.jpg', 1, 3, '/linksFrom2.html' );
//  mirot_AddImg('/path/YourThirdImage.jpg', 2, 4);
//  mirot_AddImg('/path/YourFirstImage.jpg', 1, 3, '/linksFrom1.html');

// Then make it start:
//  mirot_Go( 1 );

//  mirot_AddImg( ImageFile, FadeTime, HoldTime, [LinkTo] )
//  mirot_Go( HoldTime )
//  ImageFile: File name of the image for the img tag's src.
//  FadeTime: Number of seconds for the fade from the previous image.
//  HoldTime: Number of seconds to show this image before starting the fade to the next image.
//  LinkTo: Address to go to if the image is clicked on.  NOTE that link becomes active at
//          the END of the fade.  

var mirot_urls = new Array();
var mirot_imgs = new Array();
var mirot_pause = new Array();
var mirot_fadeTime = new Array();
var mirot_links = new Array();
var mirot_numImages = 0;
var mirot_cur = 0;  // Image we are fading in or about to fade in.
var mirot_solid_cur = 0;  // Image we are solidly on when fading is done.
var mirot_firstPass = true;
var mirot_div;
var mirot_img;
var mirot_isIE;
var mirot_fadeStep;

function mirot_AddImg( url, fade, pause, link ) {
  mirot_fadeTime[mirot_numImages] = fade * 20;
  mirot_pause[mirot_numImages] = pause * 1000;
  if( link !== undefined )
    mirot_links[mirot_numImages] = link;
    
  mirot_urls[mirot_numImages++] = url;
}

function mirot_Go( firstSecs ) {
  mirot_isIE = (navigator.appName.indexOf("Microsoft") != -1 );

  mirot_div = document.getElementById( 'mirot_div' );
  mirot_div.style.backgroundRepeat='no-repeat';
  mirot_img = document.getElementById( 'mirot_img' );
  mirot_img.style.zoom=1;
  
  setTimeout( 'mirot_StartFade()', 1000 * firstSecs );
  setTimeout( 'mirot_LoadFirstImage()', 1000 );
}

function mirot_LoadFirstImage() {
  mirot_imgs[0] = new Image;
  mirot_imgs[0].src = mirot_urls[0];  // This gets the next image pre-loaded; 
}

function mirot_StartFade() {
  mirot_div.style.backgroundImage='url('+mirot_img.src+')';
  mirot_SetOpacity( 0 );
  mirot_img.src=mirot_urls[mirot_cur];
  mirot_fadeStep = 0;
  setTimeout( 'mirot_DoFade()', mirot_fadeTime[mirot_cur] );
}

function mirot_DoFade() {
  ++mirot_fadeStep

  if( mirot_fadeStep < 50 ) {
    setTimeout( 'mirot_DoFade()', mirot_fadeTime[mirot_cur] );
  } else {
    mirot_solid_cur = mirot_cur;
    if( mirot_links[mirot_cur] ) {
      mirot_div.style.cursor='pointer';
    } else {
      mirot_div.style.cursor='default';
    }
  }

  mirot_SetOpacity( mirot_fadeStep );

  if( mirot_fadeStep < 50 ) {
    return;
  }
  
  mirot_div.style.backgroundImage='url('+mirot_img.src+')';
  setTimeout( 'mirot_StartFade()', mirot_pause[mirot_cur] );

  // We are done with this fade.  Start the next.
  if( ++mirot_cur >= mirot_numImages ) {
    mirot_firstPass = false;
    mirot_cur = 0;
  }
  
  if( mirot_firstPass ) {
    mirot_imgs[mirot_cur] = new Image;
    mirot_imgs[mirot_cur].src = mirot_urls[mirot_cur];  // This gets the next image pre-loaded; 
  }
}

// Set the image opacity value 0-100
function mirot_SetOpacity( val ) {
  val = val * 2;
  if( mirot_isIE ) {
    mirot_img.style.filter ='alpha(opacity=' + val + ')';
  } else {
    mirot_img.style.opacity=val/100.0;
  }
}

function mirot_Clicked() {
  if( mirot_links[mirot_solid_cur] ) {
    window.location = mirot_links[mirot_solid_cur];
  }  else if( mirot_links[mirot_cur] ) {
    window.location = mirot_links[mirot_cur];
  }

}