basically it works
[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: $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': 0,\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                 if(this.options._onClick){\r
65                         this.container.addEvent('click', function(){\r
66                                 this.options._onClick.call(this)\r
67                         }.bind(this));\r
68                 }\r
69                 \r
70                 //this.fade = new Fx.Tween(this.container).set('opacity', 0);\r
71                 this.container.fade('hide');\r
72                 this.position();\r
73                 \r
74                 window.addEvent('resize', this.position.bind(this));\r
75         },\r
76         \r
77         setOnClick: function(func){\r
78                 this.container.addEvent('click', func);\r
79         },\r
80         \r
81         position: function(){ \r
82                 if(this.options.container == document.body){ \r
83                         var h = window.getScrollHeight()+'px'; \r
84                         this.container.setStyles({top: '0px', height: h}); \r
85                 }else{ \r
86                         var myCoords = this.options.container.getCoordinates(); \r
87                         this.container.setStyles({\r
88                                 top: myCoords.top+'px', \r
89                                 height: myCoords.height+'px', \r
90                                 left: myCoords.left+'px', \r
91                                 width: myCoords.width+'px'\r
92                         }); \r
93                 } \r
94         },\r
95         \r
96         show: function(){\r
97                 //this.fade.start(0,this.options.opacity);\r
98                 this.container.fade(this.options.opacity);\r
99         },\r
100         \r
101         hide: function(){\r
102                 //this.fade.start(this.options.opacity,0);\r
103                 this.container.fade('out');\r
104         }\r
105         \r
106 });\r
107 overlay.implement(new Options);\r
108 \r
109 /*************************************************************/\r