<%  @calendar_view_disable=1    %>

<div id="oper_pred_filter_container" >
	<div class="text_b" id="oper_pred_filter_header">
		<div id="oper_pred_filter_header_text_block"  align="center">
			<%= image_tag( "prediction.png", height: "25", width:"25",  style:"float:left") %>
			<b id="oper_pred_filter_header_text"  align="center"><%= t('.build_prediction')%></b>
		</div>
	</div>
	<div class="oper_pred_search_fields" style="top:60px;z-index:10">
			<%= 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 class="oper_pred_search_fields" style="top:120px">
		<%= 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 onclick="oper_prediction_update()" class="button" style="top:190px;left:100px;width:150px;"><%= t(:update)%></div>
	
	
</div>

<% 
			graphs=[]
				graphs.push({:name => "abs", :color => "", :fullname => t('.full_prediction')})
				graphs.push({:name => "count", :color => $blue, :fullname => t('.count_prediction')})
				graphs.push({:name => "all", :color => $red, :fullname => t('.full_time_prediction')})
				graphs.push({:name => "user", :color => $green, :fullname => t('.user_time_prediction')})
				graphs.push({:name => "sys", :color => $yellow, :fullname => t('.sys_time_prediction')})
%>
<div id="oper_pred_background"></div>
<div id="oper_pred_block_container">
	
	<% graphs.each do |item| %>
		<div id="oper_pred_graph_container_<%= item[:name] %>" class="oper_pred_outer_blocks" style="width:100%;height:300px;position:relative;transition:0.5s">
			<div class="oper_pred_inner_blocks">
				<div class="text_header_red_line" style="width:700px;height:30px;top:0px;left:10px;"><%= item[:fullname] %></div>
				<img onclick="oper_prediction_hide_container('<%= item[:name] %>')" id="oper_pred_graph_image_hide_<%= item[:name] %>" height="20" width="20" style="position:absolute;right:10px;top:5px;cursor:pointer" src="/assets/hide.png" alt="">
				<img onclick="oper_prediction_show_container('<%= item[:name] %>')" id="oper_pred_graph_image_show_<%= item[:name] %>" height="20" width="20" style="position:absolute;right:10px;top:5px;cursor:pointer;display:none" src="/assets/show.png" alt="">
				<div id="oper_prediction_graph_<%= item[:name] %>" class="oper_pred_block_graphs"></div>
			</div>
		</div>
	<% end %>
</div>

