Spinny = new Class({
	initialize: function() {
		this.timer;

		this.placeofinjection = $(document.body);
		this.spinelement = new Element('img', {
			'id':'spinny',
			'src':'img/spinner.gif',
			'class':'spinner'
		});
		// inject img into the DOM
		this.spinelement.inject(this.placeofinjection, 'top');

		// define morph
		this.spinnyFX = new Fx.Morph('spinny', {
			duration: 0,
			link: 'cancel'
		});
	},
	setSpin: function(position, offset) {
		if (typeof(position) == "string") {
			switch (position) {
				case "middle" :
					this.spinelement.position({'offset':offset});
					break;
				default :
					this.spinelement.position();
			}
		}
	},
	center: function() {
		this.spinelement.position({'offset':{x: 0, y:100}});
	},
	
	kill : function()
	{
		//fades instantly rather than pause
		clearTimeout(this.timer);
		if(this.spinelement.getStyle('opacity')== "1"){
			this.spinnyFX.start({
				'opacity': 0
			}).chain(function() {
				$('spinny').view('hide');
			});
 		}

	},
	
	hide: function() {
//		this.spinelement.show();

		clearTimeout(this.timer);

		this.timer = setTimeout(function(){
			this.spinelement.show();
			this.spinnyFX.start({
				'opacity': 0
			}).chain(function() {
				$('spinny').view('hide');
			});
		}.bind(this), 1000);

	},
	show: function() {
		clearTimeout(this.timer);
		this.timer = setTimeout(function(){
			this.spinelement.show();
			this.spinnyFX.start({
				'opacity': 1
			}).chain(function() {
 			});
		}.bind(this), 1000);
		
	}
});

Fx.implement({

	options : {
		duration: 1250,
		transition: 'quart:out',
		link: 'chain',
		fps: 30
	}
});

Element.implement({
	css3 : {},
	morph: function(props) {
		this.get('morph').start(props);
		return this.get('morph');
	},

	view: function(how, destroyatend) {
		var destroyer = false;
		if (destroyatend != undefined) destroyer = true;
		var fade = this.get('tween'), o = 'opacity', toggle;
		how = [how, 'toggle'].pick();

		if (destroyer) {

			switch (how) {
				case 0:
					fade.start(o, 0).chain(function() {
						fade.element.destroy();
					});
					break;
				case 1:
					fade.element.setStyles({'display':'inline-block','visibility':'visible'});
					fade.start(o, 1).chain(function() {
						fade.element.destroy();
					});
					break;
			}

		} else {

			switch (how) {
				case 'in' :
					fade.element.setStyles({'display':'inline-block','visibility':'visible'});
					fade.set(o, 0);
					fade.start(o, 1);
					break;
				case 'out':
					fade.start(o, 0).chain(function() {
						fade.element.setStyle('display', 'none');
					});
					break;
				case 'show':
					fade.element.setStyles({'display':'inline-block','visibility':'visible'});
					fade.set(o, 1);
					break;
				case 'hide':
					fade.set(o, 0);
					fade.element.setStyle('display', 'none');
					break;
				case 0:
					fade.start(o, 0).chain(function() {
						fade.element.setStyle('display', 'none');
					});
					break;
				case 1:
					fade.element.setStyles({'display':'inline-block','visibility':'visible'});
					fade.start(o, 1);
					break;
				case 'toggle':
					var flag = this.retrieve('fade:flag', this.get('opacity') == 1);
					fade.start(o, (flag) ? 0 : 1);
					this.store('fade:flag', !flag);
					toggle = true;
					break;
				default:
					fade.element.setStyles({'display':'inline-block','visibility':'visible'});
					fade.start(o, arguments);
			}
		}

		if (!toggle) this.eliminate('fade:flag');
			return fade;
	}
});

 
Element.Events.hashchange = {
	onAdd: function() {
		var hash = self.location.hash;

		var hashchange = function() {
			if (hash == self.location.hash) return;
			else hash = self.location.hash;

			var value = (hash.indexOf('#') == 0 ? hash.substr(1) : hash);
			window.fireEvent('hashchange', value);
			document.fireEvent('hashchange', value);
		};

		if ("onhashchange" in window) {
			window.onhashchange = hashchange;
		} else {
			hashchange.periodical(50);
		}
	}
};