$(document).ready(function(){
	$(".fourBox-Content").hide();
	$("#contentWrap").fadeTo(0,0);
	
	$("#fourBoxes .btn").click(function(){
		
		var $span = $('> span.hover', this).css('opacity', 0);
		$("#fourBoxes .btn").removeClass("active");
		$("#fourBoxes .btn span.hover").fadeTo(300,0);
		$(this).addClass("active");
		$(this).find("span.hover").fadeTo(300,1);
		return false;
		
	});
	
	$("#fourBoxes .closeBtn").click(function(){
		close4Btns();
	});
	
	function close4Btns() {
		$("#fourBoxes #contentWrap").stop().removeClass("open").animate({height:0, opacity:0});	
		$(".fourBox-Content").removeClass("active").fadeTo(300,0, function(){$(this).hide()});
		$("#fourBoxes .btn").removeClass("active");
		$("#fourBoxes .btn span.hover").fadeTo(300,0);
	};
	
	function changeHeight(newID){
		$(".fourBox-Content").removeClass("active");
		$("#" + newID + "-Content").addClass("active");
		var newHeight = $("#fourBoxes #contentWrap .active").height()+30;
		if ($("#fourBoxes #contentWrap").hasClass("open")){
			$(".fourBox-Content").stop().fadeTo(300,0, function(){
				$(".fourBox-Content").hide();
				$("#" + newID + "-Content").show().stop().fadeTo(300,1);
				$("#fourBoxes #contentWrap").stop().animate({height: newHeight});	
			});
		} else{
			$("#" + newID + "-Content").show().stop().fadeTo(300,1);
			$("#fourBoxes #contentWrap").addClass("open").animate({height: newHeight, opacity:1});
			
		};
	};
	
	$("#fourBoxes #customWebsite, #fourBoxes #logoDesign, #fourBoxes #SEO, #fourBoxes #software").click(function(){
		newID2 = "#" + $(this).attr("id") + "-Content";
		currentID = "#" + $(".fourBox-Content.active").attr("id");
		if (newID2 == currentID){
			close4Btns();
		} else{
			changeHeight($(this).attr("id"));
		};
		
	});
	
});