$(document).ready(function() {
    var counter = 0;
    $("#wrapper").before("<div class=\"dropdown-shadow\">&nbsp;</div>");
    $("ul.nav").superfish({
        //dropShadows: true,
        autoArrows: false,
        onBeforeShow: function() {
            counter = 1;
            var h = $(this).height() + 12;
            var w = $(this).width() + 18;
            var offset = $(this).parent().offset();
            if (offset == null)
                offset = 0;
            var left = offset.left;
            var top = offset.top + 63;
            var zIndex = $(this).css("z-index") - 1;
            $(".dropdown-shadow").css({ "height": h, "width": w, "left": left, "top": top, "display": "block", "z-index": zIndex });
        },
        onHide: function() {
            /*
            we need this logic because this function is called before the onShow function
            and we can't call the onShow function because it will not have the dropshadow set before
            the menu starts to animate on
            */
            if (counter == 0) {
                $(".dropdown-shadow").css({ "left": -999, "top": -999, "display": "none" });
            } else {
                counter = 0;
            }
        }
    });
});
function showCounter(id, counterId, limit) {
    if ($('#'+id).val().length > limit) {
        $('#'+id).val() = $('#'+id).val().substring(0, limit);
        $('#'+counterId).html('0');
    }
    else {
        $('#'+counterId).html("Characters Remaining: " + (limit - $('#'+id).val().length - 1));
    }
}