var ComponentsContextMenu = function () {

    var demo2 = function() {
        $('#main').contextmenu({
            target: '#context-menu2',
            before: function (e) {
                // This function is optional.
                // Here we use it to stop the event if the user clicks a span
                e.preventDefault();
                if (e.target.tagName == 'SPAN') {
                    e.preventDefault();
                    this.closemenu();
                    return false;
                }
                //this.getMenu().find("li").eq(2).find('a').html("Dynamically changed!");
                return true;
            }
        });
    }

    var demo3 = function() {
        // Demo 3
        $('#context2').contextmenu({
            target: '#context-menu2',
            onItem: function (context, e) { 
                if ($(e.target).data('url')) {
                    this.closemenu();
                } else {
                    alert($(e.target).text());
                }
            }
        });

        $('#context-menu2').on('show.bs.context', function (e) {
            console.log('before show event');
        });

        $('#context-menu2').on('shown.bs.context', function (e) {
            console.log('after show event');
        });

        $('#context-menu2').on('hide.bs.context', function (e) {
            console.log('before hide event');
        });

        $('#context-menu2').on('hidden.bs.context', function (e) {
            console.log('after hide event');
        });
    }

    return {
        //main function to initiate the module
        
        init: function () {
            demo2();
            demo3();
        }

    };

}();

jQuery(document).ready(function() {    
   ComponentsContextMenu.init(); 
});