jQuery(document).ready(function() {	
	//make sure document is ready DONT REMOVE
	if(document.readyState != "complete"){
		setTimeout( arguments.callee, 100 );
		return;
	}
	
	//set the dialog and the mask
	var dialog = jQuery("#dialog");
	var mask = jQuery("#mask");
	
	//maks sure there is a dialog
	if(dialog.length < 1){
		return false;
	}
	
	//Get the screen height and width
	var maskHeight = jQuery(document).height();
	var maskWidth = jQuery(window).width();

	//Set heigth and width to mask to fill up the whole screen
	mask.css({'width':maskWidth,'height':maskHeight});
	
	//set it back to block display
	dialog.css({ 'display':'block', 'width':800 });	
	
	//Get the position
	var winH = getTop(dialog);
	var winW = getLeft(dialog);
	
	//make sure that the top isnt above the window
	if(winH < 0)
		winH=0;
	
	//set the popup window off screen
	dialog.css('top', dialog.height() * -1);
	dialog.css('left', dialog.width() * -1);
	
	//transition effect	
	mask.css('display','block');
	mask.css('opacity','0');
	mask.fadeTo(2000,0.8);
	
	//perform the animation
	dialog.animate( { left:winW }, { queue: false, duration: 3000 } ).animate( { top:winH } , 3000 );
	
	//if close button is clicked
	jQuery('.window .close').click(function (e) {
		//Cancel the link behavior
		e.preventDefault();
		
		mask.hide();
		jQuery('.window').hide();
	});		
	
	//if mask is clicked
	mask.click(function () {
		jQuery(this).hide();
		jQuery('.window').hide();
	});
	
	jQuery(window).scroll(function(){
		reposition(dialog);
	});
	
});

function getTop(ele){
	return (jQuery(window).scrollTop() + (jQuery(window).height()/2))-ele.height()/2;
}

function getLeft(ele){
	return (jQuery(window).scrollLeft() + (jQuery(window).width()/2))-ele.width()/2;
}

function reposition(ele){
	//stop animation
	if(ele.is(":animated")){
		ele.stop();
	}
	
	//get top and left
	var top = getTop(ele);
	var left = getLeft(ele);
	
	//animate
	ele.animate({ 'top':top, 'left':left },1000);
}