// JavaScript Document


$(function() {
		$(".NavHi").css({"left" : "-4000px"});
		
		var navBlok = $("#Nav2").offset();
		var n1p = $(".nav1").offset();
		var n2p = $(".nav2").offset();
		var n3p = $(".nav3").offset();
		var n4p = $(".nav4").offset();
		
		var n1w = $(".nav1").width();
		//var n1h = $(".nav1").height();
		var n2w = $(".nav2").width();
		var n3w = $(".nav3").width();
		var n4w = $(".nav4").width();
		
		$(".nav1").hover(function () {
			$(".NavHi").stop().animate({left: (n1p.left - navBlok.left), width: (n1w)}, 200, "swing");
			$("#result").text(" ( "+ n1p.left + ", " + n1p.top + " )" );
			
			$(this).animate({ opacity: 1, marginTop:"2px"}, 200, "swing");
			},function(){
        	$(this).stop().animate({ opacity: 1, marginTop:"0"}, 400, "swing");
		}); 
		$(".nav2").hover(function () {
			$(".NavHi").stop().animate({left: (n2p.left - navBlok.left), width: (n2w)}, 200, "swing");
			$("#result").text(" ( " + n2p.left + ", " + n2p.top + " )");
			
			$(this).animate({ opacity: 1, marginTop:"2px"}, 200, "swing");
			},function(){
        	$(this).stop().animate({ opacity: 1, marginTop:"0"}, 400, "swing");
		}); 
		$(".nav3").hover(function () {
			$(".NavHi").stop().animate({left: (n3p.left - navBlok.left), width: (n3w)}, 200, "swing");
			$("#result").text(" ( " + n3p.left + ", " + n3p.top + " )");
			
			$(this).animate({ opacity: 1, marginTop:"2px"}, 200, "swing");
			},function(){
        	$(this).stop().animate({ opacity: 1, marginTop:"0"}, 400, "swing");
		}); 
		$(".nav4").hover(function () {
			$(".NavHi").stop().animate({left: (n4p.left - navBlok.left), width: (n4w)}, 200, "swing");
			$("#result").text(" ( " + n4p.left + ", " + n4p.top + " )");
			
			$(this).animate({ opacity: 1, marginTop:"2px"}, 200, "swing");
			},function(){
        	$(this).stop().animate({ opacity: 1, marginTop:"0"}, 400, "swing");
		}); 
				
});

	// mousey
		$(document).ready(function()
 			{
  			$().mousemove(function(e)
  			{
  			$("#r2").text("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
  		});
	});
		
		
// 
$(function() {
		   //111
		$("#MiniLogo").hover(function () {
			$(".OffButton01").stop().animate({ opacity: 0}, 200, "swing");
			},function(){
				$(".OffButton01").stop().animate({ opacity: 1}, 400, "swing");
		}); 
});