<%  @calendar_select_interval = 2    %>
<div id="office_activity_order_container">
	<div id="office_activity_order_text" class="text_m" align="center"><%= t(:sort)%>:</div>
	<div onclick="office_activity_sort(1)" class="button" style="top:10px;left:105px;width:140px"><%= t(:name)%></div>
	<div onclick="office_activity_sort(2)" class="button" style="top:10px;left:255px;width:140px"><%= t(:count)%></div>
	<div onclick="office_activity_sort(3)" class="button" style="top:10px;left:405px;width:140px"><%= t(:red)%></div>
</div>
<div id="office_activity_main_container" >
	<!--<div style="width:100%;height:100%;position:absolute:top:0px;left:0px;background:<%= $gray %>;opacity:0.4"></div>-->
	<div id="office_activity_main_container_for_block"></div>
</div>
<div id="office_activity_user_graph"></div>
<script>
var office_activity_order_select="opercount DESC"

function office_activity_get_main_data(){
	show_loading(1)
	$('.remove_office_block').remove();
	$.getJSON('get_office_activity' ,{start_time: calendar_from_date.date_format(), end_time: calendar_to_date.date_format(), order:office_activity_order_select}, function(data) {
		console.log(data.data.length)
		for (i=0;i<data.data.length;i++){
			s_data=data.data[i]
			if (s_data.office_name.length > 20){
				officename=s_data.office_name.substring(0,20)+'...'
			}else{
				officename=s_data.office_name
			}
			$('<div class="remove_office_block">'+
				'<div class="office_activity_block_container">'+
					'<div class="office_activity_block_header"></div>'+
					'<div class="text_b" style="width:230px;height:30px;position:absolute;top:0px;left:10px;line-height:30px">'+officename+'</div>'+
					'<div class="text_b" style="width:150px;height:30px;position:absolute;top:0px;right:10px;line-height:30px" align="right"><b>'+s_data.opercount+'</b></div>'+
				
					'<img width="16px" height="16px" style="position:absolute;left:4px;top:37px" src="/assets/normal.png" alt="">'+
					'<div class="office_activity_block_color_container" style="top:35px">'+
						'<div id="office_activity_green_block_'+i+'" class="office_activity_block_color_bar" style="background:<%= $green %>"></div>'+
						'<div class="text_m" style="width:56px;height:20px;position:relative;float:left;;line-height:20px;color:<%= $green %>" align="center">'+office_activity_convert_number(s_data.green)+'</div>'+
					'</div>'+
			
			
					'<img width="16px" height="16px" style="position:absolute;left:4px;top:57px" src="/assets/warning.png" alt="">'+
					'<div class="office_activity_block_color_container" style="top:55px">'+
						'<div id="office_activity_yellow_block_'+i+'" class="office_activity_block_color_bar" style="background:<%= $yellow %>"></div>'+
						'<div class="text_m" style="width:56px;height:20px;position:relative;float:left;;line-height:20px;color:<%= $yellow %>" align="center">'+office_activity_convert_number(s_data.yellow)+'</div>'+
					'</div>'+
			
					'<img width="16px" height="16px" style="position:absolute;left:4px;top:77px" src="/assets/error.png" alt="">'+
					'<div class="office_activity_block_color_container" style="top:75px">'+
						'<div id="office_activity_red_block_'+i+'" class="office_activity_block_color_bar" style="background:<%= $red %>"></div>'+
						'<div class="text_m" style="width:56px;height:20px;position:relative;float:left;;line-height:20px;color:<%= $red %>" align="center">'+office_activity_convert_number(s_data.red)+'</div>'+
					'</div>'+
				'</div>'+	
			'</div>').appendTo("#office_activity_main_container_for_block") 
				
		}
		setTimeout(function() {
			for (i=0;i<data.data.length;i++){
				s_data=data.data[i]
				green_width=((100/s_data.opercount)*s_data.green)*0.7
				yellow_width=((100/s_data.opercount)*s_data.yellow)*0.7
				red_width=((100/s_data.opercount)*s_data.red)*0.7
				document.getElementById('office_activity_green_block_'+i).style.width=green_width+'%'
				document.getElementById('office_activity_yellow_block_'+i).style.width=yellow_width+'%'
				document.getElementById('office_activity_red_block_'+i).style.width=red_width+'%'
				for (x=0;x<data.logins.length;x++){
					if (s_data.office_id == data.logins[x].office_id){
						var element={}
							element['arg']=s_data.office_name
							element['actuser']=s_data.uniqueuser
							element['alluser']=data.logins[x].alluser
						office_activity_user_table.push(element)
					}
				}
				
			}
			//console.log('test '+office_activity_user_table[15].alluser+' exp')
			var chart = $("#office_activity_user_graph").dxChart('instance');
			var renderOptions = {force: true};
			chart.option({dataSource: office_activity_user_table });
			chart.render(renderOptions);
			show_loading(0)
		}, 100)	
	}).fail(function(error) {
		show_loading(0)
		error_show(error)
 })
}

function calendar_update(){
	office_activity_get_main_data()
}

window.onresize = function(event) {
	office_activity_set_window_size()
};

office_activity_set_window_size()
function office_activity_set_window_size(){
	width=$(window).width()
	count=Math.floor(width/300)
	console.log(width)
	document.getElementById('office_activity_main_container_for_block').style.width=count*300+10 + 'px'
	document.getElementById('office_activity_main_container_for_block').style.left='calc(50% - '+(count*150)+'px - 5px)'	
}
function office_activity_convert_number(count){
	if (count < 1000){
		count_format=count
	}else if (count > 1000 && count < 10000){
		count_format=(count/1000).toFixed(1)+'K'
	}else if (count > 10000 && count < 1000000){
		count_format=(count/1000).toFixed(0)+'K'
	}else  if (count > 1000000){
		count_format=(count/1000000).toFixed(0)+'M'
	}
	return count_format
}
function office_activity_sort(value){
	if (value == 1){
		office_activity_order_select='"offices"."name" ASC'
	}else if(value == 2){
		office_activity_order_select="opercount DESC"
	}else{
		office_activity_order_select="red DESC"
	}
	office_activity_get_main_data()
}
var office_activity_user_table = []
window.onload = function(){
			$("#office_activity_user_graph").dxChart({ 
				series:[	{axis: 'user', name: '<%= t('.active_logins') %>', valueField: 'actuser', type: 'Bar',color: '<%= $yellow %>' },
							{axis: 'user', name: '<%= t(:all_logins) %>', valueField: 'alluser', type: 'Bar',color: '<%= $gray %>' }
				
				],
				legend: {visible:true,horizontalAlignment: 'center',verticalAlignment: 'top',itemTextPosition: 'right'},
				tooltip: {
					enabled: true
				},
				valueAxis: [
					{placeholderSize:60,title:{text: '<%= t(:count_logins) %>' ,font: { size: 12 }}, name: 'user' }
				],
				dataSource: office_activity_user_table,
				commonSeriesSettings: {line: {point: {size: 1}},spline: {point: {size: 1}},argumentField:'arg'}
			});
			office_activity_get_main_data()
}
$(document).ready(
	function() { 
		$("#office_activity_main_container_for_block").niceScroll(scroll_settings);
	}
);
</script>