/**
  Fügt für das rechte Menü Mouseover-Effekte ein.
  Aufrufparameter 1 ist die ID des Menüs.
  Aufrufrarameter 2-n ist ein String mit den IDs der Links,
  die auf der Seite als aktiv gekennzeichnet werden sollen.
  Mehrere IDs sind zulässig, Trennung durch Leerzeichen. 
  z.B. menu_effekte("submenue", "un2") oder menu_effekte("submenue", "un2", "un4")
 
 Angenommene Struktur:
  <div id="submenue">
   <a href="..."><img src=".../xyz_1.gif" id="un1" /></a>
   ... (weitere Links)
  </div> 
  und das "aktive" Bild hat den Namen xyz_2.gif (2 statt 1)
*/

function menu_effekte(){
  var args = $.merge([], arguments);
  var menu_id = args.shift();
  var aktiv_bilder = args;
  var img_re = /_\d\.(gif|png)/;
  
  $("#" + menu_id + " a img")
    .filter(function(index){
      var element_id = this.id || this.name;
      var ist_aktives_element = 
        $.grep(aktiv_bilder, function(v, i){
          return v == element_id;   
        }).length == 1;
      
      // Menüpunkte als aktiv kennzeichnen
      var active_image = this.src.replace(img_re, "_2.$1");
      image_cache.add(this.src);
      image_cache.add(active_image);
      if (ist_aktives_element) {
        this.src = active_image;
        return false;
      } else {
        return true;
      }
    })
    .parent()
    // Mouseover / Mouseout Effekte einrichten
    .mouseover(function(){ 
      $(this).children("img").each(function(index){
        this.src = this.src.replace(img_re, "_2.$1");        
      })
    })
    .mouseout(function(){ 
      $(this).children("img").each(function(index){
        this.src = this.src.replace(img_re, "_1.$1");        
      })
    })
}

var image_cache = new function(){
  this.cache = document.createElement("div");
  $(this.cache).css({position: "absolute", left: -10000, visibility: "hidden"});
  
  var that = this;
  $(document).ready(function(){
    $(document.body).append(that.cache);    
  });
  
  this.add = function(url){
    var img = new Image();
    img.src = url;
    try {
      $(this.cache).append(img);  // Geht im Safari nicht... DOM Exception 8
    } catch(er){}
  }
};

