var BF_UI = {

	closeDialog: function( id, args ) {
		if ( !args ) args = {};
		var element = $(id);
	
		element.hide();
		if (typeof user_post != 'undefined' && user_post.show_video_preview) $('video-form-preview').show();
		var ifrm = $(id).getElementsByTagName('IFRAME')[0];
		if ( ifrm )
			ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;

		if ( args.loadDefaultDiv ) {
			if ( ifrm ) {
				if ( ifrm.document.getElementById( args.loadDefaultDiv ) ) {
					ifrm.document.getElementById( args.loadDefaultDiv ).style.display='block';
				}
			}
		}
		
		$$('embed, object, select, .has-embed').each(function(el){
			el.style.visibility = 'visible';
		});
	
		
		if (ifrm && typeof ifrm.minimizeEventHandler == 'function')
		{
			ifrm.minimizeEventHandler();
		}
		
		if ( args.onComplete ) {
			args.onComplete();
		}
	},
	
	create_or_show_dialog: function( obj ) {
		if (! $(obj.id) ) {
			if ( !obj.width ) obj.width = 800;
			if ( !obj.height ) obj.height = 465;
			if ( !obj.scrolling ) obj.scrolling = 'no';
			if ( !obj.title ) obj.title = 'Dialog';
			if ( !obj.url.match(/^https?:\/\//) ) obj.url = obj.url;
			var template = new Template(' \
				<div class="bf_overlay_mask"></div> \
				<div class="bf_dialog"> \
					<div class="bf_dialog_header"><span class="title">#{title}</span> <a href="#" onclick="BF_UI.closeDialog(\'#{id}\',{loadDefaultDiv:\'#{url}\'});return false;" class="close">&times;</a></div> \
					<div class="bf_dialog_content"> \
						<iframe id="#{id}_iframe" src="#{url}" name="#{id}_iframe" frameborder="0" scrolling="#{scrolling}" allowTransparency="true" width="#{width}" height="#{height}"></iframe> \
					</div> \
				</div> \
			');
			var html = template.evaluate(obj);
			var div = document.createElement('div');
			div.id = obj.id;
			div.style.display = 'none';
			div.className = 'bf_canvas';
			div.innerHTML = html;
			document.getElementsByTagName('BODY')[0].appendChild(div);
		}
		BF_UI.showDialog(obj.id,obj.title);
	},
  
  /**
  *   showDialog(id, title) - shows a dialog and positions it vertically in the viewport
  *		@id - dom id of dialog
  *   @title - text title to use in top bar of dialog
  */
  showDialog: function ( id ) {
		try {
			if (typeof user_post != 'undefined' && $('video-form-preview') && $('video-form-preview').visible() ) {
				$('video-form-preview').hide();
				user_post.show_video_preview = true;
			}
			else if (typeof user_post != 'undefined') {
				user_post.show_video_preview = false;
			}
		}
		catch(e){
			user_post.show_video_preview = false;
		}
		var element = $(id);
	
		var title = "Crop Image";
	
		if (arguments.length > 1)
		{
			title = arguments[1];
		}
	
		// need to show it before it has height in some browsers?
		element.show();
	
		$$('embed, object, select, .has-embed').each(function(el){
			el.style.visibility = 'hidden';
		});
	
		var titles = element.select('.title');
		if (titles && titles.length > 0)
		{
			titles.first().update( title );
		}
	
		// set top position
		var dialog = element.select('.bf_dialog').first();
		if( dialog ) dialog.style.top = Math.floor( Math.max( document.viewport.getScrollOffsets().top, document.viewport.getScrollOffsets().top + (document.viewport.getHeight() / 2) - ($(dialog).getHeight() / 2) ))  + 'px';	

		/*
		// Doing this right now is a little funky since the content area needs
		// to be resized too, and that's in an iframe on another page.
		// For now we can use styles to customize height & widths.
	
		if(!options) options = {};

		if(!options.height) { options.height = 525; }
		if(!options.width)  { options.width = 800;	}

		element.select('.bf_dialog').first().style.height = options.height  + 'px';
		element.select('.bf_dialog_content').first().style.height = (options.height - 35) + 'px';
		element.select('.bf_dialog_content iframe').first().style.height = (options.height - 35) + 'px';

		if( options.no_footer == undefined ) {
			element.select('.bf_dialog_content_area').first().style.height = (options.height - 35) + 'px';
		} else { 
			element.select('.bf_dialog_content_area').first().style.height = (options.height - 70) + 'px';
		}
	
		element.select('.bf_dialog').first().style.width = options.width  + 'px';
		element.select('.bf_dialog').first().style.marginLeft = '-' + Math.floor(options.width / 2) + 'px';
		// element.select('.bf_dialog_content_area').first().style.width = options.width + 'px';
		*/
	},
	
	/**
	 *	renderEntities(text) -  will render html entities for display in a textarea, ie: &pi will be converted to the wichar for pi
	 *  @text - text you want, um, rendered
	 *
	 */
	 renderEntities: function( text ) {
	 	var divid = 'BF_RENDER_ENTITIES_DIV_73625';
	 	var renderDIV = $(divid);
	 	if(! renderDIV) {
	 		var bfbody = document.getElementsByTagName('body')[0];
	 		renderDIV = document.createElement('DIV');
	 		renderDIV.setAttribute('id', divid); renderDIV.id = divid;
	 		renderDIV.style.display = 'none';
	 		bfbody.appendChild(renderDIV);
	 	}
	 	renderDIV.innerHTML = text;
	 	text = renderDIV.innerHTML;

	 	// ff 3 doesn't seem to want to render &lt;, &gt; and &amp; so we'll do it ourselves.
	 	text = text.replace(/&gt;/g, '>').replace(/&lt;/g, '<').replace(/&amp;/g, '&');

	 	return text;
	 } 
}