/*
 * Calendar object
 */
function cldialogue(cid, objectID) {
  this.objectID = objectID;
  this.fields = new Array();
  this.id = cid;
  //this.create_selects ();
  this.currentfield = null;
  this.showallmaximum = 10;
  this.plainfields = new Array(); // input text fields multiple items in a field
  this.divpage = null;
}

cldialogue.prototype.create_specialfields = function() {
  var lmulti = false;
  var odiv;
  var othis = this;
  var ocurdiv, cstyle, ctype;
  var npos;

  $('[data-role="page"]').each(function() { // to trigger page create
    othis.divpage = $(this);
  });

  $('[data-type="select_auto"]').each(function() {
    ocurdiv = $(this);
    lmulti = (ocurdiv.attr("data-multi") == "true");
    cfunction = ocurdiv.attr("data-provider");
    cfunction = cfunction.replace("()", "('" + ocurdiv.attr("data-id") + "')");
    console.log(cfunction);
    othis.currentfield = othis.addfield(ocurdiv.attr("data-id"), ocurdiv.attr("data-label"), ocurdiv.attr("data-placeholder"), ocurdiv.attr("data-dbtype"),
            lmulti);
    othis.currentfield.functioneval = cfunction;
    othis.currentfield.parentdiv = ocurdiv;
    cstyle = ocurdiv.attr("class");
    if (!isnull(cstyle)) {
      npos = cstyle.indexOf("hidden");
      if (npos == -1) {
        eval(cfunction);
      }
    } else {
      eval(cfunction);
    }
  })

  //http://localhost:8080/rental/index.php?-action=get_rental_country&objectID=20025"
  // insert multiple plain text items
  $('[data-type="insert_items"]').each(function() {
    ocurdiv = $(this);
    cid = ocurdiv.attr("data-id");
    cplaceholder = ocurdiv.attr("data-placeholder");
    clabel = ocurdiv.attr("data-label");
    ctype = ocurdiv.attr("data-dbtype");
    ofield = othis.addplainfield(cid, cplaceholder, clabel, ctype, ocurdiv);
  })
  this.renderplainfields();
  this.hidecss();
}

cldialogue.prototype.prepare_couple = function(cid) {
  var ofield = this.findfield(cid);
  var chtml = "";
  if (!isnull(ofield)) {
    chtml = ofield.prepare_couple();
  }
  return (chtml);
}

cldialogue.prototype.saveplaces = function(cid) {
  var ofield = this.findfield(cid);
  if (isnull(ofield)) {
    ofield = this.findplainfield(cid);
  }
  if (!isnull(ofield)) {
    ofield.saveplacestodb();
  } else {
    console.log(cid + " not found");
  }
}

field.prototype.saveplacestodb = function() {
  var http = new XMLHttpRequest();
  var cstring = "";
  var nlen = this.selected.length;
  for (var i = 0; i < nlen; i++) {
    if (i != 0)
      cstring += "_";
    cstring += this.selected[i].id;
  }
  if (cstring != "") {
    params = "&type=" + this.type + "&param=" + cstring;
    var curl = './index.php?-action=add_asso_place';
    var oprocess = genmeta.http_init("saveplaces");

    http.open("POST", curl, true);

    //Send the proper header information along with the request
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    http.onreadystatechange = function() {//Call a function when the state changes.
      if (http.readyState == 4 && http.status == 200) {
        JSONresponsehandler(http.responseText, "", "DB Error add places", oprocess.pid);
      }
    }
    http.send(encodeURI(params));
  }
}

cldialogue.prototype.saveplace_rentalobject = function() {
  var http = new XMLHttpRequest();
  var countryID = myobject.countryID;
  if (countryID == 6) { // france
    params = "&countryID=6&regionID=" + myobject.regionID + "&departementID=" + myobject.departementID +
            "&placeID=" + myobject.placeID;
  } else {
    params = "&countryID=" + countryID + "&place=" + encodeURIComponent($("#place").val());
  }
  params += "&objectID=" + myobject.objectID;
  var curl = './index.php?-action=save_place_of_ro';
  var oprocess = genmeta.http_init("saveplaces");

  http.open("POST", curl, true);

  //Send the proper header information along with the request
  http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

  http.onreadystatechange = function() {//Call a function when the state changes.
    if (http.readyState == 4 && http.status == 200) {
      JSONresponsehandler(http.responseText, "", "DB Error add places", oprocess.pid);
    }
  }
  http.send(encodeURI(params));
}

