$(document).ready(function () {
  // find the elements to be eased and hook the hover event
  $('div#content ul li').click(function() {
    // if the element is currently being animated
    if ($(this).hasClass('home')) {
	    	$('.active').removeClass("active").stop().animate({width: "170px"}, {duration: 450, complete: "callback"})
      		$(this).addClass("active").stop().animate({width: "170px"}, {duration: 450, complete: "callback"});
			$('div#content ul').stop().animate({width: "850"}, {duration: 450, complete: "callback"});
    } else {
    	if ($(this).is(':animated')) {
      		$('.active').removeClass("active").stop().animate({width: "170px"}, {duration: 450, complete: "callback"})
      		$(this).addClass("active").stop().animate({width: "575px"}, {duration: 450, complete: "callback"});
			$('div#content ul').stop().animate({width: "1255"}, {duration: 450, complete: "callback"});
	    } else {
      		// ease in quickly
		    $('.active').removeClass("active").stop().animate({width: "170px"}, {duration: 400, complete: "callback"})
      		$(this).addClass("active").stop().animate({width: "575px"}, {duration: 400, complete: "callback"});
      		$('div#content ul').stop().animate({width: "1255px"}, {duration: 390, complete: "callback"});
    	}
    }
  });
});