<% 
	 @calendar_select_interval = 2    
%>
<div style="width:160px;height:150px;position:absolute;top:50px;right:10px">
	<div class="button" onclick="oper_map_period_change_value_graph(0)" style="width:160px;top:0px"><%= t(:count) %></div>
	<div class="button" onclick="oper_map_period_change_value_graph(1)" style="width:160px;top:40px"><%= t(:full_time) %></div>
	<div class="button" onclick="oper_map_period_change_value_graph(2)" style="width:160px;top:80px"><%= t(:user_time) %></div>
	<div class="button" onclick="oper_map_period_change_value_graph(3)" style="width:160px;top:120px"><%= t(:sys_time) %></div>
</div>
<div id="oper_map_period_graph_title" class="text_header_red_line" style="width:620px;height:30px;top:10px;right:180px;font-size:20px" align="right"><%= t('.count')%></div>
<div style="width:300px;top:5px;height:30px;left:10px;position:absolute;z-index:2" >

		<%= render partial: "shared/search_list", locals: {
			select_id:'oper',
			select_name:t(:oper_search),
			search_command:'operation_sort',
			drop_direction:'down',
			delete_function:0
		} %>
</div>

<div id="oper_map_period_graph" style="width:calc(100% - 200px);left:20px;position:absolute;height:300px;top:50px"></div>


<div style="width:100%;left:0px;position:absolute;height:calc(100% - 360px);top:360px">
	<%
		#	gt - Глобальная таблица
			@container=''
			@gt_structure=[]	
			@gt_structure.push({:onclick => "oper_map_period_select_one_day('+\"'\"+data.data[i].date+\"'\"+')", :row_name => t(:date), :value => "'+oper_map_period_date_format(data.data[i].date)+'", :width => "", :filter => 'date' })
			@gt_structure.push({:onclick => "", :row_name => t(:unique_users), :value => "'+data.data[i].unique_user+'", :width => "width:180px", :filter => 'unique_user' })
			@gt_structure.push({:onclick => "", :row_name => t(:count), :value => "'+data.data[i].opercount+'", :width => "width:180px", :filter => 'opercount' })
			@gt_structure.push({:onclick => "", :row_name => t(:avg_time), :value => "'+second_to_hour_converter(data.data[i].duration)+'", :width => "width:200px", :filter => 'duration' })
			@gt_structure.push({:onclick => "", :row_name => t(:avg_user_time), :value => "'+second_to_hour_converter(data.data[i].user_time)+'", :width => "width:200px", :filter => 'user_time' })
			@gt_structure.push({:onclick => "", :row_name => t(:avg_sys_time), :value => "'+second_to_hour_converter(data.data[i].sys_time)+'", :width => "width:200px", :filter => 'sys_time' })
			@gt_structure.push({:onclick => "oper_map_open_activity('+\"'\"+data.data[i].date+\"'\"+')", :row_name => "", :value => 
				 			"'+link_oper_activity()+'", 
				 			:width => "width:80px", :filter => 'none' })	

	%>
	<%= render partial: "shared/table", locals: {
		name:"map_period_operation",
		header:@gt_structure,
		query:"get_oper_map_period_table",
		action_after:0,
		time:1,
		add_params:',operation_id:oper_map_period_operation_id',
		offset:50,
		first_sort:'date;DESC',
		additional_field:@container
	} %>
	
	
</div>
<script>
var oper_map_foid = 0
function calendar_update(){
	if (calendar_from_date == calendar_to_date){
		get_to_page_with_parametr('/operations/map', 'operation_id='+oper_map_period_operation_id)
	}else{
		oper_map_period_get_graph_data()
	}
}
function oper_map_open_activity(day){
	calendar_select_day(new Date(day),new Date(day))
	window.open('/operations/activity?operation_id='+oper_map_period_operation_id,'_self');
}
var oper_map_period_graph_data = []
var oper_map_period_operation_id = 0
window.onload = function(){
	oper_map_period_build_graph()
	<% if params[:operation_id].to_f > 0 %>
		oper_select_sort_field(<%= params[:operation_id].to_f %>)
		oper_map_period_operation_id=<%= params[:operation_id].to_f %>
	<% else %>
		oper_map_period_get_graph_data()
	<% end %>
	
}
function oper_select_search(foid){
	if (foid>0){
		oper_map_period_operation_id=foid
		oper_map_period_get_graph_data()
	}
}


