<%  @calendar_select_interval = 2   %>
<style>
.office_list_info_block{
	width:80px;
	height:30px;
	position:relative;
}
.office_list_summ_image{
	position:absolute;
	left:0px;
	top:5px;
	width:20px;
	height:20px;
}
.office_list_summ_text{
	position:absolute;
	left:30px;
	line-height:30px;
	font-size:14px;
	color:<%= $d_blue %>;
}
</style>
<div style="width:300px;height:calc(100%);position:absolute;top:0px;left:0px">
	<div class="text_b" align="center" style="line-height:50px;width:100%;height:50px;position:absolute;top:0px;left:0px;color:<%= $white %>;background:<%= $red %>"><%= t('.offices') %></div>
	<div id="office_list_offices" style="width:299px;position:absolute;overflow:scroll;overflow-x:hidden;height:calc(100% - 50px);top:50px;left:0px;border-right:1px solid <%= $gray %>"></div>
</div>

<div style="width:calc(100% - 300px);height:100%;top:0px;left:300px;position:absolute">
	<div class="text_header_red_line" id="office_list_office_name" style="width:300px;height:30px;top:10px;left:10px"></div>
	<ul class="text_m" style="list-style-type:none;position:absolute;top:40px;width:400px;line-height:30px;left:10px">
	 	 <li><%= t('.oper_count') %>: <b id="office_list_oper_count">0</b></li>
		 <li><%= t('.oper_unique') %>: <b id="office_list_oper_unique">0</b></li>
	 	 <li><%= t('.user_count') %>: <b id="office_list_user_count">0</b></li>
	  	 <li><%= t('.user_active') %>: <b id="office_list_user_active">0</b></li>
		 <li><div class="office_list_info_block">
			<img class="office_list_summ_image" src="/assets/normal.png" >
			<div class="office_list_summ_text"> <b id="office_list_sum_norm">0</b></div>
		</div></li>
		<li><div class="office_list_info_block">
			<img class="office_list_summ_image" src="/assets/warning.png" >
			<div  class="office_list_summ_text"> <b id="office_list_sum_warn">0</b></div>
		</div></li>
		<li><div class="office_list_info_block">
			<img class="office_list_summ_image" src="/assets/error.png" >
			<div  class="office_list_summ_text"> <b id="office_list_sum_err">0</b></div>
		</div></li>
	</ul>
	<div id="office_list_hour_graph" style="width:100%;height:calc(100% - 401px);top:400px;left:0px;position:absolute;border-top:1px solid <%= $gray %>"></div>
	<div style="width:calc(100% - 400px);right:0px;top:0px;height:400px;position:absolute;border-left:1px solid <%= $gray %>">
		<%
			#	gt - Глобальная таблица
				@container=""
				@gt_structure=[]
							@gt_structure.push({:onclick => "", :row_name => t(:login), :value => "'+data.data[i].login_name+'", :width => "", :filter => 'login_name' })
							@gt_structure.push({:onclick => "", :row_name => t(:status), :value => "'+build_status_view(data.data[i])+'", :width => "width:150px", :filter => 'red' })
							@gt_structure.push({:onclick => "user_activity_build_user_graph('+data.data[i].login_id+')", :row_name => t(:count), :value => "'+data.data[i].count+'", :width => "width:100px", :filter => 'count' })
							@gt_structure.push({:onclick => "", :row_name => "", :value => "'+link_login_map(data.data[i].login_id)+'", :width => "width:80px", :filter => 'none' })
		%>
		<%= render partial: "shared/table", locals: {
			name:"user_table",
			header:@gt_structure,
			query:"get_office_list_user_list",
			action_after:1,
			time:1,
			add_params:',officeid:office_list_selected_officeid',
			offset:50,
			first_sort:'count;DESC',
			additional_field:@container
		} %>
	</div>
</div>





