$(document).ready(function() {
	$('#descRight div').css({opacity: 0.0});
	$('div.active').css({opacity: 1.0});
	
	$("#sectionMenu a").hover(function(event) {
		var $active = $('#sectionImage img.active');
		var $activeTxt = $('#descRight div.active');
		
		if ($active.length == 0) $active = $('#sectionImage img:first');
		if ($activeTxt.length == 0) $activeTxt = $('#descRight div:first');
		
		if (typeof(this.id) != 'undefined' && this.id + 'Img' != $active[0].id) {
			var $newActive = $('#' + this.id + 'Img'); 
			var $newActiveTxt = $('#' + this.id + 'Txt');
			
			$active.addClass('last-active');
                    
            $activeTxt.animate({ opacity: 0.0 }, 100)
				.addClass('last-active');
			
			$newActive.css({ opacity: 0.0 })
                    .addClass('active')
                    .animate({ opacity: 1.0 }, 600, function() {
                        $active.removeClass('active last-active');
                    });
				
			$newActiveTxt.css({ opacity: 0.0 })
	        		.addClass('active')
	        		.animate({ opacity: 1.0 }, 400, function() {
	        			$activeTxt.removeClass('active last-active');
	        		});
        }
	});
});