
<style>
<%
	@month_name_array=[{:id =>1, :name =>t(:calendar_jan), :shortname =>t(:calendar_jan_s), :form =>t(:calendar_jan_f)},
							{:id =>2, :name =>t(:calendar_feb), :shortname =>t(:calendar_feb_s), :form =>t(:calendar_feb_f)},
							{:id =>3, :name =>t(:calendar_mar), :shortname =>t(:calendar_mar_s), :form =>t(:calendar_mar_f)},
							{:id =>4, :name =>t(:calendar_apr), :shortname =>t(:calendar_apr_s), :form =>t(:calendar_apr_f)},
							{:id =>5, :name =>t(:calendar_may), :shortname =>t(:calendar_may_s), :form =>t(:calendar_may_f)},
							{:id =>6, :name =>t(:calendar_jun), :shortname =>t(:calendar_jun_s), :form =>t(:calendar_jun_f)},
							{:id =>7, :name =>t(:calendar_jul), :shortname =>t(:calendar_jul_s), :form =>t(:calendar_jul_f)},
							{:id =>8, :name =>t(:calendar_aug), :shortname =>t(:calendar_aug_s), :form =>t(:calendar_aug_f)},
							{:id =>9, :name =>t(:calendar_sep), :shortname =>t(:calendar_sep_s), :form =>t(:calendar_sep_f)},
							{:id =>10, :name =>t(:calendar_oct), :shortname =>t(:calendar_oct_s), :form =>t(:calendar_oct_f)},
							{:id =>11, :name =>t(:calendar_nov), :shortname =>t(:calendar_nov_s), :form =>t(:calendar_nov_f)},
							{:id =>12, :name =>t(:calendar_dec), :shortname =>t(:calendar_dec_s), :form =>t(:calendar_dec_f)}]	
%>
.stat_compare_calendar_head{
	color:<%= $white %>;
	position:absolute;
	top:0px;
	width:25px;
	height:25px;
	line-height:25px;
	font-size:14px;
	text-align:center;
}
.stat_compare_calendar_body{
	color:<%= $d_blue %>;
	position:absolute;
	top:0px;
	width:25px;
	height:25px;
	line-height:25px;
	font-size:14px;
	text-align:center;
	z-index:10;
	transition:0.2s;
}
</style>
<div style="overflow:hidden;width:330px;height:<% if $page_calendar_without_multiple_days == 0 %>410<% else %>375<% end %>px;top:0px;left:0px;position:absolute">
	<div class="text_m" style="top:10px;position:absolute;left:10px;line-height:30px;width:calc(100% - 20px)" align="center"><%= t(:calendar_select_day) %></div>
	<div style="cursor:default;width:315px;height:325px;position:absolute;top:40px;left:10px;border:1px solid <%= $gray %>;;-webkit-user-select: none">
		<div style="width:100%;height:24px;position:absolute;top:0px;left:0px;border-bottom:1px solid <%= $gray %>;background:<%= $red %>">
			<div class="stat_compare_calendar_head" style="left:0px;width:75px"><%= t(:calendar_month) %></div>
			<div class="stat_compare_calendar_head" style="left:75px;width:50px"><%= t(:calendar_week) %></div>
			<div class="stat_compare_calendar_head" style="left:125px"><%= t(:calendar_mon) %></div>
			<div class="stat_compare_calendar_head" style="left:150px"><%= t(:calendar_tue) %></div>
			<div class="stat_compare_calendar_head" style="left:175px"><%= t(:calendar_wen) %></div>
			<div class="stat_compare_calendar_head" style="left:200px"><%= t(:calendar_thu) %></div>
			<div class="stat_compare_calendar_head" style="left:225px"><%= t(:calendar_fri) %></div>
			<div class="stat_compare_calendar_head" style="left:250px"><%= t(:calendar_sat)%></div>
			<div class="stat_compare_calendar_head" style="left:275px"><%= t(:calendar_sun) %></div>
		</div>
		<div id="stat_compare_calendar_body"  style="width:100%;height:300px;position:absolute;top:25px;left:0px;overflow:scroll;overflow-x:hidden"></div>
		<div  style="width:1px;height:300px;position:absolute;top:25px;left:124px;background:<%= $gray %>;z-index:10"></div>
		<div  style="width:1px;height:300px;position:absolute;top:25px;left:300px;background:<%= $gray %>;z-index:10"></div>
	</div>
	<div class="button" onclick="stat_compare_remove_all_oper()" style="top:375px;left:10px;width:120px;"><%= t(:calendar_deselect_all)%></div>
	<div id="stat_compare_calendar_count_day" class="text_m" style="top:375px;position:absolute;right:10px;line-height:30px;width:190px" align="right"><b>0</b><%= t(:calendar_dash_days)%></div>
	<div id="stat_compare_calendar_hider" class="text_b" align="center" style="<%= $page_calendar_select_oper %>cursor:default;;-webkit-user-select: none;transition:1s;z-index:15;opacity:0.8;width:330px;height:410px;top:0px;left:0px;position:absolute;line-height:410px;background:<%= $l_gray %>;;"><%= t(:calendar_select_oper) %></div>
</div>


