I'm trying to implement a lights on/off on single posts of my wordpress theme.

I know that I have to put this code on my css, which I did already:

#the_lights{
  background-color:#000;
  height:1px;
  width:1px;
  position:absolute;
  top:0;
  left:0;
  display:none;
}
#standout{
  padding:5px;
  background-color:white;
  position:relative;
  z-index:1000;
}

Now this is the code that I'm having trouble with:

function getHeight() {
    if ($.browser.msie) {
        var $temp = $("").css("position", "absolute")
                         .css("left", "-10000px")
                         .append($("body").html());
        $("body").append($temp);
        var h = $temp.height();
        $temp.remove();
        return h;
    }
    return $("body").height();
}
$(document).ready(function () {
    $("#the_lights").fadeTo(1, 0);
    $("#turnoff").click(function () {
        $("#the_lights").css("width", "100%");
        $("#the_lights").css("height", getHeight() + "px");
        $("#the_lights").css({‘display’: ‘block’
        });
        $("#the_lights").fadeTo("slow", 1);
    });
    $("#soft").click(function () {
        $("#the_lights").css("width", "100%");
        $("#the_lights").css("height", getHeight() + "px");
        $("#the_lights").css("display", "block");
        $("#the_lights").fadeTo("slow", 0.8);
    });
    $("#turnon").click(function () {
        $("#the_lights").css("width", "1px");
        $("#the_lights").css("height", "1px");
        $("#the_lights").css("display", "block");
        $("#the_lights").fadeTo("slow", 0);
    });
});

I think it's a jquery. Where do I place it and how do I call it's function? Been stuck on this thing for 6 hours now and any help would be greatly appreciated...