$(document).ready(function(){
	popup();
})

function popup() {
	var html 
	html += '<div id="popup">';
	html += '<form action="mailpopup.php" method="post">';
	html += '<input type="text" class="name" name="Name" value="Name" />';
	html += '<input type="text" class="email" name="Email" value="Email" />';
	html += '<input type="text" class="telephone" name="Telephone" value="Telephone" />';
	html += '<input type="text" class="event" name="Event" value="Event Date" />';
	html += '<input type="image" class="submit" src="/images/pop-up-submit.png" />';
	html += '</form>';
	html += '<img class="cross" src="/images/pop-up-cross.png" />';
	html += '</div>';
	
	$('body').append(html);
	var windowWidth = $(window).width();
	var windowHeight = $(window).height();
	var popupWidth = 570;
	var popupHeight = 266;
	$('#popup').css({
		'position':'fixed', 
		'background':'url(/images/pop-up-background-old.png)',
		'width':popupWidth+'px',
		'height':popupHeight+'px',
		'top':((windowHeight-popupHeight)/2)+'px',
		'left':((windowWidth-popupWidth)/2)+'px',
		'z-index':'300'
	});
	$('#popup .cross').css({
		'position':'absolute',
		'top':'-12px',
		'left':'557px',
		'cursor':'pointer'
	});
	$('#popup .name').css({
		'left':'20px',
		'padding':'5px',
		'position':'absolute',
		'top':'75px',
		'width':'250px',
		'border':'1px solid e1e0e0',
		'color':'#6f7072'	
	});
	$('#popup .email').css({
		'left':'20px',
		'padding':'5px',
		'position':'absolute',
		'top':'110px',
		'width':'250px',
		'border':'1px solid e1e0e0',
		'color':'#6f7072'
	});
	$('#popup .telephone').css({
		'left':'20px',
		'padding':'5px',
		'position':'absolute',
		'top':'145px',
		'width':'250px',
		'border':'1px solid e1e0e0',
		'color':'#6f7072'
	});
	$('#popup .event').css({
		'left':'20px',
		'padding':'5px',
		'position':'absolute',
		'top':'180px',
		'width':'250px',
		'border':'1px solid e1e0e0',
		'color':'#6f7072'
	});
	$('#popup .submit').css({
		'left':'20px',
		'position':'absolute',
		'top':'220px',
		'width':'63px',
		'height':'24px'
	});
	$('#popup .name').focus(function(){
		if ( $('#popup .name').val() == "Name" ) {
			$('#popup .name').val("");
		}
	})
	
	$('#popup .email').focus(function(){
		if ( $('#popup .email').val() == "Email" ) {
			$('#popup .email').val("");
		}
	})
	
	$('#popup .telephone').focus(function(){
		if ( $('#popup .telephone').val() == "Telephone" ) {
			$('#popup .telephone').val("");
		}
	})
	
	$('#popup .event').focus(function(){
		if ( $('#popup .event').val() == "Event Date" ) {
			$('#popup .event').val("");
		}
	})
	$('#popup .name').blur(function(){
		if ( $('#popup .name').val() == "" ) {
			$('#popup .name').val("Name");
		}
	})
	
	$('#popup .email').blur(function(){
		if ( $('#popup .email').val() == "" ) {
			$('#popup .email').val("Email");
		}
	})
	
	
	$('#popup .cross').click(function(){
		$('#popup').remove();
	})
	$('#popup form').submit(function(){
		var name = $('#popup .name').val();
		var email = $('#popup .email').val();
		var form = $('#popup form');
		
		if ( name.length > 0 && name != "Name" && email.length > 0 && email != "Email" ) {
			action = form.attr('action');
			data = form.serialize();
			$.post(action, data, function(){
				$('#popup').remove();
				return false;
			})
		} else {
			alert ('Please complete the form');
		}
		return false;
	});	
}