<%  @calendar_select_interval = 2    %>
<div id="login_stat_left_block_container">
	<table class="table_header" style="top:50px;position:absolute">
		<tr>
			<td align="center"><%= t(:login_s) %></td>
		</tr>
	</table>
	<div id="login_stat_left_block_names_container">
		<table id="users_compare_users_table" class="table_body" style="width:calc(100% - 15px)">
			<% 
				letter_array=Login.select("DISTINCT(upper(substring((CASE WHEN full_name IS NULL  OR full_name = '' THEN \"logins\".\"name\" ELSE full_name END),1,1))) as letter").order("upper(substring((CASE WHEN full_name IS NULL  OR full_name = '' THEN \"logins\".\"name\" ELSE full_name END),1,1)) ASC")
				letter_array.each_with_index  do |item,index|
			%>
				<tr  class="login_stat_left_block_names_row">
					<td onclick="users_compare_select_all_users_by_letter(<%= index %>)" style="cursor:pointer"  >
						<div   class="login_stat_left_block_names">
							<div class="login_stat_left_block_name_letters"><b><%= item[:letter] %></b></div>
							<div id="users_compare_letter_hider_<%= index %>" class="login_stat_left_block_name_hidden_container">
								<div class="login_stat_left_block_name_hidden_letter"><b><%= item[:letter] %></b></div>
								<div id="users_compare_letter_number_<%= index %>" class="login_stat_left_block_name_hidden_count" >1</div>
							</div>
						</div>
					</td>
					<td style="width:30px"><%= image_tag( "show.png", id:"users_compare_image_id_#{index}", class:"login_stat_left_block_name_arrow", onclick:"users_compare_hide_show_letter(#{index},this)") %></td>
				</tr>
				<tr id="users_compare_letter_container_<%= index %>" class="users_compare_letters_class" style="display:none" >

					<td colspan="2">
						<table class="table_body" style="position:relative">
							<% 
								names_array=Login.where("upper(substring((CASE WHEN full_name IS NULL  OR full_name = '' THEN \"logins\".\"name\" ELSE full_name END),1,1)) = ?", item[:letter]).select(:id).login_name('name')
								count_color=0
								names_array.each  do |name|
									if count_color.even?
										color=$l_gray
									else
										color=$white
									end
							%>
									<tr style="background:<%= color %>;cursor:pointer"><td onclick="users_compare_select_login(<%= name[:id] %>,<%= index %>)" class="users_compare_logins_class" id="users_compare_login_name_<%= name[:id] %>" align="right"><%= name[:name] %></td></tr>
							<% 
									count_color=count_color+1
								end 
							%>
						</table>
					</td>
				</tr>
			<% end %>
		</table>
	</div>
	<div class="button" id="login_stat_select_all" onclick="users_compare_select_deselect_all(1)"><%= t(:select_all)%></div>
	<div class="button" id="login_stat_deselect_all" onclick="users_compare_select_deselect_all(2)"><%= t(:deselect_all)%></div>
	<div id="users_compare_office_search">
				<%= render partial: "shared/search_list", locals: {
					select_id:'office',
					select_name:t(:office_search),
					search_command:'office_sort',
					drop_direction:'down',
					delete_function:0
				} %>
	</div>
	<div id="login_stat_left_block_divider"></div>
</div>

<div class="button" onclick="users_compare_get_data_for_graph()" style="top:10px;left:345px;width:150px;"><%= t(:update)%></div>


