$(document).ready(function(){
						   
// attach to only the a tags in the carousel 
$('div#carousel a, div#carousel p.button').click(function(e) {
	// ga.js sets up the pageTracker var, but its possible that this code could execute before that script call resolves - if so, i can't do anything
	if (pageTracker) {
		// tracking the clicks different from the controls
		if ($(this).hasClass('button')) {
			// just using the id of the p as the action
			pageTracker._trackEvent('Carousel', $(this).attr('id'));
		} else {
			// find out which slide was clicked to test if placement has an effect on popularity
			var whichSlide = $(this).closest('div.slide').attr('id');
			whichSlide = whichSlide.charAt(5);
			// i want to report which part of the slide was clicked, but the action is click
			if ($(this).parent().hasClass('thumbnail')) {
				var trackedLabel = 'thumbnail';
			} else if ($(this).parent().attr('tagName') == 'H2') {
				var trackedLabel = 'headline';
			} else if ($(this).parent().attr('tagName') == 'P') {
				var trackedLabel = 'body';
			};
			trackedLabel = trackedLabel + whichSlide;
			pageTracker._trackEvent('Carousel', 'click', trackedLabel);
		};
	};
	//handles the jumpTo controls for going directly to a slide
	if ($(this).hasClass('jumpTo')) {
		//look at the id of the jumpTo button and strip out the slide number
		var btnNum = Number($(this).attr('id').substr(10,1));
		//this is not triggered, if they click on the one that is currently showing
		if (curSlideNum != btnNum && isTrans == false) {
			//turn playing off
			clearInterval(playInt);
			isPlaying = false;
			enablePlayBtn();
			//tells the loadSlide which one is to load now
			newSlideNum = btnNum;
			loadSlide(newSlideNum);
			//reset the slide numbers
			curSlideNum = newSlideNum;
			curSlide = $('div#carousel div.slide').eq(curSlideNum -1);
		};
	};
	//handles the play control - does not run if slide is transitioning
	if ($(this).attr('id') == 'play') {
		if (isTrans == false) {
			//turn playing on, advance one slide, and restart the interval
			isPlaying = true;
			enablePauseBtn();
			nextSlide();
			playInt = setInterval(nextSlide, 5000);
		};
	};
	//handles the pause control - does not run if slide is transitioning
	if ($(this).attr('id') == 'pause') {
		if (isTrans == false) {
			//simply turn playing off
			isPlaying = false;
			enablePlayBtn();
			clearInterval(playInt);
		};
	};
	//handles the next control - does not run if slide is transitioning
	if ($(this).attr('id') == 'next') {
		if (isTrans == false) {
			//turn playing off
			isPlaying = false;
			enablePlayBtn();
			clearInterval(playInt);
			//advance one slide
			nextSlide();
		};
	};
	//handles the previous control - does not run if slide is transitioning
	if ($(this).attr('id') == 'previous') {
		if (isTrans == false) {
			//turn playing off
			isPlaying = false;
			enablePlayBtn();
			clearInterval(playInt);
			//goes back one slide
			prevSlide();
		};
	};
});

// interval and other code here
if ($('div#carousel')) {
	$('div#controls').css('display','block');
	startSlides();
}
//set up global variables
var isTrans = false;
var curSlide;
var curSlideNum;
var newSlideNum;
var playInt;
var isPlaying;

//where everything begins
function startSlides() {
	$('div#carousel div.slide').hide();
	curSlide = $('div#carousel div.slide:first');
	curSlideNum = 1;
	curSlide.show().addClass('topSlide');
	$('div#carousel p.jumpTo:first').addClass('current');
	if ($('div#carousel div.slide').length > 1) {
		isPlaying = true;
		enablePauseBtn();
		playInt = setInterval(nextSlide, 5000);
	}
}

//counts up 1, used by the setInterval as well as the next button
function nextSlide () {
	if (curSlide.next().length > 0){
		newSlideNum = curSlideNum + 1;
	} else {
		newSlideNum = 1;
	}
	loadSlide(newSlideNum);
	curSlideNum = newSlideNum;
	curSlide = $('div#carousel div.slide').eq(curSlideNum -1);
}

//counts down 1, used by the previous button
function prevSlide () {
	if (curSlide.prev().length > 0){
		newSlideNum = curSlideNum - 1;
	} else {
		newSlideNum = $('div#carousel div.slide').length;
	}
	loadSlide(newSlideNum);
	curSlideNum = newSlideNum;
	curSlide = $('div#carousel div.slide').eq(curSlideNum -1);
}

//this takes care of all transitions no matter what triggered it
function loadSlide(newSlideNum) {
	if (isTrans == false) {
		//start the transition, to block other user action inputs
		isTrans = true;
		var oldSlide = $('div#carousel div.topSlide');
		var newSlide = $('div#carousel div.slide').eq(newSlideNum -1); //.eq is zero based so slide #3 has an index of 2
		//change the jumpTo controls to indicate which is the current slide
		$('div#carousel p.jumpTo').removeClass('current');
		$('div#carousel p.jumpTo').eq(newSlideNum -1).addClass('current');
		//first we hide all slides but the one showing
		$('div#carousel div.slide:not(.topSlide)').hide().removeClass('btmSlide');
		//then we move the current slide down one and the new slide to the top, but still hidden
		oldSlide.addClass('btmSlide').removeClass('topSlide');
		//then we fade in the new slide on top of the old one
		//this means that two of the slides are always showing except during this function
		newSlide.addClass('topSlide').fadeIn(500, function() {
			//this is the callback function when the animation is finished to let everything know the transition is complete
			isTrans = false;
		});
	}
}

//switches the depth of the play and pause button
//since both images are opaque this works without having to hide() or show()
function enablePauseBtn() {
	$('p#play').css({zIndex:511}).hide();
	$('p#pause').css({zIndex:512}).show();
}
function enablePlayBtn() {
	$('p#pause').css({zIndex:511}).hide();
	$('p#play').css({zIndex:512}).show();
}

//this is the help text that appears above the prev/play/pause/next controls
$('#controls p.pp,#controls p.skip').hover(
	function(){
		//the first delay keeps it from trying to fade in on really quick passovers
		$(this).children('span').delay(50).fadeIn(200).delay(800).fadeOut(200);
	},
	function(){
		//we reset the opacity at the end while it is set to 'display:none'
		//without it, on quick passovers the max opacity gets set to somewhere around 40%
		$(this).children('span').hide().clearQueue().css({opacity: 1});
		
	}
);

	
}); //end of ready function