/*
 e24SpotLight
	- MooTools version required: 1.2.2
	- MooTools components required: 
		Core: Element.Dimensions, Fx.Transitions, Fx.Morph  and dependencies

	Changelog:
		- 1.0: First release
*/

/* Copyright: equipo24 S.L.N.E <http://equipo24.com/> - Distributed under MIT License - Keep this message! */

var e24SpotLight = new Class({
	
	Implements: [Options],

	options: {
		transition: 'linear',
		duration: 1000,
		zindex: 5, 
		bgcolor: '#000', 
		opacity: 0.7,
		margin: 8,
		delay: 2000
	},

	initialize: function(options){
		this.setOptions(options);

		this.screen = document.getScrollSize();			

		this.topEl = new Element('div', {id: 'e24_sp_top'});
		this.topEl.setStyles({
			'z-index': this.options.zindex,
			'cursor': 'pointer',			
			'position': 'absolute',
			'left':  0,
			'top': 0,
			'width': this.screen.x,
			'height': 0,
			'opacity': 0,
			'background-color': this.options.bgcolor
		});
		this.topEl.inject(document.body);
		this.topEl.set('morph', {duration: this.options.duration, transition: this.options.transition});		
		this.topEl.addEvent('click', this.lightOff.bind(this));

		this.leftEl = new Element('div', {id: 'e24_sp_left'});
		this.leftEl.setStyles({
			'z-index': this.options.zindex,
			'cursor': 'pointer',			
			'position': 'absolute',
			'left':  0,
			'top': 0,
			'width': 0,
			'height': this.screen.y,
			'opacity': 0,
			'background-color': this.options.bgcolor
		});
		this.leftEl.inject(document.body);
		this.leftEl.set('morph', {duration: this.options.duration, transition: this.options.transition});
		this.leftEl.addEvent('click', this.lightOff.bind(this));

		this.bottomEl = new Element('div', {id: 'e24_sp_bottom'});
		this.bottomEl.setStyles({
			'z-index': this.options.zindex,
			'cursor': 'pointer',			
			'position': 'absolute',
			'left':  0,
			'bottom': this.screen.y,
			'width': this.screen.x,
			'height': 0,
			'opacity': 0,
			'background-color': this.options.bgcolor
		});
		this.bottomEl.inject(document.body);
		this.bottomEl.set('morph', {duration: this.options.duration, transition: this.options.transition});
		this.bottomEl.addEvent('click', this.lightOff.bind(this));

		this.rightEl = new Element('div', {id: 'e24_sp_right'});
		this.rightEl.setStyles({
			'z-index': this.options.zindex,
			'cursor': 'pointer',
			'position': 'absolute',
			'left':  this.screen.x,
			'top': 0,
			'width': 0,
			'height': this.screen.y,
			'opacity': 0,
			'background-color': this.options.bgcolor
		});
		this.rightEl.inject(document.body);
		this.rightEl.set('morph', {duration: this.options.duration, transition: this.options.transition});
		this.rightEl.addEvent('click', this.lightOff.bind(this));
	},
	
	lightOn: function(arg) {
		var coords = {left: 0, top: 0, width: 0, height: 0};
		var el = $(arg);
		if ($type(el) == 'element') {
			coords = el.getCoordinates();
		}
		else if ($type(arg) == 'object') {
			coords = arg;
		}
		
		this.topEl.morph({height: coords.top - this.options.margin, opacity: this.options.opacity});
		this.leftEl.morph({width: coords.left - this.options.margin, opacity: this.options.opacity});
		this.bottomEl.morph({top: coords.top + coords.height + this.options.margin, height: this.screen.y - coords.top - coords.height - this.options.margin, opacity: this.options.opacity});
		this.rightEl.morph({left: coords.left + coords.width + this.options.margin, width: this.screen.x - coords.left - coords.width - this.options.margin, opacity: this.options.opacity});
		
		if (this.options.delay) {
			this.lightOff.delay(this.options.delay, this);	
		}
		
	},
	
	lightOff: function() {
		this.topEl.morph({height: 0, opacity: 0});
		this.leftEl.morph({width: 0, opacity: 0});
		this.bottomEl.morph({top: this.screen.y, height: 0, opacity: 0});
		this.rightEl.morph({left: this.screen.x, width: 0, opacity: 0});
	}
	
});