function LoadToDOM() {
    //add script tag containing public.js
    let s = document.createElement("script")
    s.setAttribute("src","https://www.valtex.co.uk/search/js/public.js?d=211007v8");
    s.setAttribute("type", "text/javascript");
    s.setAttribute("async", "false");
    document.head.insertBefore(s, document.head.firstElementChild);
    //run SetGoogleSearch after the .js file has been loaded.
    s.addEventListener("load", SetGoogleSearch, false)

    //Create html elements to perform search
    
    //create container surrounding all elements.
    var vtxcscontainer = document.createElement("div")
    vtxcscontainer.id = "vtxcs-container"
    //document.body.insertBefore(vtxcscontainer,document.body.firstElementChild)
    //document.getElementById("contenthome").insertBefore(vtxcscontainer,document.getElementById("contenthome").firstElementChild)
    
    
        var sqsSearch = document.getElementsByClassName("search-block")[0]
        sqsSearch.replaceWith(vtxcscontainer)
    
    
    //create container for search bar.
    var vtxcssearchcontainer = document.createElement("div")
    vtxcssearchcontainer.id = "vtxcs-search-container"
    vtxcscontainer.appendChild(vtxcssearchcontainer)

    //create container for results
    var vtxcssearchresults = document.createElement("div")
    vtxcssearchresults.id = "vtxcs-search-results"
    vtxcscontainer.appendChild(vtxcssearchresults)

    //create html search
    //create form 
    var searchimage = document.createElement("img")
    searchimage.id = "vtxcs-searchimg"
    searchimage.src = "https://www.valtex.co.uk/search/images/Spinner-1s-200px.gif"

    var form = document.createElement("form");
    form.id = "vtxcs-search-form"
    form.action = ""
    //create searchbar
    var searchbar = document.createElement("input");
    searchbar.id = "vtxcs-searchquery"
    searchbar.value = ""
    searchbar.placeholder = "Search..."
    searchbar.type = "text"
    form.appendChild(searchbar)
    form.appendChild(searchimage)
    //append searchbar to search container
    element = document.getElementById("vtxcs-search-container");
    
    element.appendChild(form);

    //https://stackoverflow.com/questions/42721588/add-image-inside-search-box
    //apply style to html elements
    var style = document.createElement('style');
    document.head.appendChild(style);
    var header = document.getElementById('header')
    
    document.getElementById("vtxcs-container").style.margin = "auto";

    style.sheet.insertRule('#vtxcs-container{width:100%;}');
    style.sheet.insertRule('.vtxcs-thumbnail{width:100%;background-position: center;background-repeat: no-repeat;background-size: cover;float: left;max-width:125px;min-width:75px;}');
    style.sheet.insertRule('.vtxcs-resultscontainer{display: flex;margin-top:2px;width:inherit;min-height: 75px;cursor: pointer;margin-left:auto;margin-right:auto;}');
    style.sheet.insertRule('.vtxcs-resultscontainer:hover{background-color:#ededed;}');
    style.sheet.insertRule('.vtxcs-results{padding-left: 5px;}');
    style.sheet.insertRule('.vtxcs-searchpaging {margin:10px 0;text-align:center;}');

    style.sheet.insertRule('#vtxcs-search-container{width:inherit;display: flex;justify-content: center;align-items: center;}');
    style.sheet.insertRule('#vtxcs-searchquery{width:calc(100% - 16px);padding: 6px;font-size: 17px; }');
    //max appeal style
    style.sheet.insertRule('#vtxcs-searchquery:focus{outline-style: none;}');
    style.sheet.insertRule('.vtxcs-pagenum{min-width: 20px;}');
    //end
    style.sheet.insertRule('#vtxcs-search-form{width:100%;position:relative;}');
    style.sheet.insertRule('#vtxcs-searchimg{position:absolute;right:5px;height:36px;display:none;}');
    style.sheet.insertRule('.vtxcs-searchpaging .vtxcs-pagenum {cursor:pointer;display:inline-block;margin-right:5px;background-color:#cb2025;padding:1px 4px;color:#fff;}');
    style.sheet.insertRule('.vtxcs-searchpaging .vtxcs-pagenum:hover {background-color:#ededed;}');
    style.sheet.insertRule('.vtxcs-searchpaging .vtxcs-pagenum.active {cursor:default;background-color:#000000;}');
    style.sheet.insertRule('.vtxcs-pagenumdisabled {display:inline-block;margin-right:5px;cursor:default;background-color:#ededed;padding:1px 4px;color:#fff;}');
    style.sheet.insertRule('.vtxcs-pagenumdisabled:hover {cursor:default;background-color:#ededed;}');
    style.sheet.insertRule('#vtxcs-loading{display: block;width: 2.5%;margin-left:auto;margin-right:auto;}');
    style.sheet.insertRule('#vtxcs-search-results{max-height:0px;overflow: hidden;transition: max-height 0.5s ease-out;}');
};
window.onclick = hideResults;
function hideResults(){
    var myElem = document.getElementById('vtxcs-search-results');
    if (myElem != null){
        var container = document.getElementById('vtxcs-search-results')
        if (event.target != document.getElementById('vtxcs-searchquery') & event.target.className != 'vtxcs-pagenum active' & event.target.className != 'vtxcs-pagenum' & event.target.className != 'vtxcs-results'& event.target.className != 'vtxcs-thumbnail' & event.target.className != 'vtxcs-pagenumdisabled') {
            document.getElementById('vtxcs-search-results').style.display = 'none'
                    container.style.maxHeight = null;
                    //alert(event.target.className)
        }else{
            document.getElementById('vtxcs-search-results').style.display = 'block'
                container.style.maxHeight = container.scrollHeight + "px";
        }
    }
}