cldialogue.prototype.hidecss = function() {
  //.ui-autocomplete { height: 300px; overflow-y: scroll; overflow-x: hidden;}
  $('.ui-autocomplete').each(function() {
    oel = $(this);
    oel.hide();
  })
}

cldialogue.prototype.renderplainfields = function() {
  var nlen = this.plainfields.length;
  for (var i = 0; i < nlen; i++) {
    ofield = this.plainfields[i];
    ofield.render();
  }
  this.divpage.trigger("create");
}

// <div data-type="select_auto" data-multi=true data-placeholder="Kies plaats" data-label="Plaats:" data-id="plaats"></div>
cldialogue.prototype.addplainfield = function(cid, cplaceholder, clabel, ctype, odiv) {
  var ofield = new plainfield(this, cid, cplaceholder, clabel, ctype, odiv, this.plainfields.length);
  this.plainfields.push(ofield);
  return (ofield);
}

cldialogue.prototype.getfield = function(cid) {
  var ocurfield = odialogue.findfield(cid); // so in case of multiple itmes running on the same place it is always at the correct field
  if ((ocurfield != null) && (ocurfield.selected.length == 1)) {
    return (ocurfield.selected [0].id);
  }
}

cldialogue.prototype.findfield = function(cid) {
  var nlen = this.fields.length;
  for (var i = 0; i < nlen; i++) {
    if (this.fields [i].fieldname == cid) {
      this.fields[i].data = new Array();
      return (this.fields[i])
    }
  }
}

cldialogue.prototype.renderfield = function(cid) {
  var nlen = this.fields.length;
  for (var i = 0; i < nlen; i++) {
    if (this.fields [i].fieldname == cid) {
      ofield = this.fields[i];
      if ((isnull(ofield.inputfield)) && (!isnull(ofield.functioneval))) {
        eval(ofield.functioneval);
        if (!isnull(ofield.inputfield)) {
          ofield.inputfield.focus();
        }
      }
      return;
    }
  }
}

cldialogue.prototype.eventinput = function(oel) {
  var cid = oel.attr("id");
  cid = cid.replace("_field", "");
  var ofield = odialogue.findfield(cid);
  if (!isnull(ofield)) {
    if (!ofield.autocomplete_open) {
      ofield.prepareautocomplete();
    }
  }
}

cldialogue.prototype.eventblur = function(oel) {
  var cid = oel.attr("id");
  cid = cid.replace("_field", "");
  var ofield = odialogue.findfield(cid);
  if (!isnull(ofield)) {
    ofield.closeautocomplete();
  }
}

// <div data-type="select_auto" data-multi=true data-placeholder="Kies plaats" data-label="Plaats:" data-id="plaats"></div>
cldialogue.prototype.addfield = function(cfield, clabel, cplaceholder, ctype, lmulti) {
  var ofield = new field(this, cfield, clabel, cplaceholder, ctype, lmulti, this.fields.length);
  this.fields.push(ofield);
  return (ofield);
}

cldialogue.prototype.findplainfield = function(cid) {
  var nlen = this.plainfields.length;
  for (var i = 0; i < nlen; i++) {
    if (this.plainfields[i].id == cid)
      return (this.plainfields[i]);
  }
}

function plainfield(oparent, cid, cplaceholder, clabel, ctype, odiv, nidx) {
  if (arguments.length > 0)
    this.init(oparent, cid, cplaceholder, clabel, ctype, odiv, nidx);
}

plainfield.prototype.init = function(oparent, cid, cplaceholder, clabel, ctype, odiv, nidx) {
  this.parent = oparent;
  this.id = cid;
  this.placeholder = cplaceholder;
  this.label = clabel;
  this.parentdiv = odiv;
  this.type = ctype;
  this.idx = nidx;
  this.html = "";
  this.selected = new Array();
  this.fieldname = cid;
}

plainfield.prototype.addselection = function(ctext) {
  var oselection = new selection(this.selected.length, ctext);
  this.selected.push(oselection);
}