<script>
var calendar_month_names = <%= raw @month_name_array.to_json %>
function stat_compare_build_calendar(){
	start_time=new Date(2014,0,1)
	mm=(new Date()).getMonth()
	yyyy=(new Date()).getFullYear()
	end_time=new Date(yyyy,mm+1,0)
	start_week=start_time.getDay();if (start_week==0){start_week=7}
	left_pos=100+(start_week*25)
	top_pos=0
	month_count=1
	month_top=0
	month_size=25
	week_query=''
	$('.stat_compare_calendar_body').remove()
	for (d=start_time;d<=end_time;d.setDate(d.getDate() + 1)){
		$('<div onclick="stat_compare_select_day('+d.getDate()+','+d.getMonth()+','+d.getFullYear()+')" class="stat_compare_calendar_body" id="day_selected_'+d.getDate()+'_'+d.getMonth()+'_'+d.getFullYear()+'" style="cursor:pointer;width:25px;height:25px;left:'+left_pos+'px;top:'+top_pos+'px;position:absolute;" >'+d.getDate()+'</div>').appendTo($('#stat_compare_calendar_body'));
		document.getElementById('day_selected_'+d.getDate()+'_'+d.getMonth()+'_'+d.getFullYear()).name=d.getDate()+'.'+d.getMonth()+'.'+d.getFullYear()
		document.getElementById('day_selected_'+d.getDate()+'_'+d.getMonth()+'_'+d.getFullYear()).value=0
		if (month_count % 2){color ='<%= $white %>'}else{color='<%= $l_gray %>'}
		mm=d.getMonth()+1
		yyyy=d.getFullYear()
		if (mm > 11){yyyy++}
		start_week++;
		week_query+=d.getDate()+'_'+d.getMonth()+'_'+d.getFullYear()+','
		if (d.getDate() == new Date(yyyy,mm,0).getDate() && start_week==8){
			week_num=d.getWeekNumber()
			$('<div onclick="stat_compare_select_week('+"'"+week_query+"'"+')" class="stat_compare_calendar_body" style="cursor:pointer;line-height:25px;width:25px;height:25px;left:100px;top:'+top_pos+'px;position:absolute;z-index:3"><b>'+week_num+'</b></div>').appendTo($('#stat_compare_calendar_body'));	
			week_query=''
			top_pos+=25;
			start_week=1;
			build_background_month(month_top,month_size,d.getMonth(),d.getFullYear(),color)
			month_top=top_pos
			month_size=25
			month_count++
		}else if (d.getDate() == new Date(yyyy,mm,0).getDate()){
			week_num=d.getWeekNumber()
			$('<div onclick="stat_compare_select_week('+"'"+week_query+"'"+')" class="stat_compare_calendar_body" style="cursor:pointer;line-height:25px;width:25px;height:25px;left:100px;top:'+top_pos+'px;position:absolute;z-index:3"><b>'+week_num+'</b></div>').appendTo($('#stat_compare_calendar_body'));
			week_query=''
			top_pos+=25;
			build_background_month(month_top,month_size,d.getMonth(),d.getFullYear(),color)
			month_top=top_pos;
			month_size=25
			month_count++
		}else if (start_week==8){
			week_num=d.getWeekNumber()
			$('<div onclick="stat_compare_select_week('+"'"+week_query+"'"+')" class="stat_compare_calendar_body" style="cursor:pointer;line-height:25px;width:25px;height:25px;left:100px;top:'+top_pos+'px;position:absolute;z-index:3"><b>'+week_num+'</b></div>').appendTo($('#stat_compare_calendar_body'));	
			week_query=''
			top_pos+=25;
			start_week=1;
			month_size+=25} 
		left_pos=100+(start_week*25)
	}
	//document.getElementById('stat_compare_calendar_body').scrollTop=document.getElementById('stat_compare_calendar_body').scrollHeight
}
function build_background_month(top,size,month,year,color){
	$('<div class="stat_compare_calendar_body" style="background:'+color+';border-top:1px solid <%= $gray %>;width:300px;height:'+(size-1)+'px;left:0px;top:'+top+'px;position:absolute;z-index:1"></div>').appendTo($('#stat_compare_calendar_body'));	
	
	$('<div class="stat_compare_calendar_body" style="line-height:20px;width:75px;height:40px;left:0px;top:'+(top+((size-40)/2))+'px;position:absolute;z-index:3">'+calendar_month_names[month].name+'<br>'+year+'</div>').appendTo($('#stat_compare_calendar_body'));	
}
var stat_compare_absolute_count_day=0
function stat_compare_select_day(d,m,y){
	element=document.getElementById('day_selected_'+d+'_'+m+'_'+y)
	if (element.value == 0){
		element.style.background='<%= $blue %>'
		element.style.color='<%= $white %>'
		element.value=1
		stat_compare_absolute_count_day++
	}else{
		element.style.background=''
		element.style.color=''
		element.value=0
		stat_compare_absolute_count_day--
	}
	<% if $page_calendar_check_count_of_selected_day_action == 1 %>
		page_calendar_compare_count_days()
	<% end %>
	<% if $page_calendar_after_action == 1 %>
		page_calendar_action_with_day(d,m,y)
	<% end %>
	document.getElementById('stat_compare_calendar_count_day').innerHTML='<b>'+stat_compare_absolute_count_day+'</b><%= t(:calendar_dash_days) %>'
}
function stat_compare_select_week(string){
	data=string.split(',')
	for (i=0;i<data.length;i++){
		if (data[i].length > 0){
			stat_compare_select_day(parseInt(data[i].split('_')[0]),parseInt(data[i].split('_')[1]),parseInt(data[i].split('_')[2]))
		}
	}
}

function stat_compare_remove_all_oper(){
	oper_class=document.getElementsByClassName('stat_compare_calendar_body')
	for(i=0;i<oper_class.length;i++){
		if (oper_class[i].value==1){
			d=parseInt(oper_class[i].name.split('.')[0])
			m=parseInt(oper_class[i].name.split('.')[1])
			y=parseInt(oper_class[i].name.split('.')[2])
			stat_compare_select_day(d,m,y)
			
		}
	}	
}
$(document).ready(
	function() { 
		$("#stat_compare_calendar_body").niceScroll(scroll_settings);
	}
);
</script>