$(function() {
	
	
	
	var timer = 5000;
	scrollInterval = setInterval(function() { advance(); }, timer);
	$('.hoverstop').hover(function() {
	    clearInterval(scrollInterval);
	  }, function() {
	    scrollInterval = setInterval(function() { advance(); }, timer);
	  });
	
	
	
	
	$('.nav_button').bind('click', function(){
		var item = $(this).attr('id');
		switchSlide(item);
		clearInterval(scrollInterval);
		return false;
	});
	
	// preload images
		$('<img />')
		.attr('src', '/images/content/primary/photo2.jpg')
		.load(function(){
		$('.profile').append( $(this) );
		});
		$('<img />')
		.attr('src', '/images/content/primary/photo3.jpg')
		.load(function(){
		$('.profile').append( $(this) );
		});
		$('<img />')
		.attr('src', '/images/content/primary/photo4.jpg')
		.load(function(){
		$('.profile').append( $(this) );
		});
		$('<img />')
		.attr('src', '/images/content/primary/photo5.jpg')
		.load(function(){
		$('.profile').append( $(this) );
		});
		$('<img />')
		.attr('src', '/images/content/primary/photo6.jpg')
		.load(function(){
		$('.profile').append( $(this) );
		});
		$('<img />')
		.attr('src', '/images/content/primary/photo7.jpg')
		.load(function(){
		$('.profile').append( $(this) );
		});
		$('<img />')
		.attr('src', '/images/content/primary/photo8.jpg')
		.load(function(){
		$('.profile').append( $(this) );
		});
	// end preload images
});
function switchSlide(item){
	var currentSelected = $('.current').attr('id');
	if(currentSelected != item){
		$('#'+currentSelected).removeClass('current');
		$('#'+item).addClass('current');
		
		if(item == 'slide-1'){
			$('.hero').fadeOut('fast', function(){
				$(this).html('<img src="/images/content/primary/photo1.jpg" />');
			}).fadeIn();
		}
		if(item == 'slide-2'){
			$('.hero').fadeOut('fast', function(){
				$(this).html('<img src="/images/content/primary/photo2.jpg" />');
			}).fadeIn();
		}
		if(item == 'slide-3'){
			$('.hero').fadeOut('fast', function(){
				$(this).html('<img src="/images/content/primary/photo3.jpg" />');
			}).fadeIn();
		}
		if(item == 'slide-4'){
			$('.hero').fadeOut('fast', function(){
				$(this).html('<img src="/images/content/primary/photo4.jpg" />');
			}).fadeIn();
		}
		if(item == 'slide-5'){
			$('.hero').fadeOut('fast', function(){
				$(this).html('<img src="/images/content/primary/photo5.jpg" />');
			}).fadeIn();
		}
		if(item == 'slide-6'){
			$('.hero').fadeOut('fast', function(){
				$(this).html('<img src="/images/content/primary/photo6.jpg" />');
			}).fadeIn();
		}
		if(item == 'slide-7'){
			$('.hero').fadeOut('fast', function(){
				$(this).html('<img src="/images/content/primary/photo7.jpg" />');
			}).fadeIn();
		}
		if(item == 'slide-8'){
			$('.hero').fadeOut('fast', function(){
				$(this).html('<img src="/images/content/primary/photo8.jpg" />');
			}).fadeIn();
		}
	}
}
function advance(){
	var currentSelected = $('.current').attr('id');
	// the problem here is I can't keep a running total of the item...
	if(currentSelected == 'slide-8'){
		item = 'slide-1';
	}else{
		var slidearr = currentSelected.split('-');
		var currentNum = parseInt(slidearr[1]);
		var nextNum = currentNum+1;
		var item = 'slide-'+nextNum;
	}

	if(currentSelected != item){
		$('#'+currentSelected).removeClass('current');
		$('#'+item).addClass('current');
		
		if(item == 'slide-1'){
			$('.hero').fadeOut('fast', function(){
				$(this).html('<img src="/images/content/primary/photo1.jpg" />');
			}).fadeIn();
		}
		if(item == 'slide-2'){
			$('.hero').fadeOut('fast', function(){
				$(this).html('<img src="/images/content/primary/photo2.jpg" />');
			}).fadeIn();
		}
		if(item == 'slide-3'){
			$('.hero').fadeOut('fast', function(){
				$(this).html('<img src="/images/content/primary/photo3.jpg" />');
			}).fadeIn();
		}
		if(item == 'slide-4'){
			$('.hero').fadeOut('fast', function(){
				$(this).html('<img src="/images/content/primary/photo4.jpg" />');
			}).fadeIn();
		}
		if(item == 'slide-5'){
			$('.hero').fadeOut('fast', function(){
				$(this).html('<img src="/images/content/primary/photo5.jpg" />');
			}).fadeIn();
		}
		if(item == 'slide-6'){
			$('.hero').fadeOut('fast', function(){
				$(this).html('<img src="/images/content/primary/photo6.jpg" />');
			}).fadeIn();
		}
		if(item == 'slide-7'){
			$('.hero').fadeOut('fast', function(){
				$(this).html('<img src="/images/content/primary/photo7.jpg" />');
			}).fadeIn();
		}
		if(item == 'slide-8'){
			$('.hero').fadeOut('fast', function(){
				$(this).html('<img src="/images/content/primary/photo8.jpg" />');
			}).fadeIn();
		}
	}
	
}