var Lightbox = {};

// HTML elements
Lightbox._background = new Element('div', {
	'styles': {
		'opacity': 0,
		'position': 'absolute',
		'top': '0px',
		'left': '0px',
		'width': '100%',
		'height': '100%',
		'background-color': '#000000'
	}
});
Lightbox._contents = new Element('div', {
	'styles': {
		'display': 'none',
		'position': 'absolute',
		'border': '3px solid #FFFFFF',
		'background-color': 'white'
	}
});
Lightbox._footer = new Element('div', {
	'styles': {
		'display': 'none',
		'position': 'absolute',
		'background-color': '#FFFFFF'
	}
});
Lightbox._caption = new Element('div', {
	'styles': {
		'display': 'none',
		'position': 'absolute',
		'font-family': '"Segoe UI", Arial, sans',
		'color': '#000000'
	}
});
Lightbox._closeimg = new Element('img', {
	'src': 'js/closelabel.gif',
	'styles': {
		'display': 'none',
		'position': 'absolute',
		'cursor': 'hand',
		'width': '66',
		'height': '22'
	}
});

Lightbox.shown = false;


// Close the overlay
Lightbox.close = function(){
	if (Lightbox.shown){
		Lightbox.shown = false;
		$$( Lightbox._contents, Lightbox._caption ).setStyle('display', 'none');
		Lightbox._background.fade(0);
	}
};


// Shows the overlay
// IMPORTANT: options.width and options.height are in pixels and must be numbers (or null, in such case, the overlay will be 70%)
Lightbox.open = function(type, data, options){
	Lightbox.shown = true;

	var _width = window.getWidth();
	var _height = window.getHeight();
	var _left = window.getScrollLeft();
	var _top = window.getScrollTop();

	var title = (options.title == null) ? "" : String(options.title);
	var width = ((options.width == null) || (options.width == 0)) ? (_width * 0.7) : Number(options.width);
	var height = ((options.height == null) || (options.height == 0)) ? (_height * 0.7) : Number(options.height);

	var x = _left + ((_width - width) / 2);
	var y = _top + ((_height - height) / 2);

	switch(type){
		case 'iframe':
			Lightbox._contents.set('html', '<iframe src="' + data + '" style="width: ' + width + 'px; height:' + height + 'px; border: 0px solid none;" />');
		break;
		case 'image':
			Lightbox._contents.set('html', '<img src="' + data + '" width="' + width + '" height="' + height + '" />');
		break;
		default:
			Lightbox._contents.set('html', data);
		break;
		
	}
	Lightbox._contents.setStyles({
		'display': 'inline',
		'width': width,
		'height': height,
		'left': x,
		'top': y
	});

	Lightbox._caption.set('html', title);
	Lightbox._caption.setStyles({
		'display': 'inline',
		'width': width,
		'height': 32,
		'left': x,
		'top': (y + height)
	});
	
	//TODO place the caption and close button

	Lightbox._background.fade(0.65);
	return false;
};


// Events
$$( Lightbox._background, Lightbox._closeimg ).addEvent('click', Lightbox.close);


// Initialization
window.addEvent("domready", function(){
	$(document.body).adopt( Lightbox._background, Lightbox._contents, Lightbox._footer );
	Lightbox._footer.adopt( Lightbox._caption, Lightbox._closeimg );
});
