function LoadingOverlay( e, auto )
{
	this.FRAME_MS     = 200;
	this.IMAGE_HEIGHT = 32;
	this.FRAME_WIDTH  = 32;
	this.IMAGE_MAX    = 4;
	this.IMAGE_URL    = 'img/loading.B.png';

	this._continue    = true;
	this.image_index  = 0;
	this.image        = null;
	this.overlay      = null;



	LoadingOverlay.prototype.run = function()
	{
		if ( !this.overlay.parentNode )
		{
			this._continue = false;
			return;
		}

		if ( !this._continue )
		{
			this.overlay.parentNode.removeChild(this.overlay);
			return;
		}

		this.image.style.backgroundPosition = ( - this.image_index * this.FRAME_WIDTH ) + 'px 0px';
		this.image_index                    = ( this.image_index + 1 ) % this.IMAGE_MAX;

		var f_this = this;
		setTimeout(function(){f_this.run();},this.FRAME_MS);
	};



	LoadingOverlay.prototype.start = function( e )
	{
		var im = new Image();
		im.src = this.IMAGE_URL;

		if ( !e.style.position )
		{
			e.style.position = 'relative';
		}

		//
		// Overlay div
		//
		var p = DOM([
			[
				'div',
				{
					style: {
						height:   '50%',
						left:     '0px',
						position: 'absolute',
						top:       '0px',
						width:     '50%',
						zIndex:    4
					}
				},
				' '
			]
		]);

		this.image = DOM([
			[
				'div',
				{
					style: {
						backgroundImage: 'url(' + this.IMAGE_URL + ')',
						bottom:          -parseInt( this.IMAGE_HEIGHT / 2 ) + 'px',
						height:          this.IMAGE_HEIGHT + 'px',
						position:        'absolute',
						right:           -parseInt( this.FRAME_WIDTH / 2 ) + 'px',
						width:           this.FRAME_WIDTH + 'px'
					}
				},
				' '
			]
		]);

		this.overlay = DOM([
			[
				'div',
				{
					style: {
						height:   '100%',
						left:     '0px',
						overflow: 'hidden',
						position: 'absolute',
						width:    '100%',
						top:      '0px'
					}
				},
				[
					[
						'div',
						{
							style: {
								backgroundColor: 'white',
								filter:          'alpha(opacity=95)',
								height:          '100%',
								left:            '0px',
								opacity:         '0.95',
								position:        'absolute',
								top:             '0px',
								width:           '100%'
							}
						},
						' '
					]
				]
			]
		]);

		p.appendChild(this.image);
		this.overlay.appendChild(p);
		e.appendChild(this.overlay);

		this._continue = true;
		this.run();
	};



	LoadingOverlay.prototype.stop = function()
	{
		this._continue = false;
	};



	if ( auto )
	{
		this.start(e);
	}
}



function LoadingPane ( id, manager, container )
{
	this.container = container;
	this.id        = id;
	this.manager   = manager;



	this.loading = null;
	this.pane    = null;



	LoadingPane.prototype.start = function ()
	{
		var loading_div = DOM([
			[
				'div',
				{
					style: {
						height:   '50px',
						position: 'relative',
						width:    '100px'
					}
				},
				' '
			]
		]);
		this.pane       = this.manager.getPane(this.id,
		{
			container:     this.container,
			content:       [
				[
					'div',
					{
						style: {
							padding: '3px'
						}
					},
					[
						loading_div,
						[
							'div',
							null,
							'Loading...'
						]
					]
				]
			],
			disable_close: true,
			disable_move:  true,
			immediate:     true,
			title:         'loading...'
		});
		this.loading   = new LoadingOverlay(loading_div,true);
	};



	LoadingPane.prototype.stop = function ()
	{
		this.loading.stop();
		this.pane.dispose(true);
	};



	this.start();
}