var galerie = Class.create();

galerie.prototype = {

         initialize : function(){

              var optionIndex = 0;

              this.options = Object.extend({

                 id       :         "galerie",
                 parent:            document.body,
                 title:             " ",
                 maxWidth:          640

               }, arguments[optionIndex] || {});

               this.options.object = this;
               this._updateImageList();

         },


         _updateImageList: function(){

            this.galerie = $$("div.galerie img");
            this.galerie.invoke('observe','click',this._begin.bind(this));


         },


         _begin : function(event){

             var element = Event.element(event);

             b_src = element.src;
             b_src = b_src.replace(/_t/,"");



             fenster = new modalWindow( {width:'100px',height:'100px',showEffect:Effect.Appear,hideEffect:Effect.Fade,className: 'alphaimage', destroyOnClose: true, title: b_src} );

             fenster.setHTMLContent("<img style=\"margin-top:40px;\" src=\"bilder/ajax-loader.gif\" alt=\"\" border=\"0\" width=\"16\" height=\"16\">");


                  this.options.bild     = new Image();
                  this.options.bild.src = b_src ;


                  if (this.options.bild.complete == true) { this._setContent(); }



                   x = this.options.object;

                       this.options.bild.onload  = function() { x._setContent();}

                       this.options.bild.onerror = function() {  fenster.setHTMLContent("Bild konnte nicht geladen werden!");      }





         },

         _setContent : function() {


                      var b_width = this.options.bild.width ;
                      var b_height= this.options.bild.height;


                      fenster.setSize(b_width,b_height);


                      fenster.setHTMLContent("<img id=\"bildabc\" class=\"b_center\" width='"+b_width+"' height='"+b_height+"' src='"+this.options.bild.src+"' alt=\"\" border=\"0\">");




         }

}





var modalWindow = Class.create();

    modalWindow.hasEffectLib = (typeof Effect != 'undefined');


