window.onload = function () {
    window.articleGalery = document.getElementById( "galery" );
    window.articleText = document.getElementById( "article-text" );
    window.articleInfo = document.getElementById( "article-info" );
    window.infoButton =  document.getElementById( "info-button" );
    window.galeryButton =  document.getElementById( "galery-button" );
    window.textButton =  document.getElementById( "text-button" );
}

        function getArticleBody () {
            return document.getElementById( "article-body" );
        }

        function showInfo( ) {
            if ( window.articleText ) {
                window.articleText.style.display = "none";
            }
            if ( window.textButton ) {
                window.textButton.setAttribute( "class" , "text-button" );
                window.textButton.setAttribute( "title" , "Text anzeigen" );
            }
            if ( window.galeryObj ) {
                window.galeryObj.dispose();
            }
            if ( window.galeryButton ) {
                window.galeryButton.setAttribute( "class" , "galery-button" );
                window.galeryButton.setAttribute( "title" , "Bildergalerie anzeigen" );
            }
            if ( window.articleInfo ) {
                window.articleInfo.style.display = "block";
            }
            if ( window.infoButton ) {
                window.infoButton.setAttribute( "class" , "info-button-disabled" );
                window.infoButton.setAttribute( "title" , "momentane Ansicht: Eintragsübersicht" );
            }    
        }

        function showText( ) {
            if ( window.galeryObj ) {
                window.galeryObj.dispose();
            }
            if ( window.galeryButton ) {
                window.galeryButton.setAttribute( "class" , "galery-button" );
                window.galeryButton.setAttribute( "title" , "Bildergalerie anzeigen" );
            }
            if ( window.articleInfo ) {
                window.articleInfo.style.display = "none";
            }
            if ( window.infoButton ) {
                window.infoButton.setAttribute( "class" , "info-button" );
                window.infoButton.setAttribute( "title" , "Eintragsübersicht anzeigen" );
            }        
            if ( window.articleText ) {
                window.articleText.style.display = "block";
            }
            if ( window.textButton ) {
                window.textButton.setAttribute( "class" , "text-button-disabled" );
                window.textButton.setAttribute( "title" , "momentane Ansicht: Text" );
            }
        }

        function showGalery( data ) {
        
            if ( window.articleText ) {
                window.articleText.style.display = "none";
            }
            if ( window.textButton ) {
                window.textButton.setAttribute( "class" , "text-button" );
                window.textButton.setAttribute( "title" , "Text anzeigen" );
            }
            if ( window.articleInfo ) {
                window.articleInfo.style.display = "none";
            }
            if ( window.infoButton ) {
                window.infoButton.setAttribute( "class" , "info-button" );
                window.infoButton.setAttribute( "title" , "Eintragsübersicht anzeigen" );
            }
            if ( window.galeryObj ) {
                window.galeryObj.show();
            } else if ( window.articleGalery ) {
                window.galeryObj = new Galery( galeryData, window.articleGalery);
            }
            if ( window.galeryButton ) {
                window.galeryButton.setAttribute( "class" , "galery-button-disabled" );
                window.galeryButton.setAttribute( "title" , "momentane Ansicht: Bildergalerie" );
            }
        }
        
        function Galery( data , element ) {
            this.data = data;
            this.element = element;
            this.idx = 0;
            this.auto = false;
            this.maxPicWidth = 0;
            this.maxPicHeight = 0;
            
            this.imageTitle = document.getElementById( this.element.id + "ImageTitle" ) ;
            this.imageDescription = document.getElementById( this.element.id + "ImageDescription") ;
            this.previousHandle= document.getElementById( this.element.id + "Previous") ;
            this.nextHandle = document.getElementById( this.element.id + "Next") ;
            this.autoHandle = document.getElementById( this.element.id + "Auto" );
            this.currentPosLabel = document.getElementById( this.element.id + "CurrentPosLabel" );
            this.pic = this.element.getElementsByTagName( "img" )[this.idx];
            this.imageContainer = document.getElementById("galeryImageContainer");
            
            this.init = function() {
                
                for ( var i = 0; i < this.data.length; i++ ) {
                    if ( this.maxPicWidth < this.data[i].width ) {
                        this.maxPicWidth = this.data[i].width;
                    }
                }
                this.pic.parentNode.style.width = this.maxPicWidth + "px";
                
                for ( var i = 0; i < this.data.length; i++ ) {
                    if ( this.maxPicHeight < this.data[i].height ) {
                        this.maxPicHeight = this.data[i].height;
                    }
                }
                
                this.show();
            };
            
            this.updateDisplay = function() {
                this.pic.src = data[this.idx].src;
                if (data[this.idx].width > 500) {
                  this.imageContainer.setAttribute("style", data[this.idx].width + "px;float: none;");
                } else {
                  this.imageContainer.setAttribute("style", data[this.idx].width + "px;float: left;");
                }
                this.pic.width = data[this.idx].width;
                this.pic.height = data[this.idx].height;
                var hPad = (this.maxPicWidth - data[this.idx].width)/2;
               // this.pic.style.marginLeft = hPad + "px";
                if ( this.imageTitle ) {
                    if ( this.data[this.idx].title ) {
                        this.imageTitle.innerHTML = this.data[this.idx].title;
                    } else {
                        this.imageTitle.innerHTML = "";
                    }
                }
                if ( this.imageDescription ) {
                    if ( this.data[this.idx].description && this.data[this.idx].description != "null") {
                        this.imageDescription.innerHTML = this.data[this.idx].description;
                    } else {    
                        this.imageDescription.innerHTML = "";
                    }
                }
                
                if ( this.idx >= this.data.length - 1 ) {
                    this.nextHandle.style.visibility ="hidden";
                } else {
                    this.nextHandle.style.visibility ="visible";
                }
                if ( this.idx <= 0 ) {
                    this.previousHandle.style.visibility ="hidden";
                } else {
                    this.previousHandle.style.visibility ="visible";
                }
                if ( this.currentPosLabel ) {
                    this.currentPosLabel.innerHTML = (this.idx + 1 )+ "";
                }


            };
            
            this.next = function() {
                this.idx++;
                if ( this.idx >= this.data.length ) {
                    this.idx = this.data.length-1;
                }
                this.updateDisplay();
            };
            this.previous = function() {
                this.idx--;
                if ( this.idx <= 0 ) {
                    this.idx = 0;
                }
                this.updateDisplay();
            };
            this.first = function() {
                this.idx = 0;
                this.updateDisplay();
            };
            this.last = function() {
                this.idx = this.data.length -1 ;
                this.updateDisplay();
            };
            this.dispose = function () {
                this.element.style.display = "none";
                var body = document.getElementById("body");
                body.style.height = "auto";
                if ( this.auto == true ) {
                    this.toggleAuto();
                }
            };
            this.show = function () {
                
                this.element.style.visibility = "hidden";
                this.element.style.display = "block";
                this.element.style.visibility = "visible";
                this.updateDisplay();
                this.element.style.display = "block";
            };

            this.toggleAuto = function() {
                if ( this.auto == true ) {
                    clearTimeout( this.tt );
                    if ( this.autoHandle ) {
                        this.autoHandle.innerHTML = "automatisch";
                        this.autoHandle.setAttribute( "title", "automatischer Bildlauf starten" );
                    }
                    this.auto = false;
                } else {
                    this.auto = true;
                    if ( this.again || this.idx >= this.data.length -1) {
                        this.idx = -1;
                        this.again = null;
                    } else {
                        this.idx--;
                    }
                    if ( this.autoHandle ) {
                        this.autoHandle.innerHTML = "stoppen";
                        this.autoHandle.setAttribute( "title", "automatischer Bildlauf stoppen" );
                    }
                    this._autoNext();
                }
            };

            this._autoNext = function() {
                if ( this.auto == true ) {
                    if ( this.idx < this.data.length - 1 ) {
                        this.next();
                        if ( this.idx < this.data.length - 1 ) {
                            var _this = this;
                            this.tt = setTimeout( function() { _this._autoNext(); } , 6000 );
                        } else {
                            if ( this.autoHandle ) {
                                this.autoHandle.innerHTML = "erneut starten";
                            }
                            this.again = true;
                            this.auto = false;
                        }
                    }
                }
            };
            
            this.init();
            return this;
        }