// preload images
var g_ImageOver = new Array();
g_ImageOver['LeftArrow'] = new Image();
g_ImageOver['LeftArrow'].src = IMAGES + '/navigation_arrow_left_over.gif';
g_ImageOver['RightArrow'] = new Image();
g_ImageOver['RightArrow'].src = IMAGES + '/navigation_arrow_right_over.gif';
g_ImageOver['Number01'] = new Image();
g_ImageOver['Number01'].src = IMAGES + '/number_01_over.gif';
g_ImageOver['Number02'] = new Image();
g_ImageOver['Number02'].src = IMAGES + '/number_02_over.gif';
g_ImageOver['Number03'] = new Image();
g_ImageOver['Number03'].src = IMAGES + '/number_03_over.gif';
g_ImageOver['Number04'] = new Image();
g_ImageOver['Number04'].src = IMAGES + '/number_04_over.gif';
g_ImageOver['Number05'] = new Image();
g_ImageOver['Number05'].src = IMAGES + '/number_05_over.gif';
g_ImageOver['Number06'] = new Image();
g_ImageOver['Number06'].src = IMAGES + '/number_06_over.gif';
g_ImageOver['Number07'] = new Image();
g_ImageOver['Number07'].src = IMAGES + '/number_07_over.gif';
g_ImageOver['Number08'] = new Image();
g_ImageOver['Number08'].src = IMAGES + '/number_08_over.gif';
g_ImageOver['PlayFree'] = new Image();
g_ImageOver['PlayFree'].src = IMAGES + '/join_now_over.png';
var g_ImageIdle = new Array();
g_ImageIdle['LeftArrow'] = new Image();
g_ImageIdle['LeftArrow'].src = IMAGES + '/navigation_arrow_left_idle.gif';
g_ImageIdle['RightArrow'] = new Image();
g_ImageIdle['RightArrow'].src = IMAGES + '/navigation_arrow_right_idle.gif';
g_ImageIdle['Number01'] = new Image();
g_ImageIdle['Number01'].src = IMAGES + '/number_01_idle.gif';
g_ImageIdle['Number02'] = new Image();
g_ImageIdle['Number02'].src = IMAGES + '/number_02_idle.gif';
g_ImageIdle['Number03'] = new Image();
g_ImageIdle['Number03'].src = IMAGES + '/number_03_idle.gif';
g_ImageIdle['Number04'] = new Image();
g_ImageIdle['Number04'].src = IMAGES + '/number_04_idle.gif';
g_ImageIdle['Number05'] = new Image();
g_ImageIdle['Number05'].src = IMAGES + '/number_05_idle.gif';
g_ImageIdle['Number06'] = new Image();
g_ImageIdle['Number06'].src = IMAGES + '/number_06_idle.gif';
g_ImageIdle['Number07'] = new Image();
g_ImageIdle['Number07'].src = IMAGES + '/number_07_idle.gif';
g_ImageIdle['Number08'] = new Image();
g_ImageIdle['Number08'].src = IMAGES + '/number_08_idle.gif';
g_ImageIdle['PlayFree'] = new Image();
g_ImageIdle['PlayFree'].src = IMAGES + '/join_now_idle.png';
// preload screenshots
var g_Screenshot = new Array();
g_Screenshot['Number01'] = new Image();
g_Screenshot['Number01'].src = IMAGES + '/screenshot_1.jpg';
g_Screenshot['Number02'] = new Image();
g_Screenshot['Number02'].src = IMAGES + '/screenshot_2.jpg';
g_Screenshot['Number03'] = new Image();
g_Screenshot['Number03'].src = IMAGES + '/screenshot_3.jpg';
g_Screenshot['Number04'] = new Image();
g_Screenshot['Number04'].src = IMAGES + '/screenshot_4.jpg';
g_Screenshot['Number05'] = new Image();
g_Screenshot['Number05'].src = IMAGES + '/screenshot_5.jpg';
g_Screenshot['Number06'] = new Image();
g_Screenshot['Number06'].src = IMAGES + '/screenshot_6.jpg';
g_Screenshot['Number07'] = new Image();
g_Screenshot['Number07'].src = IMAGES + '/screenshot_7.jpg';
g_Screenshot['Number08'] = new Image();
g_Screenshot['Number08'].src = IMAGES + '/screenshot_8.jpg';
// slideshow variables
var g_SlideCounter = 1;
var g_SlideShowStopped = false;
var g_SlideTimeout = 3000; // 3000 msec = 3 sec
//current selected screenshot
var g_SelectedScreenshot = 'Number01';
// mouse over effect
function MouseOver(a_Object)
{
  a_Object.style.backgroundImage = "url('" + g_ImageOver[a_Object.id].src + "')";
}
// mouse out effect
function MouseOut(a_Object)
{
  if (a_Object.id != g_SelectedScreenshot) 
  a_Object.style.backgroundImage = "url('" + g_ImageIdle[a_Object.id].src + "')";
}
// click events
function ChangeScreenshot(a_Object, a_StopSlideShow)
{
  if (a_StopSlideShow == false) {
    StopSlideshow();
  }
  var l_CurrentScreenshotNumber = g_SelectedScreenshot.substring(7, 8);
  var l_NewScreenshotNumber = 1;
  // set old number image to idle
  document.getElementById(g_SelectedScreenshot).style.backgroundImage = "url('" + g_ImageIdle[g_SelectedScreenshot].src + "')";
  // set the screenshot
  if (a_Object.id == 'LeftArrow') {
    // previous screenshot was selected by click on the left arrow symbol
    if (l_CurrentScreenshotNumber == 1) {
      l_NewScreenshotNumber = 8;
    } else {
      l_NewScreenshotNumber = (parseInt(l_CurrentScreenshotNumber) - 1);
    }
    g_SelectedScreenshot = 'Number0' + l_NewScreenshotNumber;
    document.getElementById('ScreenShotContainer').style.backgroundImage = "url('" + g_Screenshot[g_SelectedScreenshot].src + "')";
  } else if (a_Object.id == 'RightArrow') {
    // next screenshot was selected by click on the right arrow symbol
    if (l_CurrentScreenshotNumber == 8) {
      l_NewScreenshotNumber = 1;
    } else {
      l_NewScreenshotNumber = (parseInt(l_CurrentScreenshotNumber) + 1);
    }
    g_SelectedScreenshot = 'Number0' + l_NewScreenshotNumber;
    document.getElementById('ScreenShotContainer').style.backgroundImage = "url('" + g_Screenshot[g_SelectedScreenshot].src + "')";
  } else {
    // a specific screenshot was selected by clicking on its number or by the slideshow
    document.getElementById('ScreenShotContainer').style.backgroundImage = "url('" + g_Screenshot[a_Object.id].src + "')";
    g_SelectedScreenshot = a_Object.id;
  }
  // set the number of the next image for the slideshow
  g_SlideCounter = g_SelectedScreenshot.substring(7, 8);
  if (g_SlideCounter == 8) {
    g_SlideCounter = 1;
  } else {
    g_SlideCounter = (parseInt(g_SlideCounter) + 1);
  }
  // set the new number image to over
  document.getElementById(g_SelectedScreenshot).style.backgroundImage = "url('" + g_ImageOver[g_SelectedScreenshot].src + "')";
}
// reset the timeout
function ResetTimeout() {
  var l_Source = document.getElementById('Number0' + g_SlideCounter);
  if (g_SlideCounter > 8) {
    g_SlideCounter = 1;
  }
  ChangeScreenshot(l_Source, true);
  aktiv = window.setTimeout("ResetTimeout()", g_SlideTimeout);
}
// start the slideshow
aktiv = window.setTimeout("ResetTimeout()", g_SlideTimeout);
// start or stop the slideshow
function StartStopSlideshow()
{
  var l_Source = document.getElementById('Number0' + g_SlideCounter);
  if (g_SlideShowStopped == false) { // stop the slide show
    window.clearTimeout(aktiv);
    g_SlideShowStopped = true;
  } else {
    ChangeScreenshot(l_Source, true);
    aktiv = window.setTimeout("ResetTimeout()", g_SlideTimeout);
    g_SlideShowStopped = false;
  }
}
// stops the slideshow
function StopSlideshow()
{
  window.clearTimeout(aktiv);
  g_SlideShowStopped = true;
}