/*
 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: 5,
		delay: 2000,
		interrupteur: 'interrupteur'
	},

	initialize: function(options){
		this.screen = document.getScrollSize();	
			var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
			if (is_chrome) {
				this.screen.y = 1300;
			}
		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 chai= $(this.options.interrupteur);
		chai.set('power', 'off');
		chai.set('style', 'background-image:url(images/off-petit.png);background-repeat:no-repeat;background-position:top right;');
						
		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() {
		var chai= $(this.options.interrupteur);
		chai.set('power', 'on');
		chai.set('style', 'background-image:url(images/on-petit.png);background-repeat:no-repeat;background-position:top right;');
					
		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});
	}
	
});