<div id="users_compare_container_for_graph">
		<div id="users_compare_container_for_value_axis"></div>
		<div id="users_compare_container_for_arg_axis"></div>
		<div id="users_compare_container_for_main_graph"></div>
		<div id="users_compare_container_for_arg_selector_container">
			<select onchange="users_compare_update_graph()" dir="rtl" id="users_compare_arg_selector" size="1" >
																				<option value="duration"><%= t(:full_time)%></option>
																				<option value="count" ><%= t(:count)%></option>
																				<option value="user_time"><%= t(:user_time)%></option>
																				<option value="sys_time"><%= t(:sys_time)%></option>
			</select>
			<canvas id="users_compare_arrow_for_argument" width="170" height="20" ></canvas>
			
		</div>
		
		<div id="users_compare_container_for_val_selector_container">
			<select onchange="users_compare_update_graph()" dir="rtl" id="users_compare_val_selector" size="1"  >
																				<option value="duration"><%= t(:full_time)%></option>
																				<option value="count" ><%= t(:count)%></option>
																				<option value="user_time"><%= t(:user_time)%></option>
																				<option value="sys_time"><%= t(:sys_time)%></option>
			</select>
			<canvas id="users_compare_arrow_for_value" width="80" height="20" ></canvas>
			
		</div>
</div>

<div id="users_compare_table_container">
	<%
		#	gt - Глобальная таблица
			@container=""
			@gt_structure=[]
			@gt_structure.push({:onclick => "", :row_name => t(:login), :value => "'+data.data[i].login_name+'", :width => "", :filter => 'login_name' })
			@gt_structure.push({:onclick => "", :row_name => t(:count), :value => "'+data.data[i].count+'", :width => "width:120px", :filter => 'count' })
			@gt_structure.push({:onclick => "", :row_name => t(:full_time), :value => "'+second_to_hour_converter(data.data[i].duration)+'", :width => "width:150px", :filter => 'duration' })
			@gt_structure.push({:onclick => "", :row_name => t(:user_time), :value => "'+second_to_hour_converter(data.data[i].user_time)+'", :width => "width:150px", :filter => 'user_time' })
			@gt_structure.push({:onclick => "", :row_name => t(:sys_time), :value => "'+second_to_hour_converter(data.data[i].sys_time)+'", :width => "width:150px", :filter => 'sys_time' })
	%>
	<%= render partial: "shared/table", locals: {
		name:"user_table",
		header:@gt_structure,
		query:"get_user_compare_graph",
		action_after:0,
		time:1,
		add_params:', loginid:logins_string_abs',
		offset:50,
		first_sort:'count;DESC',
		additional_field:@container
	} %>
</div>
<style>
.users_compare_reset_select{
	font-size:12px;
	transition:0.4s
}
.users_compare_reset_select:hover{
	font-size:14px
}
</style>
<script>

function users_compare_update_graph(){
	//if (logins_string_abs.length > 0){
		users_compare_build_full_graph()
		//}
}
var logins_string_abs =''
var user_list= <%= raw Login.joins(:office).login_name('login_name').select(:id,  '"offices"."name" as office_name', :office_id).to_json  %>
var user_list_letter_array= <%= raw letter_array.to_json %>
function office_select_search(foid){
		if (foid>0){
			users_compare_select_by_office(foid)
		}
}
	
function users_compare_select_login(id,letter){
	element=document.getElementById('users_compare_login_name_'+id)
	if (element.value !== 0 && element.value !== 1){
		element.value=0
	}
	
	if (element.value == 0){
		element.style.color="<%= $white %>"
		element.style.background="<%= $blue %>"
		element.value=1
	}else{
		element.style.color=""
		element.style.background=""
		element.value=0
	}
	users_compare_calc_count_for_letter(letter)
}
function users_compare_hide_show_letter(letter,e){
	element=document.getElementById('users_compare_letter_container_'+letter)
	if (element.value !== 0 && element.value !== 1){
		element.value=0
	}
	
	if (element.value == 0){
		element.style.display=""
		e.src='/assets/hide.png'
		element.value=1
	}else{
		element.style.display="none"
		e.src='/assets/show.png'
		element.value=0
	}
}
var letters_all_select = []
function users_compare_select_all_users_by_letter(letter){
	if (letters_all_select[letter] == 1){
		users_compare_remove_all_users_by_letter(letter)
		letters_all_select[letter]=0
		return false
	}
	for (i=0;i<user_list.length;i++){
		if (user_list[i].login_name.substring(0,1).toUpperCase() == user_list_letter_array[letter].letter){
			if (document.getElementById('users_compare_login_name_'+user_list[i].id).value !== 1){
				users_compare_select_login(user_list[i].id,letter)
			}
		}
	}
	letters_all_select[letter]=1
}
function users_compare_remove_all_users_by_letter(letter){
	console.log
	for (i=0;i<user_list.length;i++){
		if (user_list[i].login_name.substring(0,1).toUpperCase() == user_list_letter_array[letter].letter){
			if (document.getElementById('users_compare_login_name_'+user_list[i].id).value == 1){
				users_compare_select_login(user_list[i].id,letter)
			}
		}
	}
}