modalWindow.prototype = {

         initialize : function(){

              var optionIndex = 0;

              this.options = Object.extend({

                 id       :         "modalwindow",
                 overlayId:         "overlay_modal",
                 className:         "alphacube",
                 version:           "default",
                 parent:            document.body,
                 title:             "&nbsp;",
                 url:               null,
                 width:             640,
                 height:            480,
                 destroyOnClose:    true,

                 showEffect:        (modalWindow.hasEffectLib ? Effect.Appear : Element.show),
                 hideEffect:        (modalWindow.hasEffectLib ? Effect.Fade : Element.hide),
                 showEffectOptions: { duration: 0.5 },
                 hideEffectOptions: { duration: 0.5 },

                 resizable:         false,
                 closable:          true,
                 minimizable:       false,
                 maximizable:       false,
                 draggable:         false,
                 zIndex:            100



               }, arguments[optionIndex] || {});

               this.overlayOpacity = 0.6;

               if (this.options.parent != document.body) this.options.parent = $(this.options.parent);

               this.element     = this._createWindow(this.options.id);
               this.element.win = this;

               this.close   = $(this.element.id + "_close");
               this.content = $(this.element.id + "_content");
               this.window = $(window);


               this.resize = this._recenter.bindAsEventListener(this);


               Event.observe(this.close, "click", this._close.bind(this));
               Event.observe(this.window, "scroll", this.resize);
               Event.observe(this.window, "resize", this.resize);

               this._getWindowBorderSize();

               this.width   = this.options.width;
               this.height  = this.options.height;
               this.visible = false;
               this.setSize(this.options.width, this.options.height);

               this._center(this.element);


               this.element.setStyle({zIndex: this.options.zIndex});

               this.show();

               this._recenter(this.element);

         },

         destroy: function() {
               //this._notify("onDestroy");

               this.close.stopObserving();

               Event.stopObserving(this.window, "scroll", this.resize);
               Event.stopObserving(this.window, "resize", this.resize);

               this.element.parentNode.removeChild(this.element);


         },




          getId:      function() {  return this.element.id;   },
          getSize:    function() {  return {width: this.width, height: this.height};  },
          getContent: function() {  return this.content;  },
          getURL:     function() {  return this.options.url ? this.options.url : null;   },


          show:       function() {

                         this._disableScreen();

                         //Effect.Appear(this.element, { duration: 0.2 });

                         //this.element.show();


                         this.options.showEffect(this.element, this.options.showEffectOptions);



          },


          _close:     function() {


                         // this.element.hide();

                         var destroyFunc = this.destroy.bind(this);

                         if ( this.options.destroyOnClose ) this.options.hideEffectOptions.afterFinish = function() {destroyFunc() }

                         this.options.hideEffect(this.element, this.options.hideEffectOptions);

                         this._enableScreen();



           },

         //####################################

         _round: function(val, round) {   return round == 1 ? val  : val = Math.floor(val / round) * round;     },


         setSize: function(width, height, useEffect) {

               width = parseFloat(width); height = parseFloat(height);
               this.width = width;  this.height = height; var e = this.element;

               e.setStyle({width: width + this.widthW + this.widthE + "px"})
               e.setStyle({height: height  + this.heightN + this.heightS + "px"})

               var content = $(this.element.id + '_content');

                   content.setStyle({height: height  + 'px'});
                   content.setStyle({width: width  + 'px'});

               this._recenter();


         },

         setLocation: function(top, left) {

             var e = this.element;  e.setStyle({top: top + 'px'});     e.setStyle({left: left + 'px'});

          },


          _center: function(window) {

               pageSize = this.getPageSize();
               var top  = (pageSize.pageHeight - (this.height + this.heightN + this.heightS))/2;
               if ( top < 20 ) { top = 10; top = top -pageSize.sOTop;}
               top =  top + pageSize.sOTop;
               left = (pageSize.pageWidth  - (this.width  + this.widthW  + this.widthE)) /2;
               this.setLocation(top, left);

          },

          _recenter: function() {

               pageSize = this.getPageSize();
               overlay =  $(this.options.overlayId);

               if ($(this.options.overlayId)) {

                   overlay.setStyle({height: (pageSize.pageHeight + 'px')});
                   overlay.setStyle({top: (pageSize.sOTop + 'px')});
                   this._center();
               }




          },


          setHTMLContent: function(html) {

             if (this.options.url) {
               this.content.src = null;
               this.options.url = null;

                var content ="<div id=\"" + this.getId() + "_content\" class=\"" + this.options.className + "_content\"> </div>";
               $(this.getId() +"_table_content").innerHTML = content;

                this.content = $(this.element.id + "_content");
             }

             this.getContent().innerHTML = html;

          },

            setURL: function(url) {

             this.content.src = null;
             this.options.url = url;
             var w = this.width -20;
             var h = this.height-20;

             var content= "<iframe frameborder='0' name='" + this.getId() + "_content'  id='" + this.getId() + "_content' src='" + this.options.url + "' width='" + w  + "' height='" + h + "'> </iframe>";

             $(this.getId() +"_table_content").innerHTML = content;
               this.content = $(this.element.id + "_content");
               this.content.writeAttribute({src: (this.options.url)});




            },


          _disableScreen: function() {

            pageSize = this.getPageSize();


            if ( $(this.options.overlayID) ) {

              var Overlay = $(this.options.overlayId);

            } else {
                    var Overlay = document.createElement("div");
                        Overlay.setAttribute('id', this.options.overlayId);
                        Overlay.className = "overlay_" + this.options.className
                        Overlay.style.display = 'block';
                        Overlay.style.position = 'absolute';
                        Overlay.style.top = '0';
                        Overlay.style.left = '0';
                        Overlay.style.zIndex = this.options.zIndex - 1;
                        Overlay.style.width = '100%';

                        //this.OverlayOpacity = Overlay.getStyle("opacity");

                        Element.hide(Overlay);

                        this.options.parent.insertBefore(Overlay, this.options.parent.firstChild);

            }

            Overlay.style.height = (pageSize.pageHeight + 'px');


            this.options.showEffect(Overlay, Object.extend({from: 0, to: this.overlayOpacity}, this.options.showEffectOptions));



          },

          _enableScreen: function(){

              id = this.options.overlayId;

              var Overlay =  $(this.options.overlayId);

              var removeOverlay = this._removeOverlay.bind(this);
              this.options.hideEffectOptions.afterFinish = function() {removeOverlay(); }


              if (Overlay) {

                  this.options.hideEffect(Overlay, Object.extend({from: this.overlayOpacity, to:0}, this.options.hideEffectOptions));

              }


          },

          _removeOverlay: function(){


              var Overlay =  $(this.options.overlayId);

                  Overlay.style.display = 'none';
                  Overlay.parentNode.removeChild(Overlay);


          },


         _createWindow: function(id) {

             switch ( this.options.className ) {

                   case "alphaimage":
                              return this.createAlphaImage(id);
                              break;

                   default:   return this.createAlphaCube(id);
                              break;
             }


           },


           createAlphaImage: function(id){

             var className = this.options.className;
             var win = document.createElement("div");

             win.setAttribute('id', id);

             //win.setStyle({zIndex: this.options.zIndex});
             win.className = className;

             var content;

             if (this.options.url)
                content= "<iframe frameborder=\"0\" name=\"" + id + "_content\"  id=\"" + id + "_content\" src=\"" + this.options.url + "\"> </iframe>";

            else
                 content ="<div id=\"" + id + "_content\" class=\"" +className + "_content\"> </div>";

             var closeDiv     = "<div class='"+ className +"_close' id='"+ id +"_close'></div>";
             var minDiv       = this.options.minimizable ? "<div class='"+ className + "_minimize' id='"+ id +"_minimize' onclick='Windows.minimize(\""+ id +"\", event)'> </div>" : "";
             var maxDiv       = this.options.maximizable ? "<div class='"+ className + "_maximize' id='"+ id +"_maximize' onclick='Windows.maximize(\""+ id +"\", event)'> </div>" : "";
             var seAttributes = this.options.resizable ? "class='" + className + "_sizer' id='" + id + "_sizer'" : "class='"  + className + "_se'";
             var blank = "../themes/default/blank.gif";

             win.innerHTML = minDiv + maxDiv + "\
               <table id='"+ id +"_row1' class=\"top table_window\">\
                 <tr>\
                   <td class='"+ className +"_nw'></td>\
                   <td class='"+ className +"_n'>&nbsp;</td>\
                   <td class='"+ className +"_ne'></td>\
                 </tr>\
               </table>\
               <table id='"+ id +"_row2' class=\"mid table_window\">\
                 <tr>\
                   <td class='"+ className +"_w'></td>\
                     <td id='"+ id +"_table_content' class='"+ className +"_content' valign='top'>" + content + "</td>\
                   <td class='"+ className +"_e'></td>\
                 </tr>\
               </table>\
                 <table id='"+ id +"_row3' class=\"bot table_window\">\
                 <tr>\
                   <td class='"+ className +"_sw'></td>\
                     <td class='"+ className +"_s'></div>"
                     + closeDiv +"\
                     </td><td " + seAttributes + "></td>\
                 </tr>\
               </table>\
             ";

             Element.hide(win);
             this.options.parent.insertBefore(win, this.options.parent.firstChild);
             return win;

           },


           createAlphaCube: function(id){

             var className = this.options.className;
             var win = document.createElement("div");

             win.setAttribute('id', id);

             //win.setStyle({zIndex: this.options.zIndex});
             win.className = className;

             var content;

             if (this.options.url)
                content= "<iframe frameborder=\"0\" name=\"" + id + "_content\"  id=\"" + id + "_content\" src=\"" + this.options.url + "\"> </iframe>";

            else
                 content ="<div id=\"" + id + "_content\" class=\"" +className + "_content\"> </div>";

             var closeDiv     = "<div class='"+ className +"_close' id='"+ id +"_close'></div>";
             var minDiv       = this.options.minimizable ? "<div class='"+ className + "_minimize' id='"+ id +"_minimize' onclick='Windows.minimize(\""+ id +"\", event)'> </div>" : "";
             var maxDiv       = this.options.maximizable ? "<div class='"+ className + "_maximize' id='"+ id +"_maximize' onclick='Windows.maximize(\""+ id +"\", event)'> </div>" : "";
             var seAttributes = this.options.resizable ? "class='" + className + "_sizer' id='" + id + "_sizer'" : "class='"  + className + "_se'";
             var blank = "../themes/default/blank.gif";

             win.innerHTML = closeDiv + minDiv + maxDiv + "\
               <table id='"+ id +"_row1' class=\"top table_window\">\
                 <tr>\
                   <td class='"+ className +"_nw'></td>\
                   <td class='"+ className +"_n'><div id='"+ id +"_top' class='"+ className +"_title title_window'>"+ this.options.title +"</div></td>\
                   <td class='"+ className +"_ne'></td>\
                 </tr>\
               </table>\
               <table id='"+ id +"_row2' class=\"mid table_window\">\
                 <tr>\
                   <td class='"+ className +"_w'></td>\
                     <td id='"+ id +"_table_content' class='"+ className +"_content' valign='top'>" + content + "</td>\
                   <td class='"+ className +"_e'></td>\
                 </tr>\
               </table>\
                 <table id='"+ id +"_row3' class=\"bot table_window\">\
                 <tr>\
                   <td class='"+ className +"_sw'></td>\
                     <td class='"+ className +"_s'><div id='"+ id +"_bottom' class='status_bar'><span style='float:left; width:1px; height:1px'></span></div></td>\
                     <td " + seAttributes + "></td>\
                 </tr>\
               </table>\
             ";

             Element.hide(win);
             this.options.parent.insertBefore(win, this.options.parent.firstChild);
             return win;

           },



           _getWindowBorderSize: function(event) {

              if ( this.options.className == "alphaimage" ) {

                      this.heightN =   30;     this.heightS =   15;
                      this.widthE  =   15;     this.widthW  =   15;
              }
              else {

                      this.heightN =   2;     this.heightS =   2;
                      this.widthE  =   5;     this.widthW  =   5;
              }




           },


           getPageSize: function(){

             var p = document.viewport.getDimensions();
             var s = document.viewport.getScrollOffsets();
             return {pageWidth: p.width ,pageHeight: p.height , sOLeft:s.left , sOTop: s.top};
         }




}