//--------------------------------------------------------------------
// Javascript für murmelwelt.de
//--------------------------------------------------------------------
// Copyright 2009 by Johannes Schmitz, Katrepeler Str. 84 28215 Bremen
//--------------------------------------------------------------------
// Globale Variablen
var left1 = 20;
var top1  = 35;
var max   = 130;
var left2 = 105;
var top2  = 125;
var min   = 60;
var stat2 = 0;
var div1; 
var div2; 
var wo1 = 0;
var wo2 = 0;

window.onload = function() {
  if( document.getElementById
   && document.getElementsByTagName) {
   if( document.getElementById( "mw1")
    && document.getElementById( "mw2")) {
      var div_1 = document.getElementById( "mw1");
      div_1.style.top  = top1 + "px";
      div_1.style.left = left1 + "px";
      var gif1 = div_1.firstChild;
      gif1.setAttribute( "alt", "Klick mich!");
      gif1.setAttribute( "title", "Klick mich!");
      gif1.onclick= function() {
        go(this);
        return false;
      }
      var div_2 = document.getElementById( "mw2");
      div_2.style.top  = top2 + "px";
      div_2.style.left =  left2 + "px";
      var gif2 = div_2.firstChild;
      gif2.setAttribute( "alt", "Klick mich!");
      gif2.setAttribute( "title", "Klick mich!");
      gif2.onclick= function() {
        go(this);
        return false;
      }  
    }
  }  
  return false;
}

function go (elem) {
  var alt_text = elem.getAttribute( "alt");
  var breite = elem.getAttribute( "width");
  var akt_div = elem.parentNode;
  var akt_id = akt_div.getAttribute( "id");
  var akt_top = akt_div.style.top;
  var akt_left = akt_div.style.left;

  if( alt_text == "Klick mich!") {
    if( breite == min) {
       div2 = akt_div;
      if( akt_id == "mw1")
        div1 = document.getElementById( "mw2");
      else  
        div1 = document.getElementById( "mw1");
    } else {
      div1 = akt_div;
      if( akt_id == "mw1")
        div2 = document.getElementById( "mw2");
      else  
        div2 = document.getElementById( "mw1");
    }    
    var img1 = div1.getElementsByTagName( "img")[0];
    var img2 = div2.getElementsByTagName( "img")[0];
    img1.setAttribute( "alt", "Alte Murmel");
    img2.setAttribute( "alt", "Alte Murmel");
    img1.setAttribute( "title", "Alte Murmel");
    img2.setAttribute( "title", "Alte Murmel");
    wo1 = 1;  
    wo2 = 1;  
    movement = setTimeout( "bildertausch()",1);
  }
}

function bildertausch () {
  var img1 = div1.getElementsByTagName( "img")[0];
  var groesse1 = img1.getAttribute( "width");
  var x1 = parseInt( div1.style.left);
  var y1 = parseInt( div1.style.top);
  var img2 = div2.getElementsByTagName( "img")[0];
  var groesse2 = img2.getAttribute( "width");
  var x2 = parseInt( div2.style.left);
  var y2 = parseInt( div2.style.top);
  var fertig = 1;

  // Kleine Murmel im Vordergrund wird zu
  // großer Murmel im Hintergrund
  if( wo2 == 1 && x2 < 110) {
    x2++;
    div2.style.left = x2 + "px";
    fertig = 0;
  } else {
    if( wo2 == 1) {
      wo2 = 2;
    }  
    if( wo2 == 2 && groesse2 < max) {
      x2 ++;
      y2++;
      div2.style.left = x2 + "px";
      div2.style.top = y2 + "px";
      groesse2++;
      img2.setAttribute( "width", groesse2);
      img2.setAttribute( "height", groesse2);
      fertig = 0;
    } else {
      if( wo2 == 2) {
        wo2 = 3;
      }  
      if( wo2 == 3 && x2 > left1) {
        x2--;
        y2--;
        div2.style.left = x2 + "px";
        div2.style.top = y2 + "px";
        fertig = 0;
      }  
    }
  }

  // Große Murmel im Hintergrund wird zu
  // kleiner Murmel im Hintergrund
  if( wo1 == 1 && groesse1 > min) {
    // 1. Schritt: Verkleinerung
    groesse1--;
    img1.setAttribute( "width", groesse1);
    img1.setAttribute( "height", groesse1);
    fertig = 0;
  } else {
    if( wo1 == 1) {
      wo1 = 2;
      // Z-Index wechseln
      div2.style.zIndex = 1;
      div1.style.zIndex = 2;
    }  
    if( wo1 == 2 && x1 < 195) {
      // 2. Schritt: Verschiebung nach rechts
      x1++;
      div1.style.left = x1 + "px";
      /*
      if( groesse1 > 20) {
        groesse1--;
        img1.setAttribute( "width", groesse1);
        img1.setAttribute( "height", groesse1);
      } 
      */      
      fertig = 0;
    } else {
      if( wo1 == 2) {
        wo1 = 3;
      }
      if( wo1 == 3 && x1 > left2) {
        // 3. Schritt: Verschiebung nach links und unten in Endposition
        x1--;
        y1++;
        div1.style.left = x1 + "px";
        div1.style.top = y1 + "px";
        /*
        if( x1 < 150 && groesse1 < min) {
          groesse1++;
          img1.setAttribute( "width", groesse1);
          img1.setAttribute( "height", groesse1);
        } 
        */        
        fertig = 0;
      }  
    }
  }
  
  if( fertig == 1) {
    img1.setAttribute( "alt", "Klick mich!");
    img2.setAttribute( "alt", "Klick mich!");
    img1.setAttribute( "title", "Klick mich!");
    img2.setAttribute( "title", "Klick mich!");
  }
  else {
    movement = setTimeout( "bildertausch()",4);
  }  
}