function oper_map_period_build_graph(){
	$("#oper_map_period_graph").dxChart({ 
			argumentAxis: {
				minValueMargin: 0,
				maxValueMargin:0,
				argumentType: 'datetime',
				label: {format: 'dd.MM' },
				tickInterval: {days: 1},
				grid:{visible: true}
			},
			series:[
				{axis:'user',name:'test',valueField:'count',type:'bar',color: '<%= $yellow %>'}
			],
			pointClick: function (info) {
				day=info.tag
				oper_map_period_select_one_day(day)
			},
			equalBarWidth: false,
			legend: {visible:false},
			tooltip: {enabled: true,customizeText: function (e) {return e.value;}},
			valueAxis:[{
				placeholderSize:100,
				title:{text:'<%= t(:count)%>', font: { size: 12 }}, 
				name: 'user',
				position: 'top',
				label: {
					customizeText: function (e) {return e.value;}	
				}
			}],	
			dataSource: oper_map_period_graph_data,
			commonSeriesSettings: {argumentField:'date'}
	});
}

function oper_map_period_get_graph_data(){
	show_loading(1)
	oper_map_period_graph_data.length=0
	$.getJSON('get_oper_map_period_graph', {start_time:calendar_from_date.date_format(), end_time:calendar_to_date.date_format(), operation_id:oper_map_period_operation_id}, function(data){
		gt_build_table_map_period_operation(gt_last_sort_map_period_operation)
		for(i=0;i<data.length;i++){
			element={}
				element['date']=new Date(data[i].date.split('-')[0],(data[i].date.split('-')[1] - 1),data[i].date.split('-')[2],0,0,0)
				element['time']=data[i].duration
				element['user_time']=data[i].user_time
				element['sys_time']=data[i].sys_time
				element['count']=data[i].opercount
				element['tag']=data[i].date
			oper_map_period_graph_data.push(element)
		}
		oper_map_period_update_graph()
		show_loading(0)
	}).fail(function(error) {
		show_loading(0)
		error_show(error)
 }) 
}

function oper_map_period_update_graph(){
	var chart = $("#oper_map_period_graph").dxChart('instance');
	var renderOptions = {force: true};
	chart.option({dataSource: oper_map_period_graph_data})
	chart.render(renderOptions);
}

function oper_map_period_change_value_graph(id){
	fields=[
		{'title':'<%= t('.count')%>', 'field':'count', 'type':'count'},
		{'title':'<%= t('.duration')%>', 'field':'time', 'type':'time'},
		{'title':'<%= t('.user_time')%>', 'field':'user_time', 'type':'time'},
		{'title':'<%= t('.sys_time')%>', 'field':'sys_time', 'type':'time'}
	]
	var chart = $("#oper_map_period_graph").dxChart('instance');
	chart.option('series[0].valueField', fields[id].field)
	chart.option('valueAxis[0].title.text', (fields[id].type == 'count' ? '<%= t(:count)%>' : '<%= t(:duration)%>'))
	if (fields[id].type == 'count'){
		chart.option('tooltip.customizeText', function (e) {return e.value;})
		chart.option('valueAxis[0].label.customizeText', function (e) {return e.value;})
		chart.option('valueAxis[0].placeholderSize', 100)
	}else{
		chart.option('tooltip.customizeText', function (e) {return second_to_hour_converter(e.value);})
		chart.option('valueAxis[0].label.customizeText', function (e) {return second_to_hour_converter(e.value);})
		chart.option('valueAxis[0].placeholderSize', 120)
	}
	document.getElementById('oper_map_period_graph_title').innerHTML=fields[id].title
	oper_map_period_update_graph()
}
function oper_map_period_date_format(date){
	return parseInt(date.split('-')[2])+' '+calendar_month_names[parseInt(date.split('-')[1]) - 1].form+' '+parseInt(date.split('-')[0])
}
function oper_map_period_select_one_day(day){
	calendar_select_day(new Date(day),new Date(day))
	calendar_update()
}
</script>