loading overlay (botsu)

index.html

<div class="mod-globalLoading ui-globalLoading">
	<div class="overlay"></div>
	<div class="img"></div>
<!-- /mod-globalLoading --></div>

scripts.js

/**
 * $.ui.globalLoading (botsu)
 */
$.widget('ui.globalLoading', {

	options: {
		src_loading: '/common/imgs/misc/loading.gif',
		selector_overlay: '.overlay',
		selector_img: '.img',
		banScroll: true
	},

	$overlay: null,
	$img: null,

	_isShown: false,

	_animationQueue: $({}),

	_create: function(){
		this._setupElements();
		this._eventify();
	},
	_init: function(){
	},

	/* private methods */

	_preload: function(){
		return this;
	},
	_setupElements: function(){
		var $el = this.element;
		var o = this.options;
		this.$overlay = $(o.selector_overlay, $el);
		this.$img = $(o.selector_img, $el);
		return this;
	},
	_eventify: function(){
		$win.bind('resize orientationchange', $.proxy( this.updateImgPos, this) );
		if(!Modernizr.positionfixed){
			$win.bind('scroll', $.proxy( this.updateOverlayPos, this ) );
		}
		return this;
	},

	/* public methods */

	updateOverlayPos: function(){
		if(!this._isShown){
			return this;
		}
		if(Modernizr.positionfixed){
			return this;
		}
		var $el = this.element;
		$el.css({
			width: $win.width(),
			height: $win.height(),
			top: scrollTop()
		});
			return this;
	},
	updateImgPos: function(){
		if(!this._isShown){
			return this;
		}
		this.$img.position({
			of: this.element,
			my: 'center center'
		});
		return this;
	},
	show: function(){
		if(this._isShown){
			return this;
		}
		this._isShown = true;
		var $el = this.element;
		var $img = this.$img;
		var q = this._animationQueue;
		this.updateOverlayPos();
		var self = this;
		q
			.queue(function(){
				$el.fadeIn(200);
				q.dequeue();
			})
			.delay(500)
			.queue(function(){
				$img.fadeIn(300);
				self.updateImgPos();
				q.dequeue();
			});
		return this;
	},
	hide: function(){
		if(!this._isShown){
			return this;
		}
		this._isShown = false;
		var $el = this.element;
		var $img = this.$img;
		var q = this._animationQueue;
		q.queue(function(){
			$el.fadeOut(100);
			$img.hide();
			q.dequeue();
		});
		return this;
	}

});

/* static methods */

$.ui.globalLoading.preload = function(){
	$('<img />', { src: $.ui.globalLoading.prototype.options.src_loading });
}
	/* do this soon */
	$.ui.globalLoading.preload();