var totalMenus = 6;

var buttonUpImages = [
    'button_services.jpg',
    'button_downloads.jpg',
    'button_efficiency.jpg',
    'button_community.jpg',
    'button_youth.jpg',
    'button_about.jpg'
];

var buttonOverImages = [
    'button_services_over.jpg',
    'button_downloads_over.jpg',
    'button_efficiency_over.jpg',
    'button_community_over.jpg',
    'button_youth_over.jpg',
    'button_about_over.jpg'
];

jQuery.preloadImages = function(images)
{
  for(var imageNum = 0; imageNum < images.length; imageNum++)
  {
    jQuery("<img>").attr("src", images[imageNum]);
  }
}

function getBasePath(path)
{
    var basePath = path.substring(0, path.lastIndexOf('/') + 1);
    return basePath;
}


function setToButtonUpState(image, index)
{
    var currentFilename = image.attr('src');
    var newFilename = getBasePath(currentFilename) + buttonUpImages[index - 1];
    image.attr('src', newFilename);
}

function setToButtonOverState(image, index)
{
    var currentFilename = image.attr('src');
    var newFilename = getBasePath(currentFilename) + buttonOverImages[index - 1];
    image.attr('src', newFilename);
}

var showMenu = function(menuNum) {
    return function() {
        for (index = 1; index <= totalMenus; index++) {
            var triggerImage = $('#menu' + index + '_trigger > img');
            if (index != menuNum) {
                $('#menu' + index).hide();
                setToButtonUpState(triggerImage, index);
            } else {
                setToButtonOverState(triggerImage, index);
                var pos = $('#menu' + menuNum + '_trigger').position();
                var triggerHeight = $('#menu' + menuNum + '_trigger').height();
                $('#menu' + menuNum).css( { "left": pos.left + "px", 
                                            "top": (pos.top + triggerHeight) + "px" } );
                $('#menu' + menuNum).show();
            }
        }
    };
}


var hideMenu = function(menuNum) {
    return function() {
        var triggerImage = $('#menu' + menuNum + '_trigger > img');
        setToButtonUpState(triggerImage, menuNum);
        $('#menu' + menuNum).hide();
    };
}

$(document).ready(
    function() {
        var triggerImage = $('#menu1_trigger > img');
        var basePath = getBasePath( triggerImage.attr("src") );
        var imageTotal = buttonOverImages.length;
        var imagesToPreload = [];
        for (var imageNum = 0; imageNum < imageTotal; imageNum++) {
            imagesToPreload.push( basePath + buttonOverImages[imageNum] );
        }
        $.preloadImages(imagesToPreload);
    
        $('#menu1_trigger').hover(showMenu(1), hideMenu(1));
        $('#menu1').hover(showMenu(1), hideMenu(1));
        
        $('#menu2_trigger').hover(showMenu(2), hideMenu(2));
        $('#menu2').hover(showMenu(2), hideMenu(2));
        
        $('#menu3_trigger').hover(showMenu(3), hideMenu(3));
        $('#menu3').hover(showMenu(3), hideMenu(3));
        
        $('#menu4_trigger').hover(showMenu(4), hideMenu(4));
        $('#menu4').hover(showMenu(4), hideMenu(4));
        
        $('#menu5_trigger').hover(showMenu(5), hideMenu(5));
        $('#menu5').hover(showMenu(5), hideMenu(5));
        
        $('#menu6_trigger').hover(showMenu(6), hideMenu(6));
        $('#menu6').hover(showMenu(6), hideMenu(6));
    }
);