$(document).ready(function(){
  
$(".dd").animate({top: '-500px'}, 0); //starts them all mimialised.... // this has to be the ul hieght 
$(".dd_holder").animate({height: '0px'}, 0);
 
 
  	$(document).pngFix(); /// png fix


var dd_var; // current menu var
var dd_h_ar =[];
var counter = -1;

 $(".dd").each(function(){
	counter ++;
	 //alert(counter)
 	 var pusher = $(".dd").height(); // get each drop down height
 	 dd_h_ar.push(pusher); // pushes the hight val into an array...
 	 //alert(dd_h_ar) //for testing!
 	 //$("#dd_"+counter+"").css("height",""+dd_h_ar[counter]+"px");
 	 
 })
 
  
  $(".dp_header p").mouseover(function(){
  	
  	dd_var = $(this).attr("alt");
  	
  	$("#dd"+dd_var+"").stop();
  	$(".dd_holder").stop();
  	$("#dd"+dd_var+"").animate({top: '0px'}, 1000);
  	$(".dd_holder").animate({height: '230px'}, 0);  // this has to be the ul hieght 
  }); 
  
 $(".dp_header p").mouseout(function(){
  	$(".dd").stop();
   	$(".dd_holder").stop();
  	$(".dd").animate({top: '-500px'}, 1000); // this has to be the ul hieght 
  	$(".dd_holder").animate({height: '0px'}, 1000);

  }); 


// fale safe for when hovering over the actual drop down

  $(".dd").mouseover(function(){
  	$(this).stop();
  	$(this).animate({top: '0px'}, 1000); 
  	$(this).parent().stop();
  	$(this).parent().animate({height: '230px'}, 0);// this has to be the ul hieght 

  }); 

  $(".dd").mouseout(function(){
  	$(this).stop();
  	$(this).animate({top: '-500px'}, 1000); // this has to be the ul hieght 
  	$(this).parent().stop();
  	$(this).parent().animate({height: '0px'}, 1000); 
  }); 
 
  
  
});