$(function () {
			
	// Scrolling Media
	$('.prev,.next').click(function(e){
		e.preventDefault();
		var link = e.target;
		link.blur();
	});
	
	$.scrollTo.defaults.axis = 'x'; 
	//reset all scrollable panes to (0,0)
	$('.media-selector div').scrollTo( 0 );
	
	
	buildScroller( '#media-photos' );
	
	$('#media-photos a').hover(
		function(){
			$(this).find("span").show();
		},
		function(){
			$(this).find("span").hide();
		}
	
	);
	
	var target = $('#issue-container');//the scrolled div
	target.scrollLeft = target.scrollTop = 0;
	//target.scrollLeft = -500;
	//target.scrollTo( 0 );

	//scroll initially if there's a hash (#something) in the url 
	$.localScroll.hash({
		target: target, //could be a selector or a jQuery object too.
		axis:'x',//the default is 'y'
		queue: true,
		duration: 500
		
	});
	
	
	var $last = $([]);//save the last link

	
	/**
	 * NOTE: In the former version of the demo, I called $('#navigation').localScroll()
	 * Now I want to also affect the >> and << links, so I'll use $.localScroll() instead
	 */
	$('#media-photos').localScroll({
		target: target, //could be a selector or a jQuery object too.
		axis:'x',//the default is 'y'
		queue:true,
		duration:1000,
		hash:false,
		onBefore:function( e, anchor, $target ){//'this' is the clicked link
			//alert(this);
			//$last.removeClass('scrolling');
			//$last = $(this).addClass('scrolling');
			
			//animatePanels('#'+anchor.id);	
			this.blur();//remove the awful outline
			
			//path = window.location.protocol + '//' + window.location.host + window.location.pathname + '#'+anchor.id;
			//selectCurrentMenu(path);
		}/*,
		onAfter:function( anchor ){
			$last.removeClass('scrolling');
			//updateWhatsNextLinks();
		}*/
	});


	
	
});


function buildScroller( mediaType ) {

	//Target  to slide around in.
	var $paneTarget = $( mediaType + ' div');
	
	var photos = {
		show: 4, // show this many photos at a time
		current: $( mediaType + ' li').eq(0),
		last: $( mediaType + ' li').length
	};
	
	if ($( mediaType + ' li').length <= 6){
		$( mediaType + ' .next').hide();
	}
	
	// Hide previous to start
	$( mediaType + ' .prev').hide();
	
	// if ($) {};		
	$( mediaType + ' .next').click(function() {
		
		var index = $( mediaType + ' li').index(photos.current);
		
		photos.current = photos.current.next();
		$paneTarget.stop().scrollTo( photos.current, 300 );
		
		if( photos.current.is('li:first') ) 
			$( mediaType + ' .prev').show();
			
		// Hide next if we are heading to the last li
		if( index >= photos.last - photos.show - 1 )
			$(this).hide();
		
	});
	
	$( mediaType + ' .prev').click(function() {
		// LI index
		var index = $( mediaType + ' li').index(photos.current);
		
		photos.current = photos.current.prev();
		$paneTarget.stop().scrollTo( photos.current, 300 );
		if( photos.current == $( mediaType + ' li:first')) {
			$( mediaType + ' .prev').hide()
		} else {
			$( mediaType + ' .prev').show()
		}
		
		if( photos.current.is("li:last") ) 
			$( mediaType + ' .next').show();
		
		// Hide previous if we are heading to the first li
		if( index <= 1 ) $(this).hide();
		
	});


}