/**
 * @author     Wynn Chen <wynn.chen.cn@gmail.com>
 * @version    $Id: box.js 301 2008-07-08 04:06:47Z wynn $
 */

/**
 * 导入默认CSS。
 */
new Asset.css('/css/box.css');

/**
 * window.  使用box做名字避免冲突.
 * 
 * @param input 对应的Input元素
 * @param options 选项表
 */
var Box = new Class({
	
	Implements: Options,
	
	options: {
		moveable: false,  //是否可移动？
		moveContainer: document.body, //移动容器。
		modal: true, //独占模式
		className: 'mfBox', //主css类
		width: 510, //宽度 注意宽高是内部有效容积部分，不包括标题与边框。
		height: 300, //高度
		title: '', //窗口的标题
		content: null
	},

	/**
	 * 初始化
	 * 
	 * @param {Object} options 选项表。
	 */
	initialize: function(options) {
		this.setOptions(options);

		if(this.options.modal){
			this.mask = new Element('div', {'class': 'box_mask'}).setStyles({
				'position': 'absolute',
				'left': 0,
				'top': 0,
				'background': 'black',
				'opacity': 0.6
			}).inject(document.body);
		}		
		//建立窗口先(用box避免和window主对象冲突)
		var box = this.box = new Element('div').setStyle('position', 'absolute').inject(document.body); //方便设置position.
		
		//css class
		this.options.className && box.addClass(this.options.className);
		
		//设置拖动:
		this.options.moveable && box.makeDraggable({'container': this.options.moveContainer});

		//建立窗口结构
		var head, body;
		box.store(
			'head', head = new Element('div', {'class': 'box_head'}).inject(box)
		).store(
			'body', body = new Element('div', {'class': 'box_body'}).inject(box)
		);
		
		//标题内容：
		head.store(
			'title', new Element('strong', {'text': this.options.title}).inject(head)
		);
		new Element('span', {'text': '关闭'}).addEvent('click', function(){this.hide()}.bind(this)).inject(head);
		
		//内容：
		if(el = $(this.options.content)){
			body.adopt(el);
		}
		//长宽
		this.setSize(this.options.width, this.options.height);

		//隐藏先.
		this.hide();
		
	}, //end initialize

	/**
	 * 显示
	 */
	show: function(){
		if(this.options.modal){
			this.mask.inject(document.body);
			this.mask.setStyles({
				'width': window.getScrollSize().x,
				'height': window.getScrollSize().y
			});
			this.setPosition({
				'left': (window.getSize().x - this.options.width)/2,
				'top': window.getScroll().y + (window.getSize().y - this.options.height)/2
			}); //先放到中间：		
		}
		this.box.setStyle('display', 'block');
	},
	
	/**
	 * 隐藏
	 */
	hide: function(){
		if(this.options.modal){
			this.mask.dispose();
		}
		this.box.setStyle('display', 'none');
	},

	/**
	 * 设置位置,参数对象允许拥有属性:left, right, top, bottom.
	 * 
	 * @param {Object} pos
	 */	
	setPosition: function(pos){
		this.box.setStyles(pos);
	},

	setSize: function (width, height){
		this.box.retrieve('head').setStyles({
			'width': width
		}); //for IE6
		this.box.retrieve('body').setStyles({
			'width': width,
			'height': height
		});		
	}
});