//
// center an alement
//
function center( element, relative_to ){

	// default: relative to the window
	relative_to = relative_to || $(window);

	relative_to.css( 'position', 'relative' );

	// center it
	element.css({
		'position': 'fixed',
		'top': relative_to.height()/2 - element.outerHeight()/2,
		'left': relative_to.width()/2 - element.outerWidth()/2
	});
	// center the element when resizing the window (e.g. zoom in/out) or pressing a key
	$( window ).bind('resize keypress keyup', function(){

		element.css({
			'top': relative_to.height()/2 - element.outerHeight()/2,
			'left': relative_to.width()/2 - element.outerWidth()/2
		});

	});

}

//
// a simple dialog
//
function dialog( dialogClass ){

	//
	// set CSS-classes
	//
	var cssClass = {
			dialogBg: 'dialog-bg',
			dialogBox: 'dialog',
			dialogHeadline: 'dialog-headline',
			dialogContent: 'dialog-content'
		};

	var is_open = false;

	var getClass = dialogClass;

	var is_in_DOM = false;


	//
	// display the dialog
	//
	this.display = function( headline, content, load_from_file, no_element, callback ){

		var	boxDialogBg, boxDialog, boxHeadline, boxContent,
			is_id, is_class;

		load_from_file = load_from_file || 0;
		no_element = no_element || 0;
		callback = callback || function(){};

		// don't create the elements, if its already was done
		if ( !is_in_DOM ){

			// create the dialog-background
			$( '<div>' )
				.appendTo( 'body' )
				.hide()
				.addClass( getClass )
				.addClass( cssClass.dialogBg );
				// update the var
				boxDialogBg = $( '.'+getClass+'.'+cssClass.dialogBg );


			// create the dialog-box
			$( '<div>' )
				.appendTo( 'body' )
				.hide()
				.addClass( getClass )
				.addClass( cssClass.dialogBox );
				// update the var
				boxDialog = $( '.'+getClass+'.'+cssClass.dialogBox );


			// create the dialog-headline (if any)
			if ( headline != null ){

				$( '<h1>' )
					.appendTo( boxDialog )
					.addClass( cssClass.dialogHeadline );
					// update the var
					dialogHeadline = $( '.'+cssClass.dialogHeadline, boxDialog );

			}


			// create the dialog-content
			$( '<div>' )
				.appendTo( boxDialog )
				.addClass( cssClass.dialogContent );
				// update the var
				dialogContent = $( '.'+cssClass.dialogContent, boxDialog );

		}


		// begin functions
		if ( headline != null ){
			dialogHeadline.html( headline );
		}

		if ( load_from_file ){
			dialogContent.load( content );
		}
		else{
			// check if the value looks like an id or class
			is_id = content.substr(0,1) == '#';
			is_class = content.substr(0,1) == '.';

			// if there is any element with this id or class, use the content of it (except its denied by "no_element")
			dialogContent.html( !no_element && $(content).length > 0 && (is_id || is_class)
								?
									$(content).html()
								:
									content );
		}

		// center it
		center( boxDialog );


		// fade in the dialog + bg
		boxDialogBg.fadeIn( 500 );
		boxDialog.fadeIn( 600, callback );

		is_open = true;

	};


	//
	// hide + remove the dialog
	//
	this.closeDialog = function(){

		// remove the dialog-background + dialog-box from the DOM
		$( '.'+getClass+'.'+cssClass.dialogBox +', .'+getClass+'.'+cssClass.dialogBg ).fadeOut( 500, function(){ $(this).remove(); } );

		is_open = false;
		is_in_DOM = false;

	};


	//
	// just hide the dialog (don't delete it from the DOM)
	//
	this.hideDialog = function(){

		// hides the dialog-background + dialog-box from the DOM
		$( '.'+getClass+'.'+cssClass.dialogBox +', .'+getClass+'.'+cssClass.dialogBg ).fadeOut( 500 );

		is_open = false;
		is_in_DOM = true;

	};


	//
	// getter to check, if the dialog is opened
	//
	this.isOpen = function(){

		return is_open;

	};


};