<%  @calendar_select_interval = 2   %>
<style>
#oper_map_full_container{
	width:100%;
	height:30px;
	color:<%= $d_blue %>;
	line-height:30px;
	font-size:12px;
	position:relative;
}	

.oper_map_summ_image{
	position:relative;
	top:5px;
	width:20px;
	height:20px;
}

.oper_map_full_block{
	float:left;
	padding-left:10px;
}


</style>
<script>
window.onload = function(){
	console.log(<%= params[:login_id] %> )
	<% if params[:login_id].to_f > 0 %>
		user_map_foid=<%= params[:login_id] %>
		login_select_sort_field(<%= params[:login_id].to_f %>)
		login_select_search(<%= params[:login_id].to_f %>)
	    
	<% end %>
	user_map_build_graph()
	gt_build_table_map_table(gt_last_sort_map_table)
}
var user_map_foid=0
var user_map_graph_datasource=[]
function login_select_search(foid){
	if (foid>0){
		user_map_foid=foid
		user_map_raw_data=0
		gt_build_table_map_table(gt_last_sort_map_table)
	}
}
function calendar_update(){
	if (calendar_from_date != calendar_to_date){
		get_to_page_with_parametr('map/period', 'login_id='+user_map_foid)
	}else{
		if (user_map_foid > 0){
			user_map_raw_data=0
			gt_build_table_map_table(gt_last_sort_map_table)
		}
	}
}

var map_sys_user_time_data=[]
function user_map_build_graph(){
	$('#user_map_sys_time_pie').dxChart({
			dataSource: map_sys_user_time_data,
			animation: {
				duration: 2000
			},
			commonSeriesSettings: {
			        argumentField: "arg",
			        type: "fullStackedBar"
			},
			equalBarWidth: {width: 15},
			rotated: true,
			series: [
			        { valueField: "user", name: "<%= t(:user_time)%>", stack: "val",color: '<%= $blue %>'  },
				    { valueField: "sys", name: "<%= t(:sys_time)%>", stack: "val",color: '<%= $yellow %>'  }
			],
			legend: {
			        verticalAlignment: "bottom",
			        horizontalAlignment: "center"
		    },
		});
		$("#user_map_graph_body").dxChart({ 
			argumentAxis: {
				minValueMargin: 0,
				maxValueMargin:0,
				argumentType: 'datetime',
				label: {format: 'HH:mm' },
				grid:{visible: true}
			},
			equalBarWidth: {width: 5},
			//scrollBar: {
			//	visible: true
			//},
			pointSelectionMode: "multiple",
			pointClick: function (info) {
				//console.log(info.tag+' - За что и почему ?!')
				id=info.tag.split(';')[0]
				//user3_show_info_row(id)
				for (n=0;n<user_map_graph_data.length;n++){
					if (id == user_map_graph_data[n].id){
						gt_last_page_map_table=Math.ceil((n+1)/50)
						user_map_select_user=0
						user_map_last_selected_id=id
						gt_build_table_map_table(gt_last_sort_map_table)
					}
				}
				//id_row="#main_map_user_build_row_select_"+clickedPoint.tag.split(';')[3]
				//document.getElementById('main_user_map_table_useration_hider').scrollTop=$(id_row).position().top
				//row="main_map_user_build_row_select_"+clickedPoint.tag.split(';')[3]
				//document.getElementById(row).style.background='#0099CC'
				//build_detailed_info_to_table_useration(clickedPoint.tag.split(';')[5],'main_info_detailed_userations_info')
			},
			
			scrollingMode: "all",
			//useAggregation: true,			
			zoomingMode: "all",
			series:[
				
				{axis: 'valueAxis', name: '<%= t(:sys_time)%>', valueField: 'systime', type: 'stackedBar',color: '<%= $yellow %>' },
				{axis: 'valueAxis', name: '<%= t(:user_time)%>', valueField: 'usertime', type: 'stackedBar',color: '<%= $blue %>' }
			],
			valueAxis: [
				{placeholderSize:120,title:{text: '<%= t(:full_time_min) %>' , font: { size: 12 }}, name: 'valueAxis',label: {customizeText: function (e) { return second_to_hour_converter(e.value)}},}
				
				//,type: 'logarithmic' 
				//}
			],

			legend: {visible:true,horizontalAlignment: 'center',verticalAlignment: 'top',itemTextPosition: 'right'},
			dataSource: user_map_graph_datasource,
			tooltip: {enabled: true,location:'edge',customizeText: function (e) {return e.point.tag.split(';')[1];}},
			commonSeriesSettings: {
				argumentField:'user',
				tagField:'tag',
				selectionStyle: {
            		color: "<%= $d_purple %>",
            		hatching: "none"
        		}
				
			}
		});
}
</script>

