$(function(){
	// this is for placement of the project preview on portfolio nav
	xOffset = -3;
	yOffset = 25;
	// hover for main nav (not current)
	$('#nav li a:not(.current)')
		.css( {opacity: 0.45} )
		.mouseover(function(){
			$(this).stop().animate({opacity: 0.7}, 200)
		})
		.mouseout(function(){
			$(this).stop().animate({opacity: 0.45}, 1200)
		})
	// hover for sub nav (not current)
	$('.subNav li a:not(.current,.sub a)')
		.css({backgroundColor: "#ececec", opacity: 0.5})
		.mouseover(function(e){
			$(this).stop().animate({backgroundColor: "#dbdbdb", color: "#000", opacity: 0.8}, 200);
			// the following is for the image preview
			if (this.title != "" && this.title != "undefined"){
				this.t = this.title;
				$content = this.t;
				$("body").append("<div id='preview'>"+$content+"</div>");
				this.title = "";								 
				$("#preview")
					.stop()
					.css("top",(e.pageY - xOffset) + "px")
					.css("left",(e.pageX + yOffset) + "px")
					.slideDown(100);
			}
		})
		.mouseout(function(){
			$(this).stop().animate({backgroundColor: "#ececec", color: "#000", opacity: 0.5}, 1200);
			// the following is for the image preview
			$content = "";
			this.title = this.t;
			$("#preview").remove();
		})
		.mousemove(function(e){
			// the following is for the image preview
			$("#preview")
				.css("top",(e.pageY - xOffset) + "px")
				.css("left",(e.pageX + yOffset) + "px");
		});
	// fix border on current link
	$('.subNav li a.current').parent().css ({borderColor: "#fff"})
	$('.subNav li a.current').parent().next().css ({borderColor: "#fff"})
	// slide effect on action links
	$('.slide')
		.css({backgroundColor: "#b60101", backgroundPosition: "24px 13px"})
		.mouseover(function(){
			$(this).stop().animate({backgroundColor: "#ad0101", paddingRight: 44, backgroundPosition: "27px 13px" }, 200);
		})
		.mouseout(function(){
			$(this).stop().animate({backgroundColor: "#b60101", paddingRight: 26, backgroundPosition: "24px 13px"  }, 200);
		})	
	
	// hover on services used list
	$('#servUsed li a:not(.checked)')
		.css( {backgroundColor: "#333", color: "#999"} )
		.mouseover(function(){
			$(this).stop().animate({backgroundColor: "#2e2e2e", color: "#ccc"}, 200)
		})
		.mouseout(function(){
			$(this).stop().animate({backgroundColor: "#333", color: "#ccc"}, 200)
		})
	$('#servUsed li a.checked')
		.css( {backgroundColor: "#333", color: "#fff"} )
		.mouseover(function(){
			$(this).stop().animate({backgroundColor: "#2e2e2e", color: "#ccc"}, 200)
		})
		.mouseout(function(){
			$(this).stop().animate({backgroundColor: "#333", color: "#fff"}, 200)
		})
});
