function SelectMenuItem (menuItemId, animate) {
    var cursorId = "SubMenuCursor";
    
    var menuItemPosition = $("#" + menuItemId).offset();
    var menuItemHeight = $("#" + menuItemId).height();
    var menuItemWidth = $("#" + menuItemId).width();
    
    var cursorHeight = $("#" + cursorId).height();
    var cursorWidth = $("#" + cursorId).width();
    
    var targetLeft = menuItemPosition.left + menuItemWidth/2 - cursorWidth/2;
    var targetTop = menuItemPosition.top + menuItemHeight/2 - cursorHeight/2;
    
    if (animate) {
        $('#' + cursorId).animate({
            left: targetLeft
            }, 400, function() {
                // Animation complete.
            });
    } else {
        $("#" + cursorId).offset({ top: targetTop, left: targetLeft });
    }
}

function CreateSubMenu(containerId, cursorSource, names, pages) {

    var container = document.getElementById(containerId);

    var subMenu = document.createElement("div");
    subMenu.className = "SubMenu";
    container.appendChild(subMenu);
   
    for (var i = 0; i < names.length; i++) {
        var menuItem = document.createElement("div");
        menuItem.className = "MenuItem";
        menuItem.id = "menuitem" + i;
        //menuItem.title = pages[i];
        subMenu.appendChild(menuItem);
        var text = document.createTextNode(names[i]);
        menuItem.appendChild(text);
    }
    
    var cursor = document.createElement("div");
    cursor.className = "SubMenuCursor";
    cursor.id = "SubMenuCursor";
    var cursorImage = document.createElement("img");
    cursorImage.src = cursorSource;
    cursorImage.style.height = "57px";
    cursor.appendChild(cursorImage);
    container.appendChild(cursor);

    $("#" + containerId + " .SubMenu .MenuItem").click(
        function(e) {
            $(".Page").hide();
            $(".PageNoHeading").hide();
            var pageId = $(this).attr("data-pageid");
            $("#" + pageId).fadeIn();
            SelectMenuItem($(this).attr("id"), true);
        }
    );

    for (var i = 0; i < names.length; i++) {
        $("#menuitem" + i).attr("data-pageid", pages[i]);
    }
    
    $(document).ready(function(){SelectMenuItem("menuitem0", false)});
}