text: var H5P = H5P || {};
  
  /**
   * H5P Joubel UI library.
   *
   * This is a utility library, which does not implement attach. I.e, it has to bee actively used by
   * other libraries
   * @module
   */
  H5P.JoubelUI = (function ($) {
    /**
     * The internal object to return
     * @class H5P.JoubelUI
     * @static
     */
    function JoubelUI() {}
  
    /* Public static functions */
  
    /**
     * Create a tip icon
     * @method H5P.JoubelUI.createTip
     * @param  {string}  text   The textual tip
     * @param  {Object}  params Parameters
     * @return {H5P.JoubelTip}
     */
    JoubelUI.createTip = function (text, params) {
      return new H5P.JoubelTip(text, params);
    };
  
    /**
     * Create message dialog
     * @method H5P.JoubelUI.createMessageDialog
     * @param  {H5P.jQuery}               $container The dom container
     * @param  {string}                   message    The message
     * @return {H5P.JoubelMessageDialog}
     */
    JoubelUI.createMessageDialog = function ($container, message) {
      return new H5P.JoubelMessageDialog($container, message);
    };
  
    /**
     * Create help text dialog
     * @method H5P.JoubelUI.createHelpTextDialog
     * @param  {string}             header  The textual header
     * @param  {string}             message The textual message
     * @return {H5P.JoubelHelpTextDialog}
     */
    JoubelUI.createHelpTextDialog = function (header, message) {
      return new H5P.JoubelHelpTextDialog(header, message);
    };
  
    /**
     * Create progress circle
     * @method H5P.JoubelUI.createProgressCircle
     * @param  {number}             number          The progress (0 to 100)
     * @param  {string}             progressColor   The progress color in hex value
     * @param  {string}             fillColor       The fill color in hex value
     * @param  {string}             backgroundColor The background color in hex value
     * @return {H5P.JoubelProgressCircle}
     */
    JoubelUI.createProgressCircle = function (
      number,
      progressColor,
      fillColor,
      backgroundColor
    ) {
      return new H5P.JoubelProgressCircle(
        number,
        progressColor,
        fillColor,
        backgroundColor
      );
    };
  
    /**
     * Create throbber for loading
     * @method H5P.JoubelUI.createThrobber
     * @return {H5P.JoubelThrobber}
     */
    JoubelUI.createThrobber = function () {
      return new H5P.JoubelThrobber();
    };
  
    /**
     * Create simple rounded button
     * @method H5P.JoubelUI.createSimpleRoundedButton
     * @param  {string}                  text The button label
     * @return {H5P.SimpleRoundedButton}
     */
    JoubelUI.createSimpleRoundedButton = function (text) {
      return new H5P.SimpleRoundedButton(text);
    };
  
    /**
     * Create Slider
     * @method H5P.JoubelUI.createSlider
     * @param  {Object} [params] Parameters
     * @return {H5P.JoubelSlider}
     */
    JoubelUI.createSlider = function (params) {
      return new H5P.JoubelSlider(params);
    };
  
    /**
     * Create Score Bar
     * @method H5P.JoubelUI.createScoreBar
     * @param  {number=}       maxScore The maximum score
     * @param {string} [label] Makes it easier for readspeakers to identify the scorebar
     * @return {H5P.JoubelScoreBar}
     */
    JoubelUI.createScoreBar = function (maxScore, label) {
      return new H5P.JoubelScoreBar(maxScore, label);
    };
  
    /**
     * Create Progressbar
     * @method H5P.JoubelUI.createProgressbar
     * @param  {number=}       numSteps The total numer of steps
     * @param {Object} [options] Additional options
     * @param {boolean} [options.disableAria] Disable readspeaker assistance
     * @param {string} [options.progressText] A progress text for describing
     *  current progress out of total progress for readspeakers.
     *  e.g. "Slide :num of :total"
     * @return {H5P.JoubelProgressbar}
     */
    JoubelUI.createProgressbar = function (numSteps, options) {
      return new H5P.JoubelProgressbar(numSteps, options);
    };
  
    /**
     * Create standard Joubel button
     *
     * @method H5P.JoubelUI.createButton
     * @param {object} params
     *  May hold any properties allowed by jQuery. If href is set, an A tag
     *  is used, if not a button tag is used.
     * @return {H5P.jQuery} The jquery element created
     */
    JoubelUI.createButton = function (params) {
      var type = "button";
      if (params.href) {
        type = "a";
      } else {
        params.type = "button";
      }
      if (params.class) {
        params.class += " h5p-joubelui-button";
      } else {
        params.class = "h5p-joubelui-button";
      }
      return $("<" + type + "/>", params);
    };
  
    return JoubelUI;
  })(H5P.jQuery);
  