plainfield.prototype.render = function() {
  var chtml = "";
  var othis = this;
  var cval, oid, ofield, oel;

  chtml += "<div id='" + this.id + "_field_id' class='divinfo'>&nbsp;<\/div>";
  chtml += "<div data-role='fieldcontain' id='fc_" + this.id + "'>";
  chtml += "<label for='" + this.id + "'>" + this.label + "<\/label>";
  chtml += "<input id='" + this.id + "' placeholder='" + this.placeholder + "' type='text' name='" + this.id + "' value='' >";
  chtml += "<\/div>";
  this.parentdiv.append(chtml);

  $("#" + this.id + "_field_id").click(function(event) {
    cid = event.target.id;
    cid = cid.replace("_field_id", "");
    ofield = othis.parent.findplainfield(cid);
    if (!isnull(ofield)) {
      othis.createselect();
    }
  });

  $("#" + this.id).keyup(function(event) {
    if (event.keyCode == 13) {
      cid = event.target.id;
      ofield = othis.parent.findplainfield(cid);
      cval = $("#" + this.id).val();
      if (!isnull(ofield)) {
        oel = $("#" + ofield.id + "_field_id");
        othis.addselection(cval);
        if (ofield.html == "") {
          ofield.html = cval;
          oel.html(cval);
        } else {
          ofield.html += ", " + cval
          oel.html(ofield.html);
        }
        $("#" + this.id).val("");
      }
    }
  });
}

// cascade save
plainfield.prototype.saveplacestodb = function() {
  this.country = this.parent.getfield("land");
  var nlen = this.selected.length;

  if ((!isnull(this.country)) && (nlen > 0)) {
    this.saveentry(0);
  }
}

// save to place and save to rental_object_places
plainfield.prototype.saveentry = function(idx) {
  var http = new XMLHttpRequest();
  var cplace = this.selected [idx].selected;
  var nlen = this.selected.length;
  var params = "&place=" + cplace + "&countryID=" + this.country + "&type=" + this.type;
  var curl = './index.php?-action=add_place';
  var othis = this;
  var oprocess = genmeta.http_init();

  http.open("POST", curl, true);

  //Send the proper header information along with the request
  http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

  http.onreadystatechange = function() {//Call a function when the state changes.
    if (http.readyState == 4 && http.status == 200) {
      JSONresponsehandler(http.responseText, "", "DB error email send", oprocess.pid);
      if (idx < nlen - 1) {
        idx++;
        othis.saveentry(idx);
      }
    }
  }
  http.send(encodeURI(params));
}

function field(oparent, cfield, clabel, cplaceholder, ctype, lmulti, nidx) {
  if (arguments.length > 0)
    this.init(oparent, cfield, clabel, cplaceholder, ctype, lmulti, nidx);
}

field.prototype.init = function(oparent, cfield, clabel, cplaceholder, ctype, lmulti, nidx) {
  this.parent = oparent;
  this.fieldname = cfield;
  this.label = clabel;
  this.placeholder = cplaceholder;
  this.type = ctype;
  this.functioneval = null;  // code to activate
  this.selected = new Array();
  this.idx = nidx;
  this.multi = lmulti;
  this.data = new Array(); // filled by an eval function
  this.itemselected = false; // if selected is true and multi is false then we don't need autocomplete
  this.html = "&nbsp;"; // holds selected items
  this.functionafterselect = null;
  this.autocomplete_open = false;
}

field.prototype.addselection = function(cid, cselected) {
  var oselection = new selection(cid, cselected, this.selected.length);
  this.selected.push(oselection);
  return (oselection);
}

field.prototype.prepare_couple = function(cfield) {
  var chtml = "";
  var nlen = this.selected.length;
  for (var i = 0; i < nlen; i++) {
    chtml += "&key" + i + "=" + this.selected[i].id;
  }
  return (chtml);
}

field.prototype.findselected = function(cid) {
  var nlen = this.selected.length;
  for (var i = 0; i < nlen; i++) {
    if (this.selected[i].id == cid)
      return (this.selected[i].selected);
  }
}

field.prototype.refreshselected = function() {
  var oel = $("#" + this.fieldname + "_field_id");
  if (oel.length > 0) {
    if (this.html != "&nbsp;") {
      oel.html(this.html);
      oel.show();
    }
  }
}

/*
 This code has to be inserted using Chrome Inspect Element
 <div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">  // odiv
 <label for="name" class="ui-input-text">Text Input:</label>  // label
 <div class="inlineblock">  // odivinlineblock
 <div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c">
 <input type="text" name="name" id="name" value="" class="ui-input-text ui-body-c">
 </div>
 <a href="#"
 data-role="button"
 data-icon="plus"
 data-iconpos="notext"
 data-corners="true"
 data-shadow="true"
 data-iconshadow="true"
 data-wrapperels="span"
 data-theme="c"
 title=""
 class="ui-btn ui-btn-up-c ui-shadow ui-btn-corner-all ui-btn-icon-notext">  // ohrefbutton
 <span class="ui-btn-inner">
 <span class="ui-btn-text"></span>
 <span class="ui-icon ui-icon-plus ui-icon-shadow">&nbsp;</span>
 </span>  //ospan
 </a>
 </div>
 </div>
 */
