jQuery(document).ready(function() {
	var index = 1, // Says we are on the first slide
		slideHeight = '', // For determining how far to animate vertically
		slideContainerHeight = '',
		totalSlides = ''; // How many slides are there total
    
    $('<div class="loading" />').appendTo('.hero-container').ajaxStop(function(){$(this).fadeOut();})
    
    $.getJSON("/j/homepage-projects", function(json, items) {
    
    	 // Find out how slides there are
    	totalSlides = json.items.length;
    	
    	// Add a container for all the slides
    	$('.hero-container').append('<ul class="hero-pane"></ul>');

    	//Cycle through our slides out build out the HTML for each
		$.each(json.items, function(i){
		
			// Reset the HTML for each slide
			var htmlString = "";
			
			// Here's where we piece together the HTML
			htmlString += '<li class="hero hero-'+json.items[i].entryId+'">';
			htmlString += '<div class="hero-content">';
			if (json.items[i].channel == "work") {
			htmlString += '<h2 class="image-replaced">'+json.items[i].heroTitle+'</h2>';
        	htmlString += '<div class="summary">'+json.items[i].heroOverview+'<p class="more"><a href="'+json.items[i].projectURL+'">View Project</a></p></div>';
        	} else if (json.items[i].channel == "news") {
        	   htmlString += '<div class="summary"><h2>'+json.items[i].heroTitle+'</h2>'+json.items[i].heroOverview+'<p class="more"><a href="'+json.items[i].projectURL+'">Read More</a></p></div>';
        	}
        	htmlString += '</div><!-- /.hero-content -->';
        	htmlString += '</li>';
        	
        	// Append our HTML to the .hero-container DIV
        	$('ul.hero-pane').append(htmlString);
		});
		
		// Clone the last slide and add it to the front so
		// we can cycle infinitely backwards
		$('ul.hero-pane li:last').clone().prependTo('ul.hero-pane');
		
		// Clone the first slide (which is actually the second slide now
		// and add it to the end so we can cycle infinitely forward
		$('ul.hero-pane li:nth-child(2)').clone().appendTo('ul.hero-pane');
		
		// Get the height of the slide so we know how far to animate
		slideHeight = $('ul.hero-pane li:first').outerHeight();
		slideContainerHeight = $('ul.hero-pane').outerHeight();
		$('ul.hero-pane').css({ top : -slideHeight });
    });
    
    var nextSlide = function(){
			$('ul.hero-pane').animate({
				top: '-='+slideHeight+''
			}, 1400, function(){
				if (index == totalSlides+1) {
					$('ul.hero-pane').css({ top : -(slideHeight) });
					index = 1;
				}
			});
			index++;
    	return false;
    }
    
    var previousSlide = function(){
    		// Animate the slide up the height of the slide
			$('ul.hero-pane').animate({
				top: '+='+slideHeight+''
			}, 1400, function(){
				// If we are at the slide above the first slide
				// go to the last slide (the same slide at the
				// end of the rotation) and reset the index
				// to be at the last slide
				if (index == 0) {
					$('ul.hero-pane').css({ top : -(slideContainerHeight-(slideHeight*2)) });
					index = totalSlides;
				}
			});
		    index--;
    	return false;
    }
    
    $('a.next').click(function(){
    	// if the slides are not animating
    	// go to the next slide when clicked
		if (!$('ul.hero-pane').is(':animated')) {nextSlide();}
		// Stop autoscrolling
		int = window.clearInterval(int);
		return false;
    });
    
    $('a.previous').click(function(){
        // if the slides are not animating
    	// go to the previous slide when clicked
		if (!$('ul.hero-pane').is(':animated')) {previousSlide();}
		// Stop autoscrolling
		int = window.clearInterval(int);
		return false;
    });
    
	// Make all .box inside a .box-container equal heights
	function setEqualHeight(columns){
	     var tallestcolumn = 0;
	     columns.each(function(){
			currentHeight = $(this).height();  
	    	if(currentHeight > tallestcolumn) {
	    		tallestcolumn  = currentHeight;
	    	}
	    });
	    columns.height(tallestcolumn);
	}  
	
	setEqualHeight($(".box-container .box"));
	
	// Automatically advance to the next slide
	// after 5 seconds
	var int = window.setInterval( nextSlide, 6200 );
});