/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */


function initSliderMenu(){
	// Build the menu functionality.
	$("#menu .menu-item").hover(
	  function () {

		$(this).find('img').stop(true, true).animate({
			"margin-top": "-10px"
			},
			500,
			function(){
				// Make any menu item that is not this one move to the bottom.
				//	$('.menu-item img').css('marginTop', '20px');
			}
		);
		$(this).find('.menu-light').addClass('menu-light-on').removeClass('menu-light-off');
	  }, 
	  function () {

		$(this).find('img').stop(true, true).animate({
			"margin-top": "30px"
		});

		$(this).find('.menu-light').addClass('menu-light-off').removeClass('menu-light-on');
	  }
	);
}



/**
 * reposition the menu
 */
function updateMenu(){
	var width = Math.max( $(window).width(), 1000 );
	var left 	= (width - $("#menu").width() + 60) / 2;

	$("#menu").offset({"left":left, "top":0});
}


function initAccordian(){
	$(".side-accordian").click(
		function(){
			
			// We are closing the open accordian...
			if( $(this).hasClass( 'open-accordian' ) ){
				$(this).removeClass( 'open-accordian' ).addClass('closed-accordian');
				$(this).find(".side-accordian-text").hide('slow');
				
				// Change the arrows to down.
				$(this).find(".side-accordian-arrow").removeClass('down-arrow').addClass('right-arrow');
				return;
			}
			
			
			
			// We are selecting a different accordian...
			$(".side-accordian").removeClass( 'open-accordian' ).addClass('closed-accordian');
			$(".side-accordian").find(".side-accordian-text").hide('slow');
			
			$(this).addClass('open-accordian').removeClass('closed-accordian' );
			 
			$(this).find(".side-accordian-text").slideDown('slow');
			$(this).find(".side-accordian-arrow").removeClass('right-arrow').addClass('down-arrow');
		}
	);
}

function initViewProjects(){
	
	
	
	// First, create a wrapper for all of the images....
	$("#project-table td a").wrap( '<div class="project-image" />');
	
	// Now, insert the view projects box for each image.
	$(".project-image a").prepend( '<div class="view-projects-box"><div class="view-box-text">View Projects</div></div>' );
	
	// Now when we hover over the .project-image boxes, show the view-projects-box
	$(".project-image a").hover(

		// When they hover over it, we want to show the "view projects" image
		// sliding up from the bottom
		function(){
			// Show the box
			$(this).find(".view-projects-box").slideDown();
		},
		
		function(){
			// Hide the box
			$(this).find(".view-projects-box").slideUp();
		}
	);
}


function initViewImages(){
	
	// First, create a wrapper for all of the images....
	$(".view-images").wrap( '<div class="project-image" />');
	
	// Now, insert the view projects box for each image.
	$(".project-image .view-images").prepend( '<div class="view-images-box"><div class="view-box-text">View Project Images</div></div>' );
	
	// Now when we hover over the .project-image boxes, show the view-projects-box
	$(".project-image .view-images").hover(

		// When they hover over it, we want to show the "view projects" image
		// sliding up from the bottom
		function(){
			// Show the box
			$(this).find(".view-images-box").slideDown();
		},
		
		function(){
			// Hide the box
			$(this).find(".view-images-box").slideUp();
		}
	);
}