/*
 A select box is creating holding the items already chosen
 */
field.prototype.createselect = function() {
  var othis = this;
  var odivsel = $('<div/>', {"id": this.fieldname + "_select_list", "class": "divinfo"});
  odivsel.appendTo(this.parentdiv);
  var cname = this.fieldname + "_seldialogue";
  chtml = "<select name='" + cname + "' id='" + cname + "' multiple='multiple' data-native-menu='false' tabindex='-1'>" +
          "<option>Verwijder keuzes</option>";

  var nlen = this.selected.length;
  for (var i = 0; i < nlen; i++) {
    chtml += "<option value='" + this.selected[i].id + "'>" + this.selected[i].selected + "</option>";
  }
  chtml += "</select>";
  odivsel.html(chtml);
  var myselect = $("#" + cname);
  if (!isnull(myselect)) {
    myselect.selectmenu();
    myselect.selectmenu("refresh");
    $("#" + cname + "-button").click(); // open the selectbox
  }

  odivsel.show();
  var newselected = new Array();
  //*[@id="rentper-dialog"]/div/div[1]/a/span/span[2]
  $("#" + cname + "-listbox a[title='Close']").on("click", function() {
    var cval = $("#" + cname).val();  // te verwijderen items
    if (isnull(cval)) {
      cval = "";
    } else if ($.isArray(cval)) {
      cval = cval.join(", ");
    }

    for (var i = 0; i < nlen; i++) {
      cid = othis.selected[i].id;
      npos = cval.indexOf(cid);
      if (npos == -1) {
        onewsel = new selection(othis.selected[i].id, othis.selected[i].selected, newselected.length);
        newselected.push(onewsel);
      }
    }
    othis.selected = newselected;
    othis.showselection();
    odivsel.hide();
  });
  //$("#" + this.fieldname + "_seldialogue").focus();
  $("#" + this.fieldname + "_seldialogue").click(function(event) {
    event.stopPropagation();
    // Do something
  });
}

plainfield.prototype.createselect = field.prototype.createselect;

field.prototype.showselection = function() {
  var nlen = this.selected.length;
  var chtml = "";
  for (var i = 0; i < nlen; i++) {
    if (i == 0) {
      chtml = this.selected[i].selected;
    } else {
      chtml += ", " + this.selected[i].selected;
    }
  }
  var oel = $("#" + this.fieldname + "_field_id");
  oel.html(chtml);
}

plainfield.prototype.showselection = field.prototype.showselection;

field.prototype.insert_multiselect = function() {
  var chtml = "";
  var othis = this;
  //var odivinlineblock = $('<div/>', { "class" : "inlineblock" } );
  //odivinlineblock.appendTo (this.parentdiv);
  var odivsel = $('<div/>', {"id": this.fieldname + "_field_id", "class": "divinfo hidden"});
  odivsel.click(function() {
    othis.createselect();
  });
  odivsel.html("&nbsp;");
  odivsel.appendTo(this.parentdiv);

  var osel_box = $('<div/>', {"id": this.fieldname + "_dialogue_sellist", "class": "hidden"});
  osel_box.appendTo(this.parentdiv);

  var oparagraph = $("<p/>");
  var odivres = $('<div/>', {"id": this.fieldname + "_results_count", "class": "divinfo hidden"});
  odivres.html("&nbsp;");
  odivres.appendTo(this.parentdiv);
  oparagraph.appendTo(this.parentdiv);
  var odiv = $('<div/>', {"data-role": "fieldcontain", "class": "ui-field-contain ui-body ui-br"});
  odiv.appendTo(this.parentdiv);

  var label = $("<label>", {"for": this.fieldname, "text": this.label, "class": "ui-input-text"});
  label.appendTo(odiv);

  //var odivinlineblock = $('<div/>', { "class" : "inlineblock" } );
  //odivinlineblock.appendTo (odiv);

  //Create the input element
  var odivinputparent = $('<div/>', {"class": "ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c"});
  odivinputparent.appendTo(odiv);

  var input = $('<input type="text">').attr({id: this.fieldname + "_field", placeholder: this.placeholder,
    class: "ui-input-text ui-body-c ui-autocomplete-input selinput", autocomplete: "on"});
  input.appendTo(odivinputparent);
  this.parentdiv.addClass('borderclass');

  this.inputfield = input;

  $("#" + this.fieldname + "_field").focus(function() {
    odialogue.eventinput($(this));
  });
  $("#" + this.fieldname + "_field").keydown(function() {
    odialogue.eventinput($(this));
  });
  $("#" + this.fieldname + "_field").click(function() {
    odialogue.eventinput($(this));
  });
  $("#" + this.fieldname + "_field").blur(function() {
    odialogue.eventblur($(this));
  });
  $("#" + this.fieldname + "_field_id").blur(function() {
    odialogue.eventblur($(this));
  });

  $("body").click(function(event) {
    oel = $("#" + othis.fieldname + "_select_list");
    if (oel.length == 1) {
      oel.hide();
    }
  });

  var odivautocomplete = $('<div/>', {"id": this.fieldname + "_autocompleteContainer"});
  odivautocomplete.appendTo(odiv);

  odivextra = $('<div/>');
  odivextra.html("&nbsp;&nbsp;&nbsp;");
  odivextra.appendTo(odiv);
  //this.create_autocomplete();
}

