var WaitIndicator = Class.create({
	initialize: function(element) {
		this.element = $(element);
		this.element.makePositioned();
		
		this._hideInitialContent();
		this._initBackground();
		this._initSpinner();
	},
	_hideInitialContent: function() {
		var wrapper = $(document.createElement('div'));
		$A(this.element.childNodes).each(function(node) {
			wrapper.appendChild($(node));
		});
		wrapper.hide();
		this.element.innerHTML = '';
		this.element.appendChild(wrapper);
	},
	_initBackground: function() {
		var background = $(document.createElement('div'));
		background.makePositioned();
	
		var factor = 0.85;
		background.appendChild(this._makeBackgroundImage(WaitIndicator.GetSrc('spinner_bg6.gif'), 0.21*factor));
		background.appendChild(this._makeBackgroundImage(WaitIndicator.GetSrc('spinner_bg5.gif'), 0.43*factor));
		background.appendChild(this._makeBackgroundImage(WaitIndicator.GetSrc('spinner_bg4.gif'), 0.55*factor));
		background.appendChild(this._makeBackgroundImage(WaitIndicator.GetSrc('spinner_bg3.gif'), 0.71*factor));
		background.appendChild(this._makeBackgroundImage(WaitIndicator.GetSrc('spinner_bg2.gif'), 0.87*factor));
		background.appendChild(this._makeBackgroundImage(WaitIndicator.GetSrc('spinner_bg1.gif'), 1.00*factor));
		background.appendChild(this._makeBackgroundImage(WaitIndicator.GetSrc('spinner_text.gif'), 1.00));
		
		this.element.appendChild(background);
	},
	_makeBackgroundImage: function(src, opacity) {
		var image = $(document.createElement('img'));
		image.src = src;
		image.setStyle({
			opacity:opacity,
			position:'absolute',
			top:0,
			left:0
		});
		
		return image;
	},
	_initSpinner: function() {
		this.spinner = new WaitSpinner();
		this.spinner.element.setStyle({
			position:'absolute',
			top:'8px',
			left:'8px'
		});
		this.element.appendChild(this.spinner.element);
	}
});
WaitIndicator.ImageSrcRoot = '';
WaitIndicator.GetSrc = function(fileName) {
	return WaitIndicator.ImageSrcRoot + fileName;
};
WaitIndicator.CreateThemAll = function() {
	var elements = $$('.waitIndicator');
	elements.each(function(element) {
		new WaitIndicator(element);
	});
};


var WaitSpinner = Class.create({
	initialize: function() {
		this.element = $(document.createElement('div'));
		this.element.makePositioned();
	
		var states = [
			{opacity:1.00},
			{opacity:0.60},
			{opacity:0.30},
			{opacity:0.15},
			{opacity:0.15},
			{opacity:0.15},
			{opacity:0.15},
			{opacity:0.15}
		]
		this.dots = [
			new WaitSpinnerDot(this._makeDotElement( '0px', '12px'), states, 0),
			new WaitSpinnerDot(this._makeDotElement( '4px', '20px'), states, 7),
			new WaitSpinnerDot(this._makeDotElement('12px', '24px'), states, 6),
			new WaitSpinnerDot(this._makeDotElement('20px', '20px'), states, 5),
			new WaitSpinnerDot(this._makeDotElement('24px', '12px'), states, 4),
			new WaitSpinnerDot(this._makeDotElement('20px',  '4px'), states, 3),
			new WaitSpinnerDot(this._makeDotElement('12px',  '0px'), states, 2),
			new WaitSpinnerDot(this._makeDotElement( '4px',  '4px'), states, 1)
		];
		
		new PeriodicalExecuter(this._tick.bind(this), 0.1);
	},
	_makeDotElement: function(top, left) {
		var dot = $(document.createElement('img'));
		dot.src = WaitIndicator.GetSrc('spinner_dot.gif');
		dot.setStyle({
			position:'absolute',
			top:top,
			left:left
		});
		this.element.appendChild(dot);
		return dot;
	},
	_tick: function() {
		this.dots.each(function(dot) { dot.StepAnimation(); });
	}
});


var WaitSpinnerDot = Class.create({
	initialize: function(element, states, initialState) {
		this.element = element;
		this.states = states;
		this.currentState = initialState;
		
		this._applyCurrentState();
	},
	StepAnimation: function() {
		this._advanceCurrentState();
		this._applyCurrentState();
	},
	_advanceCurrentState: function() {
		this.currentState++;
		this.currentState = this.currentState % this.states.length;
	},
	_applyCurrentState: function() {
		this.element.setStyle(this.states[this.currentState]);
	}
});


Event.observe(window, 'load', WaitIndicator.CreateThemAll);