Checkbox toggle to turn off a javascript element

Im creating a portfolio site for myself that my have gotten a little too ambitious but I'd still like to make this work.

My main site loads a video demo reel using the new <video> tag and to make it look cooler has an "ambilight" television effect around it. For usability and for users that find it annoying or distracting I want a toggle to turn the effect off.

I have my checkbox created as well as all the effects working for it.

Here is a piece of the main code as well as a link to the ambilight.js file

<label name="ambilightToggle">
<input type="checkbox" name="toggle"/>
<div class="toggle-switch">
<div class="handle"></div>
<div class="track">
<span>OFF</span><span>ON</span>
</div>
</div>
</label>

</div>
</div>


<div id="main" class="clearfix">

<div id="video-edge">
<img id="ribbon" width="112" height="112" alt="Demo Reel Ribbon" src="img/ribbon-demoreel.png">
<div id="video-wrap" class="video-js-box moo-css">
<video id="example" class="video-js" width="720" height="405" controls preload poster="posters/poster_demoreel2010.png">
<source src="video/demoreel2010.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="video/demereel2010.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="video/demoreel2010.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>
</div>
</div>

<script type="text/javascript">
ambiLight.create(document.getElementById('example'))
</script>



Portfolio Page (http://www.eschulist.com/test/index.html)

http://www.eschulist.com/test/js/ambilight.js



I was able to make the ambilight effect go away using this, but it only works for a second as the video continues to play and the new lights are redrawn.

<script type="text/javascript">
$(document).ready(function(){
$(this).click(function(){
$('canvas.ambilight-left, canvas.ambilight-right').addClass('goAway');
});
});
</script>


Any other ideas on what to do? If the click function works I should be able to have it check the checkboxes state and have it persist. Maybe?

I made a little progress by linking the toggle to the ambilight effect but just like the click function the toggle only seems to last for a second and the light turns back on.


<label>
<input type="checkbox" id="toggle" onclick="vanish()"/>
<div class="toggle-switch">
<div class="handle"></div>
<div class="track">
<span>OFF</span><span>ON</span>
</div>
</div>
</label>

<script type="text/javascript">
var checkbox = document.getElementById("toggle");
function vanish(){
if(checkbox.checked){
$('canvas.ambilight-left, canvas.ambilight-right').addClass('goAway');
};
};
</script>