<% @calendar_select_interval = 2 %>
<div id="common_index_scroll" style="width:100%;height:100%;top:0px;left:0px;position:absolute;;overflow:scroll;overflow-x:hidden">
	<!-- <div style="width:100%;height:400px;top:0px;left:0px;position:absolute"> -->
	<% 	@blocks=[]
	    @blocks.push({:name => "block3", :ru_name => t('.top5_oper'), :color => $red})
		@blocks.push({:name => "block6", :ru_name => t('.top5_login'), :color => $blue})
		@blocks.push({:name => "block9", :ru_name => t('.top5_office'), :color => $green})
		
		@blocks.push({:name => "block1", :ru_name => t('.perfomance_per_day'), :color => $red})
		@blocks.push({:name => "block4", :ru_name => t('.time_compare'), :color => $blue})
		@blocks.push({:name => "block8", :ru_name => t('.sys_time'), :color => $green})
		
		@blocks.push({:name => "block2", :ru_name => t('.activity_per_hour'), :color => $red})
		@blocks.push({:name => "block5", :ru_name => t('.user_per_hour'), :color => $blue})
		@blocks.push({:name => "block7", :ru_name => t('.office'), :color => $green})

		
		@count_element=0
		#@blocks=@blocks.shuffle
		@display_code='111111111'
		@blocks.each do |item|  
			%>
			<div id="start_page_blocks_with_graph_<%= @count_element %>" style="width:calc(100% / 3 - 5px);height:300px;float:left;position:relative">
				<div style="width:calc(100% - 20px);top:10px;left:10px;height:285px;position:absolute;background:<%= item[:color] %>">
					<div class="text_m" style="width:80%;height:40px;position:absolute;top:5px;left:10%;line-height:40px;;z-index:5;background:<%= item[:color] %>;color:<%= $white %>;border-bottom:2px solid <%= $white %>" align="center"><b><%= item[:ru_name] %></b></div>
					<div id="start_page_blocks_graph_<%= item[:name] %>" style="width:96%;top:50px;height:215px;left:2%;position:absolute;z-index:10"></div>
					<% image_tag( "white_edit.png", height: "24", width:"24", style:"position:absolute;top:10px;right:10px;cursor:pointer", onclick:"start_page_show_selection()") %>
				</div>
				
			</div>
	<% 	
		@count_element=@count_element+1
		end %>
	<!-- </div>	-->			
</div>



