if (document.getElementsByClassName) {
    (function() {
        var sections = document.getElementsByClassName("hide"), i;
        for (i = 0; i < sections.length; i++) {
            sections[i].onclick = function (section) {
                return function () {
                    var attr = section.getAttribute("class");
                    if (attr.indexOf("clicked") > -1) {
                        attr = attr.replace(/ ?clicked/, "");
                    } else {
                        attr += " clicked";
                    }
                    section.setAttribute("class", attr);
                };
            }(sections[i]);
        }
    })();
}

(function() {
    var canvas = document.getElementById("circles");
    if (!canvas.getContext) return;
    var context = canvas.getContext("2d"), header = document.getElementsByTagName("HEADER")[0],
        first_click = true;
    
    header.onclick = function(event) {
        var x, y, r, c;
        if (first_click) {
            canvas.width = header.clientWidth;
            canvas.height = header.clientHeight;
            context.globalCompositeOperation = "lighter";
            first_click = false;
        }
        x = event.clientX - header.offsetLeft
        y = event.clientY - header.offsetTop;
        
        r = Math.floor(2 + Math.random() * 38);
        c = Math.floor(Math.random() * 0x1000000);
        
        context.beginPath();
        context.fillStyle = "#" + c.toString(16);
        context.arc(x, y, r, 0, 2 * Math.PI, false);
        context.fill();
        context.closePath();
    }
})();