/**
     * Opens a popup.
     * format: openPopup(title, content, buttons[, hideCloseButton]);
     */
    var openPopup = (function() {
        var popupId = 'snippets_modal';

        var getModalHeader = function(title) {
            var headerDiv = createHTMLElement('div', {class: 'modal-header'});
            var button = createHTMLElement('button', {type: 'button', class: 'close', 'data-dismiss': 'modal'});
            var headerH4 = createHTMLElement('h4', {class: 'modal-title'}, title);
            headerDiv.appendChild(button);
            headerDiv.appendChild(headerH4);
            return headerDiv;
        };
        
        var getModalContent = function(content) {
            var headerDiv = createHTMLElement('div', {class: 'modal-body'}, content);
            return headerDiv;
        };

        // create the footer section - array `buttons` with buttons elements (DOM elems)
        var getModalFooter = function(buttons, hideCloseButton) {
            var footerDiv = createHTMLElement('div', {class: 'modal-footer'});
            if (!hideCloseButton) {

                // add the `close` button
                var closeButton = createHTMLElement('button', {type: 'button', class: 'btn btn-default', 'data-dismiss': 'modal'}, 'Close');
                footerDiv.appendChild(closeButton);

                // add buttons given in the parameter
                if (buttons && buttons.length) {
                    for (var j in buttons) {
                        footerDiv.appendChild(buttons[j]);
                    }
                }
            }

            // add the buttons
            if (buttons && buttons.length) {
                for (var i in buttons) {
                    footerDiv.appendChild(buttons[i]);
                }
            }
            return footerDiv;
        };
        
        return function(title, content, buttons, hideCloseButton) {
            var popup = document.getElementById(popupId);
            // remove the previous popup window
            if (popup) {
                popup.parentNode.removeChild(popup);
            }

            popup = createHTMLElement('div', {id: popupId, class: 'modal fade'});
            var innerPopupDialog = createHTMLElement('div', {class: 'modal-dialog'});
            var modalContent = createHTMLElement('div', {class: 'modal-content'});

            // build the popup content (header, content and footer)
            modalContent.appendChild(getModalHeader(title));
            modalContent.appendChild(getModalContent(content));
            modalContent.appendChild(getModalFooter(buttons, hideCloseButton));

            // wrap it
            innerPopupDialog.appendChild(modalContent);
            popup.appendChild(innerPopupDialog);

            // append to the body
            document.body.appendChild(popup);

            // display the popup
            if (window.$) {
                var $elem = $('#' + popupId);
                if ($elem && $elem.modal) {
                    $elem.modal('show');
                }
            }

        };
    })();