function SetGoogleSearch() {
        var search = new GoogleCustomSearch({
        // take it from here https://code.google.com/apis/console/
        googleApiKey: 'AIzaSyDJBqux70VZElMCJm-IGbNDD-g8tqk8oRY',

        // http://www.google.com/cse/
        googleCustomSearchId: '29701f93d2e4c7ded',

        // callback
        onProcessResults: function(results) {
            var that = this,
                i, len,
                item, resultsStr = '',
                pages, pagesNodes;

            if (that.hasError) {
                alert(that.error.code + ": " + that.error.message);
            }
            else if (results.items.length > 0) {
                // create results HTML
                
                for (i = 0, len = results.items.length; i < len; i++) {
                    item = results.items[i];
                    resultsStr += '<div class = "vtxcs-resultscontainer" onclick="window.location.href=&apos;'+item.link+'&apos;">';
                        if (item.pagemap.cse_thumbnail !== undefined) { 
                            if (item.pagemap.cse_thumbnail[0].src !== undefined) {
                                resultsStr += '<div class="vtxcs-thumbnail" style = "background-image: url(&apos;'+item.pagemap.cse_thumbnail[0].src+'&apos;)"></div>'  
                            }
                        }else{
                            resultsStr += '<div class="vtxcs-thumbnail"></div>'
                        }
                        resultsStr += '<div class = "vtxcs-results">';
                            resultsStr += '<strong>'
                                + item.htmlTitle + '</strong>';

                            resultsStr += '<br>';
                            resultsStr += item.htmlSnippet;
                        resultsStr += '</div>';
                    resultsStr += '</div>';
                }
                
                // render search results
                var container = document.getElementById('vtxcs-search-results')
                container.innerHTML = resultsStr;
                 document.getElementById('vtxcs-searchimg').style.display = 'none'
                 document.getElementById('vtxcs-search-results').style.display = 'block'
                // create paging HTML-nodes
                var pages = search.getPages();

                //var pagesNodes = createPagingNodes(pages, search);
                pagesNodes = createNextPrev(pages, search);
                // render paging
                document.getElementById('vtxcs-search-results').appendChild(pagesNodes);
                //build accordion
                container.style.maxHeight = container.scrollHeight + "px";
                
                    
            }
        }
    });
    //use a timer so that the search isnt perfomred on every key
    function debounce(callback, wait) {
    let timeout;
    return (...args) => {
        clearTimeout(timeout);
        timeout = setTimeout(function () { callback.apply(this, args); }, wait);
        };
    }

    document.getElementById('vtxcs-searchquery').addEventListener('keyup', debounce( () => {
        GetResults()
    }, 1000))

    // form handler
    function GetResults() {
        var searchInput = document.getElementById('vtxcs-searchquery');

        if ((searchInput.value.length > 2 || searchInput.value.length == 0) && !search.isBusy) {
            //document.getElementById('vtxcs-search-results').innerHTML = '<img id="vtxcs-loading" src="https://www.valtex.co.uk/search/images/Spinner-1s-200px.gif" alt="loading" >';
            //show loading gif 
            if (searchInput.value.length > 2){
                document.getElementById('vtxcs-searchimg').style.display = 'initial'
            search.doSearch(searchInput.value, 1);
            }else{
                document.getElementById('vtxcs-search-results').innerHTML = '';
            }
            
            
        }
        return false;
    }

}
window.onresize = function(){
    var header = document.getElementById('header')
    
    
}

window.onload = function()
{
    LoadToDOM();
};