$(document).ready(function(){
	// set up togglers
	$('.toggle').next().hide();
	$('.toggle').click(function(){
		$(this).next().slideToggle('slow');
	});
	// set up self-labeling form fields
	$('.selflabel').each(function() {
		if ($(this).attr('type')=='password') {
			// we have to make the real password field invisible,
			// and put a plain-text field overtop, since we can't change
			// the field type via javascript
			$('<input type="text" />')
				.val($(this).attr('title'))
				.insertAfter($(this))
				.focus(function() {
					$(this).hide().prev().show().focus();
				})
			;
			$(this).hide().blur(function(){
				if ($(this).val()=='') {
					$(this).hide().next().show();
				}
			});
		} else {
			if ($(this).val() == '') $(this).val($(this).attr('title'));
			$(this).focus(function() {
				if ($(this).val() == $(this).attr('title')) {
					$(this).val('');
				}
			}).blur(function() {
				if ($(this).val() == '' ) {
					$(this).val($(this).attr('title'));
				}
			});
		}
	});
	// make sure we blank out the self-labels on submission
	$('form').submit(function() {
		$(this).find('.selflabel').focus();
	});
	// set up the login modal dialog
	var $login = $('#login_form')
		.dialog({
			autoOpen: false,
			modal: true,
			resizable: false,
			title: 'Log In'
		});

	$('#login_link').click(function () {
		$login.dialog('open');
		// blur so that we can see the selflabel in the modals
		$login.find('input').blur();
		return false;
	});
	var $signup = $('#signup_form')
		.dialog({
			autoOpen: false,
			modal: true,
			resizable: false,
			title: 'Join Now',
			width: '400px'
		});

	$('#signup_link').click(function () {
		$signup.dialog('open');
		$signup.find('input').blur();
		return false;
	});

	var $invite = $('#invite_form')
		.dialog({
			autoOpen: false,
			modal: true,
			resizable: false,
			title: 'Invite Friends',
			width: '400px'
		});


	$('.invite_link').click(function () {
		$invite.dialog('open');
		$invite.find('input').blur();
		return false;
	});


	var $promo = $('#watch_promo') 
		.dialog({ 
			autoOpen: false, 
			modal: true, 
			resizable: false, 
			title: 'Learn More', 
			width: '900px' 
		}); 
		 
	$('#watch_promo_link').click(function () { 
		$promo.dialog('open'); 
		return false; 
	}); 

	var $demo = $('#watch_demo')
		.dialog({
			autoOpen: false,
			modal: true,
			resizable: false,
			title: 'Watch StudyUp Demo Video Now',
			width: '900px'
		});
	$('#watch_demo_link').click(function () {
		$demo.dialog('open');
		return false;
	});
});