$(document).ready(function () {
	$("#cities").hide();
	$("#categories").hide();
	
	// choose text for the show/hide link - can contain HTML (e.g. an image)
	var showCities='<a href=\"#\" class=\"cities\"><< Show Cities</a>';
	var hideCities='<a href=\"#\" class=\"cities\">Hide Cities >></a>';
	
	var showCategories='<a href=\"#\" class=\"cities\"><< Show Categories</a>';
	var hideCategories='<a href=\"#\" class=\"cities\">Hide Categories >></a>';
	
	// initialise the visibility check
	var cities_visible = true;
	var categories_visible = true;
	
	// toggles the slickbox on clicking the noted link  
	$('#wideView .cities').click(function() {
		// switch visibility
		cities_visible = !cities_visible;
		
		$('#cities').slideToggle("slow");
		// change the link depending on whether the element is shown or hidden
		$(this).html( (!cities_visible) ? hideCities : showCities);
		
		return false;
	});
	
	$('#wideView .categories').click(function() {
		// switch visibility
		categories_visible = !categories_visible;
		
		$("#wideView .categories").toggle(function(){
			$(this).addClass("active"); 
		}, function () {
			$(this).removeClass("active");
		});
		
		$('#categories').slideToggle("slow");
		// change the link depending on whether the element is shown or hidden
		$(this).html( (!categories_visible) ? hideCategories : showCategories);
		
		return false;
	});
	
	$('.navlogin .submit').click(function() {
		$('#login_response').css("display","block");
		return false;
	});
	
});