<div id="map_search_container" >
		<%= render partial: "shared/search_list", locals: {
			select_id:'login',
			select_name:t(:login_search),
			search_command:'login_sort',
			drop_direction:'down',
			delete_function:0
		} %>
</div>

<div id="user_map_graph_body"  class="map_graph_body"></div>
<div class="button" onclick="oper_map_change_graph_type(1)" style="width:200px;top:5px;right:10px"><%= t(:by_time)%></div>
<div class="button" onclick="oper_map_change_graph_type(2)" style="width:200px;top:5px;left:310px"><%= t(:by_status)%></div>

<div id="map_time_compare_container">
		<div class="text_b" id="map_time_compare_text"><b><%= t(:time_compare)%></b></div>
		<div id="user_map_sys_time_pie" class="map_time_compare_graph"></div>
		<div class="map_time_compare_under_text" style="left:2%"><%= t(:user_time)%></div>
		<div class="map_time_compare_under_text" style="right:2%" align="right"><%= t(:sys_time)%></div>
	</div>
	
<div id="map_uniq_table_container">
	<table class="table_header" style="top:0px;position:absolute">
		<tr>
			<td><%= t(:unique_opers)%></td>
		</tr>
	</table>
	<div id="map_uniq_table_body_container">
		<table id="user_map_uniq_oper_table" class="table_body"></table>
	</div>
</div>
<div style="width:calc(100% - 302px);height:calc(100% - 300px);top:300px;left:300px;position:absolute;border-left:1px solid <%= $gray %>">

	<%
		#	gt - Глобальная таблица
			@container="
				<div id=\"oper_map_full_container\">
					 <div class=\"oper_map_full_block\" ><img class=\"oper_map_summ_image\" src=\"/assets/operation.png\" > - <b id=\"user_map_full_count\"></b></div>
					 <div class=\"oper_map_full_block\">#{t(:unique_opers)} - <b id=\"user_map_full_opers\"></b></div>
					 <div class=\"oper_map_full_block\">#{t(:full_time)} - <b id=\"user_map_full_time\"></b></div>
					 <div class=\"oper_map_full_block\" style=\"line-height:15px;width:200px\">#{t(:user_time)} - <b id=\"user_map_full_user_time\"></b><br>#{t(:sys_time)} - <b id=\"user_map_full_sys_time\" ></b></div>
					 
				</div>
			"
			@gt_structure=[]		
						@gt_structure.push({:onclick => "", :row_name => t(:status), :value => "'+build_image_kpi(data.data[i].status,data.data[i].kpi)+'", :width => "width:70px", :filter => 'status' })
						@gt_structure.push({:onclick => "", :row_name => t(:start), :value => "'+data.data[i].start_time.split('T')[1].split('.')[0]+'", :width => "width:80px", :filter => 'start_time' })
						@gt_structure.push({:onclick => "", :row_name => t(:end), :value => "'+data.data[i].end_time.split('T')[1].split('.')[0]+'", :width => "width:80px", :filter => 'end_time' })
						@gt_structure.push({:onclick => "", :row_name => '', :value => "'+oper_system_source(data.data[i])+'", :width => "width:40px", :filter => 'short_name' })
						@gt_structure.push({:onclick => "", :row_name => t(:opers), :value => "'+login_map_draw_node_module(data.data[i].id,data.data[i].oper_name,data.data[i].type_name,data.data[i].module,data.data[i].node)+'", :width => "", :filter => 'oper_name' })
						@gt_structure.push({:onclick => "", :row_name => t(:full_time), :value => "'+compare_elements(data.data[i].duration,data.data[i].time_avg)+'", :width => "width:140px", :filter => 'duration' })
						@gt_structure.push({:onclick => "", :row_name => t(:user_time), :value => "'+compare_elements(data.data[i].user_time,data.data[i].user_time_avg)+'", :width => "width:140px", :filter => 'user_time' })
						@gt_structure.push({:onclick => "", :row_name => t(:sys_time), :value => "'+compare_elements(data.data[i].sys_time,data.data[i].sys_time_avg)+'", :width => "width:140px", :filter => 'sys_time' })
						@gt_structure.push({:onclick => "", :row_name => "", :value => "'+link_oper_map(data.data[i].operation_id)+'", :width => "width:80px", :filter => 'none' })

	%>
	<%= render partial: "shared/table", locals: {
		name:"map_table",
		header:@gt_structure,
		query:"get_user_map",
		action_after:1,
		time:1,
		add_params:',Login_ID:user_map_foid',
		offset:50,
		first_sort:'end_time;ASC',
		additional_field:@container,
		row_hover:"login_map_show_single_oper('+data.data[i].id+')",
		auto_load: params[:login_id].to_f > 0 ? false : true
	} %>
