/*
 * 弹出框
 * 包含三种预定义类型：normal, alert, confirm，亦可自定义弹出框代码
 */
Fangbole.Dialog = Class.create({
	initialize: function(){	
		var defaultOptions = {
			type: 'normal',//normal, alert, confirm
			id: '',
			element: null,
			title: '',
			content: '',
			mask: true,
			afterInit: Prototype.emptyFunction,
			beforeOpen: Prototype.emptyFunction,
			afterOpen: Prototype.emptyFunction,
			beforeClose: Prototype.emptyFunction,
			afterClose: Prototype.emptyFunction,
			position: 'centered',//centerd, {left: x, top: y}
			closeHandles: [],
			openHandles: [],
			onOK: Prototype.emptyFunction,//返回false会阻止窗口关闭
			onCC: Prototype.emptyFunction,//返回false会阻止窗口关闭
			stopClose: false,
			//onPrompt: Prototype.emptyFunction,
			autoOpen: false,
			escClose: true,
			destroyAfterClose: false
		}
		this.options = defaultOptions;
		//20100401 update
		if(arguments[0].type){
			Object.extend(this.options,{type:$H(arguments[0]).unset('type')});
		}
		Object.extend(this.options, Fangbole.Dialog.config[this.options.type]);
		Object.extend(this.options, arguments[0]);
		
		this.type = this.options.type;
		this.title = this.options.title;
		this.content = this.options.content;
		if(!this.options.element){
			this.id = this.options.id || this._generateDialogId();
			this.element = new Element('div', {className: 'box box_t2', id: this.id}).update(Fangbole.Dialog.template[this.type].evaluate(this));	
			document.body.appendChild(this.element);
		}else{
			this.element = $(this.options.element);
			this.id = this.element.readAttribute('id') || this.options.id || this._generateDialogId();
		}
		this.element.hide();
		this.position = this.options.position;
		this.fixed = !(Prototype.Browser.IE && (navigator.appVersion.indexOf('MSIE 6.0')>-1)&&navigator.appVersion.indexOf('MSIE 7.0')<0&&navigator.appVersion.indexOf('MSIE 8.0')<0);
		this.elDefaultClose = this.element.down('.dialog_close') || null;
		this.elContent = this.element.down('.ct');
		this.elTitle = this.element.down('h2') || this.element.down('h3') || null;
		
		this._initMask();
		
		this.afterInit = this.options.afterInit;
		this.beforeOpen = this.options.beforeOpen;
		this.afterOpen = this.options.afterOpen;
		this.beforeClose = this.options.beforeClose;
		this.afterClose = this.options.afterClose;
		
		this.closeHandles = [];
		this.openHandles = [];
		this.options.openHandles.each(function(elm){
			this.addOpenHandle(elm);
		}, this)
		this.addCloseHandle(this.elDefaultClose);
		this.options.closeHandles.each(function(elm){
			this.addCloseHandle(elm);
		}, this)
		
		this.onPressESC = this._onPressESC.bindAsEventListener(this);
		if(this.options.escClose){
			Event.observe(document, 'keypress', this.onPressESC);
		}
		Event.observe(window, 'resize', this._onResize.bind(this));
		if(Fangbole.Dialog.config[this.options.type].init)
			Fangbole.Dialog.config[this.options.type].init.bind(this)();
		this.afterInit();
		Fangbole.Dialog.instances.push(this);
		if(this.options.autoOpen)
			this.open();
	},
	_initMask: function(){
		if($('dialog_mask')){
			this.elMask = $('dialog_mask');
			return;
		}
		this.elMask = new Element('div', {id: 'dialog_mask'});
		document.body.appendChild(this.elMask);
		this.elMask.hide();
	},
	_initMaskDimension: function(){
		
	},
	_initPositionAndDimensions: function(){
		var winSize = Fangbole.utils.getPageSize(document.body);

		this.elMask.setStyle({width: winSize.windowWidth + 'px', height: winSize.pageHeight + 'px'});
		if(this.position == 'centered'){
			var	winDim = this.element.getDimensions();
			this.element.setStyle({left: '50%', top: '50%'});
			if(this.fixed){
				this.element.setStyle({marginLeft: - winDim.width / 2 + 'px', marginTop: - winDim.height / 2 + 'px'})
			}else{
				this.element.setStyle({marginTop: document.documentElement.scrollTop - winDim.height / 2 + 'px', marginLeft: document.documentElement.scrollLeft - winDim.width / 2 + 'px'});
			}
		}else{
			this.element.setStyle({left: this.position.left + 'px', top: this.position.top + 'px'});
		}
					
	},
	_generateDialogId: function(){
		return 'dialog_' + (Fangbole.Dialog.instances.length + 1);
	},
	open: function(){
		this.beforeOpen();
		this._initPositionAndDimensions();
		this.element.show();
		if(this.options.mask)
			this.elMask.show();
		this.afterOpen();
	},
	close: function(){
		this.beforeClose();
		this.element.hide();
		this.elMask.hide();
		if(this.options.destroyAfterClose)
			this.destroy();
		this.afterClose();
	},
	addCloseHandle: function(element){
		var handle = $(element);
		handle.observe('click', function(){
			if(handle.hasClassName('dialog_ok')){
				if(this.options.onOK() === false)return;
				this.close();
			}
			if(handle.hasClassName('dialog_cc')||handle.hasClassName('dialog_close')){
				if(this.options.onCC() === false)return;
				this.close();
			}
		}.bind(this));
		this.closeHandles.push(handle);
	},
	addOpenHandle: function(element){
		var handle = $(element);
		handle.observe('click', function(e){this.open()}.bindAsEventListener(this));
		this.openHandles.push(handle);
	},
	update: function(oContent){
		
	},
	_onResize: function(){
		this._initPositionAndDimensions();
	},
	_onPressESC: function(e){
		if(e.keyCode == Event.KEY_ESC)
			this.close();
	},
	destroy: function(){
		this.element.remove();
		Event.stopObserving(document, 'keypress', this.onPressESC);
		Fangbole.Dialog.instances = Fangbole.Dialog.instances.without(this);
	}
})

