$(function () {
    var bg = $('.bgDiv');
    var rightNav = $('.rightNav');
    showNav($('.widget'), $('.rightNav'), 'right');
    function showNav(btn, navDiv, direction) {
        btn.on('click', function () {
            bg.css({
                display: "block",
                transition: "opacity .5s"
            });
            if (direction == "right") {
                navDiv.css({
                    right: "0px",
                    transition: "right 1s"
                });
            } else if (direction == "left") {
                navDiv.css({
                    left: "0px",
                    transition: "left 1s"
                });
            } else if (direction == "up") {
                navDiv.css({
                    top: "0px",
                    transition: "top 1s"
                });
            } else if (direction == "down") {
                navDiv.css({
                    bottom: "0px",
                    transition: "bottom 1s"
                });
            }


        });
    }

    $('span').each(function () {
        var dom = $(this);
        dom.on('click', function () {
            hideNav();
            alert(dom.text())
        });
    });


    bg.on('click', function () {
        hideNav(rightNav, bg);
    });


});

function hideNav(nav, bg) {
    nav.css({
        right: "-50%",
        transition: "right .5s"
    });
    bg.css({
        display: "none",
        transition: "display 1s"
    });
}