<script>
office_list_selected_officeid=0
office_list_selected_office_name=''
office_list_hour_array_data=[]
window.onload = function(){
	office_list_get_offices()
	$("#office_list_hour_graph").dxChart({ 
		argumentAxis: {
			minValueMargin: 0,
			maxValueMargin:0,
			argumentType: 'datetime',
			label: {format: 'HH:mm' },
			tickInterval: {hours:1},
			grid:{visible: true}
		},
		series:[	
			{axis: 'count', name: '<%= t('.oper_count') %>', valueField: 'OperCount', type: 'Bar',color: '<%= $blue %>' },
			{axis: 'user', name: '<%= t('.user_count') %>', valueField: 'Users', type: 'Bar',color: '<%= $yellow %>' },
					

		],
		equalBarWidth: false,
		legend: {visible:true,horizontalAlignment: 'center',verticalAlignment: 'top',itemTextPosition: 'right'},
		tooltip: {
			enabled: true
		},
		valueAxis: [
			{placeholderSize:60,title:{text: '<%= t('.oper_count') %>' ,font: { size: 12 }}, name: 'count' },
			{placeholderSize:60,position:"right",title:{text: '<%= t('.user_count') %>' ,font: { size: 12 }}, name: 'user' }
		],
		dataSource: office_list_hour_array_data,
		commonSeriesSettings: {line: {point: {size: 1}},spline: {point: {size: 1}},argumentField:'hour'}
	});
}
function office_list_get_offices(){
	$('.office_list_rows').remove()
	$.getJSON('get_office_list' ,{start_time: calendar_from_date.date_format(), end_time: calendar_to_date.date_format()}, function(data) {
		office_list_get_hour_data(data[0].office_id,data[0].office_name)
		for (i=0;i<data.length;i++){
			$('<div onclick="office_list_get_hour_data('+data[i].office_id+','+"'"+data[i].office_name+"'"+')" class="office_list_rows" style="cursor:pointer;width:100%;height:50px;position:relative;border-bottom:'+((i+1) == data.length ? 0 : 1 )+'px solid <%= $gray %>">'+
				'<div class="text_m" style="width:200px;height:30px;line-height:30px;position:absolute;top:0px;left:10px">'+(data[i].office_name.length > 24 ? data[i].office_name.substring(0,24)+'...' : data[i].office_name )+'</div>'+
				'<canvas id="office_row_id_'+data[i].office_id+'" style="width:220px;height:15px;position:absolute;top:30px;left:0px"></canvas>'+
				'<div align="center" class="text_b" style="width:70px;height:40px;line-height:40px;position:absolute;top:5px;right:0px;border-left:2px solid <%= $red %>">'+data[i].count+'</div>'+
			'</div>').appendTo("#office_list_offices")
			office_list_draw_canvas(data[i].office_id,data[i].green,data[i].yellow,data[i].red)
		}
	}).fail(function(error) {
		show_loading(0)
		error_show(error.statusText,error.status)
  	})
}

function office_list_get_hour_data(id,name){
	office_list_hour_array_data.length=0
	office_list_selected_officeid=id
	office_list_selected_office_name=name
	gt_build_table_user_table(gt_last_sort_user_table)
	$.getJSON('get_office_hour_list' ,{start_time: calendar_from_date.date_format(), end_time: calendar_to_date.date_format(), id:id}, function(data) {
		document.getElementById('office_list_office_name').innerHTML='<b>'+(name.length > 40 ? name.substring(0,40)+'...' : name )+'</b>'
		for (i=0;i<24;i++){
			element={}
				element['hour']=new Date(2000,1,1,i,0,0)
				element['count']=0
				element['users']=0 
			office_list_hour_array_data.push(element)
		}
		
		for (i=0;i<data.length;i++){
			//office_list_hour_array_data[data[i].hour].hour=new Date(2000,1,1,data[i].hour,0,0)
			office_list_hour_array_data[data[i].hour].OperCount=data[i].count
			office_list_hour_array_data[data[i].hour].Users=data[i].users
			console.log(office_list_hour_array_data[data[i].hour].hour)
		}
		var chart = $("#office_list_hour_graph").dxChart('instance');
		var renderOptions = {force: true};
		chart.option({dataSource: office_list_hour_array_data });
		chart.render(renderOptions);
	}).fail(function(error) {
		show_loading(0)
		error_show(error.statusText,error.status)
  	})
}
function office_list_draw_canvas(id,green,yellow,red){
	var canvas = document.getElementById('office_row_id_'+id);
	var ctx = canvas.getContext('2d');
	full_count=green+yellow+red
	green_width=((1/full_count)*green)*200
	yellow_width=((1/full_count)*yellow)*200 + green_width
	red_width=((1/full_count)*red)*200 + yellow_width
	ctx.beginPath();
	ctx.moveTo(0,0);
	ctx.lineTo(green_width,0);
	ctx.lineTo((green_width+10),100);
	ctx.lineTo(0,100);
	ctx.fillStyle ='<%= $green %>' ;
	ctx.fill();
	
	ctx.beginPath();
	ctx.moveTo(green_width,0);
	ctx.lineTo(yellow_width,0);
	ctx.lineTo((yellow_width+10),100);
	ctx.lineTo((green_width+10),100);
	ctx.fillStyle ='<%= $yellow %>' ;
	ctx.fill();
	
	ctx.beginPath();
	ctx.moveTo(yellow_width,0);
	ctx.lineTo(red_width,0);
	ctx.lineTo((red_width+10),100);
	ctx.lineTo((yellow_width+10),100);
	ctx.fillStyle ='<%= $red %>' ;
	ctx.fill();
}
$(document).ready(
	function() { 
		$("#office_list_offices").niceScroll(scroll_settings);
		
	}
);


function gt_action_after_build_user_table(data){
	sum=data.sum
	document.getElementById('office_list_oper_count').innerHTML=sum.oper_count
	document.getElementById('office_list_oper_unique').innerHTML=sum.unique_oper
	document.getElementById('office_list_user_count').innerHTML=sum.user_count
	document.getElementById('office_list_user_active').innerHTML=sum.active_user
	document.getElementById('office_list_sum_norm').innerHTML=sum.green
	document.getElementById('office_list_sum_warn').innerHTML=sum.yellow
	document.getElementById('office_list_sum_err').innerHTML=sum.red
}

function calendar_update(){
	office_list_get_offices()
	office_list_get_hour_data(office_list_selected_officeid,office_list_selected_office_name)
	gt_build_table_user_table(gt_last_sort_user_table)
}
</script>