var tempSearchVal='';
$(function(){
	/** 執行+產生欄位 **/
	if( 1 <= $('.search input#search_keyword').length ){
        $('.search input#search_keyword').attr('id', 'top_search');
        runAtDotJsTopSearch( '#', 'mattress', '#top_search');
        runAtDotJsTopSearch( '@', 'at', '#top_search');
        runAtDotJsTopSearch( '$', 'cashtag', '#top_search');
        //調整位置
        $('.search input').on('click',function(){ $('#atwho-ground-top_search .atwho-view').css('width',$('.search').width()); });
        $(window).resize(function(){ $('#atwho-ground-top_search .atwho-view').css('width',$('.search').width()); });
        //非首頁
        if( 1>$('.search.bc_search_block').length ){
            var css = document.createElement('style');
            css.type = 'text/css';
            var styles = '@media screen and ( max-width: 767px) { #atwho-ground-top_search .atwho-view { width: 100% !important; left: 0 !important; margin-left: 0px !important; } .ui-autocomplete { left: 0px !important; width: 100% !important; max-width: 100% !important; position: fixed !important; margin-left: 0px !important; } }';
        }
    }
});

function runAtDotJsTopSearch( atMark, atMarkName ){
	var tempTpl="<li value-type=\""+atMarkName+"\" value-value=\"${name}\" value-id=\"${id}\" value-dataid=\"${dataid}\" value-itemHref=\"${itemHref}\" onClick=\"location.href='${itemHref}'\">		\
					<span class='fa fa-user-md'></span>							\
					<div class=\"atStrong\">${name}</div>						\
					<div class=\"atSub\">${sub_name}</div>						\
					<div class=\"atPic\" style=\"background-image:url(${pic})\"></div>							\
				 </li>";
	if( 'cashtag'==atMarkName ){
        var tempTpl="<li value-type=\""+atMarkName+"\" value-value=\"${name}\" value-id=\"${id}\" value-dataid=\"${dataid}\" value-itemHref=\"${itemHref}\" onClick=\"location.href='${itemHref}'\">		\
					<span class='fa fa-user-md'></span>							\
					<div class=\"atStrong\">${name}</div>						\
					<div class=\"atSub\">${sub_name}</div>						\
				 </li>";
    }
	if( 'at'==atMarkName ){
		tempTpl="<li value-type=\""+atMarkName+"\" value-value=\"${name}\" value-id=\"${id}\" value-dataid=\"${dataid}\" value-itemHref=\"${itemHref}\" onClick=\"location.href='${itemHref}'\" >		\
						<span class='fa fa-user-md'></span>							\
						<div class=\"atStrong\">${name}</div>						\
						<div class=\"atSub\"><br></div>						\
						<div class=\"atPic\" style=\"background-image:url(${pic})\"></div>							\
					 </li>";
	}
	$.fn.atwho.debug = true;
	var atjs_config = {
		at: atMark,
		displayTpl: tempTpl,
		insertTpl: "${name}",
		limit: 12,								//最多顯示200選項
		highlightFirst: true,			//第一個選項會HighLight起來
		startWithSpace: true,			//要按空白鍵與關鍵字才會啟動功能
		spaceSelectsMatch: false,	//按空白鍵將選擇選項
		tabSelectsMatch: true,		//按Tab鍵將選擇選項
		suspendOnComposing: true,
		callbacks: {
			beforeInsert: function(value, $li){
				$('form#searchForm input[name=at_string]').val( $( $li ).attr('value-type') );
                $('form#searchForm input#at_string_id').val( $( $li ).attr('value-id') );
                location.href=$( $li ).attr('value-itemHref');
                
                console.log( value );
                console.log( $li );
                
				return value;
			},
			remoteFilter: function (query, callback) {
				var ll = new Array();
				$.getJSON('/ajax/topSearch.php?atString='+atMarkName+'&matchString=' + query, function (resp) {
					if (resp.code == true) {
						$.each(resp.data, function (index, element) {
							//julyinfo_20180703_topSearch
							//ll.push(element.name);
							if('mattress'==atMarkName){
								ll.push([(element.dno).toString(),element.name, element.sub_name, element.dataid, element.itemHref]);
							}else{
								ll.push([(element.dno).toString(),element.name, element.sub_name, element.dataid, element.itemHref, element.pic]);
							}
						});
 						callback(ll);
					}else{
						callback(null);
					}
				})
			},
		}
	};
	$inputor = $('.search input#top_search').atwho(atjs_config);
	$inputor.caret('pos', 47);
	$inputor.focus().atwho('run');
}