// ****************************************
// Konstanten
// ****************************************

// Verzeichnisse
var WB_IMG_DIR="wb"

// States
var WB_STATE_PLAY=1001;
var WB_STATE_STOP=1000;
var WB_STATE_DEFAULT=WB_STATE_PLAY;


// Cookie Entries
var WB_CE_STATE="WB_STATE";
var WB_CE_ORDER="WB_ORDER";
var WB_CE_CURRENT_INDX="WB_CURRENT_INDX";
var WB_CE_CURRENT_NMBR="WB_CURRENT_NMBR";
var WB_CE_PAUSE_CNT="WB_PAUSECNT";

// Cookie Timeout (1 Jahr)
var WB_COOKIE_EXPIRE=365*24*60*60*1000;

// Animation
var WB_ANIM_FRAMES = 30;
var WB_ANIM_FRAME_INTERVAL = 60;  // 50 = 20fps, 66 = 15fps
var WB_ANIM_PAUSE_INTERVALS = 3;
var WB_ANIM_PAUSE_INTERVAL = 1000;
var WB_PRELOAD_WAIT_INTERVAL = 500;

// Positionen
var WB_CURRENT_LEFT = 0;
var WB_NEXT_LEFT    = 173;
var WB_NEXT_OFFSET  = WB_NEXT_LEFT-WB_CURRENT_LEFT;

// Steuerung (Bilder)
var WB_MIN=101;
var WB_MAX=173;
var WB_PICTURES=WB_MAX-WB_MIN+1;


// Beschleunigungsbereich relativ bzgl. Offset bzw. Frames
//WB_ACC_SPEEDUP = 1.5;
var WB_ACC_PIXELS_REL = 0.15;
var WB_ACC_FRAMES_REL = 0.2;
// daraus ergeben sich folgende Parameter:
// absoluter Beschleunigungsbereich in Pixel bzw. Frames
var WB_ACC_PIXELS = Math.floor(WB_ACC_PIXELS_REL*WB_NEXT_OFFSET);
var WB_ACC_FRAMES = Math.floor(WB_ACC_FRAMES_REL*WB_ANIM_FRAMES);
// Reisegeschwindigkeit fuer den Rest
var WB_ACC_TRAVELSPEED = (WB_NEXT_OFFSET-2*WB_ACC_PIXELS)/(WB_ANIM_FRAMES-2*WB_ACC_FRAMES);
// Berechnung einiger Zwischenwerte
var WB_ACC_D0 = -Math.pow(WB_ACC_FRAMES,4);
var WB_ACC_D1 = 2*WB_ACC_FRAMES*WB_ACC_PIXELS - WB_ACC_TRAVELSPEED*Math.pow(WB_ACC_FRAMES,2);
var WB_ACC_D2 = WB_ACC_TRAVELSPEED*Math.pow(WB_ACC_FRAMES,3) - 3*WB_ACC_PIXELS*Math.pow(WB_ACC_FRAMES,2);
// Berechnung der Parameter fuer die beschleunigte Bewegung
var WB_ACC_A3 = WB_ACC_D1/WB_ACC_D0;
var WB_ACC_A2 = WB_ACC_D2/WB_ACC_D0;



// ****************************************
// VARIABLEN
// ****************************************
// Variablen, die im cookie gespeichert werden
var wb_state=WB_STATE_DEFAULT;
var wb_order=new Array;  // Die Reihenfolge als array von nummern aus [min,max],
                         // welche abgearbeitet wird
var wb_current_indx;     // Index auf das arrayelemente des aktuellen Bildes
var wb_current_nmbr;     // Nummer (Name) des aktuellen Bildes
var wb_pause_cnt=0;      // Zaehlt wie viele Pausenintervalle schon vergangen sind

// Variablen, die nicht im cookie gespeichert werden
var wb_frame_indx;       // aktueller frame in der Animation
// Imagepreloading:
var wb_preload_img = new Image();

// Slidemode-demo:
var WB_SLIDE_MODE=1;

// ****************************************
// Initialisierungsfunktionen
// ****************************************


function wb_write_html_code() {
  document.write('<div id="wechselbilder-wrapper" onmouseover="wb_mover();" onmouseout="wb_mout();"><div id="wechselbilder"><div id="wb-current"><div id="wb-current-content"></div></div><div id="wb-next"><div id="wb-next-content"></div></div></div><div id="wb-menu" name="wb-menu"><div id="wb-menu-content"><a href="javascript:wb_stop();" onmouseover="wb_stop_mover();return true;" onmouseout="wb_stop_mout(); return true;"><img id="wb-stop" name="wb-stop" border="0" src="nav/stop.gif"/></a><img border="0" src="nav/wb_spacer.gif"/><a href="javascript:wb_play();" onmouseover="wb_play_mover(); return true;" onmouseout="wb_play_mout(); return true;"><img id="wb-stop" name="wb-stop" border="0" src="nav/play.gif"/></a></div></div></div>');
}