Object.extend(Fangbole.Dialog, {
	template: {
		normal: new Template('\
			<div class="hd"><h2>#{title}</h2><a href="javascript:;" class="dialog_close" hidefocus="true">关闭</a></div>\
			<div class="bd">#{content}</div>\
    		<div class="ft"><div class="do"><input type="button" class="g_btn dialog_ok" value="确定"><input type="button" class="g_btn dialog_cc" value="取消"></div></div>\
		'),
    	alert: new Template('\
			<div class="hd"><h2>#{title}</h2><a href="javascript:;" class="dialog_close" hidefocus="true">关闭</a></div>\
			<div class="bd">#{content}</div>\
			<div class="ft"><div class="do"><input type="button" class="g_btn dialog_ok" value="确定"></div></div>\
    	'),
    	confirm: new Template('\
			<div class="hd"><h2>#{title}</h2><a href="javascript:;" class="dialog_close" hidefocus="true">关闭</a></div>\
			<div class="bd">#{content}</div>\
			<div class="ft"><div class="do"><input type="button" class="g_btn dialog_ok" value="确定"><input type="button" class="g_btn dialog_cc" value="取消"></div></div>\
    	')
	},
	config: {
		normal: {
			init: function(){
				this.elOK = this.element.down('.dialog_ok');
				this.elCC = this.element.down('.dialog_cc');
				this.addCloseHandle(this.elOK);
				this.addCloseHandle(this.elCC);
			}
		},
		alert: {
			mask: false,
			init: function(){
				this.element.addClassName('dialog_alert');
				this.elSubmit = this.element.down('.dialog_ok');
				this.addCloseHandle(this.elSubmit);
			},
			autoOpen: true,
			destroyAfterClose: true
		},
		confirm: {
			mask: false,
			init: function(){
				this.element.addClassName('dialog_confirm');
				this.elOK = this.element.down('.dialog_ok');
				this.elCC = this.element.down('.dialog_cc');
				//this.elOK.observe('click', this.options.onOK.bind(this));
				//this.elCC.observe('click', this.options.onCC.bind(this));
				this.addCloseHandle(this.elOK);
				this.addCloseHandle(this.elCC);
			},
			autoOpen: true,
			destroyAfterClose: true
		}
	},
	instances: []
})