function users_compare_calc_count_for_letter(letter){
	count_element=0
	for (n=0;n<user_list.length;n++){
		if (user_list[n].login_name.substring(0,1).toUpperCase() == user_list_letter_array[letter].letter){
			if (document.getElementById('users_compare_login_name_'+user_list[n].id).value == 1){
				count_element++
			}
		}
	}
	if (count_element > 0){
		document.getElementById('users_compare_letter_hider_'+letter).style.width='120px'
		document.getElementById('users_compare_letter_number_'+letter).innerHTML=count_element
	}else{
		document.getElementById('users_compare_letter_hider_'+letter).style.width='0px'
		document.getElementById('users_compare_letter_number_'+letter).innerHTML=''
	}
}
function users_compare_select_deselect_all(type){
	for (i=0;i<user_list.length;i++){
		if (type == 1){
			if (document.getElementById('users_compare_login_name_'+user_list[i].id).value !== 1){
				for (n=0;n<user_list_letter_array.length;n++){
					if (user_list_letter_array[n].letter.toUpperCase() == user_list[i].login_name.substring(0,1).toUpperCase()){
						users_compare_select_login(user_list[i].id,n)
					}
				}
			}
		}else{
			if (document.getElementById('users_compare_login_name_'+user_list[i].id).value == 1){
				for (n=0;n<user_list_letter_array.length;n++){
					if (user_list_letter_array[n].letter.toUpperCase() == user_list[i].login_name.substring(0,1).toUpperCase()){
						users_compare_select_login(user_list[i].id,n)
					}
				}
			}
		}
	}
}
function users_compare_select_by_office(id){
	for (i=0;i<user_list.length;i++){
		if (user_list[i].office_id == id){
			if (document.getElementById('users_compare_login_name_'+user_list[i].id).value !== 1){
				for (n=0;n<user_list_letter_array.length;n++){
					if (user_list_letter_array[n].letter.toUpperCase() == user_list[i].login_name.substring(0,1).toUpperCase()){
						users_compare_select_login(user_list[i].id,n)
					}
				}
			}
		}
	}
}
users_compare_graph_data=[]
function users_compare_get_data_for_graph(){
	users_compare_graph_data.length
	show_loading(1)
	logins_string=''
	for (i=0;i<user_list.length;i++){
			if (document.getElementById('users_compare_login_name_'+user_list[i].id).value == 1){
				logins_string+=','+user_list[i].id+','
			}
	}
	$.getJSON('get_user_compare_graph' ,{page:1, offset:50000, order:'count;desc', loginid:logins_string, start_time: calendar_from_date.date_format(), end_time: calendar_to_date.date_format()}, function(data) {
		users_compare_graph_data=data.data
		users_compare_build_full_graph()
		show_loading(0)
	}).fail(function(error) {
		show_loading(0)
		error_show(error)
 })
	
} 

//////////////////////////////////////////////////////////////////////////////////////////////////

