function urltitle(description, id) {
  let title = description.substring(0, 30);
  title = title.replace(/[^A-Za-z0-9\'\-_&]/g, '-');
  title = title.replace(/--/g, '-');

  let hexString = (parseInt(id)).toString(16);

  return title + '-' + hexString;
}

function doSearch() {
  var term = $('#apa-search-text2').val();
  if (term.length < 1) return;
  sessionStorage.setItem("search_example", term);
  $.ajax({
    url: '/apa/ajax_bridge.php?s_n=' + escape(term) + '&start=0&try=1',
    dataType: 'json',
    success: function (data) {
      //debugger;
      var $parent = $('#apa-search2 div.results');

      if ($parent.is(':visible')) {
        $parent.html('');
        $parent.hide();
      }

      if (data.results.length >= 1)
        $parent.append('<p><b>Search results for ' + term + '</b></p>');
      else
        $parent.append('<p><b>NO RESULTS. Please modify your search - click <a href="https://www.marks4antiques.com/Lost_for_words.htm" onclick="window.open(this.href, \'mywin\',\'left=20,top=20,width=1050,height=450,toolbar=1,scrollbars=1,resizable=0\'); return false;"><i>here</i></a> for help </b></p>');


      //$parent.append('<p><b>Search results for '+term+'</b></p>');
      var $ul = $('<ul></ul>');

      for (var i in data.results) {
        var link = 'https://www.marks4antiques.com/apa/' + data.results[i].link;

        var $l = $('<li>');
        // linode
        var pid = btoa(data.results[i].id + ',max');
        var phoid = data.results[i].image_key ? data.results[i].image_key : data.results[i].photo;
        $l.append('<a href="' + link + '">' +
          '<img src="https://www.marks4antiques.com/apa/recordimages/resize.php?pid=' + escape(pid) + '&amp;size=max' + phoid.replace('[', '').replace(']', '') + '" alt="' + data.results[i].description.substring(0, 30) + '">' +
          '</a>');
        $l.append('<a href="' + link + '">' + (data.results[i].title ? data.results[i].title : data.results[i].description.substring(0, 30)) + '</a>');
        $l.append('<div class="apa-related-desc">' + data.results[i].description.substring(0, 160) + '</div>');
        $l.append('<a class="apa-more-links" href="https://www.marks4antiques.com/apa/' + urltitle(data.results[i].description, data.results[i].id) + '">[more like this]</a>');
        $l.appendTo($ul);
      }

      $parent.append($ul);

      $parent.slideDown('fast');
    },
    error: function (err) {
      var $parent = $('#apa-search div.results');

      if ($parent.is(':visible')) {
        $parent.html('');
        $parent.hide();
      }
      $parent.append('<p><b>NO RESULTS. Please modify your search - click <a href="https://www.marks4antiques.com/Lost_for_words.htm" onclick="window.open(this.href, \'mywin\',\'left=20,top=20,width=1050,height=450,toolbar=1,scrollbars=1,resizable=0\'); return false;"><i>here</i></a> for help </b></p>');
      $parent.slideDown('fast');
    }
  });
}

var $input = $('<input>').attr('placeholder', 'Search for items...').attr('id', 'apa-search-text2');
var $button = $('<button>').text('Search');
var $lost = $('<p style="margin-top:10px;font-size:0.9em;">').text("Lost for words?  please click")
$lost.append("<a href='https://www.marks4antiques.com/Lost_for_words.htm' onclick=\"window.open(this.href, 'mywin','left=20,top=20,width=1050,height=450,toolbar=1,scrollbars=1,resizable=0'); return false;''\"> here</a>");
var $results = $('<div class="results">').css('display', 'none');

$input.appendTo($('#apa-search2'));
$button.appendTo($('#apa-search2'));
$lost.appendTo($('#apa-search2'));
$results.appendTo($('#apa-search2'));
//$('#apa-search2').html($input.html() + $button.html())


$('#apa-search2 input').on('keyup', function (e) {
  if (e.keyCode == 13) doSearch();
});
$('#apa-search2 button').on('click', function () {
  doSearch();
});