var FloatBox = {
	minWidth: null,
	minHeight: null,
	myDrag: null,
	startPosition: null,
	rowHilight: null,
	scrolling: false,

	init: function() {
		document.write('<div id="float-box" style="display: none">');
		document.write('	<div id="toolbar">');
		document.write('		<a href="javascript:void(0)" id="save-btn">Save</a>');
		document.write('		<a href="javascript:void(0)" id="reset-btn">Cancel</a>');
		document.write('		<a href="javascript:void(0)" id="print-btn">Print</a>&nbsp;&nbsp;');
		document.write('		<a href="javascript:void(0)" id="close-btn">Close</a>');
		document.write('	</div>');
		document.write('	<div id="content"></div>');
		document.write('</div>');
		//new Draggable($('float-box'), { scroll: window });
	},

	create: function(mw, mh) {
		this.minWidth = mw,
		this.minHeight = mh;

		this.createBoxStyle();
		$('float-box').show();
		Event.observe('reset-btn', 'click', this.reset);
		Event.observe('close-btn', 'click', this.close);
		Event.observe('print-btn', 'click', this.print);
		$('print-btn').hide();
		$('save-btn').hide();
		$('reset-btn').hide();
		this.createDimming();
		$('dimming').show();
	},

	createBoxStyle: function() {
		$('float-box').setStyle({
			width: 'auto',
			height: 'auto',
			display: 'none',
			position: 'absolute',
			//position: 'fixed',
			border: '1px solid #555555',
			background: '#FFFFFF',
			zIndex: 9999,
			padding: '5px'
		});
		$('toolbar').setStyle({
			width: 'auto',
			height: 'auto',
			position: 'relative',
			textAlign: 'right',
			fontWeight: 'bold',
			padding: '0 5px 2px 0',
			//cursor: 'move',
			fontSize: '15px'
		});
		$$('#toolbar a').invoke("setStyle", "text-decoration: none; color: #333333");
		$$('#toolbar a').invoke("observe", 'mouseover', function(){
			this.setStyle({textDecoration: 'none', color: '#777777'});
		});
		$$('#toolbar a').invoke("observe", 'mouseout', function(){
			this.setStyle({textDecoration: 'none', color: '#333333'});
		});
		$('save-btn').setStyle({
			float: 'left',
			paddingRight: '10px'
		});
		$('reset-btn').setStyle({
			float: 'left'
		});
		$('content').setStyle({
			width: '200px',
			height: '100px',
			position: 'relative',
			borderTop: '1px solid #555555',
			borderBottom: '1px solid #555555',
			marginBottom: '5px',
			//overflow: 'auto',
			textAlign: 'left'
		});
		if(this.scrolling) {
			$('content').setStyle({ overflow: 'auto' });
		}
	},

	reset: function() {
		var frm = $$('#content form');
		if(frm.length > 0) {
			frm[0].reset();
		}
		$$('.pass').invoke('update');
		$$('.fail').invoke('update');
	},

	close: function() {
		$('float-box').hide();
		$('dimming').hide();
		if(FloatBox.startPosition != null) {
			window.scrollTo(0, FloatBox.startPosition);
		}
		if(FloatBox.rowHilight != null) {
			if($(FloatBox.rowHilight) != null) {
				new Effect.Highlight($(FloatBox.rowHilight), { startcolor: '#FFFF00', endcolor: '#FFFFFF' });
			}
		}
	},

	print: function() {
		$('print').update($('content').innerHTML);
		$('print').innerHTML;
		$('print').setStyle({
			width: $('content').style.width,
			height: $('content').style.height,
			position: 'relative',
			padding: '5px',
			overflow: 'auto',
			textAlign: 'left'
		});
		//printPage();
	},

	insert: function(res) {
		// clear width/height
		$('float-box').setStyle({
			width: 'auto',
			height: 'auto'
		});
		$('content').setStyle({
			width: 'auto',
			height: 'auto'
		});

		// box content
		$('content').update(res);

		// set position
		this.setBoxPosition.delay(0.1);
		//this.setBoxPosition();
	},

	setBoxPosition: function() {
		var toolbarHeight = $('toolbar').getHeight(),
			scroll = document.viewport.getScrollOffsets(),
			screenHeight = document.viewport.getHeight(),
			screenWidth = document.viewport.getWidth();

		// box height
		if (this.scrolling && $('float-box').getHeight() > screenHeight) {
			$('float-box').style.height = (document.viewport.getHeight()-40)+'px';
			$('content').style.height = ($('float-box').getHeight()-toolbarHeight-30)+'px';
			$('content').style.width = ($('content').getWidth()+10)+'px';
		}
		if ($('content').getHeight() < this.minHeight) {
			$('float-box').style.height = (this.minHeight+toolbarHeight+20)+'px';
			$('content').style.height = this.minHeight+'px';
		}
		// box width
		if ($('float-box').getWidth() > 900) {
			$('float-box').style.width = '900px';
			$('content').style.width = '890px';
		}
		if ($('content').getWidth() < this.minWidth) {
			$('float-box').style.width = this.minWidth+'px';
		}
		$('float-box').style.width = $('content').getWidth()+'px';

		if ($('content').getWidth() > screenWidth) {
			screenWidth = $$('body')[0].getWidth();
		}

		if ($('float-box').getHeight() < screenHeight) {
			$('float-box').style.top = scroll.top+(screenHeight-$('float-box').getHeight())/2+'px';
			FloatBox.startPosition = null;
		}
		else {
			if(this.scrolling) {
				$('float-box').style.top = (scroll.top+10)+'px';
			}
			else {
				FloatBox.startPosition = scroll.top;
				$('float-box').style.top = '10px';
				window.scrollTo(0, 0);
			}
		}
		// box position : top & left
		//$('float-box').style.top = scroll.top+(screenHeight-$('float-box').getHeight())/2+'px';
		$('float-box').style.left = scroll.left+(screenWidth-$('float-box').getWidth())/2+'px';
	},

	createDimming: function() {
		var page = $$('body')[0].getDimensions();
		var h = document.viewport.getHeight() > page.height ? document.viewport.getHeight() : page.height;
		if ($('dimming') == null) {
			new Insertion.After('float-box', '<div id="dimming"></div>');
		}

		// dimming
		$('dimming').setStyle({
			position: 'absolute',
			top: '0px',
			left: '0px',
			background: '#555555',
			opacity: 0.75,
			width: page.width+'px',
			height: h+'px'
		});
	}
};