switch to mulibox for info box
[mkgallery.git] / include / overlay.js
1 \r
2 /**************************************************************\r
3 \r
4         Script          : Overlay\r
5         Version         : 1.2\r
6         Authors         : Samuel birch\r
7         Desc            : Covers the window with a semi-transparent layer.\r
8         Licence         : Open Source MIT Licence\r
9 \r
10 **************************************************************/\r
11 \r
12 var Overlay = new Class({\r
13         \r
14         getOptions: function(){\r
15                 return {\r
16                         colour: '#000',\r
17                         opacity: 0.7,\r
18                         zIndex: 1,\r
19                         container: document.body,\r
20                         onClick: Class.empty\r
21                 };\r
22         },\r
23 \r
24         initialize: function(options){\r
25                 this.setOptions(this.getOptions(), options);\r
26                 \r
27                 this.options.container = $(this.options.container);\r
28                 \r
29                 this.container = new Element('div').setProperty('id', 'OverlayContainer').setStyles({\r
30                         position: 'absolute',\r
31                         left: '0px',\r
32                         top: '0px',\r
33                         width: '100%',\r
34                         zIndex: this.options.zIndex\r
35                 }).injectInside(this.options.container);\r
36                 \r
37                 this.iframe = new Element('iframe').setProperties({\r
38                         'id': 'OverlayIframe',\r
39                         'name': 'OverlayIframe',\r
40                         'src': 'javascript:void(0);',\r
41                         'frameborder': 1,\r
42                         'scrolling': 'no'\r
43                 }).setStyles({\r
44                         'position': 'absolute',\r
45                         'top': 0,\r
46                         'left': 0,\r
47                         'width': '100%',\r
48                         'height': '100%',\r
49                         'filter': 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)',\r
50                         'opacity': 0,\r
51                         'zIndex': 1\r
52                 }).injectInside(this.container);\r
53                 \r
54                 this.overlay = new Element('div').setProperty('id', 'Overlay').setStyles({\r
55                         position: 'absolute',\r
56                         left: '0px',\r
57                         top: '0px',\r
58                         width: '100%',\r
59                         height: '100%',\r
60                         zIndex: 2,\r
61                         backgroundColor: this.options.colour\r
62                 }).injectInside(this.container);\r
63                 \r
64                 this.container.addEvent('click', function(){\r
65                         this.options.onClick();\r
66                 }.bind(this));\r
67                 \r
68                 this.fade = new Fx.Tween(this.container, 'opacity').set(0);\r
69                 this.position();\r
70                 \r
71                 window.addEvent('resize', this.position.bind(this));\r
72         },\r
73         \r
74         position: function(){ \r
75                 if(this.options.container == document.body){ \r
76                         var h = window.getScrollHeight()+'px'; \r
77                         this.container.setStyles({top: '0px', height: h}); \r
78                 }else{ \r
79                         var myCoords = this.options.container.getCoordinates(); \r
80                         this.container.setStyles({\r
81                                 top: myCoords.top+'px', \r
82                                 height: myCoords.height+'px', \r
83                                 left: myCoords.left+'px', \r
84                                 width: myCoords.width+'px'\r
85                         }); \r
86                 } \r
87         },\r
88         \r
89         show: function(){\r
90                 this.fade.start(0,this.options.opacity);\r
91         },\r
92         \r
93         hide: function(){\r
94                 this.fade.start(this.options.opacity,0);\r
95         }\r
96         \r
97 });\r
98 Overlay.implement(new Options);\r
99 \r
100 /*************************************************************/\r