// id: 	Didv ID to popup, 
// popWidth: Width of the popup.
// X: 	Close X button on the top right. 1 to display. 0 to not display
function popup(id, popWidth, x, fadeclick) 
{
		$('#'+id).attr("class", "popup_block");
		if(!popWidth) popWidth=400;
		//Fade in the Popup and add close button

		if(x == 1){
		$('#'+id).fadeIn(100).css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close" id="close('+id+')" ><img src="images/symbol/close_pop.png" class="btn_close" title="Close Window" alt="Close" border=0 width="32" /></a>');
		}else{
			$('#'+id).fadeIn(100).css({ 'width': Number( popWidth ) });
		}
		
		//Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
		var popMargTop = ($('#'+id).height() + 40) / 2;
		var popMargLeft = ($('#'+id).width() + 80) / 2;
		
		//Apply Margin to Popup
		$('#'+id).css({ 
			'margin-top' : -popMargTop,
			'margin-left' : -popMargLeft
		});
		//Fade in Background

		if(fadeclick == 0)
		{
			$('body').append('<div id="fade2"></div>'); //Add the fade layer to bottom of the body tag.
			$('#fade2').css({'filter' : 'alpha(opacity=50)'}).fadeIn(); //Fade in the fade layer 
		} else {
			$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
			$('#fade').css({'filter' : 'alpha(opacity=50)'}).fadeIn(); //Fade in the fade layer 
		}
		return false;
}

//(Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
	  	$('#fade , .popup_block').fadeOut(function() {
			$('#fade, a.close').remove();  
	}); //fade them both out
		
		return false;
});