// JavaScript Document

  var slide_delay = 2500; //ms
  var fade_speed = 500; //ms
  var fade_out = true;  //this means that image_front is shown and image_back is loading this is what to do next time...
  var image_front_opacity = 100; //default visible
  var fade_step = 5; // 5% at a time...50/ (100/5) = 2.5 ms delay/ timeout
  var fade_timeout = Math.round(fade_speed / (100/ fade_step));
  var slide_nr = 1; //Math.floor((getTime.getSeconds()/6));//1;  //current slide nr...

  function changeOpac(opacity, id) {
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
  }

  function doStartFadeTimer() {
    //initialize values
    //var getTime = new Date();
    //slide_nr = Math.floor((getTime.getSeconds()));//1;  //current slide nr...
    
    //wait time teaserDelay
    slide_obj=setTimeout("teaser_slide()", slide_delay);
  
  }

  function doFadeOut() {
    //document.getElementById("image_front").style.visibility = 'hidden';
    //Decreese opacity
    image_front_opacity = image_front_opacity - fade_step;
    //check value
    if (image_front_opacity < 0) {image_front_opacity = 0;}
    //change image front opacity
    changeOpac(image_front_opacity, "image_front")
    //decide if done..
    if (image_front_opacity > 0) {
      setTimeout("doFadeOut()", fade_timeout);
    } else {
      makeReady();
    }
  }

  function doFadeIn() {
    //document.getElementById("image_front").style.visibility = 'visible';
    //Decreese opacity
    image_front_opacity = image_front_opacity + fade_step;
    //check value
    if (image_front_opacity > 100) {image_front_opacity = 100;}
    //change image front opacity
    changeOpac(image_front_opacity, "image_front")
    //decide if done..
    if (image_front_opacity < 100) { 
      setTimeout("doFadeIn()", fade_timeout); 
    } else {
      makeReady();
    }
  }

  function makeReady() {
    //togle in and out... image_front and image_back
    fade_out = !fade_out;
    //call load function to load after fade show
    setTimeout("load_image()", fade_speed);
    setTimeout("teaser_slide()", slide_delay);
  }

  function teaser_slide() {
    //Do some smart fading stuff...
    if (fade_out) {
      //hide front
      doFadeOut();
    } else {
      //Show front
      doFadeIn();
    }
  }

  function load_image() {
    //go to next image...
    slide_nr++;
    if (fade_out) {
      //load image back
      document.getElementById("image_back").style.background = "url(include/teaser.php?id="+slide_nr+") no-repeat";
    } else {
      //load image front
      document.getElementById("image_front").src = "include/teaser.php?id="+slide_nr;
    }
  }