$(document).ready(function() {
	$("li.show").hover(function() {
     	$("ul.show").slideDown(200);
		$(this).addClass("active");
		$("ul.show").css('display', 'block');
		}, function() {
     		$("ul.show").stop(true,true).hide(0);
			$(this).removeClass("active");
		});

	$("li.svc").hover(function() {
     	$("ul.svc").slideDown(200);
		$(this).addClass("active");
		$("ul.svc").css('display', 'block');
		}, function() {
     		$("ul.svc").stop(true,true).hide(0);
			$(this).removeClass("active");
		});

	$("div#images div").hide(); 
	$("div#images div:first").show();
	$("div#acc li a:first").addClass("hover");
	$("div#acc li").hover(function(){
		$("div#acc li a").removeClass("hover");
		var elid = $(this).attr('class');
		$("a", this).addClass("hover");
		$("div#images div:not(." + elid + ")").stop(true,true).fadeOut(250); 
		$("div#images div." + elid).stop(true,true).fadeIn(250); 
	});
	
	
	$("div#imgs div").hide(); 
	$("div#imgs div:first").show();
	$("div#features li a:first").addClass("hover");
	$("div#features li").hover(function(){
		$("div#features li a").removeClass("hover");
		var elid = $(this).attr('class');
		$("a", this).addClass("hover");
		$("div#imgs div:not(." + elid + ")").stop(true,true).fadeOut(250); 
		$("div#imgs div." + elid).stop(true,true).fadeIn(250); 
	});
});


/*	1. Hide all divs within the images div
	2. Show just the first one
	3. Find all list elements in the acc div that are hovered
	4. Create variabl elid, assign it the class attribute [of acc li:hover]
	5. While hovering over li.elid, hide all divs that are NOT .elid by fading them out. 
	6. Then, fade IN the div that IS the class elid.
	7. True,true completes the animations even though we moused off of them. */