/*
   Datei:    mouse_over_2.js
   �nderung: 18.05.06
   Autor:    struebig@gmx.net

   http://javascript.jstruebig.de/skripte/30/

*/

/*
  Beispiel:
  ���������
*/

///////////////////////////////////////////////////////////
// Konfiguration!
var className = 'button'; // Name der Klasse
var ext       = '.png';  // Der Grafiktyp
var over      = '_over'; // Dateinamenerweiterung für
var stay      = '_stay'; // die Buttons
var down      = '_down'; // in den verschiedenen Zuständen

///////////////////////////////////////////////////////////
// Eine anonyme Funktion, die unmittelbar beim einbinden
// des Skripts aufgerufen wird.
(
function()
{
    var _click_       = null;
    ///////////////////////////////////////////////////////////
    // Funktion: start_mouse_over()
    // Die initialisierung
    //
    function start_mouse_over()
    {
         var d = self.document;
         if(!d.images) return;
         for(var i = 0; i < d.images.length; i++)
         {
              var img = d.images[i];
              ///////////////////////////////////////////////////
              // Button suchen und events zuweisen.
              if( img.className && img.className.indexOf(className) > -1)
              addEventsToImage(img);
         }
    }
    ///////////////////////////////////////////////////////////
    // Funktion: addEventsToImage(img)
    //
    // die events zuweisen.
    function addEventsToImage(img)
    {
         var folder = img.src.substring(0, img.src.lastIndexOf('/') + 1) ;
         var name   = img.src.substring(img.src.lastIndexOf('/') + 1, img.src.lastIndexOf('.') ) ;
         img.name = name;
         ///////////////////////////////////////////////////////
         // Die Events
         img.onmouseover = on_mouse_over;
         img.onmouseout  = on_mouse_out;
         img.onmousedown = on_mouse_down;
         img.onclick     = on_click;

         ///////////////////////////////////////////////////////
         // Bild vorladen, gleichzeitig findet eine Test statt
         // ob das Bild vorhanden ist, im Fehlerfall
         // wird der Event nicht mehr ausgeführt.
         
		 img.stay = new Image();
         img.stay.img = img;
		 img.stay.onerror = function() { this.img.onclick = null;}
		 img.stay.src = folder + img.name + stay + ext;

         img.over = new Image();
         img.over.img = img;
         img.over.onerror = function() { this.img.onmouseover = null;}
         img.over.src = folder + img.name + over + ext;

         img.down = new Image();
         img.down.img = img;
         img.down.onerror = function() { this.img.onmousedown = null;}
         img.down.src = folder + img.name + down + ext;

         ///////////////////////////////////////////////////////
         // die ürsprüngliche Grafik sichern.
         img.out = img.src;

         ///////////////////////////////////////////////////////
         // wurde breits vorher auf das Bild geklickt?
         if(top.name == img.name) img.onclick();
    }
    ///////////////////////////////////////////////////////////
    // Funktion: on_mouse_down()
    function on_mouse_down()
    {
         if(_click_ == this) return false; // ist bereits angeklickt.
         this.src = this.down.src;
         return true;
    }
    ///////////////////////////////////////////////////////////
    // Funktion: on_mouse_over()
    function on_mouse_over()
    {
         if(_click_ == this) return false; // ist bereits angeklickt.
         this.src = this.over.src;
         return true;
    }
    ///////////////////////////////////////////////////////////
    // Funktion: on_mouse_out()
    function on_mouse_out()
    {
         if(_click_ == this) return false;

         this.src = this.out;
         return true;
    }
    ///////////////////////////////////////////////////////////
    // Funktion: on_click()
    function on_click()
    {
         if(_click_ == this) return false;
         this.src = this.stay.src;

         // den vorherigen Zustand eines angeklickten Buttons herstellen.
         if(_click_) _click_.src = _click_.out;
         _click_ = this;
         top.name = this.name;
         return true;
    }

    ///////////////////////////////////////////////////////////
    // Funktion: on_resize()
    function on_resize()
    {
        if(_click_) _click_.src = _click_.stay.src;
    }


    ///////////////////////////////////////////////////////////
    // das Skript startet nach dem laden automatisch.
    if(window.addEventListener)
    {
         window.addEventListener('load', start_mouse_over, false);
         window.addEventListener('resize', on_resize, false);
    }
    else
    {
         window.onload   = start_mouse_over;
         window.onresize = on_resize
    }
}()
)