</div>

<script>

var user_map_raw_data=0
var user_map_select_user=1
var user_map_last_selected_id=0
function gt_action_after_build_map_table(data){
	user_map_graph_data=data['graph']
	if (user_map_raw_data == 0){
		//user_map_raw_data=data
		//console.log(data[0]['data'].length)
		user_map_build_graph_data(data)
		user_map_raw_data=1
	}
	if (user_map_select_user == 0){

		document.getElementById('gt_container_body_table_map_table').scrollTop=0
		console.log($('#gt_row_id_map_table_'+user_map_last_selected_id))
		document.getElementById('gt_container_body_table_map_table').scrollTop=($('#gt_row_id_map_table_'+user_map_last_selected_id).position().top)
		document.getElementById('gt_row_id_map_table_'+user_map_last_selected_id).style.background='<%= $l_blue %>'
		//document.getElementById('gt_row_id_map_table_'+user_map_last_selected_id).style.color='<%= $white %>'
		user_map_select_user=1
	}
}
var user_map_graph_data=[]
function user_map_build_graph_data(data){
	//temp_data=data[0].data
	user_map_graph_datasource.length=0
	$('.login_map_uniq_rows').remove()
	//user_map_graph_data=data[0]['graph']
	document.getElementById('user_map_full_count').innerHTML=data['full_info'].count
	document.getElementById('user_map_full_time').innerHTML=second_to_hour_converter(data['full_info'].full)
	document.getElementById('user_map_full_user_time').innerHTML=second_to_hour_converter(data['full_info'].user)
	document.getElementById('user_map_full_sys_time').innerHTML=second_to_hour_converter(data['full_info'].sys)
	document.getElementById('user_map_full_opers').innerHTML=data['full_info'].opers
	for(i=0;i<data['full_info'].opers_list.length;i++){
		opers=data['full_info'].opers_list
		if (i % 2){color ='<%= $white %>'}else{color='<%= $l_gray %>'}
		$('<tr onmouseover="login_map_show_unique_oper('+opers[i].oper+')" class="login_map_uniq_rows" onclick="oper_perf_open_map_window('+opers[i].oper+')" style="background:'+color+';cursor:pointer">'+
				'<td style="width:40px">'+oper_system_source(opers[i])+'</td>'+
				'<td>'+opers[i].name+'</td>'+
		'</tr>').appendTo('#user_map_uniq_oper_table')
	}
	
	for(i=0;i<data['graph'].length;i++){
		var element = {}
		column=data['graph'][i]
		temp_date=new Date(parseInt(calendar_from_date.date_format().split('-')[2].split(' ')[0] ),parseInt(calendar_from_date.date_format().split('-')[1])-1,parseInt(calendar_from_date.date_format().split('-')[0]),parseInt(column.end_time.split('T')[1].split(':')[0]),parseInt(column.end_time.split('T')[1].split(':')[1]),parseInt(column.end_time.split('T')[1].split(':')[2].split('.')[0]))
		element['tag']=column.id+';'+column.oper_name+';'+(Math.ceil((i+1)/50))+';'+column.operation_id
		element['user']=temp_date
		element['systime']=column.sys_time
		element['usertime']=column.user_time
		if (column.status == 1){
			element['green']=column.duration
		}else if (column.status == 2){
			element['yellow']=column.duration
		}else{
			element['red']=column.duration
		}
		user_map_graph_datasource.push(element)
	}
	var chart = $("#user_map_graph_body").dxChart('instance');
	var renderOptions = {force: true};
	//temp_max=(user3_select_list[id].FullTimeAvg/60)*2
	//temp_norm=user3_select_list[id].FullTimeAvg/60
	chart.option({dataSource: user_map_graph_datasource})
	//chart.option({valueAxis: [{type:'undefined',placeholderSize:80,title:{text: 'Время выполнения (мин)' , font: { size: 12 }}, name: 'valueAxis',constantLines: [{width:3,value: temp_norm, color: '<?php echo $color_array['green']; ?>',  label: {text:temp_norm.toFixed(2) }}]}]});
	chart.render(renderOptions);
	if (data['systime'][0].percents > 0){sys=data['systime'][0].percents;user=1-sys}else{sys=0;;user=0}
		map_sys_user_time_data=[{'arg':'', 'user':user, 'sys':sys}]
		var chart = $('#user_map_sys_time_pie').dxChart('instance');
		var renderOptions = {force: true};
		chart.option({dataSource: map_sys_user_time_data})
		chart.render(renderOptions);
}
function user_map_compare_elements(real,norm){
				result='<div style="width:12px;height:12px;float:left;;position:relative;top:4px;border-radius:6px;background:'+(real < norm ? 'transparent' : '<%= $red %>')+'" ></div>'+
							'<div style="height:20px;line-height:20px;float:left;position:relative;left:5px">'+
										second_to_hour_converter(real)+
							'</div>'
				return result
}
function oper_perf_open_map_window(foid){
	console.log(foid)
	get_to_page_with_parametr('/operations/map','operation_id='+foid)
}


