$(document).ready(function(){

	// toggles hovering class on slider navigation arrows when hovered
	/*var hoveringClass = function(){
		$(this).toggleClass('hovering');
	};*/

	// Add hovering to the navigation.
	//$('#slides-nav').find('a.prev, a.next').hover(hoveringClass, hoveringClass);

	$('#slides-nav').serialScroll({
        target:'#scrollme',
        items:'li', // Selector to the items ( relative to the matched elements, '#sections' in this case )
        axis:'x',// The default is 'y' scroll on both ways
        duration:3000,// Length of the animation (if you scroll 2 axes and use queue, then each axis take half this time)
        force:true, // Force a scroll to the element specified by 'start' (some browsers don't reset on refreshes)
        stop: false,
        lock: false,
        cycle: false,
        constant: true,
        exclude: 5,
        event: 'hover',
        onAfter: function() {
            $(".hovering").each(function() {
                var direction = 'prev';
                if ($(this).hasClass('next')) {
                    direction = 'next';
                }
                $("#scrollme").trigger(direction);
            })
        }
    });
   
    $('a.prev').hover(function() {
        $(this).addClass('hovering');
        $('#scrollme').trigger('prev');
    },
    function() {
        $(this).removeClass('hovering');
    });
   
    $('a.next').hover(function() {
        $(this).addClass('hovering');
        $('#scrollme').trigger('next');
    },
    function() {
        $(this).removeClass('hovering');
    });

	//jquery code that fades the large images
	var slideshow = $('#slideshow-slides').cycle({
		fx: 'fade',
		timeout: 6000,
		speed: 900,
		//next: '#slideshow-next',
		//prev: '#slideshow-previous',
		pager: '.items a img',
		pagerEvent: 'mouseover',
		pagerAnchorBuilder: function(index, slide) {
		    return '#slideshow-navigation li:eq(' + index + ') a img';
		}
	});
	
	var origName = '';
	var newName = '';
     
	$('#slideshow-navigation li a img').hover(function(e){
		origName = $(this).attr('src');
		newName = origName.replace('.jpg', '_.jpg');
		$(this).attr('src', newName);
	},function(e){
		$(this).attr('src', origName);
	});
});