(function($){
  
  var navBoxes = [],
      containerHeight = 227,
      topPosition = 185;
  
  $("#splash-nav .section-nav-box").each(function(){
    
    //creating each box and its config
    var box = {
      dom: this,
      height: $(this).outerHeight(),
      images: $(".nav-buttons div",this)
    }
    navBoxes.push(box);
    
  })
  
  //showing all hidden box and hiding by opacity 
 
  $("#splash-nav .active-state").css({
    "opacity": 0,
    "display": "block"
  })


  function is_child_of(parent, child) {
    if( child != null ) {     
      while( child.parentNode ) {
        if( (child = child.parentNode) == parent ) {
          return true;
        }
      }
    }
   return false;
  }


  //this function gets called on the mourseover of each nav boxes
  function moveBox(e){
    
     //if the mouseover/out event isn't called from the container box element, it will return and ignore
    if( is_child_of(e.currentTarget,e.relatedTarget)) return;
   
    var isUp = e.type == "mouseover",
        y = isUp? containerHeight - this.height : topPosition,
        speed = isUp? 450 : 400;

    
    //moving box
    $(this.dom).stop().clearQueue().addClass("animating").animate(
      {
        "top": y
      },
      speed,
      "easeOutCirc",
      function(){ 
        $(this).removeClass("animating");
      }
    )
   //opcaity transition
    this.images.stop().clearQueue().each(function(i){
			
			$(this).animate(
			  {
	        opacity: (isUp && i==0) || (!isUp && i==1)? 1 : 0
	      },
	      
	      speed
	       
			)
			
		})

  }
  
  //assigning mouseover/out events to the nav boxes
  $(navBoxes).each(function(){
    $(this.dom).bind({
      "mouseover": $.proxy(moveBox,this),
      "mouseout": $.proxy(moveBox,this)
    })
  })

  
  
})(jQuery)