/*
   Datei:    mouse_over.js
   Änderung: 03.05.04
   Autor:    struebig@gmx.net

   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, passend zum obigen Beispiel,
  folgende Grafiken eingebaut werden:

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

  Diese müssen alle in dem gleichen Verzeichniss wie hilfe.gif liegen.
  Es müßen aber nicht alle Grafiken ertsellt werden, wenn man z.b.
  nur den mouseover Effekt haben möchte reicht es aus,
  nur die ersten beiden Grafiken in den Ordner zu legen.
*/

///////////////////////////////////////////////////////////
// Konfiguration!
var ext    = '.gif';  // Der Grafiktyp

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

///////////////////////////////////////////////////////////
// Funktion: start_mouse_over()
//
function start_mouse_over()
{
    var doc = self.document;
    if(!doc.images) return;

    for(var i = 0; i < doc.images.length; i++)
    {
        var img = doc.images[i];
        ///////////////////////////////////////////////////
        // Button suchen
        // und events zuweisen.
        if( img.name.indexOf('button') == 0) addEventsToImage(img);
    }
}
///////////////////////////////////////////////////////////
// Funktion: addEventsToImage(img)
//
// die events zuweisen.
function addEventsToImage(img)
{
    var folder = img.src.substring(0, img.src.lastIndexOf('/') + 1) ;
    ///////////////////////////////////////////////////////
    // 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 herstellen.
    if(_click_) _click_.src = _click_.out;
    _click_ = this;
    window.name = this.name;
    return true;
}
///////////////////////////////////////////////////////////
// globale Deklaration
var _click_       = null;

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

///////////////////////////////////////////////////////////
// das Skript startet automatisch.
if(window.addEventListener) window.addEventListener('onload', start_mouse_over, true);
if(window.addEventListener) window.addEventListener('onresize', on_resize, true);

window.onload   = start_mouse_over;
window.onresize = on_resize;