<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <link rel="stylesheet" type="text/css" href="/static/css/util.css" />
        <link rel="stylesheet" type="text/css" href="/static/css/semantic.min.css" />
        <link rel="stylesheet" type="text/css" href="/static/css/calendar_index.css" />
        <link rel="stylesheet" type="text/css" href="/static/css/calendar.css" />
        <link rel="stylesheet" type="text/css" href="/static/css/custom_3.css" />
        <script src="/static/js/modernizr.custom.63321.js"></script>
        <title>日历 - {{if not .islogin}}请先登录{{else}}记录你的每一天{{end}} - 记了</title>
    </head>
    <body>
		
        <div class="container"> 
            <div class="memoa">
                <a href="/memo" style="color:gray;" ><i class="anim-inout heart icon"></i></a>
				<br />
				<br />
				<a href="javascript:;" id="settingClick" style="color:gray" ><i class="setting icon"></i></a>
				<br />
				<br />
				<a href="/logout" style="color:gray" ><i class="power icon"></i></a>
				
            </div>
            <section class="main">
                <div class="custom-calendar-wrap">
                    <div id="custom-inner" class="custom-inner">
                        <div class="custom-header clearfix">
                            <nav>
                                <span id="custom-prev" class="custom-prev"></span>
                                <span id="custom-next" class="custom-next"></span>
                            </nav>
							<div class="header-wrap" >
								<span id="custom-month" class="custom-month"></span>
								<span id="custom-year" class="custom-year"></span>
							</div>
                        </div>
                        <div id="calendar" class="fc-calendar-container"></div>
						<div id="calendar-foot" class="fc-calendar-foot" style="display:none" >
							
							<div class="foot-title" >日记状态</div>
							<div class="foot-row" >
								<div class="foot-a" ><i class="circle icon" id="wstatus-icon" ></i></div>
								<div class="foot-b" id="wstatus-day" ></div>
								<div class="foot-c" id="wstatus-msg" ></div>
							</div>
							
						</div>
						<div class="clearfix"></div>						

                    </div>
					<div class=" fc-calendar-footbg"></div>
                </div>
            </section>
        </div><!-- /container -->

		<div class="ui small modal " id="settingModal" >
		  <div class="header">设置密码</div>
		  <div class=" content">
				<form class="ui form settingForm">
					 {{if ne .sysPw "" }}
					  <div class="field">
						<label>旧密码</label>
						<input type="password" name="oldpw" id="oldpw" placeholder="输入旧密码">
					  </div>
					  {{end}}
					  <div class="field">
						<label>新密码</label>
						<input type="password" name="newpw" id="newpw"  placeholder="输入新密码">
					  </div>
					  <div class="field">
						<label>重复新密码</label>
						<input type="password" name="newpw_ag" id="newpw2"  placeholder="再次输入新密码">
					  </div>
					<div class="actions" style="text-align: right;" >
						<div class="mini ui button approve ">关闭</div>
						<div class="mini ui green submit button postPw">保存</div>
					</div>
				</form >
			</div>
			
		  </div>
		  
			  
		</div>

		<div class="msg-body"  style="display:none;z-index: 1001;" id="tipBox" >
                <div class="ui small message"  id="tipBoxBg" style="opacity:0.9" >
                  <i class="close icon"></i>

                  <div class="header"><i class="notched circle loading icon" id="tipBoxIcon" ></i><span id="tipBoxTitle"></span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
                </div>
        </div>

        <script type="text/javascript" src="/static/js/jquery.min.js"></script>
        <script type="text/javascript" src="/static/js/semantic.min.js"></script>
        <script type="text/javascript" src="/static/js/jquery.calendario.js"></script>
		<script src="/static/js/util.js"></script>
		
		{{if not .islogin}}
		<div class="ui small  modal " id="loginModal" >
		  <div class="header">请先登录 - 欢迎使用“记了”</div>
		  <div class="content">
			<div class="ui form ">
				<div class="field">
					<input type="password" name="loginpw" id="loginpw" placeholder="输入密码">
				  </div>
			</div>
		  </div>
		  <div class="actions" style="text-align: right;" >
				<div class="mini ui green submit button loginPost">登录</div>
			</div>
		</div>
		<script>
		$('#loginModal').modal({
			closable  : false
			/*onHidden : function(){
				$('#loginModal').modal('show');
			}*/
		}).modal('show');
		</script>
		{{end}}

        <script type="text/javascript"> 
			function getMonthData(month, func){
				$.getJSON('/get/monthdata', { month : month}, function(data){
					if (data.code == 1){
						$.each(data.data, function(i,s){
							var obj = $('#day-'+s.day);
							obj.attr('noteid', s.note_id);

							if (obj && !obj.hasClass('fc-content')){
								obj.addClass('fc-content');
							}

							if (obj && s.weather_icon){
								obj.append('<img src="/static/img/weather/' + s.weather_icon + '.png" height="18">');
							}


						});
						
						if (typeof func == 'function'){
							func();
						}

					}
				});
			}

			function writeStatus(isw, day, noteid){
				theDay = day;
				day = day.replace(/\//g, "-");

				$('.fc-future').removeClass('cur-day');
				$('.fc-past').removeClass('cur-day');
				var obj = $('#day-' + day);
				obj.addClass('cur-day');

				$('#calendar-foot').show();
				$('#wstatus-icon').attr('class', (isw ? 'green' : 'red') + " circle icon");
				$('#wstatus-day').text(theDay);
				var ahtml = '<a href="/add/' + day + '"  style="color:red;text-decoration: underline;" >写日记</a>。';
				var lhtml = '，<a href="/look/' + noteid + '"  >看日记</a>或<a href="/edit/' + noteid + '"  >编辑日记</a>。';
				$('#wstatus-msg').html(isw ? '已经写了日记' + lhtml : ahtml);
			}

			$('.settingForm')
			  .form({
				inline : true,
				fields: {
				  oldpw: {
					identifier : 'oldpw',
					rules: [
					  {
						type   : 'empty',
						prompt : '请输入旧密码！'
					  }
					]
				  },
				  newpw: {
					identifier : 'newpw',
					rules: [
					  {
						type   : 'empty',
						prompt : '请输入新密码！'
					  }
					]
				  },
				  newpw_ag: {
					identifier : 'newpw_ag',
					rules: [
					  {
						type   : 'empty',
						prompt : '请重复输入新密码！'
					  },
					  {
						type   : 'match[newpw]',
						prompt : '二次输入的新密码不同！'
					  }
					]
				  }

				},
				onSuccess : function(){
					$.ajax({
						url : '/setting/pw',
						dataType : 'json',
						type : 'post',
						data : {
							pw : $('#oldpw').val(),
							newpw : $('#newpw').val(),
							newpw2 : $('#newpw2').val()
						}
					})
					.fail(function(data){
						tip(data.status + ":" + data.statusText); 
					})
					.done(function(data) {
						tip(data.msg, data.code == 1); 
						
						if (data.code == 1){
							$('#settingModal').modal('hide');
						}
						
					});


					return false;
				}
			  })
			;

			$('.loginPost').click(function(){
				$.ajax({
					url : '/login',
					dataType : 'json',
					type : 'post',
					data : {
						pw : $('#loginpw').val()
					}
				})
				.fail(function(data){
					tip(data.status + ":" + data.statusText); 
				})
				.done(function(data) {
					tip(data.msg, data.code == 1); 
					
					if (data.code == 1){
						location.reload();
					}
					
				});
			});

			var loginObj = document.getElementById('loginpw');
			if (loginObj){
				loginObj.onkeydown = function(){
					if (event.keyCode == 13){
						$('.loginPost').click();
					}
				};
			}
			

            $(function() {
                $('.anim-inout').transition('jiggle');
                
                var pop_title = '', pop_content = '';
                var transEndEventNames = {
                        'WebkitTransition' : 'webkitTransitionEnd',
                        'MozTransition' : 'transitionend',
                        'OTransition' : 'oTransitionEnd',
                        'msTransition' : 'MSTransitionEnd',
                        'transition' : 'transitionend'
                    },
                    transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
                    $wrapper = $( '#custom-inner' ),
                    $calendar = $( '#calendar' ),
                    cal = $calendar.calendario({
						weeks : ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
						weekabbrs : ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
						months : ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
						monthabbrs : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
						onDayClick : function( $el, data, dateProperties ) {
							//console.log($el, data, dateProperties);
							var noteid = $el.attr('noteid');
							var isw = $el.hasClass('fc-content');
							var toMonth = dateProperties.month;
							if (toMonth < 10){
								toMonth = '0' + toMonth;
							}

							var toDay = parseInt(dateProperties.day);
							if (toDay < 10){
								toDay = '0' + toDay;
							}
							writeStatus(isw, dateProperties.year + "/" + toMonth + "/" + toDay, noteid);

                        },
                        caldata : {}, 
                        events: 'click',
                        displayWeekAbbr : true,
                        fillEmpty: false
                    }),
                    $month = $( '#custom-month' ).html( cal.getMonthName() ),
                    $year = $( '#custom-year' ).html( cal.getYear() );

                $( '#custom-next' ).on( 'click', function() {
                    cal.gotoNextMonth( updateMonthYear );
                } );
                $( '#custom-prev' ).on( 'click', function() {
                    cal.gotoPreviousMonth( updateMonthYear );
                } );

                function updateMonthYear() {					
                    $month.html( cal.getMonthName() );
                    $year.html( cal.getYear() );

					getMonthData(getUnixTime(cal.getYear(), cal.getMonth(), 1));
                }

				function getUnixTime(year, month, day){
					var d = new Date();
					d.setFullYear(year, month-1, day);
					return Math.round(d.getTime()/1000);
				}

				function getToDay(){
					return d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
				}

                function logFeed( data ) {              
                    console.log(data);
                }	
				
				getMonthData({{.toMonth}}, function(){
					$('#day-' + {{.toDay}}).click();
				});

				$('#settingClick').click(function(){
					$('.settingForm').form('clear');
					$('#settingModal').modal('show');
				});

            });
        </script>

    </body>
</html>
