C.LoadingIndicator = Class.create();

C.LoadingIndicator.prototype = {
	
	initialize : function( cfg )
	{
		Object.extend(this,cfg);
		
		this.mainEl = $(this.htmlTplId);
		this.bgEl = $(this.bgTplId);
		this.textEl = this.mainEl.down('.c-li-text');
		

		this.bgEl.setOpacity( 0.6 );
		

		this.mainEl.setStyle( {position:'absolute', left:'0px' , top:'0px'  ,zIndex:"20" });
		this.mainEl.hide();
		$(document.body).insert(this.mainEl);
		
		this.bgEl.setStyle( {position:'absolute', left:'0px' , top:'0px' , zIndex:"19"  });
		this.bgEl.hide();
		$(document.body).insert(this.bgEl);
		
		
	},
	
	// li.show( { centerOn: 'c-section-title-pane' } )
	//$$('div[pcd=00201194000009]')[0]
	//li.show( { centerOn: $$('div[pcd=00201194000009]')[0] } )
	//li.show( { centerOn: $$('div[pcd=00072745068317]')[0] } )
	show : function( cfg )
	{
		
		if ( cfg.text ) this.textEl.update( cfg.text );
		
		var t_offset = $(cfg.centerOn).cumulativeOffset();
		var t_dim = $(cfg.centerOn).getDimensions();
		
		var s_dim = this.mainEl.getDimensions();
		
		
		
		var sx = t_offset.left + (( t_dim.width - s_dim.width ) / 2);
		var sy = t_offset.top + (( t_dim.height - s_dim.height) / 2);
		
		this.mainEl.setStyle({
			left: sx + "px",
			top: sy + "px"
		});
		
		this.bgEl.setStyle({
			left: sx + "px",
			top: sy + "px",
			width: s_dim.width + "px",
			height: s_dim.height + "px"
		});
		
		//this.bgEl.clonePosition( this.mainEl );
		
		this.bgEl.show();
		this.mainEl.show();
		
	},
	
	hide : function()
	{
		this.mainEl.hide();
		this.bgEl.hide();
	}
	
}