// Neue Reihenfolge erstellen (ohne wb_current_indx zurückzusetzen
// border_exception ist ein Bild, das weder am Anfang noch am Ende stehen soll
// Es wird benutzt, damit beim Abspielen das letzte Bild nicht als erstes 
// wiederholt wird und damit man am letzten erkennen kann, ob schon eine neue 
// Reihenfolge erzeugt wurde.
function wb_create_random_order(border_exception) {
  wb_order = new Array(WB_PICTURES);
  // 1. array mit den Bildern erstellen
  for (i=0; i<WB_PICTURES; ++i)
    wb_order[i] = WB_MIN+i;
  // 2. Dieses Array mischen 
  for (i=0; i<WB_PICTURES; ++i) {
    var offs = Math.floor((Math.random()*(WB_PICTURES-i)));
    var n = wb_order[i+offs];
    wb_order[i+offs] = wb_order[i];
    wb_order[i] = n;
  }
  // 3. border_exception garantieren
  if (wb_order[0] == border_exception) {
    var new_pos = Math.floor((Math.random()*(WB_PICTURES-2))) + 1;
    var n = wb_order[new_pos];
    wb_order[new_pos] = wb_order[0];
    wb_order[0] = n;
  }    
  if (wb_order[WB_PICTURES-1] == border_exception) {
    var new_pos = Math.floor((Math.random()*(WB_PICTURES-2))) + 1;
    var n = wb_order[new_pos];
    wb_order[new_pos] = wb_order[WB_PICTURES-1];
    wb_order[WB_PICTURES-1] = n;
  }
}

// Neue zufäaellige Reihenfolge erstellen (ohne Einschraenkungen)
// und wb_current_indx zurücksetzen
function wb_init_order() {
  wb_create_random_order(0);
  wb_current_indx = 0;
}


// ****************************************
// Cookie Funktionen
// ****************************************

// Allgemeine Cookiefunktionen (Lesen und schreiben von Werten)
function wb_read_cookie_entry (Entry) {
  var Wert = "";
  if (navigator.cookieEnabled) {
    if (document.cookie) {
      var Wertstart = document.cookie.indexOf(Entry+"=") + Entry.length+1;
      if (Wertstart != -1) {
	var Wertende = document.cookie.indexOf(";",Wertstart);
	if (Wertende == -1)
	  Wertende = document.cookie.length;
	Wert = document.cookie.substring(Wertstart, Wertende);
      }
    }
  }
  return Wert;
}
function wb_write_cookie_entry (Bezeichner, Wert) {
  if (navigator.cookieEnabled) {
    var jetzt = new Date();
    var Auszeit = new Date(jetzt.getTime() + WB_COOKIE_EXPIRE);
    document.cookie = Bezeichner + "=" + Wert + "; expires=" + Auszeit.toGMTString() + ";";
  }
}

// Lesen und Schreiben von wb_state
function wb_write_state() {
  if (wb_state == 0)
    wb_state = WB_STATE_DEFAULT;
  wb_write_cookie_entry(WB_CE_STATE, wb_state);
}
function wb_read_state() {
  var state = wb_read_cookie_entry(WB_CE_STATE);
  if (state.length > 0)
    wb_state=parseInt(state);
  else
    wb_state = WB_STATE_DEFAULT;
  if (wb_state!=WB_STATE_PLAY && wb_state != WB_STATE_STOP)
    wb_state=WB_STATE_DEFAULT;
  wb_write_state();
}

// Lesen und Schreiben von wb_order und wb_current_indx
function wb_write_order() {
  if(wb_order.length != WB_PICTURES)
    wb_init_order();
  wb_write_cookie_entry(WB_CE_ORDER,wb_order.join(","));
  wb_write_cookie_entry(WB_CE_CURRENT_INDX,wb_current_indx);
  wb_write_cookie_entry(WB_CE_CURRENT_NMBR,wb_current_nmbr);
}
function wb_read_order() {
  // current Wert zuerst einlesen
  var current_indx = wb_read_cookie_entry(WB_CE_CURRENT_INDX);
  if (current_indx.length == 0)
    wb_current_indx=0;
  else
    wb_current_indx = parseInt(current_indx);
  var current_nmbr = wb_read_cookie_entry(WB_CE_CURRENT_NMBR);
  if (current_nmbr.length == 0)
    wb_current_nmbr=0;
  else
    wb_current_nmbr = parseInt(current_nmbr);
  
  // order einlesen, ggf. neue Reihenfolge erzeugen
  var order = wb_read_cookie_entry(WB_CE_ORDER);
  if (order.length > 0) {
    wb_order = order.split(",");
    if (wb_order.length != WB_PICTURES)
      wb_init_order;
  } else
    wb_init_order();

  // Current auf gueltigkeit ueberpruefen
  if (wb_current_indx < 0 || wb_current_indx >= wb_order.length) {
    wb_current_indx=0;
    wb_current_nmbr = 0;
  }

  // Schreiben (falls etwas veraendert wurde)
  wb_write_order();
}