field.prototype.insert_autocomplete = function(cpostcode) {
  this.functionafterselect = cpostcode;
  this.insert_multiselect();  // data is loaded
  this.refreshselected();
  this.parentdiv.show();
  if (this.data.length < this.parent.showallmaximum) {
    $("#" + this.fieldname + "_field").autocomplete("search", "");
  }

  this.inputfield.focus();
}

field.prototype.closeautocomplete = function() {
  this.autocomplete_open = false;
  //$("#" + this.fieldname + "_field_id").hide();
  this.fillinputfield();
  if (!isnull(this.functionafterselect)) {
    eval(this.functionafterselect);
  }
}

field.prototype.prepareautocomplete = function() {
  if (this.html != "&nbsp;") {
    $("#" + this.fieldname + "_field_id").show();
    $("#" + this.fieldname + "_field_id").html(this.html);
  }
  $("#" + this.fieldname + "_field").val("");
}

field.prototype.setselected = function(cid, cselected) {
  var oselected = this.findselected(cid);
  if (isnull(oselected)) {  // alrready inserted ?
    if (this.multi) {
      oel = $("#" + this.fieldname + "_field_id");
      if (oel.length > 0) {
        this.html = $("#" + this.fieldname + "_field_id").html();
      }
      if (this.html == "&nbsp;") {
        this.html = cselected;
      } else {
        this.html += ", " + cselected;
      }
      if (oel.length > 0) {
        oel.html(this.html + ' ');
      }
      this.addselection(cid, cselected);
    } else {
      this.html = cselected;
      oel = $("#" + this.fieldname + "_field_id");
      if (oel.length > 0) {
        $("#" + this.fieldname + "_field_id").html(cselected);
      }
      $("#" + this.fieldname + "_field_id").show();
      this.selected = new Array();
      this.addselection(cid, cselected);
    }
  }
}

field.prototype.fillinputfield = function() {
  //var chtml = this.html;
  //chtml.replace ("&nbsp;","");
  //$("#" + this.fieldname + "_field").val(chtml);
  $("#" + this.fieldname + "_field").val("");
}

/*
 <input type=@@text" id=@@land_field" placeholder=@@Kies land" class=@@ui-input-text ui-body-c ui-autocomplete-input selinput" autocomplete=@@on"
 */
//<input id="field" type="text" placeholder="Countries (starting with A)" class="ui-input-text ui-body-c ui-autocomplete-input" autocomplete="off">
//<input type="text" id="plaats_field" placeholder="Kies plaats" name="plaats_field" class="ui-input-text ui-body-c ui-autocomplete-input" autocomplete="off">
function create_autocomplete(cid, curl, populate_list) {
  var chtml = "";
  var othis = this;
  var oel = $("#" + cid);

  if (!isnull(oel)) {
    oel.on("filterablebeforefilter", function(e, data) {
      var $ul = $(this),
              $input = $(data.input),
              value = $input.val(),
              html = "";
      $ul.html("");
      if (value && value.length > 0) {
        $ul.html("<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>");
        $ul.show();
        //$ul.html("<li></li>");
        $ul.listview("refresh");
        $.ajax({
          url: curl,
          dataType: "json",
          crossDomain: false,
          data: {
            q: $input.val(),
          }
        })
                .then(function(response) {
                  $.each(response, function(i, val) {
                    val.id = cid;
                    html += populate_list(val, cid);
                  });
                  $ul.addClass("floatright");
                  $ul.html(html);
                  $ul.listview("refresh");
                  $ul.trigger("updatelayout");
                });
      }
    });
  }
}

function selection(cid, cselected) {
  if (arguments.length > 0)
    this.init(cid, cselected);
}

selection.prototype.init = function(cid, cselected) {
  this.id = cid;
  this.selected = cselected;
}