AJAX_LOADER = null;
var AjaxLoader = new Class({
	initialize: function(){
		this.ajaxLoaderName = "ajaxLoader";
		this.ajaxError = "ajaxError";
		this.loaderStyle = {
							background:'url(../page/images/ajax-loader.gif) no-repeat center',
							'line-height':'17px',
							'height':'117px',
							padding:'3px'
						   };
		this.errorStyle={
						'height':'117px',
						"text-align": "center",
						"padding": "50px 5px 0 25px",
						"font-size":"11px",
						"line-height":"1.3em"
						};
	},
	
	create: function(holder, name, styles){
		var holderId = holder.getProperty("id");
		var loaders = null;
		if(holder.tagName == "TBODY"){
			loaders = $$("tbody[name="+holderId+"-"+name+"]");
		}else{		
			loaders = $$("div[name="+holderId+"-"+name+"]");
		}
		if(loaders.length == 1){
			return loaders[0];
		}else{
			if(holder.tagName == "TBODY"){
				var holderTr = holder.getElement("tr");
				var loader=new Element('tbody');
				loader.injectBefore(holder);
				var tr = new Element("tr");
				tr.injectInside(loader);			
				var td = new Element("td");
				td.injectInside(tr);
				var div=new Element('div');
				div.injectInside(td);				
				// set style for the loader.
				loader.setProperty("name", holderId+"-"+name);				
				td.setStyle("border-bottom", 0);
				td.setProperty("colspan", holderTr.getElements("td").length + holderTr.getElements("th").length);
				td.setStyle("background-color", "#fff");				
				div.setStyles(styles);				
				hiddenElement(loader);
				return loader;
			}else{
				var loader=new Element('div');
				loader.injectBefore(holder);
				loader.setProperty("name", holderId+"-"+name);
				loader.setStyles(styles);				
				hiddenElement(loader);
				return loader
			}		
		}
	},
	
	getLoader: function(holder){
		return this.create(holder, this.ajaxLoaderName, this.loaderStyle);
	},	
	
	
	loading: function(holder){
		var holder = $(holder);		
		var loader = this.getLoader(holder);
		var errorLoader = this.getErrorLoader(holder);	
		hiddenElement(holder);
		hiddenElement(errorLoader);
		displayElement(loader);
	},
	complete: function(holder){
		var holder = $(holder);		
		var loader = this.getLoader(holder);
		displayElement(holder);
		hiddenElement(loader);
	},
	
	getErrorLoader: function(holder, errorMsg){
		var errorLoader = this.create(holder, this.ajaxError, this.errorStyle);
		var errorText = "";
		if(errorMsg == "Timeout"){
			errorText = "Sorry, the request failed because of timeout, please refresh the page and try again!";
		}else{
			errorText = "Sorry, some internal error happen, please try again later!";
		}
		if(holder.tagName == "TBODY"){
			errorLoader.getElement("div").setText(errorText);
		}else{
			errorLoader.setText(errorText);
		}
		return errorLoader;	
	},
	errorHandle: function(holder, errorMsg){		
		var holder = $(holder);	
		var loader = this.getLoader(holder);
		var errorLoader = this.getErrorLoader(holder, errorMsg);
		hiddenElement(holder);
		hiddenElement(loader);
		displayElement(errorLoader);
	},
	hasError: function(holder){
		var holder = $(holder);	
		var errorLoader = this.getErrorLoader(holder);
		return (!errorLoader.hasClass("hidden"));
	}
 });
window.addEvent('domready', function(){
	if(AJAX_LOADER == null) {
		AJAX_LOADER = new AjaxLoader();
	}
});