function users_compare_draw_arrow(){
	var canvas = document.getElementById('users_compare_arrow_for_argument');
			if (canvas.getContext){
				var ctx = canvas.getContext('2d');
				ctx.lineWidth = 2;
				ctx.lineTo(10,12);
				ctx.lineTo(170,12)
				ctx.lineTo(155,8)
				ctx.moveTo(170,12)
				ctx.lineTo(155,16)
				ctx.strokeStyle="<%= $gray %>";
				ctx.stroke();
				ctx.imageSmoothingEnabled = true
			}
	var canvas = document.getElementById('users_compare_arrow_for_value');
			if (canvas.getContext){
				var ctx = canvas.getContext('2d');
				ctx.lineWidth = 2;
				ctx.lineTo(10,12);
				ctx.lineTo(70,12)
				ctx.lineTo(55,8)
				ctx.moveTo(70,12)
				ctx.lineTo(55,16)
				ctx.strokeStyle="<%= $gray %>";
				ctx.stroke();
				ctx.imageSmoothingEnabled = true
			}
}

window.onload = function (){
		users_compare_build_arg_axis('count')
		users_compare_build_value_axis('count')
		users_compare_draw_arrow()
}

function SSG_find_max_min_value(array,field){
	max=0
	for (i=0;i<array.length;i++){
		if (array[i][field]>max){
			max=array[i][field]
		}
	}
	return max
}
function users_compare_build_arg_axis(field){
	max=SSG_find_max_min_value(users_compare_graph_data,field)
	for(i=0;i<9;i++){
		if (field == 'count'){data=((max/8)*i).toFixed(0)}else{data=second_to_hour_converter(((max/8)*i).toFixed(0))}
		$('<div style="width:100px;height:30px;line-height:30px;left:calc('+(12.5*i)+'% - 50px);bottom:0px;position:absolute;font-size:12px;color:<%= $d_blue %>" align="center">'+data+'</div>').appendTo($('#users_compare_container_for_arg_axis'));
		$('<div style="width:1px;height:8px;left:calc('+(12.5*i)+'% - 1px);top:0px;position:absolute;background:<%= $gray %>" ></div>').appendTo($('#users_compare_container_for_arg_axis'));
	}

}

function users_compare_build_value_axis(field){
	max=SSG_find_max_min_value(users_compare_graph_data,field)
	console.log(field)
	for(i=1;i<6;i++){
		if (field == 'count'){data=((max/5)*i).toFixed(0)}else{data=second_to_hour_converter(((max/5)*i).toFixed(0))}
		
		$('<div style="width:100px;height:30px;line-height:30px;left:10px;bottom:calc('+(20*i)+'% - 15px);position:absolute;font-size:12px;color:<%= $d_blue %>" align="right">'+data+'</div>').appendTo($('#users_compare_container_for_value_axis'));
		$('<div style="width:100%;height:1px;left:0px;bottom:calc('+(20*i)+'% - 1px);position:absolute;background:<%= $gray %>;opacity:0.5" ></div>').appendTo($('#users_compare_container_for_main_graph'));
	}

}
function calendar_update(){
	users_compare_get_data_for_graph()
}
var users_compare_data_for_graph=[]
function users_compare_prepare_array(){
	users_compare_data_for_graph.length=0
	for (i=0;i<5;i++){
		var element={}
		for (n=0;n<16;n++){
			element[n]=0
			element['users'+n]=''
			element['all'+n]=''
			element['sys'+n]=''
			element['user'+n]=''
			element['count'+n]=''
		}
		users_compare_data_for_graph.push(element)
	}
	console.log(users_compare_data_for_graph.length+' - длина')
}