<script>
oper_pred_selected_foid=0
function oper_select_search(foid){
	if (foid>0){
		oper_pred_selected_foid=foid
	}
}
var oper_pred_selected_loginid=0
function login_select_search(foid){
	if (foid>0){
		oper_pred_selected_loginid=foid
	}
}
var oper4_data_for_graph_count = []
var oper_prediction_absolute_data_graph = []
window.onload = function(){
	<% 	graphs.each do |item| 
			if item[:name] != "abs"
	%>
		
		$("#oper_prediction_graph_<%= item[:name] %>").dxChart({ 
				argumentAxis: {
					minValueMargin: 0,
					maxValueMargin:0,
					argumentType: 'datetime',
					label: {format: 'dd.MM' },
					tickInterval: {days: 1},
					grid:{visible: true}
				},
				series:[
					{axis:'user',name:'test',valueField:'val',type:'bar',color: '<%= $gray %>'},
					{axis:'user',name:'test',valueField:'val_past',type:'bar',color: '<%= item[:color] %>'}
				],
				equalBarWidth: false,
				legend: {visible:false},
				<% if item[:name] == "count" %>
					tooltip: {enabled: true,customizeText: function (e) {return e.value.toFixed(0);}},
					valueAxis: [
						{placeholderSize:80,title:{font: { size: 12 }}, name: 'user',position: 'top' }
					],
				<% else %>
					tooltip: {enabled: true,customizeText: function (e) {return second_to_hour_converter(e.value);}},
					valueAxis:[{
						placeholderSize:100,
						title:{font: { size: 12 }}, 
						name: 'user',
						position: 'top',
						label: {
							customizeText: function (e) {return second_to_hour_converter(e.value);}	
						}
					}],	
				<% end %>
				dataSource: oper4_data_for_graph_count,
				commonSeriesSettings: {argumentField:'arg'}
		});
	<% 		end 
		end
	%>
	$("#oper_prediction_graph_abs").dxChart({ 
				argumentAxis: {
					minValueMargin: 0,
					maxValueMargin:0,
					argumentType: 'datetime',
					label: {format: 'dd.MM' },
					grid:{visible: true}
				},
				series:[
					{axis:'user',name:'<%= t(:count) %>',valueField:'val_count',type:'line',color: '<%= $blue %>'},
					{axis:'user',name:'<%= t(:duration) %>',valueField:'val_all',type:'line',color: '<%= $red %>'},
					{axis:'user',name:'<%= t(:sys_time) %>',valueField:'val_sys',type:'line',color: '<%= $yellow %>'},
					{axis:'user',name:'<%= t(:user_time) %>',valueField:'val_user',type:'line',color: '<%= $green %>'}
				],
				legend: {visible:true,horizontalAlignment: 'center',verticalAlignment: 'top',itemTextPosition: 'right'},
				tooltip: {enabled: true,customizeText: function (e) {return e.value.toFixed(2);}},
	
				valueAxis: [
					{	placeholderSize:80,title:{font: { size: 12 }}, name: 'user',position: 'top', 
						constantLines: [{width:2,value: 0, color: '<%= $d_blue %>',  label: {visible:false}}],
						label: {
							customizeText: function (e) {return e.value+'%';}	
						}	
					}
				],
				dataSource: oper_prediction_absolute_data_graph,
				commonSeriesSettings: {line: {point: {size: 1}},spline: {point: {size: 1}},argumentField:'arg'}
	});
	oper_prediction_get_data()
}
var oper4_data_for_graph = []
function oper_prediction_get_data(){
	if (document.getElementById('login_select_field').value.length == 0){
		oper_pred_selected_loginid=0
	}
	if (document.getElementById('oper_select_field').value.length == 0){
		oper_pred_selected_foid=0
	}
	oper_select_field
	show_loading(1)
	oper4_data_for_graph.length=0
	end_date=new Date()
	start_date=new Date()
	start_date.setDate(end_date.getDate() - 90)
	$.getJSON('get_oper_prediction' ,{foid:oper_pred_selected_foid, loginid:oper_pred_selected_loginid, start_time: start_date.date_format(), end_time: end_date.date_format()}, function(data) {
		for (i=0;i<data.length;i++){	
			var element = {}
				element['date']=new Date(data[i].date.split('-')[0],parseInt(data[i].date.split('-')[1]-1),data[i].date.split('-')[2])
				element['count']=data[i].opercount
				element['all']=data[i].duration
				element['sys']=data[i].sys_time
				element['user']=data[i].user_time
			oper4_data_for_graph.push(element)
		}
		<% graphs.each do |item| %>
			oper_prediction_calculate_prediction('<%= item[:name] %>',"#oper_prediction_graph_<%= item[:name] %>")
		<% end %>
		oper_prediction_absolute_data_graph.length=0
		oper_prediction_calculate_absolute_graph('count')
		oper_prediction_calculate_absolute_graph('all')
		oper_prediction_calculate_absolute_graph('sys')
		oper_prediction_calculate_absolute_graph('user')
		show_loading(0)
	}).fail(function(error) {
		show_loading(0)
		error_show(error)
 })
}

function oper_prediction_calculate_absolute_graph(column){
	n=0;SUM_t=0;SUM_y=0;SUM_t_t=0;SUM_y_t=0
	for (i=0;i<oper4_data_for_graph.length;i++){
		n++;SUM_t+=i+1;SUM_y+=oper4_data_for_graph[i][column];SUM_t_t+=(i+1)*(i+1);SUM_y_t+=(i+1)*oper4_data_for_graph[i][column];	
	}
		b=(n * SUM_y_t - SUM_y * SUM_t)/(n * SUM_t_t - SUM_t * SUM_t)
		a=SUM_y/n - b * (SUM_t/n)
		end_date_abs=new Date()
		end_date_abs.setDate(end_date_abs.getDate() + 90)
		
		start_day=90
		for (d = new Date( (new Date()).getFullYear(), (new Date()).getMonth(), (new Date()).getDate()); d <= end_date_abs; d.setDate(d.getDate() + 1)){
			temp_value_act=(start_day * b + a) 
			temp_value_start=(90 * b + a)
			temp_value=(temp_value_start/temp_value_act)*100 - 100
			start_day++
			temp_date=new Date(d)
			var element = {}
				element['val_'+column]=temp_value
				element['arg']=temp_date
			oper_prediction_absolute_data_graph.push(element)
			//console.log(d+'   |     '+temp_value+ '   |  '+a+'   |   '+b+'    |   '+start_day+'   |   '+temp_value_act+'    |   '+temp_value_start)
		}
		var chart = $('#oper_prediction_graph_abs').dxChart('instance');
		var renderOptions = {force: true};
		chart.option({dataSource: oper_prediction_absolute_data_graph});
		chart.render(renderOptions);
}

