$(document).ready(function() {		

$('.tops').hover(function() {
var myDiv = $(this).attr('name');
var myDivActual = document.getElementById(myDiv);
$(myDivActual).css({'visibility' : 'visible'}).show(200); //must have value or it will thro error, also dont add title or alt to atag safari bug
}, function() {
var myDiv = $(this).attr('name');
var myDivActual = document.getElementById(myDiv);
$(myDivActual).css({'visibility' : 'hidden' , 'display' : 'none'});
});

$('.drops').hover(function() {
var myDiv = $(this).attr('id') + "_1";  
var myDivActual = document.getElementById(myDiv);
$(myDivActual).css({'visibility' : 'visible'}).show(150); //must have value or it will thro error
}, function() {
var myDiv = $(this).attr('id') + "_1";
var myDivActual = document.getElementById(myDiv);
$(myDivActual).css({'visibility' : 'hidden' , 'display' : 'none'});
});

var dropdowns0 = document.getElementById('navig');  //draws the styles and padding for each nav cell which are block A Tag's
var numlidrops0 = dropdowns0.getElementsByTagName('ul'); //counts top level items to draw css
var totaldrops0 = numlidrops0.length;
var lispit2 = 1; 
while (lispit2 <= totaldrops0) {
$('#drop' + lispit2 + ' a' ).css({'display' : 'block' , 'margin' : '0'}); 
$('#drop' + lispit2 + ' a' ).css('z-index' , '1000');
$('#drop' + lispit2 + ' a' ).css('padding-top' , '10px');
$('#drop' + lispit2 + ' a' ).css('padding-bottom' , '10px');
$('#drop' + lispit2 + ' a' ).css('padding-right' , '7px');
$('#drop' + lispit2 + ' a' ).css('padding-left' , '7px');	
lispit2++;
};

$('#drop1').css({'left' : '5px'}); //how far to push initial drop downs - right - px from the left 
$('#drop2').css({'left' : '104px'});
$('#drop3').css({'left' : '362px'});
$('#drop4').css({'left' : '523px'});
$('#drop5').css({'left' : '695px'});
$('#drop6').css({'left' : '750px'});

$('#drop1' + ' a').css({'width' : '300px'});  //width of initial drops - actual is this width here plus LR padding from lispit2
$('#drop2' + ' a').css({'width' : '300px'});
$('#drop3' + ' a').css({'width' : '290px'});
$('#drop4' + ' a').css({'width' : '260px'});
$('#drop5' + ' a').css({'width' : '210px'});
$('#drop6' + ' a').css({'width' : '260px'});

var dropdowns1 = document.getElementById('drop1'); 
var numlidrops1 = dropdowns1.getElementsByTagName('li');
var totaldrops1 = numlidrops1.length; //counts li's 
var lispit = 1; 
var aheight = 0;
while (lispit <= totaldrops1) { //based on number of li's it draws 1 span holder for each li to hold all flyouts for that specific li
$('#drop1_' + lispit + '_1' + ' a').css('width' , '250px'); //width of flyouts - actual is width here plus padding LR from lispit2
$('#drop1_' + lispit + '_1').css('top' , aheight); // aligns flyout to drop level item based on cell height = conent + padding height : set value in aheight below
$('#drop1_' + lispit + '_1').css('left' , '316px');  // push flyouts right - set to width of initial drops above plus LR padding and border amts  from lispit2
$('#drop1_' + lispit + '_1').css({'display' : 'none' , 'position' : 'absolute' , 'z-index' : '1000'});
lispit++;
aheight += 35; // set aheight value = cell contents height plus padding top and bottom from lispit2
};
var dropdowns2 = document.getElementById('drop2'); 
var numlidrops2 = dropdowns2.getElementsByTagName('li');
var totaldrops2 = numlidrops2.length;
var lispit = 1; 
var aheight = 0;
while (lispit <= totaldrops2) {
$('#drop2_' + lispit + '_1' + ' a').css('width' , '275px');
$('#drop2_' + lispit + '_1').css('top' , aheight);
$('#drop2_' + lispit + '_1').css('left' , '316px');
$('#drop2_' + lispit + '_1').css({'display' : 'none' , 'position' : 'absolute' , 'z-index' : '1000' , 'background-color' : '#021b38'});
lispit++;
aheight += 35;
};

var dropdowns3 = document.getElementById('drop3'); 
var numlidrops3 = dropdowns3.getElementsByTagName('li');
var totaldrops3 = numlidrops3.length;
var lispit = 1; 
var aheight = 0;
while (lispit <= totaldrops3) {
$('#drop3_' + lispit + '_1' + ' a').css('width' , '250px');
$('#drop3_' + lispit + '_1').css('top' , aheight);
$('#drop3_' + lispit + '_1').css('left' , '306px');
$('#drop3_' + lispit + '_1').css({'display' : 'none' , 'position' : 'absolute' , 'z-index' : '1000'});
lispit++;
aheight += 35;
};
var dropdowns4 = document.getElementById('drop4'); 
var numlidrops4 = dropdowns4.getElementsByTagName('li');
var totaldrops4 = numlidrops4.length;
var lispit = 1; 
var aheight = 0;
while (lispit <= totaldrops4) {
$('#drop4_' + lispit + '_1' + ' a').css('width' , '250px');
$('#drop4_' + lispit + '_1').css('top' , aheight);
$('#drop4_' + lispit + '_1').css('left' , '276px');
$('#drop4_' + lispit + '_1').css({'display' : 'none' , 'position' : 'absolute' , 'z-index' : '1000'});
lispit++;
aheight += 35;
};
var dropdowns5 = document.getElementById('drop5'); 
var numlidrops5 = dropdowns5.getElementsByTagName('li');
var totaldrops5 = numlidrops5.length;
var lispit = 1; 
var aheight = 0;
while (lispit <= totaldrops5) {
$('#drop5_' + lispit + '_1' + ' a').css('width' , '250px');
$('#drop5_' + lispit + '_1').css('top' , aheight);
$('#drop5_' + lispit + '_1').css('left' , '226px');
$('#drop5_' + lispit + '_1').css({'display' : 'none' , 'position' : 'absolute' , 'z-index' : '1000'});
lispit++;
aheight += 35;
};

$('#drop2_5 a:first').addClass('arrow2'); /*adds arrows if third level*/
$('#drop2_6 a:first').addClass('arrow2');

});	
