$(document).ready(function() {
		
		$('#z_slider').data('opts', {
			timeout: null,
			interval: 9000,
			speed: 400,
			frame: 1,
			frameWidth: $('#z_slider div :first').attr('width')	
		});
		
		
		$('#z_slider').css('width', $('#z_slider').children().length * $('#z_slider').data('opts').frameWidth);
		
								

			
		// Set THEPAGE, this keeps track of which DIV we are on
		var thepage = 0;
		
		// Set FIRSTCLICK - this lets us know if they have interacted with the navigation yet
		var firstclick = true;
			
		slide();
				
		function slide(){
					
			clearTimeout($('#z_slider').data('opts').timeout);	
			
			$('#z_slider').data('opts').timeout = setTimeout(function() {			

				$('#z_slider').animate({
					left: '-=' + $('#z_slider').data('opts').frameWidth
					}, $('#z_slider').data('opts').speed, 'swing', function(){						
						
						$('#z_slider :first').removeAttr('id'); 
						$('#z_slider :first').clone().appendTo($('#z_slider'));
						$('#z_slider :first').remove();
						$('#z_slider').css('left', 0);		
						$('#z_slider :first').attr('id', 'current');	
								
					});	
					
					// Increment thepage to keep track of what div we are on
					thepage++;
					// Check what div we are on, if we are on 3, reset thepage counter to 0
					if(thepage == 3){
						thepage = 0;
					}
				
					// Change the background image of the nav to highlight the new page						
					var backgroundimg = 'url("images/bg_nav' + (thepage + 1) + '.gif")';
					$('#z_nav').css('background-image', backgroundimg);	
					$('#z_link').attr('rel', 't-hb' + (thepage + 1) + '');					
					
					slide();			
				}, $('#z_slider').data('opts').interval);
				
			}

	
		// Add listener to SPANs for slider navigation
		$('#z_nav span').click(function(){
			page = $('#z_nav span').index(this);
			slide_button(page);
			$('#z_nav span').removeClass('active');
			$(this).addClass('active');
			$('#z_link').attr('rel', 't-hb' + (page + 1) + '');				
		});

			
		function slide_button(page){
		
			// clear the timeout so it stops sliding automatically
			clearTimeout($('#z_slider').data('opts').timeout);	
			
			
			
			// check if they have interacted with the nav yet, if not, rearrange the divs to allow for sliding back and forth
			if ( firstclick == true){
				
				if(thepage == 1){
					$('#z_slider :first').clone().appendTo($('#z_slider'));
					$('#z_slider :first').remove();
					$('#z_slider :first').clone().appendTo($('#z_slider'));
					$('#z_slider :first').remove();
					$('#z_slider').css('left', -($('#z_slider').data('opts').frameWidth * 1));
					//$('#z_link').attr('rel', 't-hb1');
				}
			
				else if (thepage == 2){
					$('#z_slider :first').clone().appendTo($('#z_slider'));
					$('#z_slider :first').remove();
					$('#z_slider').css('left', -($('#z_slider').data('opts').frameWidth * 2));	
					//$('#z_link').attr('rel', 't-hb2');
				}
			
				// set firstclick to false so the above doesn't happen again
				firstclick = false;			
			}
			
						
			// animate to the selected div
			$('#z_slider').animate({
				left:  -($('#z_slider').data('opts').frameWidth * page)}, $('#z_slider').data('opts').speed, 'swing');
			
			
			
			var backgroundimg = 'url("images/bg_nav' + (page + 1) + '.gif")';
			$('#z_nav').css('background-image', backgroundimg);
		}
					
	});