(function( $ ){
   $.fn.addFormElement = function(options) {

    if(options.id == null) {
      $(this).append("You must provide ID for the element");
      return;
    } else var id = options.id;
    delete options.id;

    if(options.label == null) {
      $(this).append("You must provide label for the element");
      return;
    } else var label = options.label;
    delete options.label;

    var settings = $.extend({
        element: 'input',
        name: id,
        type: "text"
    }, options);

    var element = settings.element;
    delete settings.element;
    var automatedClass = false;
    if(settings.class == null && (settings.type != "checkbox" && settings.type != "radio")) {
      settings.class = "form-control "+id;
      automatedClass = true;
    }

    if(automatedClass && (element == 'select' || element == 'selectgrp')) {
      settings.class = 'standardSelect '+id;
    }

  	var html = '<div class="form-group">';
    if(settings.type != 'checkbox' && settings.type != 'radio' && settings.type != 'hidden' && settings.label != '') {
      html += '<label for="'+id+'">'+label;
      if(settings.required != null) {
        html += '<span class="error">*</span>';
      }
      html += '</label>';
    }

    var attr = ' id="'+id+'"';
    $.each(settings, function(index, value) {
      if(index == 'value' && (element == 'textarea' || element == 'select')) {
        attr += "";
      } else attr += ' '+index+'="'+value+'"';
    });
    switch(element) {
      case "input":
        html += '<input'+attr+'/>';
        if ((settings.type == "checkbox") || (settings.type == "radio")) {
          html += '<label for="'+id+'">&nbsp;'+label;
          if(settings.required != null) {
            html += '<span class="error">*</span>';
          }
          html += '</label>';
        }
        break;

      case "textarea":
        html += '<textarea'+attr+'>';
        if(settings.value != null) {
          html += settings.value
        }
        html +='</textarea>';
        break;

      case "select":
        html += '<select'+attr+'>';
        if(settings.value == null && settings.multiple == null) {
          html += '<option value="">Select...</option>';
        }
        $.each(settings.options, function(optIndex, optValue){
          html += '<option value="'+optValue+'"';
          if(optValue == settings.value) {
            html += ' selected';
          }
          html += '>'+optIndex+'</option>';
        })
        html += '</select>';
        break;

      case "selectgrp":
        html += '<select'+attr+'>';
        if(settings.value == null && settings.multiple == null) {
          html += '<option value="">Select...</option>';
        }
        $.each(settings.options, function(grpLabel, optGrp){
          if($.isPlainObject(optGrp) || $.isArray(optGrp)) {
            html += '<optgroup label="'+grpLabel+'">';
            $.each(optGrp, function(optIndex, optValue){
              html += '<option value="'+optValue+'"';
              if(optValue == settings.value) {
                html += ' selected';
              }
              html += '>'+optIndex+'</option>';
            })
            html += '</optgroup>';
          } else {
            html += '<option value="'+optGrp+'"';
            if(optGrp == settings.value) {
              html += ' selected';
            }
            html += '>'+grpLabel+'</option>';
          }
          
        })
        html += '</select>';
        break;
    }
    html += '<div class="error"><em></em></div>';

    html += '</div>';
    $(this).append(html);
    $(".standardSelect").chosen({
        disable_search_threshold: 10,
        no_results_text: "Oops, nothing found!",
        width: "100%"
    });
    return $(this);
   }; 

   $.fn.addLabel = function(options) {
    var settings = $.extend({
        element: 'h3',
        content: ''
    }, options);
    var html = '<'+settings.element+'>'+settings.content+'</'+settings.element+'>';
    $(this).append(html);
    return $(this);
   }; 

   $.fn.addAlert = function(options) {
    var settings = $.extend({
        id: 'alert'
    }, options);
    var html = '<div id="'+settings.id+'" class="pt-0 pb-0 alert alert-success" role="alert"><span></span></div>';
    $(this).append(html);
    $("#"+settings.id).css('display', 'none');
    return $(this);
   }; 

   $.fn.addSubmitBtn = function(options) {

    if(options.action == null) {
      $(this).append("You must provide action for the form");
      return;
    }

    var settings = $.extend({
        value: 'Submit',
        id: 'submit',
        class: 'btn btn-primary'
    }, options);

    var html = '<input type="hidden" name="action" id="';
    if(settings.id != 'submit') {
      html += settings.id+'-';
    }
    html += 'action" value="'+settings.action+'">';
    html += '<button class="'+settings.class+' submit" id="'+settings.id+'">'+settings.value+'</button>';

    $(this).append(html);
    // jQuery(".submit").click(function(event){
    //   $('#alert').css('display', 'none');
    //   event.preventDefault();
    //   $(this).submitForm();
    // })
    return $(this);
   }; 

   $.fn.addElement = function(options) {
    var settings = $.extend({
        element: 'div',
        content: ''
    }, options);
    delete options.element;
    delete options.content;

    var attr = "";
    $.each(options, function(index, value) {
      attr += ' '+index+'="'+value+'"';
    });
    if(typeof settings.content == "object") {
      var html = $('<'+settings.element+' '+attr+'></'+settings.element+'>');
      html.append(settings.content);
    } 
    else {
      var html = '<'+settings.element+' '+attr+'>'+settings.content+'</'+settings.element+'>';
    }
    $(this).append(html);
    return $(this);
   }; 
})( jQuery );