function oper_map_change_graph_type(type){
	time_series=[
		{axis: 'valueAxis', name: '<%= t(:sys_time) %>', valueField: 'systime', type: 'stackedBar',color: '<%= $yellow %>' },
		{axis: 'valueAxis', name: '<%= t(:user_time) %>', valueField: 'usertime', type: 'stackedBar',color: '<%= $blue %>' }
	]
	status_series=[
		{axis: 'valueAxis', name: '<%= t(:time_in_norm) %>', valueField: 'green', type: 'bar',color: '<%= $green %>' },
		{axis: 'valueAxis', name: '<%= t(:time_up_norm) %>', valueField: 'yellow', type: 'bar',color: '<%= $yellow %>' },
		{axis: 'valueAxis', name: '<%= t(:time_up_kpi) %>', valueField: 'red', type: 'bar',color: '<%= $red %>' }
	]
	if (type==1){
		var chart = $("#user_map_graph_body").dxChart('instance')
		var renderOptions = {force: true};
		chart.option('series',time_series)
		chart.render(renderOptions);
	}else{
		var chart = $("#user_map_graph_body").dxChart('instance')
		var renderOptions = {force: true};
		chart.option('series',status_series)
		chart.render(renderOptions);
	}
	
}


function login_map_show_unique_oper(id){
	chart = $('#user_map_graph_body').dxChart('instance');
	$.each(chart.getAllSeries(), function (i, series) {
		$.each(series.getAllPoints(), function (x, point) {
			if ( parseInt(point.tag.split(';')[3]) == id ){
				point.select()
			}else{
				point.clearSelection()
			}
		})
	});
}
function login_map_show_single_oper(id){
	chart = $('#user_map_graph_body').dxChart('instance');
	$.each(chart.getAllSeries(), function (i, series) {
		$.each(series.getAllPoints(), function (x, point) {
			if ( parseInt(point.tag.split(';')[0]) == id ){
				point.select()
			}else{
				point.clearSelection()
			}
		})
	});
}
$(document).ready(
	function() { 
		$("#map_uniq_table_body_container").niceScroll(scroll_settings);
	}
);


function login_map_draw_node_module(id,name,type,module,node){
	if (module != null && node != null){
		module_row = 	
						'<tr id="oper_map_detail_'+id+'" class="oper_map_details" class="">'+
							'<td style="color:<%= $blue %>">Показать подробно</td>'+
						'<tr>'+
						'<tr id="oper_map_module_'+id+'" class="oper_map_modules" style="display:none">'+
							'<td><b>Module:</b><br>'+module.replace(/;/g, '<br>')+'</td>'+
						'<tr>'
		node_row = 		'<tr id="oper_map_node_'+id+'" class="oper_map_nodes" style="display:none">'+
							'<td><b>Node:</b><br>'+node.replace(/;/g, '<br>')+'</td>'+
						'<tr>'
	}else{
		module_row=''
		node_row=''
	}

	row = 	'<table onclick="oper_map_show_module_node('+id+')" class="table_body" style="position:relative;font-size:12px;'+(module_row == '' ? '' : 'cursor:pointer')+'">'+
				'<tr>'+
					'<td style="font-size:14px">'+name+' ('+type+')</td>'+
				'<tr>'+
				module_row+
				node_row+
			'</table>'
	return row
	
}

function oper_map_show_module_node(id){
	nodes=document.getElementsByClassName('oper_map_nodes')
	modules=document.getElementsByClassName('oper_map_modules')
	details=document.getElementsByClassName('oper_map_details')
	for (i=0;i<modules.length;i++){
		modules[i].style.display='none'
	}
	for (i=0;i<nodes.length;i++){
		nodes[i].style.display='none'
	}
	for (i=0;i<details.length;i++){
		details[i].style.display=''
	}
	if (document.getElementById('oper_map_module_'+id) != undefined || document.getElementById('oper_map_node_'+id) != undefined){
		document.getElementById('oper_map_module_'+id).style.display=''
		document.getElementById('oper_map_node_'+id).style.display=''
		document.getElementById('oper_map_detail_'+id).style.display='none'
	}
	
}
</script>