$(document).ready(function() {
   	jQuery('.sub-menu').hide();
   	
   	if (jQuery('body').hasClass('ieseven')) 
	{ var height = 0; }
	else {var height = jQuery('ul#menu-primary-navigation li.current-page-parent .sub-menu').outerHeight()+5; }
   	
   	jQuery('ul#menu-primary-navigation li.current-page-parent').css({'padding-bottom':height+'px'});
   	jQuery('ul#menu-primary-navigation li.current-page-parent .sub-menu').css('display','block').addClass('current-sub-menu');
    	if (jQuery('ul#menu-primary-navigation li.current-page-parent a:first-child').next().hasClass('sub-menu')) { 
	   	var position = jQuery('ul#menu-primary-navigation li.current-page-parent').position();
		var margin = String(jQuery('ul#menu-primary-navigation li.current-page-parent').css('margin-left'));
		margin = margin.slice(0,margin.indexOf('p'));
		var submenuleft = (position.left+Number(margin))-10;
		jQuery('ul#menu-primary-navigation li.current-page-parent .sub-menu').css('left', '-'+submenuleft+'px');
	}
   	
 	jQuery('ul#menu-primary-navigation li a:first-child').click(function() 
		{	
			if (!jQuery(this).parent().parent().hasClass('sub-menu') && jQuery(this).next().hasClass('sub-menu')) {
				// setup functionality
				if (jQuery('body').hasClass('ieseven')) 
				{ var height = 0; }
				else { var height = jQuery(this).next().outerHeight()+5; }
				// reset functionality
				jQuery('ul#menu-primary-navigation li').find('.current-sub-menu').slideUp();
				jQuery('ul#menu-primary-navigation li').find('.current-sub-menu').parent().animate({'padding-bottom':'0px'});
				jQuery('ul#menu-primary-navigation li a').removeClass('current-menu-parent');
				// active functionality
		  		if (jQuery(this).next().hasClass('current-sub-menu')) 
		  		{ 
		  			jQuery(this).parent().animate({'padding-bottom':'0px'}); 
		  			jQuery(this).removeClass('current-menu-parent'); // If sub nav is already open it closes it
		  			jQuery(this).next().slideUp('fast'); // Animated the subnav open
		  			jQuery(this).next().removeClass('current-sub-menu'); // Toggles class for detect script above.
		  		} else { 
		  			jQuery(this).parent().animate({'padding-bottom':height+'px'});  // Opens subnav
					jQuery(this).addClass('current-menu-parent'); // This adds the arrow to the a			
					var position = jQuery(this).parent().position();
					var margin = String(jQuery(this).parent().css('margin-left'));
					margin = margin.slice(0,margin.indexOf('p'));
					var submenuleft = (position.left+Number(margin))-10;
					jQuery(this).next().css('left', '-'+submenuleft+'px');
					jQuery(this).next().slideDown('fast'); // Animated the subnav open
					jQuery('ul#menu-primary-navigation li .sub-menu').removeClass('current-sub-menu'); // remove all references to this class 'there can be only one'
					jQuery(this).next().addClass('current-sub-menu'); // Toggles class for detect script above.
				}
				return false;
			}
		}
	);
	
	// On page load we set up the background color, image url and the next image url
	var color = jQuery('#theboats .selected a').attr('title');
	var image = jQuery('#theboats .selected a').attr('href');
	var nextimage = jQuery('#theboats .selected').next().find('a').attr('href');
	// Next we apply the info we just grabbed 
	jQuery('#bg-wrapper').css('background','no-repeat url('+image+') #'+color);
	jQuery('#next-image').html("<img src='"+nextimage+"' />");
	
	// This click action will switch the image in the background of a live page
	jQuery('ul#theboats li a').click(function() {
		// remove all selected classes and re-apply it to your current element
		jQuery('#theboats li').removeClass('selected');
		jQuery(this).parent().addClass('selected');
		// reset the color, image url and next image url
		color = jQuery('#theboats .selected a').attr('title');
		image = jQuery('#theboats .selected a').attr('href');
		nextimage = jQuery('#theboats .selected').next().find('a').attr('href');
		if (nextimage == undefined) { nextimage = jQuery('#theboats li a').first().attr('href'); }
		// Apply the infor we just pulled
		jQuery('#bg-wrapper').css('background','no-repeat url('+image+') #'+color);
		jQuery('#next-image').html("<img src='"+nextimage+"' />");
		return false;
	});
	
	// This is a simple click action that activates our listener by changeing the content of the Slideshow button
	jQuery('.view-button a.slideactivate').click(function() {
		// The next line hides or shows all the content so we can just look at the slideshow
		jQuery('#twitterlink,#content,#branding-wrapper,.race-date,#advertisements,#buttonad,#facebook').slideToggle();
		// The following changes the button text which activates the listener
		if (jQuery(this).text() == 'View Slideshow') {
			jQuery(this).text('Hide Slideshow');
			jQuery(this).parent().addClass('onslideshow');
		} else {
			jQuery(this).text('View Slideshow');
			jQuery(this).parent().removeClass('onslideshow');
		}
	});
	
	// This is our listener that is looking for the 'Hide Slideshow' text to appear in the button
	setInterval(function() {
		if (jQuery('.view-button a.slideactivate').text() == 'Hide Slideshow') {
			// We set up the background color, image url and the next image url
			color = jQuery('#theboats .selected').next().find('a').attr('title');
			image = jQuery('#theboats .selected').next().find('a').attr('href');
			nextimage = jQuery('#theboats .selected').next().next().find('a').attr('href');
			// If we are on the last image the variable will be undefined so we need to reset it
			if (nextimage == undefined) { nextimage = jQuery('#theboats li a').first().attr('href'); }
			// If we are on the last image the variable will be undefined so we need to reset them			
			if (!jQuery('#theboats .selected').next().find('a').html()) {
				jQuery('#theboats .selected').removeClass('selected');
				color = jQuery('#theboats li a').first().attr('title');
				image = jQuery('#theboats li a').first().attr('href'); 
				jQuery('#theboats li').first().addClass('selected');
			} else {
				jQuery('#theboats .selected').removeClass('selected').next('li').addClass('selected');
			}
			jQuery('#next-image').html("<img src='"+nextimage+"' />");
			// Here I am createing a overlay that we can fade in and then delete when the fade is done
			jQuery('#bg-wrapper').append('<div id="temp" style="background:no-repeat url('+image+') #'+color+'; display:none; z-index:100;">&nbsp;</div>');
			// The fade in and delete functionality useing a callback from the fadeIn function
			jQuery('#temp').fadeIn(600, function() {
				jQuery('#bg-wrapper').css('background','no-repeat url('+image+') #'+color);
				jQuery('#temp').remove();
			});
		}
	}, 5000);
});