//////////////////////////////////////////////////////////////////////////////////////
// Utility JS file for performing a "slide show" type effect for pictures of
// my M3. 
//
// Last Modified: 05/14/2002
// Comments:
///////////////////////////////////////////////////////////////////////////////////////

// slide list is an array of jpgs we want to iterate over during the slide presentation

var slideList = new Array 
(
   'frontbumper.jpg',
   'interior.jpg',
   'interiordoor.jpg',
   'rear.jpg',
   'extLeftSide.jpg',
   'extside.jpg'
);

var gContentIds = new Array 
(
   'm3modifications',
   'm3CleaningTips',
   'm3photos'
);

var gMenuItemIds = new Array
(
   'photoMenuItem',
   'modsMenuItem',
   'cleaningMenuItem'
);

var imageNamePrefix = "images/";
var gCurrentSlideIndex = 0;
var gNumberOfSlides = 6;
var gNumberOfContentIds = 3;
var gSlideShowImage = null;

// onLoad --> extracts the ID for the slideshow image element. Called when the HTML initially loads
function onLoad()
{
  gSlideShowImage = document.getElementById('slideShowImage');
}

// advanceToNextSlide --> loads the next slide in the list
function advanceToNextSlide()
{
  if (gCurrentSlideIndex == gNumberOfSlides - 1)
  {
    // do nothing....
    // disable the forward button
  }
  else
  {
    gCurrentSlideIndex++;
    var nextSlideName = slideList[gCurrentSlideIndex];
    nextSlideName = imageNamePrefix + nextSlideName;
    gSlideShowImage.setAttribute('src', nextSlideName);
  }
}

// goBackOneSlide --> loads the previous slide in the list
function goBackOneSlide()
{
  if (!gCurrentSlideIndex)
  {
    // disable the back button
  }
  else
  {
    gCurrentSlideIndex--;
    var nextSlideName = slideList[gCurrentSlideIndex];
    nextSlideName = imageNamePrefix + nextSlideName;
    gSlideShowImage.setAttribute('src', nextSlideName);
  }
}

// selectContent --> ensures that the div identified by aContentDivId is the visible
// content div on the page.
// Also ensures the menu item identified by aMenuItemId is selected
function selectContent(aContentDivId, aMenuItemId)
{
  var contentDiv;
  var index; 

  for (index = 0; index < gNumberOfContentIds; index++)
  {
    contentDiv = document.getElementById(gContentIds[index]);
    if (gContentIds[index] != aContentDivId)
      contentDiv.style.display = 'none';
    else
      contentDiv.style.display = 'block';
  }

  // now fix up the menu items...
  var menuItem;
  for (index = 0; index < gNumberOfContentIds; index++)
  {
    menuItem = document.getElementById(gMenuItemIds[index]);
    if (gMenuItemIds[index] != aMenuItemId)
      menuItem.removeAttribute('selected');
    else
      menuItem.setAttribute('selected', true);
  }
  
}