$(document).ready(function() {

	// store lists of sans and serif menus
	var sans_serif = $('#fontfont1').children().clone();
	var serif = $('#fontfont2').children().clone();

	// generate list of all fonts, sorted by value
	sans_serif_clone = jQuery.makeArray( sans_serif.clone() );
	serif_clone = jQuery.makeArray( serif.clone() );
	var all_fonts = Array();
	while ( sans_serif_clone.length > 0 || serif_clone.length > 0 ) {
		if ( sans_serif_clone[0].value == 'zzzz' && serif_clone[0].value == 'zzzz' )
		{
			all_fonts.push( sans_serif_clone.shift() );
			serif_clone.shift();
		}
		if ( serif_clone.length == 0 || ( sans_serif_clone.length != 0 && sans_serif_clone[0].value < serif_clone[0].value ) ) {
			all_fonts.push( sans_serif_clone.shift() );
		}
		else {
			all_fonts.push( serif_clone.shift() );
		}
	}
	all_fonts = $(all_fonts);

	// on font group 1 change: replace menus if applicable
	$('#fontgroup1').change(function() {
		if ( $(this).val() == 'sans' ) {
			$('#fontgroup2text').text('serifs');
			$('#fontgroup2').val('serifs');
			$('#replacement2').show();
			$('#fontfont2').empty();
			$('#fontfont2').append( serif.clone() );
			$('#fontfont1').empty();
			$('#fontfont1').append( sans_serif.clone() );
			$('#fontfont1').change();
			$('#fontfont2').change();
		}
		else if ( $(this).val() == 'serifs' ) {
			$('#fontgroup2text').text('sans serifs');
			$('#fontgroup2').val('sans');
			$('#replacement2').show();
			$('#fontfont2').empty();
			$('#fontfont2').append( sans_serif.clone() );
			$('#fontfont1').empty();
			$('#fontfont1').append( serif.clone() );
			$('#fontfont1').change();
			$('#fontfont2').change();
		}
		else {
			$('#fontgroup2').val('');
			$('#replacement2').hide();
			$('#fontfont1').empty();
			$('#fontfont1').append( all_fonts.clone() );
			$('#fontfont1').change();
		}
	});

	// on fontfont1  or fontfont2 change: update "More about" link
	$('#fontfont1').change(function() {
		var font_family_name = $( '[value=' + $(this).val() + ']' ).first().text();
		var font_family_url = 'http://www.fontshop.com/fonts/downloads/fontfont/' + font_family_name.toLowerCase().replace(/ /g, '_') + '/';
		$('#moreabout1').text('More about ' + font_family_name + ' »' );
		$('#moreabout1').attr('href', font_family_url );
	});
	$('#fontfont2').change(function() {
		var font_family_name = $( '[value=' + $(this).val() + ']' ).first().text();
		var font_family_url = 'http://www.fontshop.com/fonts/downloads/fontfont/' + font_family_name.toLowerCase().replace(/ /g, '_') + '/';
		$('#moreabout2').text('More about ' + font_family_name + ' »' );
		$('#moreabout2').attr('href', font_family_url );
	});

	// on URL input focus: clear instruction
	$("#URL").focus(function() {
		if ( $(this).hasClass('URL-gray') ) {
			$(this).removeClass('URL-gray');
			$(this).val('');
		}
		return false;
	});

	// on URL input change: remove "Show original" link
	$("#URL").change(function() {
		$('#show-original').text('');
	});
	
	// initialization on load //  //  //  //  //  //  //  //  //  //  //  //  //  //  //  //  //  //  //  //  //  //  //  //  //  //
	
	// always invoke fontgroup1 change to sort out the menus
	$('#fontgroup1').change();
	
	// display "Show original" link if applicable
	if ( $("#URL").val().indexOf('Enter') !== 0  ) {
		$('#show-original').text('Show original webpage »');
		$('#show-original').attr('href', ('http://' + $("#URL").val()).replace('http://http://', 'http://') );
	}
});