jQuery Dimmer Switch

<p style="z-index:1;">Lorem ipsum...</p>
<p style="z-index:3; position:relative;"><a id="dimmerSwitch" href="#"><span id="turnDown">Dim</span> the lights</a></p>
<div id="inlineVideoBoxPlayer" style="z-index:3; position:relative;">...</div>
<div id="dim" style="display:none; opacity: 0.5; position: fixed; width: 100%; height: 100%; z-index: 2; left: 0; top: 0; background-color: black;"></div>
<script type="text/javascript">
    $(function() {
        $("#dimmerSwitch").toggle(
            function() {
                $('#dim').fadeIn();
                $('#turnDown').replaceWith('<span id="turnUp">Raise</span>');
                $(this).css('color', 'white');
            },
            function() {
                $('#dim').fadeOut();
                    $('#turnUp').replaceWith('<span id="turnDown">Dim</span>');
                $(this).css('color', '');
            }
        );
    });
</script>