// Kiefergesichtschirurgie
//
// Intro

// Da ist eine div (id="canvas"), in welcher alles abläuft.    //
// Ferner je ein Bild der beiden Köpfe, des Ringes und je      //
// ein grosses und ein kleines Bild der Kombination.           //
//                                                             //
// Nun geschieht folgendes:                                    //
// Dieses Skript hier legt die wichtigsten Anfangswerte fest.  //
// Es veranlasst im übrigen, dass "onload" die Funktion        //
// movestep() aufgerufen wird.                                 //
// movestep() verschiebt die beiden Köpfe horizontal und ruft  //
//            sich selbst so lange auf, bis sie in der Mitte   //
//            angelangt sind. Dann ruft es einblend(0) auf.    //
// einblend() blendet das Bild ring.png ein, welches sich      //
//            bereits an Ort und Stelle befindet. Das Ein-     //
//            blenden geschieht, indem sich die Funktion       //
//            selbst mit verändertem Opacity-Wert immer wieder //
//            aufruft, bis das Bild völlig sichtbar ist.       //
//            Dann ruft sie wechsel() auf.                     //
// wechsel()  blendet die beiden Köpfe und den Ring wieder aus //
//            und dafür das bis jetzt unsichtbare Element      //
//            "ende", eine DIV, die das kombinierte Bild       //
//            enthält. (Es ist einfacher und performanter, im  //
//            Folgenden nur ein einziges Bild zu zoomen).      //
//            wechsel() ruft dann schrumpf() auf.              //
// schrumpf() ruft sich selber in bewährter Manier immer       //
//            wieder auf, bis das Bild auf die Endgrösse       //
//            geschrumpft ist. Wenn's so weit ist, wird das    //
//            geschrumpfte grosse Kombinationsbild durch seine //
//            kleine Version ersetzt (aus Qualitätsgründen).   //

var s1h = 629 ;
var z1h = 100 ;
var s2h = -472 ;
function movestep() {
  s1h -= 3 ;
  s2h += 3 ;
  document.getElementById("k1").style.left = s1h+"px" ;
  document.getElementById("k2").style.left = s2h+"px" ;
  if(s1h > z1h) window.setTimeout("movestep()",20) ;
  else window.setTimeout("einblend(0)", 20) ;
}
function einblend(o) {
  setOpacity(document.getElementById("ring"),o);
  if(o < 100) {
    o += 2 ;
    window.setTimeout("einblend(" + o + ")", 100-o) ;
  }
  else window.setTimeout("wechsel()", 10) ;
}
//set the opacity of an element to a specified value
function setOpacity(obj, o) {
  obj.style.opacity = (o / 100);
  obj.style.MozOpacity = (o / 100);
  obj.style.KhtmlOpacity = (o / 100);
  obj.style.filter = 'alpha(opacity=' + o + ')';
}
function wechsel() {
  document.getElementById("k1").style.display = "none" ;
  document.getElementById("k2").style.display = "none" ;
  document.getElementById("ring").style.display = "none" ;
  document.getElementById("ende").style.display = "block" ;
  window.setTimeout("schrumpf(730,0)", 30) ;
}

function schrumpf(g,p) {
  g -= 2 ;
  p += 1 ;
  if(g > 138) {
    document.getElementById("endlogo").style.width  = g + "px" ;
    document.getElementById("endlogo").style.height = g + "px" ;
    document.getElementById("endlogo").style.left = p + "px" ;
    document.getElementById("endlogo").style.top = p + "px" ;
    window.setTimeout("schrumpf(" + g + "," + p + ")", 10) ;
  }
  else {
    document.getElementById("endlogo").src = "infra/intro/kopflogo.png" ;
    document.getElementById("endlogo").style.width  = "138px" ;
    document.getElementById("endlogo").style.height = "137px" ;
    // alert("OK") ;
  }
}

window.onload = movestep ;