$(function() { // Made with Joy by What Cheer
	
	// preload all the images
	$('<img />')
	.attr('src', '/images/content/primary/slides/1.jpg')
	.load(function(){
	$('.profile').append( $(this) );
	});
	$('<img />')
	.attr('src', '/images/content/primary/slides/2.jpg')
	.load(function(){
	$('.profile').append( $(this) );
	});
	$('<img />')
	.attr('src', '/images/content/primary/slides/3.jpg')
	.load(function(){
	$('.profile').append( $(this) );
	});
	$('<img />')
	.attr('src', '/images/content/primary/slides/4.jpg')
	.load(function(){
	$('.profile').append( $(this) );
	});
	$('<img />')
	.attr('src', '/images/content/primary/slides/5.jpg')
	.load(function(){
	$('.profile').append( $(this) );
	});
	$('<img />')
	.attr('src', '/images/content/primary/slides/6.jpg')
	.load(function(){
	$('.profile').append( $(this) );
	});
	
	var timer = 6000;
	scrollInterval = setInterval(function() { advance(); }, timer);
	$('#slider_ul').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;
	});
});
function switchSlide(item){
	var currentSelected = $('.selected').attr('id');
	if(currentSelected != item){
		$('#'+currentSelected).removeClass('selected');
		$('#'+item).addClass('selected');
		
		if(item == 'slide-1'){
			$('#slider_li').fadeOut('fast', function(){
				$(this).html('<img src="/images/content/primary/slides/1.jpg" alt="Slide1" />');
			}).fadeIn();
		}
		if(item == 'slide-2'){
			$('#slider_li').fadeOut('fast', function(){
				$(this).html('<img src="/images/content/primary/slides/2.jpg" alt="Slide2" />');
			}).fadeIn();
		}
		if(item == 'slide-3'){
			$('#slider_li').fadeOut('fast', function(){
				$(this).html('<img src="/images/content/primary/slides/3.jpg" alt="Slide3" />');
			}).fadeIn();
		}
		if(item == 'slide-4'){
			$('#slider_li').fadeOut('fast', function(){
				$(this).html('<img src="/images/content/primary/slides/4.jpg" alt="Slide4" />');
			}).fadeIn();
		}
		if(item == 'slide-5'){
			$('#slider_li').fadeOut('fast', function(){
				$(this).html('<img src="/images/content/primary/slides/5.jpg" alt="Slide5" />');
			}).fadeIn();
		}
		if(item == 'slide-6'){
			$('#slider_li').fadeOut('fast', function(){
				$(this).html('<img src="/images/content/primary/slides/6.jpg" alt="Slide6" />');
			}).fadeIn();
		}
	}
	
}
function advance(){
	var currentSelected = $('.selected').attr('id');
	// the problem here is I can't keep a running total of the item...
	if(currentSelected == 'slide-6'){
		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('selected');
		$('#'+item).addClass('selected');
		
		if(item == 'slide-1'){
			$('#slider_li').fadeOut('fast', function(){
				$(this).html('<img src="/images/content/primary/slides/1.jpg" alt="Slide1" />');
			}).fadeIn();
		}
		if(item == 'slide-2'){
			$('#slider_li').fadeOut('fast', function(){
				$(this).html('<img src="/images/content/primary/slides/2.jpg" alt="Slide2" />');
			}).fadeIn();
		}
		if(item == 'slide-3'){
			$('#slider_li').fadeOut('fast', function(){
				$(this).html('<img src="/images/content/primary/slides/3.jpg" alt="Slide3" />');
			}).fadeIn();
		}
		if(item == 'slide-4'){
			$('#slider_li').fadeOut('fast', function(){
				$(this).html('<img src="/images/content/primary/slides/4.jpg" alt="Slide4" />');
			}).fadeIn();
		}
		if(item == 'slide-5'){
			$('#slider_li').fadeOut('fast', function(){
				$(this).html('<img src="/images/content/primary/slides/5.jpg" alt="Slide5" />');
			}).fadeIn();
		}
		if(item == 'slide-6'){
			$('#slider_li').fadeOut('fast', function(){
				$(this).html('<img src="/images/content/primary/slides/6.jpg" alt="Slide6" />');
			}).fadeIn();
		}
	}
	
}