function urltitle(description, id) {
   // Trim the description to 30 characters
    let title = description.substring(0, 30);

    // Replace specific characters with a hyphen
    title = title.replace(/['"&]/g, '');
    title = title.replace(/[^A-Za-z0-9\-_]/g, '-');

    // Remove consecutive hyphens
    title = title.replace(/--+/g, '-');

    // Remove leading and trailing hyphens
    title = title.replace(/^-+|-+$/g, '');

    // Convert ID to hexadecimal
    let hexString = parseInt(id).toString(16);

    // Combine title and hexString
    return title + '-' + hexString;
}

function doRelatedSearch() {
   var term = $('#apa-search2-text').val();
   if (term.length < 1) return;
	$.ajax({
		url: `https://51ce-74-80-248-93.ngrok-free.app/example/${escape(term)}`,
      dataType: 'json',
      headers: {
            'ngrok-skip-browser-warning': 'true' 
      },
      success: function (data) {
         //debugger;
         var $parent = $('#apa-search2 div.results');
         
         if ($parent.is(':visible')) {
            $parent.html('');
            $parent.hide();
         }
         
         //$parent.append('<p><b>Search results for '+term+'</b></p>');
         var $ul = $('<ul></ul>');
         
         for (var i in data) {
            var link = 'https://www.marks4antiques.com/apa/' + data[i].link;
            
            var $l = $('<li>');
            // linode
            var pid = btoa(data[i].id + ',max');
            var phoid = data[i].image_key ? data[i].image_key : data[i].photo;
            $l.append('<a href="https://www.marks4antiques.com/apa/' + urltitle(data[i].description, data[i].id) + '"><img src="https://www.marks4antiques.com/apa/recordimages/resize.php?pid=' + escape(pid) + '&amp;size=max' + phoid.replace('[', '').replace(']', '') + '" alt="' + data[i].description.substring(0, 30) + '"></a>');
            $l.append('<a href="https://www.marks4antiques.com/apa/' + urltitle(data[i].description, data[i].id) + '">' + (data[i].description.substring(0, 30)) + '</a>');
            $l.append('<div class="apa-related-desc">' + data[i].description.substring(0, 150) + '</div>');
            $l.append('<a class="apa-more-links" href="https://www.marks4antiques.com/apa/' + urltitle(data[i].description, data[i].id) + '">[more like this]</a>');
            $l.appendTo($ul);
         }
         
         $parent.append($ul);
         $bottom = '<p class="tac"><em><strong>...many more examples with full details are available to our members - <a href="/">Learn more</a></strong></em></p>\n';
         $parent.append($bottom);
         
         $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-text');
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())