jQuery(function()
{
	lettertype();
	filterHandler();
});

function lettertype()
{
	jQuery('#typtext').keyup(function()
	{
		jQuery('#regel1').html(jQuery(this).val());
	});
	
	jQuery('#typtext1').keyup(function()
	{
		jQuery('#regel2').html(jQuery(this).val());
	});
	
	jQuery('#select-font').change(function()
	{
		switch(jQuery(this).val().toLowerCase())
		{
			case 'arial':
				jQuery('#regel1').css('font-family', 'Arial, Helvetica, sans-serif');
				jQuery('#regel2').css('font-family', 'Arial, Helvetica, sans-serif');
				break;
			case 'verdana':
				jQuery('#regel1').css('font-family', 'Verdana, Geneva, sans-serif');
				jQuery('#regel2').css('font-family', 'Verdana, Geneva, sans-serif');
				break;
			case 'tahoma':
				jQuery('#regel1').css('font-family', 'Tahoma, Helvetica, sans-serif');
				jQuery('#regel2').css('font-family', 'Tahoma, Helvetica, sans-serif');
				break;
			case 'berlin sans':
				jQuery('#regel1').css('font-family', 'Berlin Sans FB');
				jQuery('#regel2').css('font-family', 'Berlin Sans FB');
				break;
			case 'century gothic':
				jQuery('#regel1').css('font-family', 'Century Gothic');
				jQuery('#regel2').css('font-family', 'Century Gothic');
				break;
			case 'century':
				jQuery('#regel1').css('font-family', 'Century');
				jQuery('#regel2').css('font-family', 'Century');
				break;
		    case 'comic sans':
				jQuery('#regel1').css('font-family', 'Comic Sans MS');
				jQuery('#regel2').css('font-family', 'Comic Sans MS');
				break;
			case 'times new roman':
				jQuery('#regel1').css('font-family', 'Times New Roman');
				jQuery('#regel2').css('font-family', 'Times New Roman');
				break;
			case 'trebuchet ms':
				jQuery('#regel1').css('font-family', 'Trebuchet MS');
				jQuery('#regel2').css('font-family', 'Trebuchet MS');
				break;
			case 'lucida lalligraphy':
				jQuery('#regel1').css('font-family', 'Lucida Calligraphy');
				jQuery('#regel2').css('font-family', 'Lucida Calligraphy');
				break;
		}
	});
	
	jQuery('#select-color').change(function()
	{
		switch(jQuery(this).val().toLowerCase())
		{
			case 'zwart':
				jQuery('#text').css('background-image','url(/graveren/zwart.jpg)'); 
				jQuery('#text').css('color','#fff'); 
				jQuery('#text').css('vertical-align', 'middle'); 
				break;
			case 'wit':
				jQuery('#text').css('background-image','url(/graveren/wit.jpg)'); 
				jQuery('#text').css('color','#000'); 
				jQuery('#text').css('vertical-align', 'middle'); 
				break;
			case 'zilver':
				jQuery('#text').css('background-image','url(/graveren/zilver.jpg)'); 
				jQuery('#text').css('color','#000'); 
				jQuery('#text').css('vertical-align', 'middle'); 
				break;
			case 'brons':
				jQuery('#text').css('background-image','url(/graveren/bruin.jpg)'); 
				jQuery('#text').css('color','#000'); 
				jQuery('#text').css('vertical-align', 'middle'); 
				break;
			case 'goud':
				jQuery('#text').css('background-image','url(/graveren/goud.jpg)'); 
				jQuery('#text').css('color','#000'); 
				jQuery('#text').css('vertical-align', 'middle'); 
				break;
		}
	});
	
	
	jQuery('#select-size1').change(function()
	{
		switch(jQuery(this).val().toLowerCase())
		{
			case '10':
				jQuery('#regel1').css('font-size', '10pt');
				break;
			case '11':
				jQuery('#regel1').css('font-size', '11pt');
				break;
			case '12':
				jQuery('#regel1').css('font-size', '12pt');
				break;
			case '13':
				jQuery('#regel1').css('font-size', '13pt');
				break;
			case '14':
				jQuery('#regel1').css('font-size', '14pt');
				break;
		}
	});
	
	jQuery('#select-size2').change(function()
	{
		switch(jQuery(this).val().toLowerCase())
		{
			case '10':
				jQuery('#regel2').css('font-size', '10pt');
				break;
			case '11':
				jQuery('#regel2').css('font-size', '11pt');
				break;
			case '12':
				jQuery('#regel2').css('font-size', '12pt');
				break;

		}
	});
	
}

function filterHandler()
{
	jQuery('#filter ul li a').click(function()
	{
		jQuery(this).blur();
		var ul = jQuery(this).parents('li').find('ul');
		if(ul.height() == 0)
		{
			var open = jQuery('#filter ul.open');
			if(open.size() > 0)
			{
				var height_open = open.removeClass('open').find('li').size() * 20;
				open.animate({height : '0px'}, height_open * 2, 'linear', function() 
				{ 
					var height = ul.addClass('open').find('li').size() * 20;
					ul.animate({height : height + 5 + 'px'}, height * 2, 'linear');
				});
			}
			else
			{
				var height = ul.addClass('open').find('li').size() * 20;
				ul.animate({height : height + 5 + 'px'}, height * 2, 'linear');
			}
		}
		else
		{
			var height = ul.removeClass('open').find('li').size() * 20;
			ul.animate({height : '0px'}, height * 2, 'linear');
		}
	});
}