$(function() {
	$form = $('#registerUserForm');
	$form.ajaxForm({
		'dataType': 'json',
		'beforeSubmit': function() {
		},
		'success': function(r) {
			if (r.status == 'ok') {
				showLightboxForm(r.pageContent);
			}
			else {
				alert(r.statusMessage);
			}
		}
	})
	.find('.submit').click(function() {
		$form.submit();
	});

});

function registerInviteFriendsForm() {
	$form = $('#inviteFriendsForm');
	$form.ajaxForm({
		'dataType': 'json',
		'beforeSubmit': function() {
		},
		'success': function(r) {
			if (r.status == 'ok') {
				showLightboxForm(r.pageContent, {showBackground: false, bgImg: 'url(/img/lightbox-form-invite-bg.png)'});
			}
			else {
				alert(r.statusMessage);
			}
		}
	})
	.find('.submit').click(function() {
		$form.submit();
	}).end()
	.find('input.email')
		.focus(function() {
			if (!this.cleared) {
				this.value = '';
			}
			this.cleared = true;
		})
}

function showLightbox(action) {
	var props = {};
	switch (action) {
		case 'step1':
			break;
	}

	$.ajax({
		'url': action + '.htm',
		'dataType': 'html',
		'success': function(r) {
			showLightboxForm(r, props);
		}
	});
}

function showLightboxForm(content, props) {
	var $form = $('#lightboxForm'),
		$body = $('body');

	props = $.extend({}, {
		bgImg: 'url(/img/lightbox-form-bg.png)',
		width: 858,
		height: 557,
		closeBtnBgImg: '/img/btn-close-en.png',
		showBackground: true
	}, props);

	if (props.bgImg) {
		$form
			.css({'backgroundImage': props.bgImg, 'width': props.width, 'height': props.height})
			.find('.close')
				.attr({'src': props.closeBtnBgImg});

	}

	var top = document.documentElement.scrollTop + 75 //(document.body.clientHeight - $form.height()) / 2,
		//($body.height() - $form.height()) / 2,
		left = (document.documentElement.scrollWidth - $form.width()) / 2;

	if (props.showBackground) {
		$('#lightboxBackground')
			.css({display: 'block', opacity: 0, height: $body.height() + 24 + 'px'})
			.animate({opacity: 0.8}, 500);
	}

	$form
		.find('.content').html(content ? content : '').end()
		.css({top: top, left: left, display: 'block', opacity: 0})
		.animate({opacity: 1}, 500)
		//.find('.close').click(hideLightboxForm);
}

function hideLightboxForm() {
	$('#lightboxBackground, #lightboxForm').animate({opacity: 0}, 500, 'linear', function() {
		$(this).hide();
	});
}