Lockdown use jQuery

hide your code!

by Beben Koben

HTML

<h1>Tutorial Blog for Stylish Blogger</h1>
<h3>Normal Mode</h3>
<pre class="code">
function bar (baz) {
    return function () {
        alert("Do not copy " + baz + "!");
    };
}
</pre>
<h3>Encoded Mode</h3>
<pre class="code endecode">
function%20_call_the_other_thing%28%29%20%7B%0A%20%20%20%20_the_other_thing%28%29%3B%0A%7D%0A%0Afunction%20_the_other_thing%28%29%20%7B%0A%20%20%20%20var%20_hold_something%20%3D%20%27something%27%3B%0A%20%20%20%20alert%28_hold_something%29%3B%0A%7D
</pre>
      <p class="cred" align="center"> Creativity by <a href="http://ben-tools.blogspot.com/">Beben Koben</a></p>
<footer>
    <a class="orig" href="http://beben-koben.blogspot.com/2014/01/add-lockdown-to-hide-code-use-jquery.html" title="GO BACK TO ARTICLE"> &laquo; BACK TO</a>
    <h2><a href="http://undercover-blogger.blogspot.com/">BEBEN KOBEN</a></h2>
</footer>

CSS

*
{margin:0;padding:0;}
body
{background:#debe94;color:#000;font:15px Calibri, Arial, sans-serif;text-shadow:1px 1px 1px #FFFFFF;padding:10px;}
a,a:visited
{text-decoration:none;outline:none;color:#a00;}
a:hover
{color:#fff;}
footer
{background:#D3A76F;position:fixed;width:100%;border-top:1px solid #333;height:70px;bottom:0;left:0;color:#fff;text-shadow:1px 2px 0 #000;}
footer h2
{font:25px/26px Acens;font-weight:bold;left:70%;margin:0px 0 0 150px;padding:20px 0;position:relative;width:400px;}
footer a.orig,
a.orig:visited
{-moz-box-shadow:0px 0px 20px #000;-webkit-box-shadow:0px 0px 20px #000;box-shadow:0px 0px 20px #000;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;
    text-decoration:blink;
    font-weight:bold;
    color:#f00;
    font-size:14px;
    left:37%;
    line-height:46px;
    margin:12px 0 0 -405px;
    position:absolute;
    top:0;
    width:75px;
}
.cred {padding-top:15px;}
h1{text-align:center;text-shadow:3px 3px 5px #000;padding:55px;font-family: Verdana, Geneva, sans-serif;font-size:20pt;color:#D3A76F;}

JavaScript

(function(window,$){"use strict";var document=window.document;var defaults={lineheight:24,font:"13px Courier",baseline:"top",yoffset:(24-8)/2-2,linecolor:"#777",codecolor:"#333",rowcolor:"#f3f2ee",top:0,left:15,indent:8,width:600,filterexp:null};function Lockdown(options){var lockdown=window.Lockdown||this;lockdown.init(options);return lockdown;}Lockdown.prototype={init:function(options){this.settings=$.extend({},defaults,options);},lock:function($elements){var self=this;if($elements){$elements=$elements.map(function(i,element){return self._replaceCodeBlock(element);});}return $elements;},_getCode:function(innerText,className){var s=this.settings;if(/endecode/.test(className)){innerText=decodeURIComponent(innerText);}var code=$.trim(innerText).split("\n");if(s.filterexp){code=$.grep(code,function(line,i){return!s.filterexp.test(line);});}return code;},_getCanvas:function(code){var s=this.settings;var canvas=document.createElement("canvas");canvas.width=s.width;canvas.height=code.length*s.lineheight+s.top*2;canvas.style.width=canvas.width+"px";canvas.style.height=canvas.height+"px";if(typeof FlashCanvas!=="undefined"){FlashCanvas.initElement(canvas);}return canvas;},_writeText:function(context,text,x,y,color,align){var s=this.settings;context.font=s.font;context.textAlign=align||"left";context.textBaseline=s.baseline;context.fillStyle=color;context.fillText(text,x,y);},_writeTextRight:function(context,text,x,y,color){this._writeText(context,text,x,y,color,"right");},_writeLine:function(context,i,line){var s=this.settings;var linex=s.left+s.indent-defaults.indent;var liney=i*s.lineheight+s.top+s.yoffset;var codex=s.left+s.indent;var codey=i*s.lineheight+s.top+s.yoffset;if(i%2){context.fillStyle=s.rowcolor;context.fillRect(0,i*s.lineheight+s.top,s.width,s.lineheight);}this._writeTextRight(context,i+1,linex,liney,s.linecolor);this._writeText(context,line,codex,codey,s.codecolor);},_replaceCodeBlock:function(element){var self=this;var s=this.settings;var...