/*************************************
 *                                   *
 * Datei: mouse_over.js              *
 * letzte Änderung: 19.12.2003       *
 * Autor: Struppi <jstruebig@web.de> *
 *                                   *
 * http://home.arcor.de/struebig/js  *
 *                                   *
**************************************/


/*
  Beispiel:
  ¯¯¯¯¯¯¯¯¯
  Der Button im HTML Code:
  <img src="hilfe.gif" name="button0">
  
  Mehr ist nicht nötig!

  Standardmäßig können zu dem obigen Beispiel,
  folgende Grafiken benutzt werden:

  onmouseout  = hilfe.gif
  onmouseover = button0_on.gif
  onclick     = button0_stay.gif
  onmousedown = button0_down.gif

  Es müssen aber nicht alle definiert werden. 
  
  Zum Beispiel, wenn man nur den mouseover Effekt haben möchte,
  reicht es aus nur diese Datei in den Grafikordner abzulegen.
  
*/

///////////////////////////////////////////////////////////
// Konfiguration

var ext    = '.jpg';  // Der Grafiktyp
var folder = '';      // Der Grafikpfad

var over   = '_on';   // Dateinamenerweiterung für
var stay   = '_stay'; // die Buttons
var down   = '_down'; // in den verschiedenen Zuständen


///////////////////////////////////////////////////////////
// Globale Deklarationen
var _click_       = null;

///////////////////////////////////////////////////////////
// Funktion: start_mouse_over(doc)
//
// Diese Funktion, wird nach dem laden der Seite aufgerufen,
// sie sucht nach Bildern mit dem Namen 'button' und fügt
// diesen die event Eigenschaften zu.

function start_mouse_over(doc)
{
    if(doc == '[object Event]' || !doc) doc = self.document;

    if(!doc.images) return;
    
    // Die Schleife, die alle Bilder eines Dokumentes durchläuft.
    for(var i = 0; i < doc.images.length; i++)
    {
        ///////////////////////////////////////////////////
        // Ist die Grafik ein Button -> dann events zuweisen.
        if( doc.images[i].name.indexOf('button') == 0) addEventsToImage(doc.images[i]);
    }
}


///////////////////////////////////////////////////////////
// Funktion: addEventsToImage(img)
//
// die events zuweisen.
function addEventsToImage(img)
{
    ///////////////////////////////////////////////////////
    // Die Events
    img.onmouseover = on_mouse_over;
    img.onmouseout  = on_mouse_out;
    img.onmousedown = on_mouse_down;
    img.onclick     = on_click;

    ///////////////////////////////////////////////////////
    // Bild vorladen
    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 auf die Grafik geklickt?
    if(window.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 herstelen.
    if(_click_) _click_.src = _click_.out;
    _click_ = this;
    window.name = this.name;
    return true;
}
///////////////////////////////////////////////////////////
// Funktion: on_resize()
function on_resize()
{
    if(_click_) _click_.src = _click_.stay.src;
}

///////////////////////////////////////////////////////////
// das Skript startet automatisch.
window.onresize  = on_resize;

if(window.addEventListener) window.addEventListener('onload', start_mouse_over, true);
window.onload = start_mouse_over;