/********************************************************/
/** ops_page_search - jQuery live search functionality  */
/********************************************************/
let liveSearchTimeout;
let search_box, searchSubmit,searchSubmit2,search_standardImage,search2_standardImage;
const search_searchingImage = '/Static/Images/ops_page/ajax-loader_search.gif';
const search2_searchingImage = '/Static/Images/ops_page/ajax-loader_search_alt.gif';

$(function () {
	search_box = $("#search input[type=search]");
	searchSubmit = $("#search_submit");
	searchSubmit2 = $("#search_submit2");
	search_standardImage = searchSubmit.attr('src');
	search2_standardImage = searchSubmit2.attr('src');
});

function ops_page_livesearch() {

    search_box.on ( "focus keyup", {
        action: "livesearch"
    } , ops_page_call_liveSearch ) ;

    search_box.on( {
        "blur": function( e ) {
            // If we just hangout an extra tick, we'll find out which element got focus really
            // https://stackoverflow.com/questions/11544554/get-the-clicked-object-that-triggered-jquery-blur-event
            setTimeout(function() {
                // Fade out if you have clicked off the search bar
                if ( !$(document.activeElement).is( 'a' ) ) {
                    var fade = { opacity:0, transition:'opacity 0.5s' };
                    $("#ops_page_livesearch").css( fade ).slideUp();

                    /** Reset the searching animation **/
                    ops_page_call_liveSearch_reset() ;
                }
            }, 1);
        }
    }) ;
}
function ops_page_call_liveSearch() {
    // Stop any previous run of the AJAX
    clearTimeout( liveSearchTimeout ) ;

    // Assign the data from the search value
    search_box.data( 'q', search_box.val() ) ;

    // Run the search
    //searchSubmit.attr( 'src', search_searchingImage ) ;
    liveSearchTimeout = setTimeout( ops_page_AJAXify_jsonLiveSearch, 100 ) ;
}
function ops_page_call_liveSearch_loading() {
    if ( searchSubmit.attr( 'src' ) === search_standardImage ) {
        searchSubmit.attr( 'src', search_searchingImage ).addClass( 'loading' ) ;
    }
    if ( searchSubmit2.attr( 'src' ) === search2_standardImage ) {
        searchSubmit2.attr( 'src', search2_searchingImage ).addClass( 'loading' ) ;
    }
}
function ops_page_call_liveSearch_reset() {
    if ( searchSubmit.attr( 'src' ) === search_searchingImage ) {
        searchSubmit.removeClass( 'loading' ).attr( 'src', search_standardImage ) ;
    }
    if ( searchSubmit2.attr( 'src' ) === search2_searchingImage ) {
        searchSubmit2.removeClass( 'loading' ).attr( 'src', search2_standardImage ) ;
    }
}
function ops_page_AJAXify_jsonLiveSearch() {

    var fadeIn  = { opacity:1, transition:'opacity 0.5s', display:'block'} ;
    var fadeOut = { opacity:0, transition:'opacity 0.5s'} ;
    var search = $("#ops_page_livesearch");
    var queryData = search_box.data( 'q' ) ;

    ops_page_call_liveSearch_loading() ;

    if ( queryData.length >= 3 ) {

        // Something searched - perform the search.
        $.getJSON("/Home/Search/Live?s=" + encodeURIComponent( queryData ) + "&filter=current,top20" , function(data) {

            // Change the search icon
            var html = "<ul>";
            if ( data.length == 0 ) {
                html += '<li><i><img class="ops_iconTag icon" src="/Static/Icons/ui/ux2/appbar-smiley-frown.png" ' +
                    'alt="Sad face" title="No results" style="max-width:3rem;"/>No results</i></li>' ;
            }
            
            $.each(data, function(i, item) {
                var markup = '';

                if ( item.menu ) {
                    markup = '<div class="ops_page_livesearch_submenu navigation panel" style="display:none;"><ul>';
                    $.each(item.menu, function(j, subitem) {
                        markup += '<li class="animated fast no-leadin"><a href="' + subitem.url + '"><img src="' + subitem.icon + '">' + subitem.name + '</a></li>';
                    });
                    markup += '</ul></div>';
                }

                html +=
                    '<li' + (item.menu ? ' class="animated fast no-leadin ops_page_livesearch_submenu"' : '') + '>'
                    + ( markup.length > 0 ? '<span></span>' : '' )
                    + '<a href="' + item.url + '">'
                    + '<img src="' + item.icon + '" alt="Icon"/>'
                    + item.name
                    + '</a>'
                    + markup
                    + '</li>';
            });
            html += "</ul>";

            // If after compiling this info the search has changed, cancel
            if ( search_box.data('q') !== queryData ) {
                return ;
            }

            search.html('<!--<div id="ops_page_livesearch_title" class="headed_box green"><h2>Quick Search</h2></div>-->' + html);

            search.slideDown().css( fadeIn ) ;

            $("#ops_page_livesearch > ul > li").each( function() {
                $(this).find('span').eq(0).mouseenter( function() {
                    var parentElement = $(this).closest('li') ;
                    parentElement.parent().find( "> li" ).addClass( 'semitransparent' ) ;
                    parentElement.removeClass( 'semitransparent' ) ;
                    parentElement.find( '.ops_page_livesearch_submenu' ).eq(0).slideDown( 200 );
                });
                $(this).mouseleave( function() {
                    $(this).parent().find( "> li" ).removeClass( 'semitransparent' ) ;
                    $(this).find( '.ops_page_livesearch_submenu' ).eq(0).slideUp( 200 );
                });
            });

            /** Reset the searching animation **/
            ops_page_call_liveSearch_reset() ;
        });

    } else if ( queryData.length == 0 ) {

        // Nothing entered in the search box - show the recent searches.
        $.getJSON("/Home/Search/History", function(data) {
            if ( data.length > 0 ) {
                html = "<ul>";

                $.each(data, function (i, item) {
                    markup = '';
                    if (item.menu) {
                        markup = '<div class="ops_page_livesearch_submenu navigation panel" style="display:none;"><ul>';
                        $.each(item.menu, function (j, subitem) {
                            markup += '<li class="animated fast no-leadin"><a href="' + subitem.url + '"><img src="' + subitem.icon + '">' + subitem.name + '</a></li>';
                        });
                        markup += '</ul></div>';
                    }

                    html +=
                        '<li' + (item.menu ? ' class="animated fast no-leadin ops_page_livesearch_submenu"' : '') + '>'
                        + ( markup.length > 0 ? '<span></span>' : '' )
                        + '<a href="' + item.url + '">'
                        + '<img src="' + item.icon + '" alt="Icon"/>'
                        + item.name
                        + '</a>'
                        + markup
                        + '</li>';
                });

                html += "</ul>";

                // If after compiling this info the search has changed, cancel
                if ( search_box.data('q').length > 0 ) {
                    return ;
                }

                search.html('<div id="ops_page_livesearch_title" class="headed_box "><h2>Recently Viewed Students</h2></div>' + html);

                $("#ops_page_livesearch").slideDown().css(fadeIn);

                $("#ops_page_livesearch > ul > li").each(function () {
                    $(this).find('span').eq(0).mouseenter(function () {
                        var parentElement = $(this).closest('li');
                        parentElement.parent().find("> li").addClass('semitransparent');
                        parentElement.removeClass('semitransparent');
                        parentElement.find('.ops_page_livesearch_submenu').eq(0).slideDown(200);
                    });
                    $(this).mouseleave(function () {
                        $(this).parent().find("> li").removeClass('semitransparent');
                        $(this).find('.ops_page_livesearch_submenu').eq(0).slideUp(200);
                    });
                });
            }

            /** Reset the searching animation **/
            ops_page_call_liveSearch_reset() ;
        });

    } else {

        $("#ops_page_livesearch").slideUp().css( fadeOut ).html( "" ) ;

        /** Reset the searching animation **/
        ops_page_call_liveSearch_reset() ;
    }
}