function users_compare_build_graph_by_data(field_arg,field_val){
	users_compare_main_graph_array=users_compare_graph_data 
	max_arg=SSG_find_max_min_value(users_compare_main_graph_array,field_arg)
	//console.log(max_arg+' - proverks')
	max_val=SSG_find_max_min_value(users_compare_main_graph_array,field_val)
	for (i=0;i<users_compare_main_graph_array.length;i++){
		arg=Math.floor(users_compare_main_graph_array[i][field_arg]/(max_arg/16))
		if (arg == 16)(arg=15)
		val=Math.floor(users_compare_main_graph_array[i][field_val]/(max_val/5))
		if (val == 5)(val=4)
		//console.log('arg - '+arg+'   val - '+val)
		users_compare_data_for_graph[val][arg]+=1
		users_compare_data_for_graph[val]['users'+arg]+=users_compare_get_login_name(users_compare_main_graph_array[i].login_id)+';'
		users_compare_data_for_graph[val]['id'+arg]+=','+users_compare_main_graph_array[i].login_id+','
	}
	for (i=4;i>-1;i--){
		for (n=0;n<16;n++){
			if (users_compare_data_for_graph[i][n] !== 0){
				temp_width="6.25%"
				temp_height="20%"
				bottom_pos=i
				if (n !== 15 && i !== 0){
					if (users_compare_data_for_graph[i][n]+users_compare_data_for_graph[i][n+1] > 10){
						if(users_compare_data_for_graph[i][n+1] > 0){
							users_compare_data_for_graph[i][n]+=users_compare_data_for_graph[i][n+1]
							users_compare_data_for_graph[i]['users'+n]+=users_compare_data_for_graph[i]['users'+(n+1)]
							users_compare_data_for_graph[i]['id'+n]+=users_compare_data_for_graph[i]['id'+(n+1)]
							temp_width="12.5%"
							users_compare_data_for_graph[i][n+1]=0
						}
					}
					  if (users_compare_data_for_graph[i][n]+users_compare_data_for_graph[i-1][n+1]+users_compare_data_for_graph[i-1][n] > 50){
						if(users_compare_data_for_graph[i-1][n+1] > 0 && users_compare_data_for_graph[i-1][n] > 0){
							users_compare_data_for_graph[i][n]+=users_compare_data_for_graph[i][n+1]+users_compare_data_for_graph[i-1][n+1]
							users_compare_data_for_graph[i]['users'+n]+=users_compare_data_for_graph[i-1]['users'+(n+1)]+users_compare_data_for_graph[i-1]['users'+n]
							users_compare_data_for_graph[i]['id'+n]+=users_compare_data_for_graph[i-1]['id'+(n+1)]+users_compare_data_for_graph[i-1]['id'+n]
							temp_width="12.5%"
							temp_height="40%"
							users_compare_data_for_graph[i-1][n+1]=0
							users_compare_data_for_graph[i-1][n]=0
							bottom_pos-=1
						}
					} 
				}
				console.log(users_compare_data_for_graph)
				$('<div onclick="users_compare_build_table('+i+','+n+')" style="cursor:pointer;color:<%= $white %>;width:calc('+temp_width+' - 10px);height:calc('+temp_height+' - 10px);left:calc('+6.25*n+'% + 5px);bottom:calc('+(20*bottom_pos)+'% + 5px);position:absolute;background:<%= $blue %>;border-radius:10px;opacity:0.8" >'+
					'<div style="width:96%;height:30px;font-size:20px;top:calc(50% - 15px);left:2%;position:absolute;line-height:30px" align="center">'+
						users_compare_data_for_graph[i][n]+
					'</div>'+
				'</div>').appendTo($('#users_compare_container_for_main_graph'));
			}
		}
	}
}
function users_compare_build_table(val,arg){
	logins_string_abs=users_compare_data_for_graph[val]['id'+arg]
	console.log(users_compare_data_for_graph[val]['id'+arg])
	gt_build_table_user_table(gt_last_sort_user_table)
}
function users_compare_get_login_name(loginid){
	for (n=0;n<user_list.length;n++){
			if (user_list[n].id == loginid){
				return user_list[n].login_name
			}
	}
}
function users_compare_build_full_graph(){
	document.getElementById('users_compare_container_for_value_axis').innerHTML=''
	document.getElementById('users_compare_container_for_arg_axis').innerHTML=''
	document.getElementById('users_compare_container_for_main_graph').innerHTML=''
	users_compare_prepare_array()
	arg=document.getElementById('users_compare_arg_selector').value
	val=document.getElementById('users_compare_val_selector').value
	users_compare_build_arg_axis(arg)
	users_compare_build_value_axis(val)
	users_compare_build_graph_by_data(arg,val)
}

$(document).ready(
	function() { 
		$("#login_stat_left_block_names_container").niceScroll(scroll_settings);
	}
);

</script>