$(document).ready(function () {
	
	// set initialUrl to value of hash in url, we then pass it to the localScroll.hash
	var initialUrl = jQuery.url.attr('anchor');
	
//	$('.item_information').show();
	
	// set scrollTo defaults
	$.localScroll.defaults.axis = 'x';
	
	// scroll initially if there's a hash (#something) in the url 
	$.localScroll.hash({
		target: '#content', // Could be a selector or a jQuery object too.
		queue:true,
		duration:1500,
		offset:-200,
		onAfter: function (){
					$('#'+initialUrl).animate( { backgroundColor:'#F9F9F7' }, 1750 ).removeClass('inactive').addClass('active');
					$('div.item').not(this).find('div.item_information').hide();
					$(this).find('div.item_information').show();
				}
	});

	// localScroll
	$.localScroll({
		target: '#content',
		items: 'a',
		offset:-125
	});   
	
	// we do this so that we can identify the specific item clicked on
	$('#content #scroll > div.item').click(
			function() {
			if (!$(this).hasClass('active')) {
				$(this).find('p.plus').fadeOut(1000);
				$('div.item').not(this).find('p.plus').fadeIn(300);
				$('#content').find('.active').removeClass('active').addClass('inactive').animate( { backgroundColor:"#1E1E1E" }, 300 );
				$(this).animate( { backgroundColor:"#F9F9F7" }, 300 ).removeClass('inactive').addClass('active');
				$('div.item').not(this).find('div.item_information').hide();
				$(this).find('div.item_information').slideDown(300);
				$('#city_description').slideUp(300);
			}
		});
		
	$('#city_overview').click(
		function() {
	//			$(this).find('p.plus').fadeOut(300);
				$('div.item').not(this).find('p.plus').fadeIn(300);
				$('#content .active').removeClass('active').addClass('inactive').animate( { backgroundColor:"#1E1E1E" }, 300 ); 	 	
				$('div.item').not(this).find('div.item_information').hide();
				$(this).find('div.item_information').slideDown(1000);
		});
	
	$('#header > h1').click(
		function(){
			$('#content').animate( { left:'0' }, 300);
			$('#city_overview > #city_description').slideDown(700);
			$('div.item').not(this).find('p.plus').fadeIn(300);
			$('#content .active').removeClass('active').addClass('inactive').animate( { backgroundColor:"#1E1E1E" }, 300 ); 	 	
			$('div.item').not(this).find('div.item_information').hide();
			$(this).find('div.item_information').slideDown(1000);
		});

/*
	// serialScroll
	$('#content').serialScroll({
		items:'div.item',
		prev:'#previous',
		next:'#next',
		onAfter: function (){
			$('.item').removeClass('inactive').addClass('active').animate( { backgroundColor:"#F9F9F7"}, 300 );
		}
	});
*/

	$('#city_description').slideDown(700);
	
	$('a.canvas_navigation').css( { backgroundColor: "#1E1E1E", opacity: "0.75" } );

	// change on hover
	$('.inactive').hoverIntent (
		function() {
			$(this).find('p.plus').animate( { color:"#FF5500"}, 300 );
			$(this).find('a.canvas_navigation').animate( { opacity: "0.3" } );
		},
		function() {
			$(this).find('p.plus').animate( { color:"#303030"}, 300 );
			$(this).find('a.canvas_navigation').animate( { opacity: "0.75" } );
		})
	
	$('#about_container').hide();
	
	$('#nav_about').click (
		function(){
			$('#about_container').fadeIn(200);
		})
		
	$("#about").accordion({ header: 'h3', collapsible: false });
		
	$('#about h2').click(
		function() {
			$(this).next().slideDown(300);
			return false;
		}).next().slideUp(300);

	$('#about a.close').click(
		function(){
			$('#about_container').fadeOut(200);
		})

});