var photoboxInstance = new Array();
var photoboxFiles = new Array();
var photoboxMouseover = false;
var photoboxMouseout = false;

// Must be Integer
var photoboxWidth = 700;
var photoboxHeight = 540;

function showPhotobox(galID)
{
    photoboxMouseover = false;
    photoboxMouseout = false;

    if(typeof photoboxInstance[galID] == "undefined")
    {
        createPhotoboxDiv(galID);
        makePhotoboxInstance(galID);
    }

    if (showPhotobox.arguments.length >= 2) {
        photoboxInstance[galID].setImage(showPhotobox.arguments[1]);
    } else {
        photoboxInstance[galID].setImage(0);
    }

    photoboxInstance[galID].show();

    //resetPhotoboxPosition(galID);
}


function resetPhotoboxPosition(galID)
{
    var x,y;
    if (self.pageYOffset) // all except Explorer
    {
        x = self.pageXOffset;
        y = self.pageYOffset;
    }
    else if (document.documentElement && document.documentElement.scrollTop)
        // Explorer 6 Strict
    {
        x = document.documentElement.scrollLeft;
        y = document.documentElement.scrollTop;
    }
    else if (document.body) // all other Explorers
    {
        x = document.body.scrollLeft;
        y = document.body.scrollTop;
    }

    //var newLeft = Math.floor(((YAHOO.util.Dom.getViewportWidth() / 2) - (imgElem.width / 2)) + x);
    //var newTop = Math.floor(((YAHOO.util.Dom.getViewportHeight() / 2) - (imgElem.height / 2)) + y);
    var newLeft = 100 + x;
    var newTop = 100 + y;

    var newWidth = photoboxWidth;
    var newHeight = photoboxHeight;

    YAHOO.util.Dom.setXY("photobox"+galID, [newLeft, newTop]);
    YAHOO.util.Dom.setStyle("photobox"+galID, "width", newWidth + "px");
    YAHOO.util.Dom.setStyle("photobox"+galID, "height", newHeight + "px");
}

function resetPhotoboxImageStyle(wd, ht)
{
    var newImgMargin = Math.round(((photoboxHeight - 60) - ht) / 2);
    var ret = ""+ newImgMargin +"px 0px "+ newImgMargin +"px 0px";
    return ret;
}

function createPhotoboxDiv(galID)
{
    var tmp;
    // Head
    var head_div = document.createElement("div");
    head_div.className = 'hd';
        tmp = document.createElement("div");
        tmp.className = 'lt';
    head_div.appendChild(tmp);

        tmp = document.createElement("span");
        tmp.id = 'photobox'+galID+'_title';
    head_div.appendChild(tmp);

        tmp = document.createElement("div");
        tmp.className = 'rt';
    head_div.appendChild(tmp);

    // Body
    var body_div = document.createElement("div");
    body_div.className = 'bd';
        tmp = document.createElement("div");
        tmp.id = 'photobox'+galID+'_bigPrev';
        tmp.className = 'bigButtons';
        tmp.style.left = '0px';
    body_div.appendChild(tmp);

        tmp = document.createElement("img");
        tmp.id = 'photobox'+galID+'_img';
        tmp.src = 'gfx/blank.gif';
    body_div.appendChild(tmp);

        tmp = document.createElement("div");
        tmp.id = 'photobox'+galID+'_bigNext';
        tmp.className = 'bigButtons';
        tmp.style.right = '0px';
    body_div.appendChild(tmp);

    // Main
    var main_div = document.createElement("div");
    main_div.id = 'photobox'+galID;
    main_div.style.display = 'none';

    main_div.appendChild(head_div);
    main_div.appendChild(body_div);

    document.body.appendChild(main_div);
}

