$(document).ready(function () {
    function selectNav() {
        $(this)
            .parents('ul:first')
                .find('a')
                    .removeClass('active')
                .end()
            .end()
            .addClass('active');
    }

	$('#archive li').mouseover(function(){
		$(this).css('text-decoration', 'underline');
	});

	$('#archive li').mouseout(function(){
		$(this).css('text-decoration', 'none');
	});

    $('#article_navi li').find('a').click(selectNav);

    // go find the navigation link that has this target and select the nav
    function trigger(data) {
        var el = $('#article_navi li').find('a[href$="' + data.id + '"]').get(0);
        selectNav.call(el);
    }

 
 
	var scrollOptions = {
		target: '#scroll', // the element that has the overflow
	
		// can be a selector which will be relative to the target
		items: 'ul',
	
		navigation: '#article_navi li a',
	
		// selectors are NOT relative to document, i.e. make sure they're unique
		prev: 'img.prev', 
		next: 'img.next',
	
		// allow the scroll effect to run both directions
		axis: 'x',
	
		onAfter: trigger, // our final callback
	
		//offset: offset,
	
		// duration of the sliding effect
		duration: 500,
		hash: false,
		// easing - can be used with the easing plugin: 
		// http://gsgd.co.uk/sandbox/jquery/easing/
		easing: 'swing'
	};
	
	$.localScroll(scrollOptions);
	$('#articles').serialScroll(scrollOptions);
});