var IMGX,IMGY,MINIMGX;
var ul,spanner,bilder,b;

function laden()
{
    IMGX = 200
    IMGY = 200
    MINIMGX = 100
    var newimg;
    
    ul = document.getElementById("oklist")
    spanner = ul.getElementsByTagName("span")
    bilder = document.getElementsByName("okbild")
    b = new Array()
    bb = new Array()

    for (i=0;i<bilder.length;i++)
    {
        //spanner[i].setAttribute("style","display:none");
        
        b[i] = new Bild(bilder[i]);
        b[i].obj.setAttribute("width",MINIMGX);
        b[i].obj.setAttribute("src",b[i].src);
    }
    
    for (i=0;i<b.length;i++)
    {
        newimg = document.createElement("img");
        newimg.setAttribute("src",b[i].src2);
        setStyle(newimg,"border:1px solid green;-moz-opacity:0; filter:alpha(opacity=0); opacity:0");
        //newimg.setAttribute("style","-moz-opacity:0; filter:alpha(opacity=0); opacity:0");
        newimg.setAttribute("class","zweitbild");
        newimg.setAttribute("className","zweitbild");
        newimg.setAttribute("alt","");
        newimg.setAttribute("width",MINIMGX);
        newimg.setAttribute("height",MINIMGX);
        bb[i] = newimg;
        if (typeof document.body.style.maxHeight != "undefined") {
            b[i].obj.parentNode.appendChild(bb[i]);
        }
    }

}

function mausbewegung(e)
{
    var pos = getCursorPosition(e)
    var topleft;
    var xdist; // horizontaldistanz
    var ydist; // vertikaldistanz
    var dist; // distanz
    var width; // distanz
    var opacity; //transparenz der Farbebene (0.0-1.0)
    
    for (i=0;i<bilder.length;i++)
    {
        topleft = getPosition(b[i].obj)
        ydist = Math.abs(topleft.y + IMGY/2 - pos.y);
        if (pos.x < topleft.x)
            xdist = Math.abs(topleft.x + IMGX/2 - pos.x);
        else
            xdist = 0;
        dist = Math.sqrt(xdist*xdist + ydist*ydist);
        width = Math.max(MINIMGX,Math.min(IMGX,(IMGX*IMGX)/Math.max(1,2*dist)))
        b[i].obj.setAttribute("width",width)
        bb[i].setAttribute("width",width)
        b[i].obj.setAttribute("height",width)
        bb[i].setAttribute("height",width)
        
        opacity = (width-MINIMGX)/(IMGX-MINIMGX)
        
        if (width == IMGX)
        {
            spanner[i].setAttribute("style","-moz-opacity:1; filter:alpha(opacity=100); opacity:1");
            //bb[i].setAttribute("style","-moz-opacity:1; filter:alpha(opacity=100); opacity:1");
            setStyle(bb[i],"-moz-opacity:1; filter:alpha(opacity=100); opacity:1");
            //b[i].obj.setAttribute("src",b[i].src2);
        }
        else
        {
            spanner[i].setAttribute("style","-moz-opacity:"+opacity+"filter:alpha(opacity="+eval(opacity*100)+"); opacity:"+opacity);
            //bb[i].setAttribute("style","-moz-opacity:"+opacity+"filter:alpha(opacity="+opacity*100+"); opacity:"+opacity);
            setStyle(bb[i],"-moz-opacity:"+opacity+"filter:alpha(opacity="+eval(opacity*100)+"); opacity:"+opacity);
            //b[i].obj.setAttribute("src",b[i].src);
        }
    }
}

// Bild-Objekt

function Bild(a_obj)
{
    this.obj = a_obj;
    this.src2 = this.obj.getAttribute("src");
    this.src = this.src2.replace(/_farbe.jpg/,"_grau.jpg");
}

// Doofer Hack für doofen Browser ...
function setStyle( object, styleText ) {
    if( object.style.setAttribute ) {
        object.style.setAttribute("cssText", styleText );
    }
    else {
        object.setAttribute("style", styleText );
    }
}


// Cursorposition bestimmen
function getCursorPosition(e) {
    e = e || window.event;
    var cursor = {x:0, y:0};
    if (e.pageX || e.pageY) {
        cursor.x = e.pageX;
        cursor.y = e.pageY;
    } 
    else {
        var de = document.documentElement;
        var b = document.body;
        cursor.x = e.clientX + 
            (de.scrollLeft || b.scrollLeft) - (de.clientLeft || 0);
        cursor.y = e.clientY + 
            (de.scrollTop || b.scrollTop) - (de.clientTop || 0);
    }
    return cursor;
}

//Objektposition bestimmen
function getPosition(element)
{
    var elem=element,x=0,y=0;
  
    while(elem.offsetParent && elem.offsetParent!=elem)
    {
        x+=elem.offsetLeft;
        y+=elem.offsetTop;
        elem=elem.offsetParent;
    }
    position=new Object();
    position.x=x;
    position.y=y;
    return position;
}

document.onload = laden()
document.onmousemove = mausbewegung