function makePhotoboxInstance(galID)
{
    // BEGIN PHOTOBOX SUBCLASS //
    YAHOO.widget.PhotoBox = function(el, userConfig) {
        if (arguments.length > 0) {
            YAHOO.widget.PhotoBox.superclass.constructor.call(this, el, userConfig);
        }
    }

    // Inherit from YAHOO.widget.Panel
    YAHOO.extend(YAHOO.widget.PhotoBox, YAHOO.widget.Panel);

    // Define the CSS class for the PhotoBox
    YAHOO.widget.PhotoBox.CSS_PHOTOBOX = "photobox";

    // Define the HTML for the footer navigation
    YAHOO.widget.PhotoBox.NAV_FOOTER_HTML = "<img src=\"/gfx/blank.gif\" class=\"back\" id=\"photobox"+ galID +"_back\" /><img src=\"/gfx/blank.gif\" class=\"next\" id=\"photobox"+ galID +"_next\" />";

    // Initialize the PhotoBox by setting up the footer navigation
    YAHOO.widget.PhotoBox.prototype.init = function(el, userConfig) {
        YAHOO.widget.PhotoBox.superclass.init.call(this, el);
        
        this.beforeInitEvent.fire(YAHOO.widget.PhotoBox);

        YAHOO.util.Dom.addClass(this.innerElement, YAHOO.widget.PhotoBox.CSS_PHOTOBOX);
        
        if (userConfig) {
            this.cfg.applyConfig(userConfig, true);
        }
        
        this.setFooter(YAHOO.widget.PhotoBox.NAV_FOOTER_HTML);
        
        this.renderEvent.subscribe(function() {

            YAHOO.util.Event.addListener(this.id + "_back", "mousedown", this.back, this, true);
            YAHOO.util.Event.addListener(this.id + "_next", "mousedown", this.next, this, true);

            YAHOO.util.Event.addListener("photobox"+galID+"_bigPrev", "mousedown", this.back, this, true);
            YAHOO.util.Event.addListener("photobox"+galID+"_bigNext", "mousedown", this.next, this, true);

        }, this, true);

        this.initEvent.fire(YAHOO.widget.PhotoBox);
    };

    // Set up the PhotoBox's "photos" property for setting up the list of photos
    YAHOO.widget.PhotoBox.prototype.initDefaultConfig = function() {
        YAHOO.widget.PhotoBox.superclass.initDefaultConfig.call(this);
        
        this.cfg.addProperty("photos", { handler:this.configPhotos, suppressEvent:true });
    };

    // Handler executed when the "photos" property is modified
    YAHOO.widget.PhotoBox.prototype.configPhotos = function(type, args, obj) {
        var photos = args[0];

        if (photos) {
            this.images = [];

            if (! (photos instanceof Array)) {
                photos = [photos];
            }

            this.currentImage = 0;

            if (photos.length == 1) {
                this.footer.style.display = "none";
            }
        }
    };

    // Sets the current image displayed in the PhotoBox to the corresponding image in the photo dataset,
    // and determines whether back and forward arrows should be diplsayed, based on the position in the dataset
    YAHOO.widget.PhotoBox.prototype.setImage = function(index) {
        var photos = this.cfg.getProperty("photos");

        if (photos) {
            if (! (photos instanceof Array)) {
                photos = [photos];
            }

            this.currentImage = index;
            var photo = photos[index];

            if (index == 0) {
                YAHOO.util.Dom.setStyle([this.id + "_back", "photobox"+galID+"_bigPrev"], "display", "none");
            } else {
                YAHOO.util.Dom.setStyle([this.id + "_back", "photobox"+galID+"_bigPrev"], "display", "block");
            }

            if (index == (photos.length-1)) {
                YAHOO.util.Dom.setStyle([this.id + "_next", "photobox"+galID+"_bigNext"], "display", "none");
            } else {
                YAHOO.util.Dom.setStyle([this.id + "_next", "photobox"+galID+"_bigNext"], "display", "block");
            }

            // Vorheriges und naechstes Bild preloaden
            if(typeof photos[index - 1] != "undefined" && typeof this.images[index - 1] == "undefined")
            {
                var photopre1 = photos[index - 1];
                var img_photopre1 = new Image();
                img_photopre1.src = photopre1.src;
            }
            if(typeof photos[index + 1] != "undefined" && typeof this.images[index + 1] == "undefined")
            {
                var photopre2 = photos[index + 1];
                var img_photopre2 = new Image();
                img_photopre2.src = photopre2.src;
            }

            // Bild initialisieren



/*            var img_pre = new Image();
            img_pre.src = photo.src;
            img_pre.title = photo.caption;
            img_pre.id = this.id + "_img";*/
//             var newMargin = resetPhotoboxImageStyle(photo.PHP_width, photo.PHP_height);
//             if(this.browser != "safari") { img_pre.style.margin = newMargin; }
//             this.images[index] = img_pre;

            var img =  document.getElementById(this.id + "_img");
            var title = document.getElementById(this.id + "_title");
            var newMargin = resetPhotoboxImageStyle(photo.PHP_width, photo.PHP_height);

            img.title = photo.caption;
            img.style.backgroundImage = 'url('+photo.src+')';
            img.style.margin = newMargin;
            img.style.width = photo.PHP_width;
            img.style.height = photo.PHP_height;

            title.innerHTML = photo.caption;

            // Alle Browser
//             var current = this.images[index];


            if (this.browser == "safari") {
                // Safari spezial
                var imgNode = document.createElement("IMG");
                imgNode.setAttribute("src", 'gfx/blank.gif');
                imgNode.setAttribute("title", photo.caption);
                imgNode.setAttribute("id", this.id+"_img");
                imgNode.setAttribute("style",
                    "margin: "+ newMargin +"; "
                    +"width: "+photo.PHP_width+"; "
                    +"height: "+photo.PHP_height+"; "
                    +"background-image: url("+photo.src+");"
                );

                img.parentNode.replaceChild(imgNode, img);
            }

            this.body.style.height = "auto";


        }
    };

    // Navigates to the next image
    YAHOO.widget.PhotoBox.prototype.next = function() {
        if (typeof this.currentImage == 'undefined') {
            this.currentImage = 0;
        }

        this.setImage(this.currentImage+1);
    };

    // Navigates to the previous image
    YAHOO.widget.PhotoBox.prototype.back = function() {
        if (typeof this.currentImage == 'undefined') {
            this.currentImage = 0;
        }

        this.setImage(this.currentImage-1);
    };

    // Overrides the handler for the "modal" property with special animation-related functionality
    YAHOO.widget.PhotoBox.prototype.configModal = function(type, args, obj) {
        var modal = args[0];

        if (modal) {
            this.buildMask();

            if (typeof this.maskOpacity == 'undefined') {
                this.mask.style.visibility = "hidden";
                this.mask.style.display = "block";
                this.maskOpacity = YAHOO.util.Dom.getStyle(this.mask,"opacity");
                this.mask.style.display = "none";
                this.mask.style.visibility = "visible";
            }

            if (! YAHOO.util.Config.alreadySubscribed( this.beforeShowEvent, this.showMask, this ) ) {
                this.beforeShowEvent.subscribe(this.showMask, this, true);
            }
            if (! YAHOO.util.Config.alreadySubscribed( this.hideEvent, this.hideMask, this) ) {
                this.hideEvent.subscribe(this.hideMask, this, true);
            }
            if (! YAHOO.util.Config.alreadySubscribed( YAHOO.widget.Overlay.windowResizeEvent, this.sizeMask, this ) ) {
                YAHOO.widget.Overlay.windowResizeEvent.subscribe(this.sizeMask, this, true);
            }
            if (! YAHOO.util.Config.alreadySubscribed( this.destroyEvent, this.removeMask, this) ) {
                this.destroyEvent.subscribe(this.removeMask, this, true);
            }
            this.cfg.refireEvent("zIndex");
        } else {
            this.beforeShowEvent.unsubscribe(this.showMask, this);
            this.beforeHideEvent.unsubscribe(this.hideMask, this);
            YAHOO.widget.Overlay.windowResizeEvent.unsubscribe(this.sizeMask);
        }
    };

    // Overrides the showMask function to allow for fade-in animation
    YAHOO.widget.PhotoBox.prototype.showMask = function() {
        if (this.cfg.getProperty("modal") && this.mask) {
            YAHOO.util.Dom.addClass(document.body, "masked");
            this.sizeMask();

            var o = this.maskOpacity;

            if (! this.maskAnimIn) {
                this.maskAnimIn = new YAHOO.util.Anim(this.mask, {opacity: {to:o}}, 0.25)
                YAHOO.util.Dom.setStyle(this.mask, "opacity", 0.25);
            }

            if (! this.maskAnimOut) {
                this.maskAnimOut = new YAHOO.util.Anim(this.mask, {opacity: {to:0}}, 0.25)
                this.maskAnimOut.onComplete.subscribe(function() {
                                                        this.mask.tabIndex = -1;
                                                        this.mask.style.display = "none";
                                                        this.hideMaskEvent.fire();
                                                        YAHOO.util.Dom.removeClass(document.body, "masked");
                                                      }, this, true);
                
            }
            this.mask.style.display = "block";
            this.maskAnimIn.animate();
            this.mask.tabIndex = 0;
            this.showMaskEvent.fire();
            this.mask.style.display = "block";

            this.showMaskEvent.fire();
        }
    };

    // Overrides the showMask function to allow for fade-out animation
    YAHOO.widget.PhotoBox.prototype.hideMask = function() {
        if (this.cfg.getProperty("modal") && this.mask) {
            this.maskAnimOut.animate();
//             this.mask.style.display = "none";
//             this.hideMaskEvent.fire();
//             YAHOO.util.Dom.removeClass(document.body, "masked");
        }
    };
    // END PHOTOBOX SUBCLASS //

    //function init()
    
        YAHOO.util.Dom.setStyle("photobox"+galID, "display", "block");

        var tmp = "";
        for(var i = 0; i < photoboxFiles[galID].length; i++)
        {
            if(i >= 1) { tmp = tmp + ', '; }
            tmp = tmp + '{src:"' + photoboxFiles[galID][i][0] + '",caption:"' + photoboxFiles[galID][i][1] + '",PHP_width:"' + photoboxFiles[galID][i][2] + '",PHP_height:"' + photoboxFiles[galID][i][3] + '"}';
        }
        tmp = '[' + tmp + ']';

        var bigButtons = ["photobox"+galID+"_bigPrev","photobox"+galID+"_bigNext"];
        YAHOO.util.Dom.setStyle(bigButtons, "width", Math.floor(photoboxWidth / 3)+"px");
        YAHOO.util.Dom.setStyle(bigButtons, "height", Math.floor(photoboxHeight - 60)+"px");
        YAHOO.util.Dom.setStyle(bigButtons, "opacity", 0.0);

        bigButtons_fullOpacity = function() {
            YAHOO.util.Dom.setStyle(bigButtons, "opacity", 0.0);
        }
        bigButtons_lightOpacity = function() {
            YAHOO.util.Dom.setStyle(bigButtons, "opacity", 0.16);
        }

//         YAHOO.util.Event.addListener(bigButtons, "mouseover", bigButtons_lightOpacity);
//         YAHOO.util.Event.addListener(bigButtons, "mouseout", bigButtons_fullOpacity);


        YAHOO.util.Event.addListener("photobox"+galID+"_mask", "click",
                                     function(){photoboxInstance[galID].hide()} );

        photoboxInstance[galID] = new YAHOO.widget.PhotoBox("photobox"+galID,
        {
            effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.45},
            fixedcenter: true,
            constraintoviewport: true,
            underlay:"none",
            close:true,
            visible:false,
            draggable: false,
            width: photoboxWidth+'px',
            height: photoboxHeight+'px',
            modal:true,
            photos: eval(tmp)
        } );

        photoboxInstance[galID].render();

    
}