// 1 SECOND = 1000 MILLISECONDS

// Global variable for configuration of menu
var heightPerPx = 1; // the time it takes for each menu item to reach its full height
var moveDownTime = 100; // time for the menu to move down

// Global variables for configuration of image annimation
var timeBetween = 10000; // how long between each fade
var fadeLength = 2000; // the time it takes to start fading to finish fading

jQuery(function($) {
	// called on dom ready (not the same as load)
	
	// find the context div and insert another div as a blanket to cover the images
	$('.context').append('<div>&nbsp;</div>');

	// pre annimation
	$('div.menu div>ul').css('overflow', 'hidden').each(function(){
		// Saving the original height so we know how far to expand up
		$(this).data('originalHeight', $(this).height());
	}).hide().parent().addClass('closed');

	$('.homepage .menu div').hover(
		function() {
			// the class needs to be changed before the annimation otherwise it has no hight to expand into
			$(this).removeClass('closed');
			var ul = $('ul:first', this);
			if (!ul.is(':animated')) {
				// only annimate if we are not currently animating
				$(this).animate({bottom:2}, moveDownTime); 
				timeToTake = heightPerPx * ul.data('originalHeight');
				ul.height(0).animate({height:ul.data('originalHeight')}, timeToTake, function() {
					$('.shadow', $(this).parent()).css({'bottom': '0', 'height': '6px','display': 'block'});
				});
			}
		},
		function() {
			var ul = $('ul:first', this);
			// mouseout needs to occur regardless of if we are animating because we 
			// could move out during animation and it would need to go up and down
			$(this).animate({bottom:10}, moveDownTime); 
			timeToTake = heightPerPx * ul.data('originalHeight');
			ul.animate({height:0}, timeToTake, function() {
				// now we need to add the class after the animation is complete
				$(this).parent().addClass('closed');
				$(this).css('display', 'none');
				$('.shadow', $(this).parent()).css({'bottom': '1px', 'display': 'none'});
			});
		}
	)
	
	var currentSlide = 0;
	var nextSlide = 1;
	function runFade() {
		var lookingAt = 0;
		$('.context img').each(function(){
			if (lookingAt != currentSlide) {
				$(this).css('z-index', '1');
				if (lookingAt == nextSlide) {
					$(this).css({'z-index': '4', 'opacity': '100'});
				}
			}
			lookingAt++;
		});
		// setting it to z-index 5 and then animating
		$($('.context img')[currentSlide]).css('z-index', '5').animate({opacity:0}, fadeLength, function() {
			currentSlide = nextSlide;
			if((nextSlide +1) < $('.context img').length) {
				nextSlide ++
			} else {
				nextSlide = 0
			}
			// I am done
			lookingAt = 0;
		}); 
		
	}
	
	setInterval(runFade, timeBetween);
	

});


jQuery(window).load(function(){
	// called once all images have loaded 
	
	// ... animate the div to fade away ...
	$($('.context div')[0]).animate({opacity:0}, fadeLength, function() {
		// ... and then delete the previously appended div
		$('.context div').remove();
	});
})