$(document).ready(function(){
    $(".login_menu").hide();
    $(".btn-show-login").on("click", function(e){
       $(".login_menu").slideToggle();
        e.preventDefault();
    });

    $(".error").hide();
    $(".profiel").hide()

    $(".profiel_foto_klein").hide();
    $(".aanmelden").on("click", function(e) {
        var username = $("#username").val();
        var password = $("#password").val();
        if (username=="pin" && password=="terest") {
            $(".profiel_foto_klein").show();
            $(".login-text").text("we Are IMD");
            $(".profiel").show();

            setTimeout(function(){
                $(".pins_discussion").addClass("pins_discussion_active").text("2");
            }, 3000);

        }
        else {
            $(".error").text("Login failed!").slideDown();
            e.preventDefault();
        }
    });
    var popup = $(".popup");
    popup.hide();
    $(".btn-create").on("click", function(e){
        popup.show();
        $(".menu").hide();
        e.preventDefault();
    });

    $(".btn_name_board").on("click", function(e){
        var name_board = $(".name_board");
        if (name_board.val()==""){
            name_board.css("border", "1px solid red");
        }
        else {
            $(".popup").hide();
            var newBoard = $("<div></div>").addClass("board_logo new");
            var newBoardName = $("<div></div>").addClass("boardName").text(name_board.val());
            var newBoardImg = $("<img></img>").attr("src", "images/newboard.jpg").attr("width", "216");
            var EditLink = $("<a></a>").addClass("edit_board").attr("href", "#").text("Edit");
            newBoard.append(newBoardName).append(newBoardImg).append(EditLink);
            $(".board_logo").last().after(newBoard);
            updateCounter();
            e.preventDefault();
        }

    });

    function updateCounter() {
        var numberOfBoards = $(".new").length;
        var updateCounter = 4 + numberOfBoards;
        $(".aantal_borden").text(updateCounter);
    }
});