/**
  Das mit der ID bezeichnete Bild ist per Mouseover zoombar.
  Annahmen: Kleines Bild ist 1.gif|png, großes Bild ist 2.gif|png
  new Zoomable("ch_karte", "top-right");
  
  Parameter:
    id : ID des kleinen Bildes
    direction: Richtung des Zooms.
                 center: aus der Mitte in alle Richtungen
    override: Objekt, mit dem die Vergrößerung in eine Richtung beschränkt werden kann (Pixel)
              Bsp.: {top: 50}
    additional_trigger: Array mit den IDs der Elemente, die beim Mousover/out auch 
                        den Zoom auslösen sollen.          
*/
var Zoomable = function(id, direction, override, additional_triggers){
  this.kleinbild = $("#" + id); 
  this.direction = direction;
  this.override = override || {};
  this.additional_triggers = additional_triggers || [];
  var that = this;
  $(window).load(function(){
    that.init_grossbild(); 
  });
}
Zoomable.prototype = {
  speed: 500,
  kleinbild: null,
  grossbild: null,
  direction: "",
  override: {},
  kleinbild_prop: {},
  grossbild_prop: {},
  current_animation: "",
  additional_triggers: [],
  
  init_grossbild: function(){
    var grossbild_url = this.kleinbild.get(0).src.replace( /\d\.(gif|png)/, "2.$1");
    this.grossbild = this.kleinbild.before('<img src="' + grossbild_url + '" style="visibility: hidden; position: absolute;">').prev();  
    var that = this;
    // Das Laden des Grossbildes abwarten wegen der Bildgröße
    this.grossbild.load(function(){
      that.init_grossbild2();
    });    
  },

  // Zweiter Teil der Init, jetzt sind die Maße des Bildes bekannt.
  init_grossbild2: function(){
    this.kleinbild_prop = {
      height: this.kleinbild.height(),
      width: this.kleinbild.width(),
      top: this.kleinbild.get(0).offsetTop,
      left: this.kleinbild.get(0).offsetLeft      
    };
    this.grossbild_prop = {
      height: this.grossbild.get(0).height,
      width: this.grossbild.get(0).width
    };

    var top, left;
    switch (this.direction) {
        case 'center':
          this.grossbild_prop.top = this.kleinbild_prop.top - (this.grossbild_prop.height -  this.kleinbild_prop.height) / 2;
          this.grossbild_prop.left = this.kleinbild_prop.left - (this.grossbild_prop.width - this.kleinbild_prop.width) / 2;
          break;
        case 'top-right':
          this.grossbild_prop.top = this.kleinbild_prop.top - (this.grossbild_prop.height -  this.kleinbild_prop.height);
          this.grossbild_prop.left = this.kleinbild_prop.left;
          break;          
        case 'top-left':
          this.grossbild_prop.top = this.kleinbild_prop.top - (this.grossbild_prop.height -  this.kleinbild_prop.height);
          this.grossbild_prop.left = this.kleinbild_prop.left - (this.grossbild_prop.height -  this.kleinbild_prop.height);
          break;          
    }
    if (this.override.top !== undefined){
      this.grossbild_prop.top = this.kleinbild_prop.top - this.override.top;
    }
    if (this.override.left !== undefined){
      this.grossbild_prop.left = this.kleinbild_prop.left - this.override.left;
    }

    this.grossbild.css(this.kleinbild_prop);    
    
    var that = this;
    // Wenn beim Laden des Bildes die Maus über dem Bild war, bei der nächsten Bewegung
    // Zoom starten. Sonst müßte die Maus erst raus und wieder rein.
    this.kleinbild.one("mousemove", {that: that}, function(ev){
      var pos = $(this).offset();
      var mousepos = { 
        top: ev.clientX + $(window).scrollTop(),
        left: ev.clientX + $(window).scrollLeft()
      }
      if (
        mousepos.top > pos.top && mousepos.top < (pos.top + that.kleinbild_prop.height) && 
        mousepos.left > pos.left && mousepos.left < (pos.left + that.kleinbild_prop.width)
      ){
         that.grow(ev); 
      }
    })
    that.init_handler();
  },
  
  // Mouseover / -out Handler setzen
  init_handler: function(){
    var that = this;
    this.kleinbild.bind("mouseover", {that: that}, this.grow);  
    this.grossbild.bind("mouseover", {that: that}, this.grow);  
    this.grossbild.bind("mouseout", {that: that}, this.shrink);
    $.each(this.additional_triggers, function(i, v){
      $("#" + v).bind("mouseover", {that: that}, that.grow);  
      $("#" + v).bind("mouseout", {that: that}, that.shrink);        
    });
  },
  
  // Grow-Effekt. Nicht laufen, wenn bereits läuft und evtl. Shrink-Effekt stoppen.
  grow: function(ev){
    var that = ev.data.that;
    if (that.current_animation == "grow") return;
    that.grossbild.css({visibility: "visible"});
    that.kleinbild.css({visibility: "hidden"});
    that.grossbild.stop();
    that.grossbild.animate(that.grossbild_prop, that.speed, "easeout");
    that.current_animation = "grow";
  },
  
  // Shrink-Effekt. Nicht laufen, wenn bereits läuft und evtl. Grow-Effekt stoppen.
  shrink: function(ev){
    var that = ev.data.that;
    if (that.current_animation == "shrink") return;
    that.grossbild.stop();
    that.grossbild.animate(that.kleinbild_prop, that.speed, "easeout", 
      function(){
        that.grossbild.css({visibility: "hidden"});
        that.kleinbild.css({visibility: "visible"});        
      }
    );
    that.current_animation = "shrink";
  }
    
}

var address_cache = [];

