var Gallery =
{
    fadeDuration: 750,
    
    setOpacity: function(targetElement, newOpacity)
    {
        if (typeof targetElement.style.opacity != "undefined") {
            targetElement.style.opacity = newOpacity / 10;
        }
        else if (typeof targetElement.style.filter != "undefined") {
            targetElement.style.filter = "alpha(opacity = " + newOpacity * 10 + ")";
        }
    },

    fadeIn: function(targetElement, op)
    {
        Gallery.setOpacity(targetElement, op);
        op++;
        if (op >= 10) {
            Gallery.setOpacity(targetElement, 10);
        }
        else {
            window.setTimeout(function() {
                Gallery.fadeIn(targetElement, op);
            }, Math.round(Gallery.fadeDuration / 10));
        }
    },

    hidePhoto: function()
    {
        var parent = (this.parentNode).parentNode;
        var grandparent = parent.parentNode;
        grandparent.removeChild(parent);
        return false;
    },

    showPhoto: function()
    {
        // creazione del contenitore principale
        var galleryContainer = document.createElement("div");
        galleryContainer.className = "gallery-container";
        galleryContainer.style.height = document.body.offsetHeight + "px";
        //galleryContainer.style.width = document.body.scrollWidth + "px";

        // creazione della maschera per coprire lo sfondo
        var mask = document.createElement("div");
        mask.className = "mask";
        mask.style.height = document.body.offsetHeight + "px";
        //mask.style.width = document.body.scrollWidth + "px";
        Gallery.setOpacity(mask, 9);

        // creazione del contenitore per l'immagine
        var photoContainer = document.createElement("div");
        photoContainer.className = "photo-container";

        // creazione dell'intestazione del contenitore
        var closeLink = document.createElement("a");
        closeLink.setAttribute("href", window.location.href);
        closeLink.appendChild(document.createTextNode("Chiudi"));
        closeLink.onclick = Gallery.hidePhoto;

        // creazione della foto selezionata
        var photo = document.createElement("img");
        //photo.setAttribute("src", this.parentNode.href); // spostato in fondo per IE
        photo.setAttribute("alt", this.alt);

        // creazione di un pannello di attesa
        // da implementare meglio
        /*var loading = document.createElement("div");
        loading.className = "loading";
        loading.appendChild(document.createTextNode("Caricamento dell'immagine in corso..."));
        document.body.appendChild(loading);*/

        // continua con l'esecuzione dello script soltanto quando la foto si è caricata completamente
        // si può migliorare lo script mostrando un'immagine animata durante il caricamento
        photo.onload = function() {

            // rimuove il pannello di attesa
            // da implementare meglio
            /*document.body.removeChild(loading);*/

            // aggiunge gli elementi alla pagina
            document.body.appendChild(galleryContainer);
            galleryContainer.appendChild(mask);
            galleryContainer.appendChild(photoContainer);
            photoContainer.appendChild(closeLink);
            photoContainer.appendChild(photo);

            // riduce eventualmente la larghezza delle foto troppo grandi
            var maxSize = 0.7; // larghezza massima (in percentuale dello schermo)
            if (photo.offsetWidth >= (document.body.scrollWidth * maxSize)) {
                var ratio = photo.offsetHeight / photo.offsetWidth;
                var newWidth = document.body.scrollWidth * maxSize;
                var newHeight = newWidth * ratio;
                photo.style.width = newWidth + "px";
                photo.style.height = newHeight + "px";
            }

            // imposta la posizione del contenitore
            var bodyWidth = document.body.scrollWidth;
            var imgWidth = photo.offsetWidth;
            var left = (bodyWidth / 2) - (imgWidth / 2);
            var top = "2em";
            photoContainer.style.left = left + "px";
            photoContainer.style.top = top;

            // mostra la foto con una dissolvenza
            Gallery.fadeIn(photoContainer, 0);

            // imposta il focus dell'utente sul link di chiusura della foto
            closeLink.focus();
        }

        photo.setAttribute("src", this.parentNode.href); // spostato in fondo per IE

        return false;
    },

    init: function()
    {
        var container = document.getElementById("photo-frame");
        if (container) {
            var photos = container.getElementsByTagName("img");
            for (var i = 0; i < photos.length; i++) {
                photos[i].onclick = Gallery.showPhoto;
            }
        }
    }
};

Core.start(Gallery.init);