var oper4_week_days_trend = []
function oper_prediction_calculate_prediction(column,graph){
	oper4_week_days_trend.length=0
	for (var k = 1; k < 8; k++) {
		n=0;SUM_t=0;SUM_y=0;SUM_t_t=0;SUM_y_t=0
		number_day=0
		for (i=0;i<oper4_data_for_graph.length;i++){
			day_of_week=oper4_data_for_graph[i].date.getDay()
			if (day_of_week == 0){day_of_week=7}
			if ( k == day_of_week){
				n++;SUM_t+=i+1;SUM_y+=oper4_data_for_graph[i][column];SUM_t_t+=(i+1)*(i+1);SUM_y_t+=(i+1)*oper4_data_for_graph[i][column];number_day++
			}
		}
		b=(n * SUM_y_t - SUM_y * SUM_t)/(n * SUM_t_t - SUM_t * SUM_t)
		a=SUM_y/n - b * (SUM_t/n)
		var element={};
			element['a']=a
			element['b']=b
			element['start']=number_day
		oper4_week_days_trend.push(element)
	}
	end_date_abs=new Date()
	end_date_abs.setDate(end_date_abs.getDate() + 90)
	oper4_data_for_graph_count.length=0
	
	for (d = new Date(); d <= end_date_abs; d.setDate(d.getDate() + 1)){
		//console.log(d)
		day_of_week=d.getDay()
		if (day_of_week == 0){day_of_week=7}
		temp_value=oper4_week_days_trend[day_of_week-1].start * oper4_week_days_trend[day_of_week-1].b + oper4_week_days_trend[day_of_week-1].a
		oper4_week_days_trend[day_of_week-1].start++
		temp_date=new Date(d)
		var element = {}
			if(temp_value < 0){temp_value=0}
			element['val']=temp_value
			element['arg']=temp_date
		oper4_data_for_graph_count.push(element)
	//	console.log(d+'        '+temp_value)
	}
	for (i=0;i<oper4_data_for_graph.length;i++){
		var element = {}
			element['val_past']=oper4_data_for_graph[i][column]
			//console.log(oper4_data_for_graph[i][column])
			element['arg']=oper4_data_for_graph[i].date
		oper4_data_for_graph_count.push(element)
	}
	var chart = $(graph).dxChart('instance');
	var renderOptions = {force: true};
	//chart.option("series[1].color", temp_color);
	chart.option({dataSource: oper4_data_for_graph_count});
	//chart.option({argumentAxis: {min:left_limit,max:right_limit,minValueMargin: 0,maxValueMargin:0,argumentType: 'datetime',label: {format: 'dd.MM' },grid:{visible: true}}});
	chart.render(renderOptions);
	
}

function update_view_sensor_operations_prediction(){
	oper_prediction_get_data()
}
function oper_prediction_update(){
	oper_prediction_get_data()
}
function  oper_prediction_hide_container(type){
	document.getElementById('oper_pred_graph_container_'+type).style.height='40px'
	document.getElementById('oper_pred_graph_image_hide_'+type).style.display='none'
	document.getElementById('oper_pred_graph_image_show_'+type).style.display=''
}
function  oper_prediction_show_container(type){
	document.getElementById('oper_pred_graph_container_'+type).style.height='300px'
	document.getElementById('oper_pred_graph_image_hide_'+type).style.display=''
	document.getElementById('oper_pred_graph_image_show_'+type).style.display='none'
}


$(document).ready(
	function() { 
		$("#oper_pred_block_container").niceScroll(scroll_settings);
	}
);
</script>