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

var prevNextDisplayStyle = 'block';
var buttonsEndless = false;
var loadingImage = false;

// Must be Integer
var photoboxWidth = 700;
var photoboxHeight = 540;
var contentHeightDrain = 60; // content height ist dann die photoboxHeight minus contentHeightDrain

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 - contentHeightDrain) - 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 = '#';
    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);
}

var photoboxNavHtml = "<img src=\"/common/spacer.gif\" class=\"back\" id=\"photobox{galID}_back\" /><img src=\"/common/spacer.gif\" class=\"next\" id=\"photobox{galID}_next\" />";

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 = photoboxNavHtml.replace(/\{galID\}/g, galID);

    // 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];
            }

            if (buttonsEndless && typeof photos[index] == 'undefined') {
                if (index < 0) {
                    index = photos.length - 1;
                } else {
                    index = 0;
                }
            }

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

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

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

            var currentImageNum = document.getElementById('currentImageNum');
            if (currentImageNum) {
                currentImageNum.innerHTML = index + 1;
            }

            var maxImageNum = document.getElementById('maxImageNum');
            if (maxImageNum) {
                maxImageNum.innerHTML = photos.length;
            }

            // 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.style.margin = newMargin;
            img.title = photo.caption;
            if (loadingImage) {
                img.onload = this.hideLoader;
            }
            img.src = photo.src;
            img.style.width = photo.PHP_width;
            img.style.height = photo.PHP_height;

            if (title) title.innerHTML = photo.caption;

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


            if (this.browser == "safari") {
                // Safari spezial
                var imgNode = document.createElement("IMG");
                if (loadingImage) {
                    imgNode.onload = this.hideLoader;
                }
                imgNode.setAttribute("src",photo.src);
                imgNode.setAttribute("title",photo.caption);
                imgNode.setAttribute("id",this.id+"_img");
                imgNode.setAttribute("style","margin: "+ newMargin +";");

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

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

    YAHOO.widget.PhotoBox.prototype.showLoader = function() {
        var el = document.getElementById('photoboxLoader');
        if (!el) {
            el = document.createElement("div");
            el.id = 'photoboxLoader';
            el.style.position = 'absolute';
            el.style.zIndex = 500;
            el.style.display = 'block';

            tmp = document.createElement("img");
            tmp.src = loadingImage;
            el.appendChild(tmp);

            document.body.appendChild(el);
            var refEl = document.getElementById(this.id + "_img");
            YAHOO.util.Dom.setX(el, YAHOO.util.Dom.getX(refEl) + ((photoboxWidth / 2) - 60));
            YAHOO.util.Dom.setY(el, YAHOO.util.Dom.getY(refEl) + ((photoboxHeight / 2) - 60));
        }

        el.style.display = 'block';
    };

    YAHOO.widget.PhotoBox.prototype.hideLoader = function() {
        var el = document.getElementById('photoboxLoader');
        if (el) {
            el.style.display = 'none';
        }
    };

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

        if (loadingImage) this.showLoader();

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

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

        if (loadingImage) this.showLoader();

        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].replace("'", "\\\'") + "',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 - contentHeightDrain)+"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();

    
}