/* trailerbar.js - A basic sort of image bar.

It's called trailerbar because I thought, at first, that it was supposed to
display trailers, not still images.  Turns out I was mistaken.

Anyway.

This isn't what I'd call amazing code exactly, but it gets the job done.
If you like it and find it useful for your own site, be my guest.

*/

// SOME VARIABLES /////////////////////////////////////////////////////////////////////////////////
//Put the images you want to include in imageList.
var imageList = 
  ['btmv.png','int.png','fount.png','praise.png','jpia.png','surrender.png'];

//Put the pages they should take you to in linkList
var linkList =
  ['prod_btmv.shtml','prod_int.shtml','prod_fount.shtml',
   'prod_praise.shtml','prod_jpia.shtml','prod_surrender.shtml'];

//...and if you feel like putting the image/link paths separately, which I did, they go here.
var imageBase = 'images/trailerbar/';
var linkBase = '';

var curOffset = 0; //trailerbar's starting position
var maxOffset = 3; //trailerbar's rightmost position
var minOffset = 0; //trailerbar's leftmost position

// SOME FUNCTIONS /////////////////////////////////////////////////////////////////////////////////

// move the images to the left
function shiftLeft() {
  if (curOffset > minOffset) {
    // we are gonna move the pics
    //alert("Shifting left - " + curOffset + "\nLeftmost image: " + imageList[curOffset]);
    curOffset--;
    updateImgBar("left");
  }
}

// move the images to the right
function shiftRight() {
  if (curOffset < maxOffset) {
    // movin' some pics!
    //alert("Shifting right - " + curOffset + "\nLeftmost image: " + imageList[curOffset]);    
    curOffset++;
    updateImgBar("right");
  }
}

// update the image bar after moving one direction or another

function updateImgBar(side) {
  // update all images and links based on new offset
  document.images['imgbar_1'].src = imageBase + imageList[curOffset];
  document.getElementById('imglink_1').href = linkBase + linkList[curOffset];    
  document.images['imgbar_2'].src = imageBase + imageList[curOffset + 1];
  document.getElementById('imglink_2').href = linkBase + linkList[curOffset + 1];
  document.images['imgbar_3'].src = imageBase + imageList[curOffset + 2];
  document.getElementById('imglink_3').href = linkBase + linkList[curOffset + 2];
  
  // check left boundary
  if (curOffset == minOffset) { // grey out yon arrow
    document.images['lArrow'].src = 'images/arr_left_off.png';
    document.images['lArrow'].onmouseover = null;
    document.images['lArrow'].onmouseout = null;
  }
  else {
    // ungrey that there arrow
    if (side=="left")
      document.images['lArrow'].src = 'images/arr_left_hov.png';
    else
      document.images['lArrow'].src = 'images/arr_left_on.png';    
    document.images['lArrow'].onmouseover = function() {this.src='images/arr_left_hov.png';}
    document.images['lArrow'].onmouseout = function() {this.src='images/arr_left_on.png';}
  }

  // check right boundary
  if (curOffset == maxOffset) { // grey out yon arrow
    document.images['rArrow'].src = 'images/arr_right_off.png';
    document.images['rArrow'].onmouseover = '';
    document.images['rArrow'].onmouseout = '';
  }
  else {
    // UNGREY ARROW NOW
    if (side=="right")
      document.images['rArrow'].src = 'images/arr_right_hov.png';
    else
      document.images['rArrow'].src = 'images/arr_right_on.png';  
    document.images['rArrow'].onmouseover = function() {this.src='images/arr_right_hov.png';}
    document.images['rArrow'].onmouseout = function() {this.src='images/arr_right_on.png';}
  }    

}