var AddressSlider = function(id){
  this.kleinbild = $("#" + id); 
  this.kleinbild_id = this.kleinbild.get(0).id;
  var that = this;
  $(window).load(function(){
    that.init_grossbild(); 
  });
}
AddressSlider.address_cache = [];
AddressSlider.prototype = {
  speed: 500,
  kleinbild: null,
  kleinbild_id: "",
  grossbild: null,
  grossbild_prop: {},
  current_animation: "",
  
  init_grossbild: function(){
    var grossbild_url = this.kleinbild.get(0).src.replace( /1\.gif/, "adresse.png");
    this.grossbild = this.kleinbild.after('<img src="' + grossbild_url + '" style="position: absolute; left: -10000px">').next();  
    image_cache.add(grossbild_url);
    var that = this;
    // Das Laden des Grossbildes abwarten wegen der Bildgröße
    this.grossbild.load(function(){
      that.init_grossbild2();
    });    
  },

  // Zweiter Teil der Init, jetzt sind die Maße des Bildes bekannt.
  init_grossbild2: function(){
//    this.grossbild.css({display: ""});
    this.kleinbild_prop = {
      height: this.kleinbild.height(),
      width: this.kleinbild.width(),
      top: this.kleinbild.get(0).offsetTop,
      left: this.kleinbild.get(0).offsetLeft      
    };
    this.grossbild_prop = {
      height: this.grossbild.get(0).height,
      width: this.grossbild.get(0).width
    };
    this.grossbild.css({height: 0, width: this.grossbild_prop.width, display: "none", position: ""});    
    var that = this;
    // Wenn beim Laden des Bildes die Maus über dem Bild war, bei der nächsten Bewegung
    // Zoom starten. Sonst müßte die Maus erst raus und wieder rein.
    this.kleinbild.one("mousemove", {that: that}, function(ev){
      var pos = $(this).offset();
      var mousepos = { 
        top: ev.clientX + $(window).scrollTop(),
        left: ev.clientX + $(window).scrollLeft()
      }
      if (
        mousepos.top > pos.top && mousepos.top < (pos.top + that.kleinbild_prop.height) && 
        mousepos.left > pos.left && mousepos.left < (pos.left + that.kleinbild_prop.width)
      ){
         that.grow(ev); 
      }
    })
    that.init_handler();     
    AddressSlider.address_cache.push(this);
  },
  
  // Mouseover / -out Handler setzen
  init_handler: function(){
    var that = this;
    this.kleinbild.bind("mouseover", {that: that}, this.grow);  
    this.kleinbild.bind("mouseout", {that: that}, this.shrink);
    this.grossbild.bind("mouseover", {that: that}, this.grow);  
    this.grossbild.bind("mouseout", {that: that}, this.shrink);
  },
  
  // Grow-Effekt. Nicht laufen, wenn bereits läuft und evtl. Shrink-Effekt stoppen.
  grow: function(ev){
    var that;
    if (ev === undefined){
      that = this;
    } else {
      that = ev.data.that;      
    }
    if (that.current_animation == "grow") return;
    that.grossbild.stop();
    that.grossbild.show();
    that.grossbild.animate({height: that.grossbild_prop.height, width: that.grossbild_prop.width}, that.speed, "easeout");
    that.current_animation = "grow";
    // alle anderen noch offenen Addressen schließen (Maus manchmal schneller als Browser)
    $.each(AddressSlider.address_cache, function(i, v){
      if (v === that) return;
      v.shrink();
    });
  },
  
  // Shrink-Effekt. Nicht laufen, wenn bereits läuft und evtl. Grow-Effekt stoppen.
  shrink: function(ev){
    var that;
    if (ev === undefined){
      that = this;
    } else {
      that = ev.data.that;      
    }
    if (that.current_animation == "shrink") return;
    that.grossbild.stop();
    that.grossbild.animate({height: 0, width: that.grossbild_prop.width}, that.speed, "easeout", function(){ that.grossbild.hide()});
    that.current_animation = "shrink";
  }
    
}
AddressSlider.grow_when_ready = function(triggerbild_id, gesamtzahl){
  var check = function(){
    if (AddressSlider.address_cache.length >= gesamtzahl){
      $.each(AddressSlider.address_cache, function(i, v){
        if (v.kleinbild_id == triggerbild_id){
          v.grow();
        }
      });
    } else {
      setTimeout(check, 100);
    }
  }
  setTimeout(check, 100);  
}

/**
   Annahme:
     <a class="imagemap_area" style="position: absolute; left:233px; top:173px; width:69px; height:24px;" href="09B06_mieterMgdb.html"> </a>
     <img src="../images/berlin/09_B_wertanlagen/textblase3.png" style="position: absolute; left:238px; top:100px; display: none;">     
     
     new ImageMap( <a element> );
     
   Zeigt das <img> beim Hover über dem Link an.
 */
var ImageMap = function(triggerelement){
  this.trigger = $(triggerelement);
  this.fahne = this.trigger.next();
  image_cache.add(this.fahne);
  
  this.trigger.bind("mouseover", {that: this}, this.show);
  this.trigger.bind("mouseout", {that: this}, this.hide);
  ImageMap.area_cache.push(this);
}
ImageMap.area_cache = [];
ImageMap.prototype = {
  trigger: null,
  fahne: null,
  show: function(ev){
    var that;
    if (ev === undefined){
      that = this;
    } else {
      that = ev.data.that;      
    }
    that.fahne.show();
    return false;
  },
  hide: function(ev){
    var that;
    if (ev === undefined){
      that = this;
    } else {
      that = ev.data.that;      
    }
    that.fahne.hide();
    return false;
  }
}