$(document).ready(function(e) 
{
	$('.top').css({'opacity': 1});
	
	var id
	
	//we'll give all the a tags an id so we can reference them later
	var add = 1;
	$('#slide-controls a').each(function() {
        $(this).attr('id', add);
		add++;
    });
	
	$('#slide-controls a').click(function(event)
	{
		{
			$('#slide-controls a').removeClass('current');
			$(this).addClass('current');
			var wrap = $("#wrap");
			var loc = ($(this).attr('href'));
			event.preventDefault();			
			wrap.append('<img src="' + loc + ' " />');
			$('#wrap img:last-child').stop().animate({'opacity': 1}, 'slow');
			
			setTimeout(function() 
			{
		 		$('#wrap img:first-child').remove();//remove cannot be qued in an animation que
			}, 500);
			
			id = $(this).attr('id');// get the id of the link clicked on
			num = parseInt(id) ;// convert string to number	
			num++;//add one to num
			
			var x = $('#' + num).attr('href');//add #to the id ref so that we can target the right id
			//alert(x);
			
			$('#next a').attr('id', num);//set the id of thenext a tag to
			$('#next a').attr('href', x);	//sets the href on idof the current link		
		}		
		
	});
		
	$('#next a').click(function(event)
	{
		event.preventDefault();
		var loc = ($(this).attr('href'));

		var wrap = $("#wrap");
		wrap.append('<img src="' + loc + ' " />');
			$('#wrap img:last-child').stop().animate({'opacity': 1}, 'slow');
			
		setTimeout(function() 
		{
		 	 $('#wrap img:first-child').remove();
		}, 500);
		
			
		var x = $(this).attr('id');
		//alert(x);
		num = parseInt(x);
		num++//add one
		var y = $('#' + num).attr('href');
		$(this).attr('id', num);
		$(this).attr('href', y);
		
		$('#slide-controls a').removeClass('current');//remove the current class from the bottom nav
		$('#' + x).addClass('current');//gets the id from the next button
		
	});
});