<%
#$select_id='oper'
#$select_name='операции'	
#$search_command='SensorOperationsSort'
#$delete_function=0

#$select_id='login'
#$select_name='пользователя'	
#$search_command='SensorLoginsSort'

#$select_id='office'
#$select_name='филиал'	
#$search_command='SensorOfficesSort'
%>
<style>
.search_field{
	border:0;
	background:transparent;
	color:<%= $d_blue %>;
	outline:0;
	height:25px;
	text-align:center;
	font-size:$f_m;
	border-bottom:1px solid <%= $gray %>;
	position:absolute;
	width:calc(100% - 20px);
	left:10px;
	top:0px;
	transition:0.4s
}
</style>
<div id="<%= select_id %>_select_container"  style="width:100%;height:30px;position:absolute;left:0px;top:calc(50% - 15px)">
	<!-- <div class="text_m" style="position:absolute;left:0px;line-height:31px;width:100px;top:10px" align="right">Операция:</div> -->
	<input onclick="<%= select_id %>_select_sort_field()" onchange="if(<%= select_id %>_select_onchange == 1){<%= select_id %>_select_onchage_execute()}" class="search_field" id="<%= select_id %>_select_field" style="<%= if defined?(input_style) != nil ; input_style ; end %>" onkeyup="<%= select_id %>_select_sort_field()" placeholder="<%= t(:search_text) %> <%= select_name %>">
	<div class="text_b" id="<%= select_id %>_select_loading_symbol" style="display:none;width:calc(100% - 1px);<%= if drop_direction == 'up'; 'bottom' ;else ;'top' ; end  %>:30px;line-height:400px;;height:400px;left:0px;position:absolute;border:1px solid <%= $gray %>;background:<%= $white %>;z-index:5" align="center"><%= t(:search_loading) %>...</div>
	<div onmouseleave="document.getElementById('<%= select_id %>_select_table_list_container').style.display='none';" class="support_search_fields" id="<%= select_id %>_select_table_list_container" style="display:none;width:calc(100% - 2px);<%= if drop_direction == 'up'; 'bottom' ;else ;'top' ; end  %>:30px;height:400px;left:0px;position:absolute;border:1px solid <%= $gray %>;background:<%= $white %>">
		<div id="<%= select_id %>_select_field_container" style="width:100%;top:0px;left:0px;height:400px;position:absolute;overflow:scroll;overflow-x:hidden">
			<table id="<%= select_id %>_select_table_list" class="table_body"></table>
		</div>
	</div>
	<%= image_tag( "cross_db.png",id: "#{select_id}_select_clear_cross", height: "24", width:"24", style:"display:none;position:absolute;top:3px;right:16px;cursor:pointer", onclick:"#{select_id}_select_clear_input()") %>
</div>
<script>
<%= select_id %>_select_array=[]
<%= select_id %>_select_selected_foid=0
<%= select_id %>_select_check_load=0
<%= select_id %>_select_onchange=0
function <%= select_id %>_select_sort_field(id){
	if (id>0){
		document.getElementById('<%= select_id %>_select_field').value=''
	}
	search_elements=document.getElementsByClassName("support_search_fields")
	for (i=0;i<search_elements.length;i++){
		search_elements[i].style.display="none"
	}
	<%= select_id %>_select_selected_foid=0
	string_line='%'+document.getElementById("<%= select_id %>_select_field").value+'%'
	
	temp_size=0
	if (string_line.length>2){
		document.getElementById('<%= select_id %>_select_field').style.width='calc(100% - 60px)'
		setTimeout( function() {
			document.getElementById('<%= select_id %>_select_clear_cross').style.display=''
	    } , 600)
	}else{
		document.getElementById('<%= select_id %>_select_field').style.width='calc(100% - 20px)'
		document.getElementById('<%= select_id %>_select_clear_cross').style.display='none'
	}
	if (string_line.length>1 && <%= select_id %>_select_check_load == 0){
		
		<%= $select_id %>_select_check_load = 1
		if (string_line.length<5){
			document.getElementById("<%= select_id %>_select_table_list_container").style.display=""
			document.getElementById('<%= select_id %>_select_loading_symbol').style.display=''
		}
		$.getJSON('/common/<%= search_command %>' ,{string:string_line}, function(data) {
			<%= select_id %>_select_array=data
			$('.<%= select_id %>_select_active_row').remove();
			for (i=0;i<data.length;i++){
				if (i % 2){color ='<%= $white %>'}else{color='<%= $l_gray %>'}
				type=''
				source=''
				if ('<%= select_id %>' == 'oper'){
					type='('+data[i].type_name+')'
					source='<td style="width:40px">'+oper_system_source(data[i])+'</td>'
				}
				$('<tr class="<%= select_id %>_select_active_row" style="background:'+color+';cursor:pointer;line-height:20px">'+
					source+
					'<td onclick="<%= select_id %>_select_element('+data[i].id+')">'+data[i].name+' '+type+'</td>'+
				'</tr>').appendTo("#<%= select_id %>_select_table_list")
				temp_size++
			}
			<%= $select_id %>_select_check_load = 0
			document.getElementById('<%= select_id %>_select_loading_symbol').style.display='none'
			if (temp_size == 0) {
				document.getElementById("<%= select_id %>_select_table_list_container").style.display="none"
			}else{
				document.getElementById("<%= select_id %>_select_table_list_container").style.display=""
			}
			if (id > 0){
				<%= select_id %>_select_element(id)
			}
		}).fail(function(error) {
		show_loading(0)
		console.log(error)
		error_show(error)
  	})
	}
	
	
}
function <%= select_id %>_select_element(id){
	for (search=0;search<<%= select_id %>_select_array.length;search++){
		if (<%= select_id %>_select_array[search].id == id){
			temp_element=<%= select_id %>_select_array[search]
		}
	}
	letters=parseInt(( document.getElementById('<%= select_id %>_select_field').offsetWidth / 10 ) - 3)
	if (temp_element.name.length > letters){
		<%= select_id %>name=temp_element.name.substring(0,letters)+'...'
	}else{
		<%= select_id %>name=temp_element.name
	}
	document.getElementById("<%= select_id %>_select_field").value=<%= select_id %>name
	<%= select_id %>_select_selected_foid=temp_element.id
	document.getElementById("<%= select_id %>_select_table_list_container").style.display="none"
	$('.<%= select_id %>_select_active_row').remove();
		document.getElementById('<%= select_id %>_select_field').style.width='calc(100% - 60px)'
		setTimeout( function() {
			document.getElementById('<%= select_id %>_select_clear_cross').style.display=''
  	  	} , 300)
	<%= select_id %>_select_search(<%= select_id %>_select_selected_foid)
}
function <%= select_id %>_select_clear_input(){
		document.getElementById('<%= select_id %>_select_field').style.width='calc(100% - 20px)'
		document.getElementById('<%= select_id %>_select_clear_cross').style.display='none'
		document.getElementById('<%= select_id %>_select_field').value=''
		<%= select_id %>_select_search(0)
		<% if delete_function == 1 %>
			<%= select_id %>_action_after_clean_select()
		<% end %> 
}
$(document).ready(
	function() { 
		$("#<%= select_id %>_select_field_container").niceScroll(scroll_settings);
	}
);
</script>