/*
* Simple Overlay using prototype-js
* By Vinicius Baggio Fuentes <vinibaggio@gmail.com>
*
* Copyright 2009
*/

Overlay = Class.create({
initialize: function(elem) {
this._elem = $(elem);

// Prepare the overlay
if($('overlay') == null) {
this._overlay = new Element('div', {id: 'overlay'});

Object.extend(this._overlay.style, {
zIndex: '290',
filter: 'alpha(opacity=60)',
opacity: 0.6,
display: 'none',
top: '0px',
left: '0px',
position: 'absolute',
backgroundColor: '#000'
});


$(document.body).insert(this._overlay);
} else {
this._overlay = $('overlay');
}

// NOTE: Bind click to the Overlay every time we instanciate a class
// I do that so it is possible for us to have more than one
// overlay in a page.
this._hide.bindAsEventListener(this);
Event.observe(this._overlay, 'click', this._hide.bindAsEventListener(this));

// Prepare the element
if(this._elem.getStyle('backgroundColor') == "transparent") {
colour = "#fff";
} else {
colour = this._elem.getStyle('backgroundColor');
}

Object.extend(this._elem.style, {
zIndex: '300',
backgroundColor: colour,
position: 'absolute',
top: '0px',
left: '0px',
border: '2px dotted black',
padding: '10px 10px 10px 10px',
display: 'none'
});
},

show: function() {
// Fix IE
$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });
this._elem.select('select', 'object', 'embed').each(function(node){node.style.visibility = 'visible'});

// Position
var pageSize = this.getPageSize();
var screenWidth = document.all?document.body.clientWidth:window.innerWidth;
var leftPos = this.scrollX() + (screenWidth / 2) - this._elem.getWidth() / 2;
var topPos = this.scrollY() + 10;

this._overlay.setStyle({width: pageSize[0] + 'px', height: pageSize[1] + 'px'});
this._elem.setStyle({top: topPos + 'px', left: leftPos + 'px'});

// Disable scrolling
document.body.style.overflow = 'hidden';

this._overlay.show();
this._elem.show();
},

hide: function() {
this._hide();
},

_hide: function(evt) {
this._elem.hide();
this._overlay.hide();
document.body.style.overflow = 'auto';
// See the NOTE in constructor to understand why.
Event.stopObserving(this._overlay, 'click', this._hide);
$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' });
},

getPageSize: function() {

var xScroll, yScroll;

if (window.innerHeight && window.scrollMaxY) {
xScroll = window.innerWidth + window.scrollMaxX;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}

var windowWidth, windowHeight;

if (self.innerHeight) { // all except Explorer
if(document.documentElement.clientWidth){
windowWidth = document.documentElement.clientWidth;
} else {
windowWidth = self.innerWidth;
}
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}

// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}

// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
pageWidth = xScroll;
} else {
pageWidth = windowWidth;
}

return [pageWidth,pageHeight];
},

scrollX: function () {return window.pageXOffset ? window.pageXOffset : document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft;},
scrollY: function () {return window.pageYOffset ? window.pageYOffset : document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;}

});