var FMW = {
	request : function(url, data, onsuccess, onfailure, oncreate, oncomplete) {
		if (typeof data == "object") {
			data = $H(data).toQueryString();
		}
		
		return new Ajax.Request(
			this.addContext(url), {
					method:data ? "POST" : "GET", 
					postBody:data ? data.toString() : null, 
					onSuccess:function (res, json) {
						var type = res.getResponseHeader("Content-Type");
						(onsuccess || Prototype.emptyFunction)(type.indexOf("json") >= 0 ? res.responseText.evalJSON() : type.indexOf("xml") >= 0 ? res.responseXML : res.responseText, json);
					}, 
					onFailure:onfailure || Prototype.emptyFunction,
					onCreate:oncreate || Prototype.emptyFunction,
					onComplete:oncomplete || Prototype.emptyFunction
				}
		);
	},
	addContext : function(url) {
		var context = "";
		
		if (url.indexOf("http://") < 0 && url.indexOf(context) != 0) {
			url = context + (url.indexOf("/") == 0 ? url : "/" + url);
		}
		
		return url;
	}
};

FMW.MyModal = function() {
	return new FMW.MyModalClass(arguments[0]);
};

/*
tmp;
*/

var MyModalID = 0;

FMW.MyModalClass = Class.create();
FMW.MyModalClass.prototype = {
	options : null,

	initialize : function(options){
		var defaultOpt = {
			title : "Dialog",
			isUseAjax : true,
			zIndex : 10000
		};
				
		this.options = Object.extend(defaultOpt, options||{});

		var divModal = document.createElement('DIV');
		divModal.style.position = 'absolute';
		divModal.style.zIndex = this.options.zIndex;
		this.divModal = divModal;
		
		var divBG = document.createElement('DIV');
		divBG.style.cssText = 'position:absolute;filter:alpha(opacity=40);opacity:0.4;background-color:#AAA;'
		divBG.style.zIndex = (this.options.zIndex-1);
		this.divBG = divBG;
		
		var divModalContainer = document.createElement('DIV');
		
		var modalid = "modal";
		modalid += String(MyModalID);		
		MyModalID++;
		
		this.modalid = modalid;
		
		divModalContainer.id=this.modalid;
		
		var contentsWidth = this.options.width - 20;
		
		var template = "";
		template += '<table cellpadding="0" width="'+contentsWidth+'" cellspacing="0" border="0">	<tr>		<td width="10" height="41"><img src="/img/popdlglt.gif"></td>		<td background="/img/popdlgtop.gif" valign="top">			<table width="100%" cellpadding="0" cellspacing="0" border="0">				<tr>					<td style="font-weight:bold;font-size:13px;color:#FFFFFF;padding-top:10px;">';
		template += this.options.title;
		
		template += '</td>					<td align="right" style="padding-top:8px;"><img src="/img/popclose.gif" id="closeBtn'+this.modalid+'"></td>				</tr>			</table>		</td>		<td width="10"><img src="/img/popdlgrt.gif"></td>	</tr>	<tr>		<td background="/img/popdlgl.gif"></td>		<td bgcolor="#FFFFFF">';
		
		//contents
		template += '<div id="contents'+this.modalid+'" style="padding:5px;text-align:center;"><img src="/images/loading.gif"></div>';
				
		template += '</td>		<td background="/img/popdlgr.gif"></td>	</tr>	<tr>		<td height="10"><img src="/img/popdlglb.gif"></td>		<td background="/img/popdlgb.gif"></td>		<td><img src="/img/popdlgrb.gif"></td>	</tr></table>';
		
		divModalContainer.innerHTML = template;
		
		this.divModalContainer = divModalContainer;		
		divModal.appendChild(divModalContainer);
		
		document.body.appendChild(divBG);
		document.body.appendChild(divModal);
				
		this._setBgDiv();
		this.setPosition();
		this.setSize(this.options.width);
				
		$("closeBtn"+this.modalid).onclick=this.destroy.bindAsEventListener(this);
				
		this.contentsLayer = $('contents'+this.modalid);
		
		if(this.options.isUseAjax)this.setContents(this.options.url, this.options.params);		
	},
	
	_setBgDiv : function(){
		var divBG = this.divBG;
			divBG.style.top = '0px';
    	divBG.style.left = '0px';
    	
    	divBG.id = "divBG";
    	
			divBG.style.width = document.documentElement.scrollWidth +'px';
    	divBG.style.height = document.documentElement.scrollHeight + 'px';
    	
    	divBG.style.width = Screen.getDocumentWidth() + 'px';
    	divBG.style.height = Screen.getDocumentHeight() + 'px';
    	
	},
		
	setSize : function(width){
		if(width){
			this.divModal.style.width = width + 'px';
		}
	},
	
	setPosition : function(){
		this.divModal.style.left = document.documentElement.scrollLeft + Math.ceil(Screen.getDocumentWidth()/2) - (this.options.width/2) + 'px';
		//this.divModal.style.top = Screen.getScrollTop() + (Screen.getViewportHeight()/4);				
		this.divModal.style.top = Screen.getScrollTop() + 50;
	},
		
	setContents : function(url, params){
		
		ajaxOptions = {
			postBody: (params==null)?"{}":JSON.stringify(params),
			onCreate: this._startLoading.bindAsEventListener(this),
			onComplete: this._endLoading.bindAsEventListener(this),
			onSuccess: this._success.bindAsEventListener(this),
			onFailure: this._failure.bindAsEventListener(this)
		}

		FMW.request(url, ajaxOptions.postBody, ajaxOptions.onSuccess, ajaxOptions.onFailure, ajaxOptions.onCreate, ajaxOptions.onComplete);
	},
	
	_startLoading : function(){
		if(this.divModalContainer){
			// loading
		}
	},
	
	_endLoading : function(){
		
		if (this.loadingImg) {
			this.contentsLayer.style.textAlign = 'left';
		}		
	},

	_success : function(data){
		if(this.contentsLayer){
			this.contentsLayer.innerHTML = data;
			
			if(this.options.onLoadFunc)
				this.options.onLoadFunc();
		}
	},

	_failure : function(msg){
	},
	
	destroy : function(ev){

		this.divModal.removeChild(this.divModalContainer);		
		document.body.removeChild(this.divModal);
		document.body.removeChild(this.divBG);		
		

		Element.remove(this.divBG);
		Element.remove(this.divModalContainer);
		Element.remove(this.divModal);		
		Element.remove(this.contentsLayer);

		if(this.options.onDestroy) {
			this.options.onDestroy();
		}
		
		this.divBG = null;
		this.divModalContainer = null;
		this.divModal = null;
		this.contentsLayer = null;
	}
};