/**
 * JavaScript Code zu Frontend Plugin tx_billitonreferences_pi1 der
 * TYPO3 Extension billiton_references
 *
 * Realisiert den MouseOver Effekt:
 * schwebendes Tooltip mit großer Vorschau der jeweiligen Referenz.
 *
 * @author Florian Busch <f.busch@billiton.de>
 */
 
// initialisierung sobald dom bereit ist (noch ohne grafiken)
$(document).ready(function(){

   /* KONFIGURATION */
   
   // id fuer tooltip (muss dokumentenweit eindeutig sein)
   var conf_tooltip_id = 'tx_billitonreferences_pi1_tooltip';
   
   // pfad zur ladegrafik, diese wird im tooltip statt dem eigentlichen bild
   // der uid angezeigt, falls bild noch nicht geladen ist
   var conf_loading_indicator = '/typo3conf/ext/billiton_references/pi1/res/loading_indicator.gif';
   
   
   /* LOKALE VARIABLEN */
   
   // tooltip dom element (<div>)
   var tooltip_el = false;
   
   // uid der referenz, zu der momentan das tooltip geoeffnet ist. false wenn
   // kein tooltip geoffnet
   var tooltip_uid = false;
   
   
   /* DEKLARATIONEN INTERNE HILFSFUNKTIONEN */
   
   // erstellt den tooltip, damit man diesen nicht im markup des template oder im
   // php code hartkodieren muss
   function tooltip_create () {
      
      // div anlegen
      $('body').append('<div id="' + conf_tooltip_id + '"><img /></div>'); // img damit bereits beim ersten mal replaceChild() durchgefuehrt werden kann

      // tooltip_el zeigt nun auf neu erstelltes dom element 
      tooltip_el = document.getElementById(conf_tooltip_id);
      
      // wichtige stylings, v.a. bei position, zIndex und display ist es wichtig,
      // dies hier zu setzen
      $(tooltip_el).css({
         position: 'absolute',
         zIndex: 3000,
         display: 'none', // erst einmal verstecken
         border: '2px solid #000',
         padding: 0,
         margin: 0,
         float: 'left' // damit nichts aus tooltip herausragt (bild hat auch float=left)
      });
      
   }
   
   // bild des tooltips auf bild zu angegebener uid setzen. force erzwingt
   // update, auch wenn sich uid gar nicht aendert
   function tooltip_set_image (uid, force) {

      // wenn sich die uid gar nicht aenderung und force nicht true dann nichts tun
      if ((uid == tooltip_uid) && !force) {
         return;
      }
      
      // neue uid setzen
      tooltip_uid = uid;
      
      // bild setzen. je nachdem ob zu uid zugehoeriges bild schon geladen:
      // dieses bild bzw. den loading_indicator einsetzen
      if ((images[uid] !== undefined) && images[uid].loaded) {
         tooltip_el.replaceChild(images[uid].image,tooltip_el.firstChild);
      } else {
         tooltip_el.replaceChild(loading_indicator,tooltip_el.firstChild);
      }
      
      // float=left damit neues bild nicht aus tooltip herausragt
      // (tooltip hat auch float=left)
      tooltip_el.firstChild.style.float = 'left';
      
   }
   
   // aktualisiert die tooltip position und macht tooltip sichtbar falls noetig
   function tooltip_set_position (x, y) {
      
      $(tooltip_el).css({
         display: 'block',
         left: (x + 15) + 'px',
         top: (y + 15) + 'px'
      });
      
   }
   
   // tooltip anzeigen
   function tooltip_show (evt, elem) {
      
      // uid ermitteln und bild setzen
      var parent = $(elem).parents('.references-block');
      var uid = parseInt(parent.attr('rel'));
      
      tooltip_set_image(uid,false);
      
      // mauscursor-position ermitteln und ebenfalls setzen
      var pointer = jQuery.iUtil.getPointer(evt);
      tooltip_set_position(pointer.x,pointer.y);
      
   }
   
   // tooltip ausblenden
   function tooltip_hide () {
      tooltip_uid = false;
      $(tooltip_el).css({
         display: 'none'
      });
   }

   
   /* INITIALISIERUNGEN */
   
   // tooltip nun erstellen
   tooltip_create();

   // lade-grafik einbinden und tooltip-system erst aktivieren wenn diese
   // grafik selbst geladen ist
   var loading_indicator = document.createElement('img');
   $(loading_indicator).bind('load',function(){

      // .references-block elemente im frontend plugin div suchen, die ein
      // bild a.reference-picture enthalten (-> kein mouseover event handling
      // fuer referenzen ohne bilder)
      $('div.tx-billitonreferences-pi1 .references-block a.reference-picture')
//         .parents('.references-block')
            .each(function(){
      
               // mouseover event handling aktivieren
               $(this).hover(
                  
                  // maus ueber div -> tooltip zeigen und mousemove aktivieren
                  function(evt){
                     tooltip_show(evt,this);
                     $(this).bind('mousemove',function(evt){
                        tooltip_show(evt,this);
                     });
                  },
      
                  // maus verlaesst div -> mousemove aktivieren und tooltip verstecken
                  function(){
                     $(this).unbind('mousemove');
                     tooltip_hide();
                  }
               );

      });
   });
   loading_indicator.src = conf_loading_indicator; // src setzen -> laden triggern

   
   /* BILDER-PRELOADING */
   
   // array fuer bilder, index entspricht hierbei der uid. der wert ist ein
   // objekt mit den eigenschaften 'image' (das <img> tag selbst) und 'loaded'
   // (true wenn bild vom preloader geladen wurde)
   var images = [];
   
   // alle bilder durchgehen (genauer: die links um die thumbnails. grund: diese
   // verlinken jeweils auf die grossbildansicht, was ein gutes fallback-verhalten
   // ist falls javascript deaktiviert ist. dieses href benoetigen wir)
   $('div.tx-billitonreferences-pi1 .references-block a.reference-picture').each(function(){
   
      // referenz eltern-element ermitteln und die uid aus dem rel-attribut
      // auslesen
      var parent = $(this).parents('.references-block');
      var uid = parseInt(parent.attr('rel'));

      // bild intern anlegen
      var image =  document.createElement('img');
      
      // wenn bild geladen, dann dieses im array als geladen markieren. falls tooltip
      // momentan fuer dieses bild geoeffnet, dann bild austauschen
      $(image).bind('load',function(){
         images[uid].loaded = true;
         if (uid == tooltip_uid) {
            tooltip_set_image(uid,true); // force muss true sein
         }
      });

      // bild in array eintragen, erst einmal als "nicht geladen" vermerken
      images[uid] = {
         image: image,
         loaded: false
      }

      // src setzen und damit auch den ladevorgang fuer dieses bild triggern
      image.src = this.getAttribute('href');

      // da javascript aktiv ist und das grosse bild als hover angezeigt wird,
      // uebernehmen wir nun fuer den link um das bild die eigenschaften des
      // links, der zum projekt fuehrt
      var link = parent.find('a.reference-link');
      $(this).attr({
         href: link.attr('href'),
         target: link.attr('target'),
         onclick: link.attr('onclick')
      });
      
   });
   
});