/* When the DOM is loaded. */
$(document).ready(function() {

// remove useless expand button
if (!$('#colMainTitle ul').length && $('#titleLink').length) $('#titleLink').remove();

headerToggle = function(event) {

		// When small.
if ($('#colMainTitle ul').css('display') == "none") {

			// Change icon.
			$('#titleLink').css('background', 'url(templates/main/images/icon_up.png)');

			// Enlarge title bar.
			$("#colMainTitle").animate({
					height: "325px"
				}, 500,
				function() {
					$('#colMainTitle ul').css('display', 'block');
				}
			);

		// If already enlarged.
		} else {

			// Change icon.
			$('#titleLink').css('background', 'url(templates/main/images/icon_down.png)');

$("#colMainTitle").stop();

			// Hide menu.
			$('#colMainTitle ul').css('display', 'none');

			// Make title bar smaller again.
			$("#colMainTitle").animate({
				height: "110px"
			}, 500 );

		}
event.stopPropagation();

	};

	// When the user wants to expand the header.
	$('#titleLink').bind('click', headerToggle);

$('#colMainTitle').bind('click', function(event) {
    var link = $(this).find('#titleLink')[0];
    if (link) headerToggle.call(link, {
        target: link,
        stopPropagation: event.stopPropagation
    });
});


	// When the user sets focus on search input field.
	$('#keyword').bind('focus', function(event) {

		// And the default text is still available.
		if ($('#keyword').val() == 'Zoek op trefwoord') {

			// Clear text field.
			$('#keyword').val('');

		}

	});


	// When the user takes the focus of the search input field.
	$('#keyword').bind('blur', function(event) {

		// And the field is still empty.
		if ($('#keyword').val() == '') {

			// Display default values.
			$('#keyword').val('Zoek op trefwoord');

		}

	});

	// Selected.
	var iSelectBlock = 0;
HPMenuToggle = function(event) {

		// Determine block number.
		var iLength = event.target.id.length;
		var iSelectBlock = event.target.id.charAt(iLength - 1);

		// When inactive.
if (!$(this).hasClass("active")) {

			// Change icon.
			$(this).addClass('active');

			// Enlarge title bar.
			$(this).parent().animate({
					height: "275px"
				}, 500,
				function() {
					$('#block' + iSelectBlock + ' .submenu').css('display', 'block');
				}
			);

		// If already enlarged.
		} else {

			// Change icon.
			$(this).removeClass('active');

$(this).parent().stop();

			// Hide menu.
			$('#block' + iSelectBlock + ' .submenu').css('display', 'none');

			// Make title bar smaller again.
			$(this).parent().animate({
				height: "95px"
			}, 500 );

}

event.stopPropagation();

	};
	// When the user wants to expand the header.
	$('.expandLink').bind('click', HPMenuToggle);

$('.block').bind('click', function(event) {
    var link = $(this).find('.expandLink')[0];
    if (link) HPMenuToggle.call(link, {
        target: link,
        stopPropagation: event.stopPropagation
    });
});


});