var LexBoxBubble = Class.create();

LexBoxBubble.prototype = {

	initialize: function( _elementID, options ) 
	{
		this.options = {
			styleID: 'default',
			text: '',
			float: false,
			align: '',
			constrainBoxWidth: 0,
			constrainBoxHeight: 0
		}
		Object.extend( this.options, options || {} );
		
		this.elementID = _elementID;
		this.styleID = this.options.styleID;
		this.text = this.options.text;
		this.constrainBoxWidth = this.options.constrainBoxWidth;
		this.constrainBoxHeight = this.options.constrainBoxHeight;
		this.float = this.options.float;
		this.align = this.options.align;
		
		this.buildBox();
	},

	buildBox: function() {
		
		if( this.float )
		{ 
			element = Builder.node( 'div', { id:this.elementID, style:'position: absolute; left: 0px; top: 0px; width: 100%;' } );
			document.body.appendChild( element );
			this.align = 'center';
		}
		this.styleBox();
	},
	
	styleBox : function( _newStyle ) {

		if( _newStyle ){ this.styleID = _newStyle; }
		
		if( this.constrainBoxWidth ){ _tableWidth = ' width="' + this.constrainBoxWidth + '" '; }else{ _tableWidth = ''; }
		if( this.constrainBoxHeight ){ _tableHeight = ' height="' + this.constrainBoxHeight + '" '; }else{ _tableHeight = ''; }
		
		if( this.align ){ _tableAlign = 'align="'+this.align+'"'; }else{ _tableAlign = ''; }
		
		switch( this.styleID )
		{
			case "default":

			var _style = "";
	
			_style += '<table ' + _tableWidth + ' ' + _tableAlign + ' border="0" cellspacing="0" cellpadding="0"><tr>';
			_style += '<td><div class="lex-box-bubble-top-left"></div></td>';
			_style += '<td><div class="lex-box-bubble-top-middle"></div></td>';
			_style += '<td><div class="lex-box-bubble-top-right"></div></td>';
			_style += '</tr><tr>';
			_style += '<td class="lex-box-bubble-middle-left"><div class="lex-box-bubble-middle-blank"></div></td>';
			_style += '<td><div class="lex-box-bubble-middle">';

			_style += '<table ' + _tableHeight + ' width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td>';
			_style += '<div id="lex-box-bubble-container-' + this.elementID + '" class="lex-box-bubble-container">' + this.text + '</div>';
			_style += '</td></tr></table>';
			
			_style += '</div></td>';
			_style += '<td class="lex-box-bubble-middle-right"><div class="lex-box-bubble-middle-blank"></div></td>';
			_style += '</tr><tr>';
			_style += '<td><div class="lex-box-bubble-bottom-left"></div></td>';
			_style += '<td><div class="lex-box-bubble-bottom-middle"></div></td>';
			_style += '<td><div class="lex-box-bubble-bottom-right"></div></td>';
			_style += '</tr></table>';
			
			break;
			
			case "black-glass":

			var _style = "";
	
			_style += '<table ' + _tableWidth + ' ' + _tableAlign + ' border="0" cellspacing="0" cellpadding="0"><tr>';
			_style += '<td><div class="lex-blk-bubble-top-left"></div></td>';
			_style += '<td><div class="lex-blk-bubble-top-middle"></div></td>';
			_style += '<td><div class="lex-blk-bubble-top-right"></div></td>';
			_style += '</tr><tr>';
			_style += '<td class="lex-blk-bubble-middle-left"><div class="lex-blk-bubble-middle-blank"></div></td>';
			_style += '<td><div class="lex-blk-bubble-middle">';

			_style += '<table ' + _tableHeight + ' width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td>';
			_style += '<div id="lex-blk-bubble-container-' + this.elementID + '" class="lex-blk-bubble-container">' + this.text + '</div>';
			_style += '</td></tr></table>';
			
			_style += '</div></td>';
			_style += '<td class="lex-blk-bubble-middle-right"><div class="lex-blk-bubble-middle-blank"></div></td>';
			_style += '</tr><tr>';
			_style += '<td><div class="lex-blk-bubble-bottom-left"></div></td>';
			_style += '<td><div class="lex-blk-bubble-bottom-middle"></div></td>';
			_style += '<td><div class="lex-blk-bubble-bottom-right"></div></td>';
			_style += '</tr></table>';
			
			break;
		}

		$( this.elementID ).innerHTML = _style;
		
		if( this.float ){ this.moveBox(); }
	},

	content: function( _content ) {
		$( 'lex-box-bubble-container-' + this.elementID ).innerHTML = _content;
	},
	
	moveBox: function() {
		this.getInnerWindow();
		var el_dimensions = $( this.elementID ).getDimensions();
		$( this.elementID ).setStyle( { top: ( ( this.innerHeight - el_dimensions.height ) / 2 )  + 'px' } );
	},
	
	getInnerWindow: function() {

		this.innerWidth = 0; 
		this.innerHeight = 0;
		
		if( typeof( window.innerWidth ) == 'number' ) {
			this.innerWidth = window.innerWidth;
			this.innerHeight = window.innerHeight;
		} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
			this.innerWidth = document.documentElement.clientWidth;
			this.innerHeight = document.documentElement.clientHeight;
		} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
			this.innerWidth = document.body.clientWidth;
			this.innerHeight = document.body.clientHeight;
		}
	}
}