/* Initializes gallery stuff */
function
initGallery() {
    /* Get all links to pictures: */
    var pics = document.getElementById("gallery").getElementsByTagName("a");

    /* The very first picture is the big one which remains unchanged: */
    for(var i=1; i<pics.length; i++) { /* loop through pictures */
        /* Extract sources of the large and "thumbnail" image: */
        var img_big = pics[i].getAttribute("href");
        var img_sml = img_big.replace(/_gross/, '');

        /* Rewrite href attribute to call JS function: */
        pics[i].href = "javascript:flipImg('"+ img_sml +"', '"+ img_big +"')";

        /* Initialize the first image: */
        if(i==1) {
            flipImg(img_sml, img_big);
        }
    }
}

/* Flips the gall_mainpic and the href attribute of the gall_mainlink. */
function
flipImg(thumb, large) {
    /* Switch link of the gall_mainlink so it points to the new one: */
    document.getElementById("gall_mainlink").href = 
        "javascript:popPic('" + large + "');"

    /* Switch thumbnail; Supposes that blend.js file is loaded to make 
     * a nifty effect: */
    var speed   = 3;
    var timer   = 0;

    // Set the current image as background:
    document.getElementById("gall_mainlink").style.backgroundImage =
        "url(" + document.getElementById("gall_mainpic").src + ")";

    // Fade the image to transparent:
    changeOpacity(0, "gall_mainpic");

    // Set the new image (yet transparent):
    document.getElementById("gall_mainpic").src = thumb;

    // Fade in the new image:
    for(var i=0; i<=100; i++) {
        setTimeout("changeOpacity(" + i + ",'gall_mainpic')", timer * speed);
        timer++;
    }

}

function
popPic(url) {
    // Initialise the image:
    var picture = new Image();

    // Load the image by adding an onload handler:
    window.status = "Bild wird geladen..."; // Set status to inform user
    picture.onload = function() {
        // After the image has been loaded, calculate the height and width of
        // the popup:
        var width   = picture.width + 40;
        var height  = picture.height+ 40;

        // Calculate the screen coordinates where the window should open:
        x = screen.availWidth/2  - width/2;
        y = screen.availHeight/2 - height/2;

        var popupWindow = window.open("about:blank", "", "width=" + width + 
            ",height=" + height + ",left=" + x + ",top=" + y + ",screenX=" + x +
            ",screenY=" + y);

        with(popupWindow.document) {
            writeln("<html>"
                +   "   <head>"
                +   "   <title>Ma&szlig;- und &Auml;nderungsschneiderei</title>"
                +   "   <link rel=\"stylesheet\" type=\"text/css\" "
                +   "       media=\"screen\" href=\"styles/bibe.css\" />"
                +   "   </head>"
                +   "   <body>"
                +   "       <a href=\"javascript:window.close();\">"
                +   "           <img src=\"" + url + "\" alt=\"\" border=\"0\""
                +   "            />"
                +   "       </a>"
                +   "   </body>"
                +   "</html>");
        }
    }

    // The picture source has to be set AFTER the definition of the onload
    // function so the user can click multiple times on the same image to pop it
    // up. Would the img-source be defined BEFORE the definition of the onload
    // function, then clicking multiple times on the same img to popup is not
    // possible. ??????????????????????????????????
    picture.src = url;

    window.status = "Bild wurde geladen.";
}

addLoadEvent(initGallery);

