$(document).ready(function() {
	
// --------- CASE STUDY
	
	// add slide nav to DOM
	$('#slides').css("overflow-x", "hidden");
	var items = $('#slides').find('li').length;
    var nav = '';
    if (items > 1) {
	    nav += '<ul id="arrows">';
        nav += '<li id="previous"><a href="#slide_0' + (items - 1) + '" title="previous slide">Previous Slide</a></li>';
        nav += '<li id="nextslide"><a href="#slide_01" title="next slide">Next Slide</a></li>';
        nav += '</ul>';
    }
    
    nav += '<ul id="slides_new" class="pagination">';
    for (var slide = 0; slide < items; slide++) {
		nav += '<li><a id="thumb_0' + slide + '" href="#slide_0' + slide + '">' + (slide + 1) + '</a></li>';
	}
	
	nav += '</ul>';
    $('#helper').before(nav);
    
	// little formatting
	$('#slides_new li:last').addClass('last');
	$('#slides_new li:first a').addClass('active');
    
    // adjust ul width to number of images
	var total_width = items*(680);
	$('#slides ul').css("width", total_width);
	// add hover fade in/out effect
	$('#slides_new a').hover(
		function () {
			if(!$(this).hasClass('active')) {
				if ($(this).is(':animated')) {
					$(this).stop().animate({backgroundColor: '#8db76a'}, 400);
				} else {
					$(this).css({backgroundColor: '#b8b7b7'}).animate({backgroundColor: '#8db76a'}, 400);
				}
			}
		},
		function () {
			if(!$(this).hasClass('active')) {
				if ($(this).is(':animated')) {
					$(this).stop().animate({backgroundColor: '#b8b7b7'}, 400);
				} else {
					$(this).css({backgroundColor: '#8db76a'}).animate({backgroundColor: '#b8b7b7'}, 400);
				}
			}
		}
	);
	
        
	// add functionality
    
    function setNextPrevious(current) {
        
        var new_next;
        var new_previous;
        
        // convert variables to integers from strings
        current = parseInt(current);
        items = parseInt(items);
        
        // set the next arrow to either the next slide, or the first slide if we're at the end of the group
        
        if (current >= (items - 1))
           new_next = 0;
        else 
           new_next = current + 1;
        
        $('#nextslide a').attr('href', '#scroll_0' + new_next);
        
        // set the previous arrow to the previous slide, or to the last slide if we're at the beginning of the group          
        if ((current - 1) < 0)
         new_previous = (items - 1);
        else
         new_previous = current - 1; 
        $('#previous a').attr('href', '#scroll_0' + new_previous); 
              
        
    }
    
    function setActive(current) {
        
        $('#slides_new li a').css({backgroundColor: '#b8b7b7'});
        $('#slides_new li a').removeClass('active');
        $('#thumb_0' + current).css({backgroundColor: '#8db76a'});
        $('#thumb_0' + current).addClass('active');
    
    } 
    // click a numbered slide activator
	$('#slides_new li a').click(function() {
		
		
		var scroll_to = ($(this).attr('href')).slice(-1);
		setActive(scroll_to);
        $('#slides').scrollTo('li:eq(' + scroll_to + ')', 1000, {axis:'x', easing:'easeInOutQuint'});
        setNextPrevious(scroll_to);
	});
    // click the next arrow
    $('#nextslide a').click(function() {
                    
       var scroll_to = ($(this).attr('href')).slice(-1);
       setActive(scroll_to);
       $('#slides').scrollTo('li:eq(' + scroll_to + ')', 1000, {axis:'x', easing:'easeInOutQuint'});
       setNextPrevious(scroll_to);
       
    });
    // click the previous arrow
    $('#previous a').click(function() {
              
       var scroll_to = ($(this).attr('href')).slice(-1);
       setActive(scroll_to);
       $('#slides').scrollTo('li:eq(' + scroll_to + ')', 1000, {axis:'x', easing:'easeInOutQuint'});
       setNextPrevious(scroll_to);
       
        
    });
   

});