switch to mulibox for info box

[mkgallery.git] / include / overlay.js

diff --git a/include/overlay.js b/include/overlay.js
new file mode 100644 (file)
index 0000000..432a076
--- /dev/null
+++ b/include/overlay.js
@@ -0,0 +1,100 @@
+\r
+/**************************************************************\r
+\r
+       Script          : Overlay\r
+       Version         : 1.2\r
+       Authors         : Samuel birch\r
+       Desc            : Covers the window with a semi-transparent layer.\r
+       Licence         : Open Source MIT Licence\r
+\r
+**************************************************************/\r
+\r
+var Overlay = new Class({\r
+       \r
+       getOptions: function(){\r
+               return {\r
+                       colour: '#000',\r
+                       opacity: 0.7,\r
+                       zIndex: 1,\r
+                       container: document.body,\r
+                       onClick: Class.empty\r
+               };\r
+       },\r
+\r
+       initialize: function(options){\r
+               this.setOptions(this.getOptions(), options);\r
+               \r
+               this.options.container = $(this.options.container);\r
+               \r
+               this.container = new Element('div').setProperty('id', 'OverlayContainer').setStyles({\r
+                       position: 'absolute',\r
+                       left: '0px',\r
+                       top: '0px',\r
+                       width: '100%',\r
+                       zIndex: this.options.zIndex\r
+               }).injectInside(this.options.container);\r
+               \r
+               this.iframe = new Element('iframe').setProperties({\r
+                       'id': 'OverlayIframe',\r
+                       'name': 'OverlayIframe',\r
+                       'src': 'javascript:void(0);',\r
+                       'frameborder': 1,\r
+                       'scrolling': 'no'\r
+               }).setStyles({\r
+                       'position': 'absolute',\r
+                       'top': 0,\r
+                       'left': 0,\r
+                       'width': '100%',\r
+                       'height': '100%',\r
+                       'filter': 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)',\r
+                       'opacity': 0,\r
+                       'zIndex': 1\r
+               }).injectInside(this.container);\r
+               \r
+               this.overlay = new Element('div').setProperty('id', 'Overlay').setStyles({\r
+                       position: 'absolute',\r
+                       left: '0px',\r
+                       top: '0px',\r
+                       width: '100%',\r
+                       height: '100%',\r
+                       zIndex: 2,\r
+                       backgroundColor: this.options.colour\r
+               }).injectInside(this.container);\r
+               \r
+               this.container.addEvent('click', function(){\r
+                       this.options.onClick();\r
+               }.bind(this));\r
+               \r
+               this.fade = new Fx.Tween(this.container, 'opacity').set(0);\r
+               this.position();\r
+               \r
+               window.addEvent('resize', this.position.bind(this));\r
+       },\r
+       \r
+       position: function(){ \r
+               if(this.options.container == document.body){ \r
+                       var h = window.getScrollHeight()+'px'; \r
+                       this.container.setStyles({top: '0px', height: h}); \r
+               }else{ \r
+                       var myCoords = this.options.container.getCoordinates(); \r
+                       this.container.setStyles({\r
+                               top: myCoords.top+'px', \r
+                               height: myCoords.height+'px', \r
+                               left: myCoords.left+'px', \r
+                               width: myCoords.width+'px'\r
+                       }); \r
+               } \r
+       },\r
+       \r
+       show: function(){\r
+               this.fade.start(0,this.options.opacity);\r
+       },\r
+       \r
+       hide: function(){\r
+               this.fade.start(this.options.opacity,0);\r
+       }\r
+       \r
+});\r
+Overlay.implement(new Options);\r
+\r
+/*************************************************************/\r