function wb_write_pause_cnt() {
  wb_write_cookie_entry(WB_CE_PAUSE_CNT,wb_pause_cnt);
}

function wb_read_pause_cnt() {
  var pc = wb_read_cookie_entry(WB_CE_PAUSE_CNT);
  if (pc.length > 0)
    wb_pause_cnt=parseInt(pc);
  else
    wb_pause_cnt = 0;
  if ( wb_pause_cnt < 0 || wb_pause_cnt >= WB_ANIM_PAUSE_INTERVALS)
    wb_pause_cnt=0;
  wb_write_pause_cnt();
}

// ****************************************
// Pause Intervall
// ****************************************

// Schritte der Pause
function wb_do_pause() {
  if (wb_state == WB_STATE_PLAY) {
    ++wb_pause_cnt;
    if (wb_pause_cnt > WB_ANIM_PAUSE_INTERVALS) {
      // pause zu ende
      wb_slide_to_next();
    } else {
      wb_write_pause_cnt();
      window.setTimeout("wb_do_pause()",WB_ANIM_PAUSE_INTERVAL);
    }
  }
}

// Pause_cnt initialisieren (wird in next-funtknionen aufgerufen)
function wb_reset_pause_cnt() {
  wb_pause_cnt = 0;
  wb_write_pause_cnt();
}





// ****************************************
// Funktionen zur Darstellung
// ****************************************

// Die Divs auf die Default Positionen setzen
function wb_position_elements() {
  document.getElementById("wb-current").style.left = WB_CURRENT_LEFT;
  document.getElementById("wb-next").style.left = WB_NEXT_LEFT;
}

// Aus Numern BIldernamen machen
function wb_image_filename( img_number ) {
  return WB_IMG_DIR + "/wb" + img_number + ".jpg";
}

// Das aktuelle Bild im Div fuer das naechste Bild anzeigen
function wb_show_current_as_next() {
  // Sicherstellen, dass das Bild geladen wurde:
  var img_fn = wb_image_filename(wb_order[wb_current_indx]);
  var img = new Image();
  img.src = img_fn;
  document.getElementById("wb-next-content").style.backgroundImage="url"+'('+img_fn+')';
}

// Das aktuelle Bild im Div fuer das aktuelle Bild anzeigen
function wb_show_current() {
  // Sicherstellen, dass das Bild geladen wurde:
  var img_fn = wb_image_filename(wb_order[wb_current_indx]);
  var img = new Image();
  img.src = img_fn;
  document.getElementById("wb-current-content").style.backgroundImage="url"+'('+img_fn+')';
}

// Ladt schonmal das naechste Bild
// Wenn noetig, wird eine neue Reihenfolge erzeugt
function wb_preload_next() {
  var next_indx = -1; 
  
  if (wb_current_indx < WB_PICTURES-1)  // es kommt noch ein Bild
    next_indx = wb_current_indx+1;
  else {
    wb_create_random_order( wb_order[wb_current_indx] );
    next_indx = 0;
  }

  // Wenn noetig naechstes Bild vorladen
  if (next_indx >= 0 && next_indx < WB_PICTURES)
    wb_preload_img.src = wb_image_filename(wb_order[next_indx]);
}


// wb_current_indx auf das naechste Bild zeigen lassen.
// Ggf. neue Reihenfolge berechnen
function wb_increment_current() {
  if (wb_current_indx < 0 || wb_current_indx > WB_PICTURES || wb_order.length != WB_PICTURES )    // ist wb_order gueltig?
    wb_init_order();            // Wenn nicht, neue reihenfolge festlegen
  else {
    // wb_order und wb_current_indx sind gueltig
    if (wb_current_indx < WB_PICTURES-1) { 
      // es kommt noch mindestens ein BIld --> increment und ...
      ++wb_current_indx;
      wb_current_nmbr = wb_order[wb_current_indx];
      
      // ... preload next
      wb_preload_next();
    } else {
      // Letztes Bild wurde angezeigt
      // Ueberpruefe, ob es noch die alte Reihenfolge ist
      if (wb_order[wb_current_indx] == wb_current_nmbr)
	wb_init_order();
      wb_current_indx = 0;
      wb_current_nmbr = wb_order[wb_current_indx];

      // preload next
      wb_preload_next();
    }
  }

  
  // Order informationen speichern und pausenzaehler zuruecksetzen
  wb_write_order();
  wb_reset_pause_cnt();
}

