/*
 © 13.04.04 Struppi
 Mail: struebig@gmx.net
 URL: http://home.arcor.de/struebig/js/thumb/

 Beschreibung:
 -------------
 Thumbnails automatisch mit JS einbinden.

 Einbinden:
 ----------
 Die im HTML eingebundenen Thumbnails, werden mit der Klasse 'thumb'
 ausgezeichnet. Außerdem muss der Dateiname ein Unterstrich (_)
 enthalten. Dieser trennt die Erweiterung für die Thumbnails.

 Wenn das grosse Bild den Namen "bild.jpg" hat, dann muss das
 Thumb "bild_XXX.jpg" heißen. Wobei "XXX" eine x-beliebige Zeichenfolge ist,
 z.b. "klein", "thumb" oder nur "k".

 <img src="bild_klein.gif" class="thumb" title="Ein Bild!" alt="">

 Nach dem laden der Seite wird dieses Bild anklickbar und zeigt nach einem Klick
 die Datei 'bild.gif'
*/


/* globale Variabeln, für einige Einstellungen */

var thumb_className  = 'thumb';
var thumb_preload    = false;
var thumb_show_error = true;
var thumb_bgcolor    = '#FFFFE0';
var thumb_color      = '#0000C0';
var thumb_borderStyle= 'solid 1px #0000C0';


/* interne Variabeln */
var thumb_nameDiv    = 'showWin';
var thumb_waitTxt    = 'Bild wird geladen....';
var thumb_xtrMsg     = 'Klicken Sie auf das Bild um das Fenster zu schliessen';


/*
-----------------------------------------------------------
 thumb_ini()
 Initialaierung muss nach onload aufgerufen werden.
-----------------------------------------------------------
*/
function thumb_ini(d)
{
    var doc = window.document;
    for(var i = 0; i < doc.images.length;i++)
         if(doc.images[i].className == thumb_className) setAsThumb(doc.images[i]);
}
/*
-----------------------------------------------------------
 setAsThumb(img)
 bereitet das Image vor.
-----------------------------------------------------------
*/
function setAsThumb(img)
{
    if(!img) return;

    // Den Namen des grossen Bildes zusammen bauen.
    // Die Zeichen zwischen _ und . ausschneiden.
    var src = img.src;
    src = src.substring(0, src.lastIndexOf('_')) // alles vor _
    + src.substring(src.lastIndexOf('.')); // und nach .

    // Das grosse Bild integrieren
    img.thumbSrc = src;
    img.style.cursor = document.all ? 'hand' : 'pointer';
    img.onclick = showPic; // onclick Event
    if(thumb_preload) loadPic(img);
}

function loadPic(pic)
{
    pic.thumb = new Image();
    pic.thumb.src = pic.thumbSrc;
    pic.thumb.title = pic.title || '- kein Titel -';

    pic.thumb.onload = show_pic;
    pic.thumb.onerror = thumb_fehler;

    return null;
}
/*
-----------------------------------------------------------
 thumb_fehler()
-----------------------------------------------------------
*/
function thumb_fehler(img)
{
    thumb_hideDiv();
    alert( 'Das Bild:\n'
           + this.src
           + '\n\nwurde nicht gefunden.'
    );
    this.show = false;
    return false;
}
/*
-----------------------------------------------------------
 showPic()
 Nach dem onload ein Fenster öffnen
-----------------------------------------------------------
*/
function showPic()
{
    if( typeof this.thumb != 'undefined') thumb_show(this.thumb);

    /*
    thumb_hideDiv(thumb_nameDiv);

    thumb_center(thumb_nameMsg);
    thumb_showDiv(thumb_nameMsg);
    */
    thumb_wait();

    this.thumb = new Image();
    this.thumb.title = this.title  || '';
    this.thumb.onload = function () {thumb_show(this); };
    this.thumb.onerror = thumb_fehler;
    this.thumb.src = this.thumbSrc;

}
function thumb_wait()
{
    var obj = getObjById(thumb_nameDiv);
    obj.obj.innerHTML = thumb_waitTxt;
    obj.display('block');
    window.setTimeout("thumb_center()", 1);
}
function thumb_show(pic)
{
    var obj = getObjById(thumb_nameDiv);
    obj.obj.innerHTML = thumb_getHtml(pic);
    obj.width(pic.width + 30);

    window.setTimeout("thumb_center()", 1);
}
/*
-----------------------------------------------------------
 thumb_getHtml()
-----------------------------------------------------------
*/
function thumb_getHtml(img)
{
    return '<img onclick="thumb_hideDiv()" src="' + img.src + '"'
    + ' alt="' + img.alt + '"'
    + ' title="' + img.title + '"'
    + ' >'
    + '<div style="'
    + 'width:' + img.width + 'px;'
    + 'font-size:17px;font-family:arial;'
    + 'color:#0000C0;background-color:#FFFFE0;'
    + 'padding:0;margin:0;'
    + '">'
    + img.title
    + '<br><small>' + thumb_xtrMsg + '</small>' 
    + '</div>'
    ;
}
addDiv();
window.onload = thumb_ini;


/*
-----------------------------------------------------------

 Zusatzfunktionen rund um den Anzeige Layer.

-----------------------------------------------------------
*/
function thumb_showDiv()
{
    var obj = getObjById(thumb_nameDiv);
    if(!obj) return alert('Fehler' + id);
    obj.display('block');
}
function thumb_hideDiv(id)
{
    var obj = getObjById(thumb_nameDiv);
    if(!obj) return alert('Fehler' + id);
    obj.display('none');
}
function thumb_center(id)
{
    var obj = getObjById(thumb_nameDiv);
    if(!obj) return alert('Fehler' + id);

    var win = getWinSize();
    var scroll = pageOffset();

    var left = parseInt((win.width / 2) - (obj.width() / 2) + scroll.left / 2);
    var top = parseInt((win.height / 2) - (obj.height()  / 2) + scroll.top );

    dummy('test', 'center:' + left + " x " + top
    + '\nwin: ' + win.width + 'x' + win.height
    + '\nsize: ' + obj.width() + 'x' + obj.height()
    );
    //s.left = c.left + 'px';
    //s.top = c.top + 'px';
    obj.moveTo(top, left);

}

function dummy() {}


/////////////////////////////////
// Ausgabe der nötigen DIVs
function addDiv()
{
   document.write(
   '<div id="' + thumb_nameDiv + '"'
   + ' class="draggableElement"'
   + ' style="'
   + 'margin:0;padding:5px;'
   + 'border:' +  thumb_borderStyle + ';'
   + 'color:' + thumb_color + ';'
   + 'background-color:' + thumb_bgcolor + ';'
   + 'position:absolute;display:none;'
   + 'text-align:center;'
   + '">'
   + '</div>'
   );

}

function Print(id, text)
{
    var obj = getObjById(id);
    obj.obj.innerHTML = text;
}