var images = new Array()

//globale Variablen
var stat = "start" //Status der Animation:
//"stop" oder "start"
var akt = 0 //aktuell angezeigtes Bild
var lst = 0 //zuletzt angezeigtes Bild
var ID = 0 //ID des letzten Timeouts
var delay = 4000 //Verzögerung in Millisekunden

var preload_big = new Array(); // die großen Bilder im Cache laden
var preload_small = new Array(); // die kleinen Bilder im Cache laden


function createDia(image_arr, width, height, icnMargin, positionierung, innerMargin) {
    images = image_arr;
    
    for (var i = 0; i < images.length; i++) {
        preload_big[i] = new Image();
        preload_big[i].src = images[i][0];
        preload_small[i] = new Image();
        preload_small[i].src = images[i][1];
    }

    var str = '<div style="width: ' + width + '; height: ' + height + ';position:relative;">' +
                '<div style="z-index:0; width: ' + width + '; height: ' + height + ';" >' +
				    '<a href="' + images[0][2] + '" target="' + images[0][3] + '" id="bigprimglink" >' +
				        '<img src="' + preload_big[0].src + '" alt="" id="bigprimg" style="border: none;" onmouseover="javascript:stop();" onmouseout="javascript:pause();" />' +
				    '</a>' +
				'</div>';

    str += '<div id="icn" style="z-index:6;position:absolute; '+ positionierung +'">' +
           '<div style="margin: '+ innerMargin +'">';

    for (var i = 0; i < images.length; i++) {
        str += '<a href="' + images[i][2] + '" target="' + images[i][3] + '">';
        str += '<img style="border: thin solid #000000;margin: ' + icnMargin + ';" id="sml' + i + '" src="' + preload_small[i].src + '" alt="" onMouseOver="javascript:display(' + i + ');" onmouseout="javascript:pause();" style="cursor:pointer" />';
        str += '</a>';
    }
    str += '</div>';

   str +=        '</div>' +
        '</div>';					    
	
	document.write(str);
	document.getElementById("sml0").style.border = "thin solid red";
    start();
}

//Funktionen
function start() {
    //Funktion zum Starten/Fortfahren der Diashow
    if (stat == "start") {
        lade();
    }
}

function lade() {
    if (stat == "start")
        ID = setTimeout(vor, delay);
}

function stop() {
    //Funktion zum Anhalten/Pausieren der Diashow
    stat = "stop";
    clearTimeout(ID);
}

function vor() {
    //Funktion zum Vorspringen in der Animation
    stat = "start";
    clearTimeout(ID)

    for (var i = 0; i < images.length; i++) {
        if (i == akt)
            document.getElementById("sml" + akt).style.border = "thin solid red";
        else
            document.getElementById("sml" + i).style.border = "thin solid #000000";
    }

    document.getElementById("bigprimg").src = preload_big[akt].src;
    document.getElementById("bigprimglink").href = images[akt][2];
    document.getElementById("bigprimglink").target = images[akt][3];    

    lst = akt;
    akt += 1

    if (akt >= images.length) {
        akt = 0;
    }
   
    start();
}

function pause() {
    clearTimeout(ID);
    ID = setTimeout(vor, delay);

}

function display(obj) {
    stat = "stop";
    clearTimeout(ID);

    for (var i = 0; i < images.length; i++) {
        if (i == obj)
            document.getElementById("sml" + obj).style.border = "thin solid red";
        else
            document.getElementById("sml" + i).style.border = "thin solid #000000";
    }

    document.getElementById("bigprimg").src = preload_big[obj].src;
    document.getElementById("bigprimglink").href = images[obj][2];
    document.getElementById("bigprimglink").target = images[obj][3];

    akt = obj;
}