// ****************************************
// Animation
// ****************************************

function wb_slide_linear(frame_indx) {
  return Math.round(WB_CURRENT_LEFT - (frame_indx * WB_NEXT_OFFSET)/WB_ANIM_FRAMES);
}

function wb_acc_func( t ) {
  return WB_ACC_A3*Math.pow(t,3) + WB_ACC_A2*Math.pow(t,2);
}

function wb_slide_acc(frame_indx) {
  if (frame_indx <= WB_ACC_FRAMES)
    return Math.round(WB_CURRENT_LEFT - wb_acc_func(frame_indx));
  if (frame_indx > WB_ACC_FRAMES && frame_indx < WB_ANIM_FRAMES-WB_ACC_FRAMES)
    return Math.round(WB_CURRENT_LEFT - (WB_ACC_PIXELS + WB_ACC_TRAVELSPEED*(frame_indx-WB_ACC_FRAMES))); 
  if (frame_indx >= WB_ANIM_FRAMES-WB_ACC_FRAMES) {
    return Math.round(WB_CURRENT_LEFT - (WB_NEXT_OFFSET-WB_ACC_PIXELS+WB_ACC_PIXELS-wb_acc_func(WB_ACC_FRAMES-(frame_indx-(WB_ANIM_FRAMES-WB_ACC_FRAMES)))));
  }
}

function wb_slide_step() {
  if (wb_frame_indx < WB_ANIM_FRAMES) {
    ++wb_frame_indx;
    var x;
    if (WB_SLIDE_MODE == 0)
      x = wb_slide_linear(wb_frame_indx);
    else
      x = wb_slide_acc(wb_frame_indx);
    var x_next = x + WB_NEXT_OFFSET;
    document.getElementById("wb-current").style.left = x;
    document.getElementById("wb-next").style.left = x_next;
    window.setTimeout("wb_slide_step()",WB_ANIM_FRAME_INTERVAL);
  } else {
    wb_show_current();
    wb_position_elements();
    wb_reset_pause_cnt();
    wb_write_order();
    wb_frame_indx = 0;
    if (wb_state == WB_STATE_PLAY)
      wb_do_pause();
  }
}

function wb_init_anim() {
  wb_show_current_as_next();
  wb_frame_indx = 0;
}



// ****************************************
// Funktionen zur Steuerung (User Interface)
// ****************************************


function wb_init() {
  wb_read_order();
  wb_read_state();
  wb_position_elements();
  if (wb_state == WB_STATE_STOP)
    wb_next();
  else {
    wb_show_current();
    wb_read_pause_cnt();
  }
  wb_preload_next();
  if (wb_state == WB_STATE_PLAY)
    wb_do_pause();
}

function wb_slide_to_next() {
  if (wb_preload_img.complete) {
    wb_position_elements();
    wb_increment_current();
    wb_init_anim();
    wb_slide_step();
  } else
    window.setTimeout("wb_slide_to_next()",WB_PRELOAD_WAIT_INTERVAL);
}


// Nächstes Bild anzeigen 
// inkl. aller nötigen Steuerungsmechanismen:
//  - nächstes Bild vorladen
//  - ggf. neue Reihenfolge bestimmen
//  - Timer setzen
//  - cookies schreiben
function wb_next() {
  wb_increment_current();
  wb_show_current();
  wb_write_order();
  wb_reset_pause_cnt();
}

function wb_play() {
  if (wb_state != WB_STATE_PLAY) {
    wb_state = WB_STATE_PLAY;
    wb_write_state();
    wb_slide_to_next();
  }
}

function wb_stop() {
  if (wb_state != WB_STATE_STOP) {
    wb_state = WB_STATE_STOP;
    wb_write_state();
    wb_reset_pause_cnt();
  }
}

function wb_prev() {
  if (wb_current_indx > 0) {
    --wb_current_indx;
    wb_show_current();
    wb_reset_pause_cnt();
  }
  wb_write_order();
}




// ****************************************
// GUI
// ****************************************

function wb_mover() {
  document.getElementById("wb-menu").style.visibility = "visible";
}

function wb_mout() {
  document.getElementById("wb-menu").style.visibility = "hidden";
}

function wb_stop_mover() {
  window.status="Animation stoppen.";
  document["wb-stop"].src= "nav/stop_s.gif";
}
function wb_stop_mout() {
  window.status="";
  document["wb-stop"].src= "nav/stop.gif";
}

function wb_play_mover() {
  window.status="Animation fortsetzen.";
  document["wb-stop"].src= "nav/play_s.gif";
}
function wb_play_mout() {
  window.status="";
  document["wb-stop"].src= "nav/play.gif";
}