// bad hippo design animation functions using the jquery library

$(document).ready(function() {

	// navigation menu animations for the site header
	// set the active menu to bogus/non-used value (null makes all divs get toggled off later, so we don't want that
	activemenu = 'nada';
	nicehippo = 'nada';
	// sets the image path variable by parsing the string of the src attribute of an image so I don't have to change this in different environments
	// remove right-rooter- from the selection divs when sitenav is turned back on
	imagepath = $('div.right-footer-nav-link > img').attr('src').slice(0, $('div.right-footer-nav-link > img').attr('src').lastIndexOf('/')+1);
	// selects the site navigation container div on the hover event in order to use the mouse out portion to hide any open menus
	$('div#site-nav').hover(
		function() {
			// don't have to do anything here on the mouse in event, just need the mouse out event
		}, 
		function() {
			// reset the previously hovered over image src to the original image
			$('img[alt='+activemenu+']').attr('src', imagepath+activemenu+'.png');
			// toggle the active menu back to off when you leave the site navigation container
			$('div.'+activemenu).stop(true, true).toggle('drop', { direction: 'up' }, 300);
			// reset the active menu status variable
			activemenu = 'nada';
		}
	);
	// selects navigation images within the nav-link divs on the hover event - used to open the sub menu of the applicable navigation item
	$('div.nav-link > img').hover(
		function() {
			if(activemenu!=$(this).attr('alt')){
				// reset the previously hovered over image src back to the original image
				$('img[alt='+activemenu+']').attr('src', imagepath+activemenu+'.png');
				// toggle the currently active menu (effectively closing it if it exists)
				$('div.'+activemenu).stop(true, true).toggle('drop', { direction: 'up' }, 300);
				// set the active menu to the hovered over menu item
				activemenu = $(this).attr('alt');
				// set the current hovered over image src to the rollover image
				$(this).attr('src', imagepath+activemenu+'-active.png');
				// toggle the new active menu (effectively opening it)
				$('div.'+activemenu).stop(true, true).toggle('drop', { direction: 'up' }, 300);
			}
		}, 
		function() {
			//nothing needed on mouse out because other mouse out events cover closing the previously active menu
		}
	);

	// navigation menu animations for the footer
	// selects the site footer div on the hover event in order to use the mouse out portion to hide any open menus
	$('div#right-footer-nav').hover(
		function() {
			// don't have to do anything here on the mouse in event, just need the mouse out event
		}, 
		function() {
			// reset the hovered over image src to the original image
			$('img[alt='+activemenu+']').attr('src', imagepath+activemenu+'.png');
			// toggle the active menu back to off when you leave the footer navigation container
			$('div.'+activemenu).stop(true, true).toggle('drop', { direction: 'down' }, 300);
			// reset the active menu status variable
			activemenu = 'nada';
		}
	);
	$('div.right-footer-nav-link > img').hover(
		function() {
			if(activemenu!=$(this).attr('alt')){
				// reset the previously hovered over image src back to the original image
				$('img[alt='+activemenu+']').attr('src', imagepath+activemenu+'.png');
				// toggle the currently active menu (effectively closing it if it exists)
				$('div.'+activemenu).stop(true, true).toggle('drop', { direction: 'down' }, 300);
				// set the active menu to the hovered over menu item
				activemenu = $(this).attr('alt');
				// set the current hovered over image src to the rollover image
				$(this).attr('src', imagepath+activemenu+'-active.png');
				// toggle the new active menu (effectively opening it)
				$('div.'+activemenu).stop(true, true).toggle('drop', { direction: 'down' }, 300);
			}
		}, 
		function() {
			//nothing needed on mouse out because other mouse out events cover closing the previously active menu
		}
	);
	
	// current project slider
	// sets the variable for how far the current projects slider can go depending on how many images there are
	rightmax = ($('div.current-project-image > img').length - 1) * 468;
	// add disabled class to right arrow if there is only one current project image
	if( rightmax == 0 ) { $('div.current-project-right-arrow').addClass('current-project-right-arrow-disabled'); }
	// select the right arrow control divs when clicked
	$('div.current-project-right-arrow').click(
		function() {
			// only slide if it is not all the way to the right
			if($('div.current-project-image').css('left').replace(/px/, '') >= rightmax+468 ) {
				// if the image slider is moved, remove disabled class from the other arrow
				$('div.current-project-left-arrow').removeClass('current-project-left-arrow-disabled');
				$('div.current-project-image').animate( { 'left': '-=468px' }, 'fast' );
				$('div.current-project-caption').animate( { 'top': '-=55px' }, 'fast' );
			}
			// add disabled class to arrow if image div is positioned on the last image
			if($('div.current-project-image').css('left').replace(/px/, '') <= rightmax+468) {
				$('div.current-project-right-arrow').addClass('current-project-right-arrow-disabled');
			}
		}
	);
	// select the left arrow control divs when clicked
	$('div.current-project-left-arrow').click(
		function() {
			// only slide if it is not all the way to the left
			if($('div.current-project-image').css('left').replace(/px/, '') <= -468 ) {
				// if the image slider is moved, remove disabled class from the other arrow
				$('div.current-project-right-arrow').removeClass('current-project-right-arrow-disabled');
				$('div.current-project-image').animate( { 'left': '+=468px' }, 'fast' );
				$('div.current-project-caption').animate( { 'top': '+=55px' }, 'fast' );
			}
			// add disabled class to arrow if image div is positioned on the first image
			if($('div.current-project-image').css('left').replace(/px/, '') >= -468 ) {
				$('div.current-project-left-arrow').addClass('current-project-left-arrow-disabled');
			}
		}
	);

});