<script>
	
	function start_page_select_block(id){
		if (document.getElementById("start_page_block_selector_"+id).style.background !== 'rgb(41, 128, 185)'){
			selected_oper=0
			
			for(i=0;i<status_array.length;i++){
				if(status_array[i]==1){selected_oper++}
			}
			if (selected_oper==3){
				i=0
				while (selected_oper==3){
					if (status_array[i] == 1){status_array[i]=0;selected_oper--;document.getElementById("start_page_block_selector_"+i).style.background='<%= $white %>'}
					i++
				}
			}
			status_array[id]=1
			document.getElementById("start_page_block_selector_"+id).style.background='<%= $blue %>'
		}else{
			selected_oper=0
			for(i=0;i<status_array.length;i++){
				if(status_array[i]==1){selected_oper++}
			}
			//console.log(selected_oper)
			if (selected_oper > 1){
				status_array[id]=0
				document.getElementById("start_page_block_selector_"+id).style.background='<%= $white %>'
			}
		}
	}
	function start_page_save_selection(){
		for(val=0;val<status_array.length;val++){
			if(status_array[val]==1){
				document.getElementById('start_page_blocks_with_graph_'+val).style.display=''
				if (val+1 == 7){
					var chart = $("#start_page_blocks_graph_block"+(val+1)).dxPolarChart('instance');
					var renderOptions = {force: true};
					chart.render(renderOptions);
				}else{
					var chart = $("#start_page_blocks_graph_block"+(val+1)).dxChart('instance');
					var renderOptions = {force: true};
					chart.render(renderOptions);
				}
				console.log('UPDATE!')
				
			}else{
				document.getElementById('start_page_blocks_with_graph_'+val).style.display='none'
			}
		}
		document.getElementById('start_page_select_block_container').style.top="-411px"
		loading_symbols=document.getElementsByClassName('start_page_loading_blocks')
		for(i=0;i<loading_symbols.length;i++){
			loading_symbols[i].style.display=''
		}

	}
	function start_page_show_selection(){
		document.getElementById('start_page_select_block_container').style.top="0px"
	}
	
	start_page_count_by_color=[{'arg':'<%= t(:norm) %>','value':0},{'arg':'<%= t(:yellow) %>','value':0},{'arg':'<%= t(:red) %>','value':0}]
	start_page_oper_count_by_hour=[]
	start_page_oper_top5=[]
	start_page_user_unique_by_hour=[]
	start_page_user_top5=[]
	start_page_office_top5=[]
	start_page_office_sys_degrade=[]
	start_page_office_count_per=[]
	start_page_sys_percent=[{'arg':'<%= t(:sys_time) %>','value':0},{'arg':'<%= t(:user_time) %>','value':0}]
	
	function start_page_build_graph(){
		$("#start_page_blocks_graph_block1").dxChart({
			equalBarWidth: true,
			valueAxis: {constantLines: [{value: 0,color: '<%= $white %>',width: 2}],grid: { visible: false },label: {customizeText: function () {return '';}}},
			argumentAxis: {label: {font: { color: '<%= $white %>', size:16 }}},
			series:[{valueField: 'value', type: 'bar',color: '<%= $white %>',label:{font:{size:16},format:'largeNumber', visible: true,backgroundColor:'<%= $red %>'} }],
			legend: {visible:false,horizontalAlignment: 'center',verticalAlignment: 'top',itemTextPosition: 'right'},
			dataSource: start_page_count_by_color,
			commonSeriesSettings: {line: {point: {size: 1}},spline: {point: {size: 1}},argumentField:'arg'}
		});
		$("#start_page_blocks_graph_block2").dxChart({
			valueAxis: {min:0,constantLines: [{label:{visible: false},value: 0,color: '<%= $white %>',width: 2}],label: {font: { color: '<%= $white %>', size:16},format:'largeNumber'},grid: { visible: false }},
			argumentAxis: {label: {font: { color: '<%= $white %>', size:16 }}},
			series:[{valueField: 'OperCount', type: 'spline',color: '<%= $white %>',label:{font:{size:16},format:'largeNumber', visible: false,backgroundColor:'transparent'} }],
			legend: {visible:false,horizontalAlignment: 'center',verticalAlignment: 'top',itemTextPosition: 'right'},
			dataSource: start_page_oper_count_by_hour,
			commonSeriesSettings: {line: {point: {size: 1}},spline: {point: {size: 1}},argumentField:'hour'}
		});
		$("#start_page_blocks_graph_block3").dxChart({
			equalBarWidth: false,
			rotated: true, 
			valueAxis: {constantLines: [{value: 0,color: '<%= $white %>',width: 2}],grid: { visible: false },label: {customizeText: function () {return '';}}},
			argumentAxis: {placeholderSize:150,label: {customizeText: function () {return start_cut_a_string(this.value);},font: { color: '<%= $white %>', size:14}}},
			series:[{valueField: 'count', type: 'bar',color: '<%= $white %>',label:{font:{size:16},format:'largeNumber', visible: true,backgroundColor:'transparent'} }],
			legend: {visible:false,horizontalAlignment: 'center',verticalAlignment: 'top',itemTextPosition: 'right'},
			dataSource: start_page_oper_top5,
			tooltip: {enabled: true, customizeText: function (e) {return e.originalArgument }},
			commonSeriesSettings: {line: {point: {size: 1}},spline: {point: {size: 1}},argumentField:'oper_name'}
		});
		$("#start_page_blocks_graph_block6").dxChart({
			equalBarWidth: false,
			rotated: true,
			valueAxis: {constantLines: [{value: 0,color: '<%= $white %>',width: 2}],grid: { visible: false },label: {customizeText: function () {return '';}}},
			argumentAxis: {placeholderSize:150,label: {customizeText: function () {return start_cut_a_string(this.value);},font: { color: '<%= $white %>', size:14}}},
			series:[{valueField: 'count', type: 'bar',color: '<%= $white %>',label:{font:{size:16},format:'largeNumber', visible: true,backgroundColor:'transparent'} }],
			legend: {visible:false,horizontalAlignment: 'center',verticalAlignment: 'top',itemTextPosition: 'right'},
			dataSource: start_page_user_top5,
			tooltip: {enabled: true, customizeText: function (e) {return e.originalArgument }},
			commonSeriesSettings: {line: {point: {size: 1}},spline: {point: {size: 1}},argumentField:'loginname'}
		});
		$("#start_page_blocks_graph_block5").dxChart({
			valueAxis: {min:0,constantLines: [{label:{visible: false},value: 0,color: '<%= $white %>',width: 2}],label: {font: { color: '<%= $white %>', size:16},format:'largeNumber'},grid: { visible: false }},
			argumentAxis: {label: {font: { color: '<%= $white %>', size:16 }}},
			series:[{valueField: 'count', type: 'bar',color: '<%= $white %>',label:{font:{size:16},format:'largeNumber', visible: false,backgroundColor:'transparent'} },],
			legend: {visible:false,horizontalAlignment: 'center',verticalAlignment: 'top',itemTextPosition: 'right'},
			dataSource: start_page_user_unique_by_hour,
			commonSeriesSettings: {line: {point: {size: 1}},spline: {point: {size: 1}},argumentField:'hour'}
		});
		$("#start_page_blocks_graph_block4").dxChart({
			equalBarWidth: false,
			valueAxis: {constantLines: [{value: 0,color: '<%= $white %>',width: 2}],grid: { visible: false },label: {customizeText: function () {return '';}}},
			argumentAxis: {label: {font: { color: '<%= $white %>', size:16 }}},
			series:[{valueField: 'value', type: 'bar',color: '<%= $white %>',label:{font:{size:16},format:'percent', visible: true,backgroundColor:'transparent'} }],
			legend: {visible:false,horizontalAlignment: 'center',verticalAlignment: 'top',itemTextPosition: 'right'},
			dataSource: start_page_sys_percent,
			
			commonSeriesSettings: {line: {point: {size: 1}},spline: {point: {size: 1}},argumentField:'arg'}
		});
		$("#start_page_blocks_graph_block7").dxPolarChart({
			dataSource: start_page_office_count_per,
			series: [{type: "bar",color:'<%= $white %>',label: {visible: false,backgroundColor:'transparent',font:{size:10,color:'<%= $green %>'} }}],
			legend: {visible: false},
			argumentAxis: {inverted: true,grid: { visible: false },startAngle: 225,label: { font: { color: '<%= $white %>' }}},
			valueAxis: {label: { visible:false },grid: { visible: false },visible: false },
			tooltip: {enabled: true,font:{color:'<%= $green %>',size:16},location:'edge',customizeText: function (e) {return second_to_hour_converter(e.originalValue);}},
			//tooltip: { enabled: true,font:{color:'<%= $green %>',size:18}}
		});
		$("#start_page_blocks_graph_block8").dxChart({
			equalBarWidth: false,
			rotated: true,
			valueAxis: {constantLines: [{value: 0,color: '<%= $white %>',width: 2}],grid: { visible: false },label: {customizeText: function () {return '';}}},
			argumentAxis: {placeholderSize:150,label: {customizeText: function () {return start_cut_a_string(this.value);},font: { color: '<%= $white %>', size:14}}},
			series:[{valueField: 'sys_time', type: 'bar',color: '<%= $white %>',label:{font:{size:16},format:'percent', visible: true,backgroundColor:'transparent'} }],
			legend: {visible:false,horizontalAlignment: 'center',verticalAlignment: 'top',itemTextPosition: 'right'},
			dataSource: start_page_office_sys_degrade,
			tooltip: {enabled: true, customizeText: function (e) {return e.originalArgument }},
			commonSeriesSettings: {line: {point: {size: 1}},spline: {point: {size: 1}},argumentField:'office_name'}
		});
		$("#start_page_blocks_graph_block9").dxChart({
			equalBarWidth: false,
			rotated: true,
			valueAxis: {constantLines: [{value: 0,color: '<%= $white %>',width: 2}],grid: { visible: false },label: {customizeText: function () {return '';}}},
			argumentAxis: {placeholderSize:150,label: {customizeText: function () {return start_cut_a_string(this.value);},font: { color: '<%= $white %>', size:14}}},
			series:[{valueField: 'count', type: 'bar',color: '<%= $white %>',label:{font:{size:16},format:'largeNumber', visible: true,backgroundColor:'transparent'} }],
			legend: {visible:false,horizontalAlignment: 'center',verticalAlignment: 'top',itemTextPosition: 'right'},
			dataSource: start_page_office_top5,
			tooltip: {enabled: true, customizeText: function (e) {return e.originalArgument }},
			commonSeriesSettings: {line: {point: {size: 1}},spline: {point: {size: 1}},argumentField:'office_name'}
		});
		
	}

	window.onload = function(){
		start_page_build_graph()
		start_page_get_graph_data()
		start_page_auto_update()

	}
	
	function start_page_get_graph_data(){
		show_loading(1)
		$.getJSON('/common/get_index_graph' ,{start_time: calendar_from_date.date_format(), end_time: calendar_to_date.date_format()}, function(data) {
			start_page_count_by_color=[{'arg':'<%= t(:norm) %>','value':0},{'arg':'<%= t(:yellow) %>','value':0},{'arg':'<%= t(:red) %>','value':0}]
			for (i=0;i<data.color.length;i++){
				start_page_count_by_color[(parseInt(data.color[i].status) - 1)].value=data.color[i].count
			}
			start_page_sys_percent[0].value=data.sys_compare[0].sys_time
			start_page_sys_percent[1].value=data.sys_compare[0].user_time
			start_page_oper_count_by_hour=data.oper_hour
			start_page_oper_top5=data.oper_top5.reverse()
			start_page_user_top5=data.users_top5.reverse()
			start_page_office_top5=data.office_top5.reverse()
			start_page_office_sys_degrade=data.office_sys_degrade.reverse()
			start_page_user_unique_by_hour=data.user_hour
			start_page_office_count_per=data.office_count_per_office
			var chart = $("#start_page_blocks_graph_block1").dxChart('instance');
			var renderOptions = {force: true};
			chart.option({dataSource: start_page_count_by_color});
			chart.render(renderOptions);
			var chart = $("#start_page_blocks_graph_block2").dxChart('instance');
			var renderOptions = {force: true};
			chart.option({dataSource: start_page_oper_count_by_hour});
			chart.render(renderOptions);
			var chart = $("#start_page_blocks_graph_block3").dxChart('instance');
			var renderOptions = {force: true};
			chart.option({dataSource: start_page_oper_top5});
			chart.render(renderOptions);
			var chart = $("#start_page_blocks_graph_block4").dxChart('instance');
			var renderOptions = {force: true};
			chart.option({dataSource: start_page_sys_percent});
			chart.render(renderOptions);
			var chart = $("#start_page_blocks_graph_block5").dxChart('instance');
			var renderOptions = {force: true};
			chart.option({dataSource: start_page_user_unique_by_hour});
			chart.render(renderOptions);
			var chart = $("#start_page_blocks_graph_block6").dxChart('instance');
			var renderOptions = {force: true};
			chart.option({dataSource: start_page_user_top5});
			chart.render(renderOptions);
			var chart = $("#start_page_blocks_graph_block7").dxPolarChart('instance');
			var renderOptions = {force: true};
			chart.option({dataSource: start_page_office_count_per});
			chart.render(renderOptions);
			var chart = $("#start_page_blocks_graph_block8").dxChart('instance');
			var renderOptions = {force: true};
			chart.option({dataSource: start_page_office_sys_degrade});
			chart.render(renderOptions);
			var chart = $("#start_page_blocks_graph_block9").dxChart('instance');
			var renderOptions = {force: true};
			chart.option({dataSource: start_page_office_top5});
			chart.render(renderOptions);
			
			show_loading(0)
		}).fail(function(error) {
			show_loading(0)
			error_show(error.statusText,error.status)
  		})
	}
	function start_make_a_break(string){
		string_length=string.length
		number_of_rows=Math.ceil(string_length/15)
		full_string=''
		for (i=1;i<(number_of_rows+1);i++){
			t_f=string.substring(((15*i)-15), 15*i)
			full_string+=t_f
			if (number_of_rows !== i && number_of_rows>1 && string.substring((15*i)-1, 15*i) !== ' ' && string.substring(15*i, (15*i)+1) !== ' '){
				full_string+='-'+'\n'
			}else if (number_of_rows !== i && number_of_rows>1){
				full_string+='\n'
			}
		}
		return full_string
	}
	function start_cut_a_string(string){
		if (string.length > 15){
			return string.substring(0,15)+'...'
		}else{
			return string
		}
	}

	function calendar_update(){
		start_page_get_graph_data()
	}
	$(document).ready(
		function() { 
			//$(body).niceScroll(scroll_settings);
			$("#common_index_scroll").niceScroll(scroll_settings);
		}
	);
	function start_page_auto_update(){
		setTimeout(function(){
			start_page_get_graph_data()	
			start_page_auto_update()
		}, 60000)
	}
</script>
	

