(function(){
    var placeholder = function(evt) {
        var e = evt.target;
        var p = e.getAttribute("placeholder");
        if(!p)
            return;
        $(e).removeClass("placeholder");
        if(evt.type == "focus" && e.value == p || e.value == "") {
            e.value = "";
        } else if(e.value.match(/^\s+$|^$/)) {
            e.value = p;
            $(e).addClass("placeholder");
        }
    };
    
    
    var formSubmit = function(evt) {
        $(evt.target).find("input[placeholder]").triggerHandler("focus");
    };
    
    
    var grid = function() {
        $(this).toggleClass("front");
    };
    
    
    /* setup */
    $(document).ready(function() {
        $("input[placeholder]").focus(placeholder);
        $("input[placeholder]").blur(placeholder);
        $("input[placeholder]").triggerHandler("blur");
        
        $("form").submit(formSubmit);
        
        $("#grid").click(grid);
    })
})();