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