var LoadingEffect = new Class({

	options: {
		loadArea:		'default',
		wheelPos:		'default',
		wheelSize: 		'default',
		overlayColor: 	'#000',
		scroll:			false,
		scrollTo:		'default',
		toCoordinates:	'default',
		loadingText:	'Loading...'
	},
	
	initialize: function(options){
		this.setOptions(options);
		
		if (this.options.loadArea == 'default') {
			this.loadArea = document.body;
		} else {
			this.loadArea = this.options.loadArea;		
		}
		this.scroll = this.options.scroll;
		this.scrollTo = this.options.scrollTo;
		this.toCoordinates = this.options.toCoordinates;
		this.wheelSize = this.options.wheelSize;
		this.overlayColor = this.options.overlayColor;
		this.loadingText = this.options.loadingText;
		
		this.running = false;
		
		this.getTargetCoordinates();
		
		if (this.options.wheelPos == 'default') { this.wheelPos = 'center center';
		} else { this.wheelPos = '50% '+this.options.wheelPos+'px'; }
		
		this.overlay = new Element('div').setStyles({
			backgroundColor: this.overlayColor,
			textAlign: 'center',
			opacity: 0,
			zIndex: 5000
		});

		this.wheel = new Element('div');

		if ((this.options.loadArea == 'default') && (!Browser.Engine.trident4)) {
			this.overlay.setStyle('position', 'fixed');
		} else {
			this.overlay.setStyle('position', 'absolute');
		}
		/*
		this.loadingIndicator;
		this.loadingIndicatorExist = false;
		if (this.loadingIndicator = $('loadingIndicator')) {
			this.loadingIndicatorExist = true;
		} else {
			this.loadingIndicator = new Element('p').setProperty('id', 'loadingIndicator').set('text', this.loadingText);
		}
		*/
		// Add Resize detection to window
		window.addEvent('resize', this.resize.bind(this));
	},

	getTargetCoordinates: function() {
		if (this.options.loadArea == 'default') {
			if (Browser.Engine.trident4) {
				this.target = {
					width: this.loadArea.clientWidth,
					height: this.loadArea.clientHeight,
					left: 0,
					top: window.getScrollTop(),
					right: 0,
					bottom: 0
				};
			} else {
				this.target = {
					width: this.loadArea.clientWidth,
					height: this.loadArea.clientHeight,
					left: 0,
					top: 0,
					right: 0,
					bottom: 0
				};
			}
		} else {
			this.target = this.loadArea.getCoordinates();
		}	
	},

	//////////////////////////////////////////////////////////////////////////////////
	
	startLoading: function() {
		var thisObj = this;
		
		if (!this.running) { 
			this.running = true;
			if (this.scroll) {
				// Scroll to Load Area
				var scroll = new Fx.Scroll(window, {
					wait: false, duration: 1000
				});
				if (this.scrollTo != "default") {
					scroll.toElement(this.scrollTo);
				} else if (this.toCoodinates != "default") {
					scroll.start(this.toCoordinates.x, this.toCoordinates.y);
				} else {
					scroll.toElement(this.loadArea);
				}
			}
			// Insert Overlay
			this.overlay.setStyles({
				top: this.target.top + 'px',
				left: this.target.left + 'px',
				width: this.target.width + 'px',
				height: this.target.height + 'px'
			}).inject(document.body).get('tween', {property: 'opacity', duration: 200, transition: Fx.Transitions.linear}).start(0, 0.5);
			//this.overlay.inject(document.body).setOpacity(0.5);
			this.wheel.setStyle('backgroundPosition', this.wheelPos).inject(this.overlay);
			if (this.wheelSize == 'large')
				this.wheel.addClass('loadingWheelLarge');
			else if (this.wheelSize == 'small')
				this.wheel.addClass('loadingWheelSmall');
			else
				this.wheel.addClass('loadingWheel');
			
			/*
			this.loadingIndicator.set('text', this.loadingText);
			if (!this.loadingIndicatorExist) this.loadingIndicator.inject(document.body);
			*/
			
			this.resize();
		}
	},

	loadingCompleted: function() {
		if (this.overlay) {
			var overlay = this.overlay;
			overlay.get('tween', {property: 'opacity', duration: 100, transition: Fx.Transitions.linear}).start(0.5, 0).chain(function(){
				overlay.dispose();
			});
		}
		/*
		if ($('loadingIndicator')) this.loadingIndicator.dispose();
		*/
		window.removeEvent('resize');
		this.running = false;
		
	},
	
	resize : function () {
		this.getTargetCoordinates();
		this.overlay.setStyles({
			top: this.target.top + 'px',
			left: this.target.left + 'px',
			width: this.target.width + 'px',
			height: this.target.height + 'px'
		});
	}
	
});
LoadingEffect.implement(new Options, new Events);