$(document).ready(function(){

	function selectNav() {
        $(this)
            .parents('ul:first')
                .find('a')
                    .removeClass('act')
                .end()
            .end()
            .addClass('act');
    }
	
	function contentHeight() {	
		$('#content').css('height', $(this).height());
		//$('#content .content').css('height', $(this).height());
		
		$('#content .content').animate({
			height: $(this).height()
		}, 1000);
    }
	
    $('#header').find('a').click(selectNav);

    // go find the navigation link that has this target and select the nav
    function trigger(data) {
        var el = $('#header').find('a[href$="' + data.id + '"]').get(0);
        selectNav.call(el);
		var el = $('#footer').find('a[href$="' + data.id + '"]').get(0);
        selectNav.call(el);
    }

    if (window.location.hash) {
        trigger({ id : window.location.hash.substr(1) });
		var elx = $('#content').find('div[id$="' + window.location.hash.substr(1) + '"]').get(0);
		contentHeight.call(elx);
    } else {
        $('#header ul a:first').click();
		var elx = $('#content').find('div[id$="' + 1 + '"]').get(0);
		contentHeight.call(elx);
    }
	

	// The default axis is 'y', but in this demo, I want to scroll both
	$.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:1000
	});
	 
	$.localScroll({
		target: '#content', // could be a selector or a jQuery object too.
		queue:true,
		duration:1000,
		hash:true,
		onBefore:function( e, anchor, $target ){
			// The 'this' is the settings object, can be modified
			var elx = $('#content').find('div[id$="' + anchor.id + '"]').get(0);
			contentHeight.call(elx);
		},
		onAfter: trigger
		//onAfter:function( anchor, settings ){
			// The 'this' contains the scrolled element (#content)
		//}
	});
	
	$("a[id^='readMore']").click(function() {	
		$('#content').css('height', 'auto');
		$('#content .content').css('height',  'auto');
		$(this).hide();
		tmp = $(this).attr("id") + '_txt';
		$("#"+tmp).slideDown(500);
	});
	
	
});
