/*
 ************************************
 *                                  *
 * Datei: mouse_over.js             *
 * letzte Änderung: 03.05.04        *
 * Autor: struebig@gmx.net          *
 *                                  *
 * http://home.arcor.de/struebig/js *
 *                                  *
 ************************************
*/

/*
  Beispiel:
  ¯¯¯¯¯¯¯¯¯
  Der Button im HTML Code, mehr ist nicht nötig:

  <img src="hilfe.gif" name="button0">

  Standardmäßig können zu dem obigen Beispiel
  folgende Grafiken eingebaut werde:

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

  Es müssen aber nicht alle definiert werden.
  Wenn man nur den mouseover Effekt haben möchte
  reicht es ganz einfach aus nur diese in den Grafikordner 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

///////////////////////////////////////////////////////////
// globale Deklaration
var _click_       = null;

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

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

    for(var i = 0; i < doc.images.length; i++)
    {
        ///////////////////////////////////////////////////
        // Button suchen
        if( doc.images[i].name.indexOf('button') == 0)
            ///////////////////////////////////////////////
            // und events zuweisen.
            addEventsToImage(doc.images[i]);
    }
    if(typeof old_onload == 'function') old_onload();
}
///////////////////////////////////////////////////////////
// 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 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;
    if(old_onresize) old_onresize();
}
var old_onload   = window.document.onload;
var old_onresize = window.document.onresize;

///////////////////////////////////////////////////////////
// das Skript startet automatisch.

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

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