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