<%  @calendar_select_interval = 2   %>
<script>
function oper_activity_load_data(){
	oper_activity_graph_datasource.length=0	
	show_loading(1)
	for (i=0;i<24;i++){
		var elements={}
			elements['hour']=i
			elements['green']=0
			elements['red']=0
			elements['yellow']=0
			elements['history']=0
			elements['tag']=i
		oper_activity_graph_datasource.push(elements)
	}
	$.getJSON('get_activity_hour' ,{start_time: calendar_to_date.date_format(), end_time: calendar_to_date.date_format(), foid: oper_activity_selected_foid}, function(data) {
		for (i=0;i<data[0].count.length;i++){
			oper_activity_graph_datasource[data[0].count[i].hour].green=data[0].count[i].green
			oper_activity_graph_datasource[data[0].count[i].hour].yellow=data[0].count[i].yellow
			oper_activity_graph_datasource[data[0].count[i].hour].red=data[0].count[i].red
		}
		for (i=0;i<data[0].history.length;i++){
			oper_activity_graph_datasource[data[0].history[i].hour].history=data[0].history[i].count
		}
		console.log(oper_activity_graph_datasource[0].hour)
		var chart = $("#oper_active_main_graph").dxChart('instance');
		var renderOptions = {force: true};
		chart.option({dataSource: oper_activity_graph_datasource });
		chart.render(renderOptions);
		show_loading(0)
	}).fail(function(error) {
		show_loading(0)
		error_show(error)
 })
}

function oper_activity_load_top_list(hour){
	$('.oper_active_row').remove();
	$.getJSON('get_activity_top' ,{hour:hour, start_time: calendar_to_date.date_format(), end_time: calendar_to_date.date_format()}, function(data) {
		for (i=0;i<data.length;i++){
			if (i % 2){color ='<%= $white %>'}else{color='<%= $l_gray %>'}
			$('<tr class="oper_active_row" style="background:'+color+'">'+
				'<td style="cursor:pointer" onclick="oper_activity_select_one_oper('+data[i].operation_id+','+"'"+data[i].name+"'"+')">'+data[i].name+'</td>'+
				'<td style="width:150px">'+data[i].count+'</td>'+
			'</tr>').appendTo("#oper_active_top_table")
		}
		
		document.getElementById('oper_activity_table').style.left="0%"
		document.getElementById('oper_active_main_graph_container').style.left="calc(30% - 2px)"
	}).fail(function(error) {
		show_loading(0)
		error_show(error)
 })
}
oper_activity_graph_datasource=[]
function oper_activity_build_graph(){
	$("#oper_active_main_graph").dxChart({ 
			argumentAxis: {
				minValueMargin: 0,
				maxValueMargin:0,
				//argumentType: 'datetime',
				//label: {format: 'HH:mm' },
				tickInterval: 1,
				grid:{visible: true}
			},
			series:[
				{axis: 'count', name: '<%= t('.oper_in_norm') %>', valueField: 'green', type: 'stackedBar',color: '<%= $green %>' },
				{axis: 'count', name: '<%= t('.oper_up_norm') %>', valueField: 'yellow', type: 'stackedBar',color: '<%= $yellow %>' },
				{axis: 'count', name: '<%= t('.oper_up_kpi') %>', valueField: 'red', type: 'stackedBar',color: '<%= $red %>' },
				{axis: 'count', name: '<%= t('.count_per_hour_short') %>', valueField: 'history', type: 'spline',color: '<%= $blue %>' }
			],
			pointClick: function (info) {
				oper_activity_load_top_list(info.tag)
			},
			valueAxis: [
				{title:{text: '<%= t('.count_per_day') %>' , font: { size: 12 }}, name: 'valueAxis'}
			],
			tooltip: {
					enabled: true
				},
			title: { text:'<%= t('.count_per_hour') %>',font: {color: '<%= $d_blue %>',size:16}},
			legend: {visible:true,horizontalAlignment: 'center',verticalAlignment: 'top',itemTextPosition: 'right'},
			dataSource: oper_activity_graph_datasource,
			commonSeriesSettings: {line: {point: {size: 1}},spline: {point: {size: 1}},argumentField:'hour'}
		});
}

window.onload = function(){
	console.log(<%= params[:foid] %> )
	<% if params[:operation_id].to_f > 0
			#opername=Operation.find(params[:operation_id]).name
	%>
		oper_activity_show_hide_oper(0)
		oper_select_sort_field(<%= params[:operation_id].to_f %>)
		oper_select_search(<%= params[:operation_id].to_f %>)
		//oper_activity_selected_foid=<%= params[:operation_id] %>
	<% end %>
	oper_activity_build_graph()
	oper_activity_load_data()
	
}
function calendar_update(){
	if (calendar_from_date != calendar_to_date){
		get_to_page_with_parametr('/operations/map/period', 'operation_id='+oper_activity_selected_foid)
	}else{
		document.getElementById('oper_activity_table').style.left="-30%"
		document.getElementById('oper_active_main_graph_container').style.left="calc(15% - 1px)"
		oper_activity_load_data()
	}
	
	//oper_activity_selected_foid=0
	//oper_activity_show_hide_oper(1)
	//document.getElementById("oper_select_field").value=''
	
}
oper_activity_selected_foid=0
function oper_select_search(foid){
	if (foid>0){
		oper_activity_selected_foid=foid
		oper_activity_load_data()
	}else{
		oper_activity_show_hide_oper(1)
	}
}
function oper_activity_show_hide_oper(type){
	if(type == 1){
		document.getElementById("oper_activity_oper_hider").style.width="360px"
		
		oper_activity_selected_foid=0
		oper_activity_load_data()
		
	}else{
		document.getElementById("oper_activity_oper_hider").style.width="0px"
	}
}
function oper_activity_select_one_oper(foid,name){
	oper_activity_show_hide_oper(0)
	if (name.length > 20){
		opername=name.substring(0,20)+'...'
	}else{
		opername=name
	}
	document.getElementById("oper_select_field").value=opername
	oper_activity_selected_foid=foid
	oper_activity_load_data()
}
function oper_action_after_clean_select(){
	oper_activity_show_hide_oper(1)
}
$(document).ready(
	function() { 
		$("#oper_act_table_body_container").niceScroll(scroll_settings);
	}
);
</script>

<div id="oper_act_table_container" ></div>
<div id="oper_activity_table">
	<div class="text_b" id="oper_act_table_head_text"><%= t('.top_30_oper') %></div>
	<table class="table_header" style="top:30px;position:absolute">
		<tr>
			<td><%= t('.most_active_opers') %></td>
			<td style="width:165px" ><%= t(:count) %></td>
		</tr>
	</table>
	<div id="oper_act_table_divide" ></div>
	<div id="oper_act_table_body_container">
		<table id="oper_active_top_table" class="table_body" style="width:calc(100% - 15px)"></table>
	</div>
</div>
<div id="oper_active_main_graph_container" >
	<div id="oper_act_graph_params_container" >
		<div onclick="oper_select_clear_input();oper_activity_show_hide_oper(1)" class="button" style="top:10px;left:10px"><%= t('.all_opers') %></div>
		<div onclick="oper_activity_show_hide_oper(0)" class="button" style="top:10px;left:220px"><%= t('.one_oper') %></div>
		<div id="oper_act_graph_search_container">
			<%= 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_activity_oper_hider"></div>
		
	</div>
	<div id="oper_active_main_graph"></div>
</div>
