<!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" href="/static/css/semantic.min.css">
	<link rel="stylesheet" href="/static/css/util.css">
	<script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/semantic.min.js"></script>
	<title>日记 - 快乐的一天 - 记了</title>
  </head>
  <body>
    <div class="ui fluid container">
		<div class="wrap ui form  ">
		<div class="ui teal right ribbon label " style="left: calc(100% + 1.2em - 5px);top:100px; position: absolute;padding-left:8px;width:130px;z-index: 999;text-align:right;height:30px;" >
			<a  id="dayPicker" >{{.day}}</a>&nbsp;&nbsp;<a id="weatherPicker">{{if gt .info.WeatherIcon 0 }}<img class="ui image" height="18" style="display: inline;margin-top: -3px;opacity:1;" src="/static/img/weather/{{.info.WeatherIcon}}.png" >{{else}}<i class="help icon"  ></i>{{end}}</a>
		</div>

			<div class="head-toolbar ui fluid container" >
			
				<div id="editor_toolbar_box">
					<div id="editor_toolbar" class="ui three  column grid">
						<div  class="row " style="padding:5px 0;" >
							<div class="column computer only" ></div>
							<div class="column " style="width:70%;" >
								<select id="fontfamily" class="ui fluid secondary  dropdown"  style="height:30px;background-color: #121212;color: #888;width:100%" onchange="myeditor.execCommand('fontfamily',this.value)" >
									<option value="Lato">默认字体</option>
									<option value="宋体,simsun">宋体</option>
									<option value="楷体,楷体_gb2312,simkai">楷体</option>
									<option value="隶书,simli">隶书</option>
									<option value="黑体,simhei">黑体</option>
									<option value="微软雅黑,Microsoft Yahei">雅黑</option>
									<option value="andale mono,times">Andale mono</option>
									<option value="arial,helvetica,sans-serif">Arial</option>
									<option value="arial black,avant garde">Arial black</option>
									<option value="comic sans ms,sans-serif">Comic sans ms</option>
								</select>
							 </div>
							 
					  </div>

					  <div class="row" style="padding:0px 0 20px 0" >
						<div class="column computer only" ></div>
						<div class="column" style="width:90%;" >
								<div class="ui icon mini buttons">
								  <button id="bold" class="ui secondary  button" onclick="myeditor.execCommand('bold')" ><i class="bold icon"></i></button>
								  <button id="italic" class="ui button  secondary " onclick="myeditor.execCommand('italic')"><i class="italic icon"></i></button>
								  <button id="underline" class="ui button secondary  " onclick="myeditor.execCommand('underline')"><i class="underline icon"></i></button>
								</div>
							<!-- 
								<select id="fontsize" onchange="myeditor.execCommand('fontsize',this.value)" class="ui fluid secondary  dropdown"  style="height:30px;background-color: #4C4C4C;color: #fff;">
									<option value="10pt">10pt</option>
									<option value="11pt">11pt</option>
									<option value="12pt">12pt</option>
									<option value="14pt">14pt</option>
									<option value="16pt">16pt</option>
									<option value="18pt">18pt</option>
									<option value="20pt">20pt</option>
									<option value="22pt">22pt</option>
									<option value="24pt">24pt</option>
									<option value="36pt">36pt</option>
							  </select>
							  -->

							<div class="ui icon mini buttons" style="padding-left: 1rem;" >
							  <button  class="ui secondary  button" onclick="myeditor.execCommand('justifyleft')" ><i class="align left icon "></i></button>
							  <button class="ui button  secondary " onclick="myeditor.execCommand('justifycenter')"><i class="align center icon"></i></button>
							  <button  class="ui button secondary  " onclick="myeditor.execCommand('justifyright')"><i class="align right icon"></i></button>
							</div>
					
							<div class="ui icon mini buttons" style="padding-left: 1rem;"  >
							  <button  class="ui secondary  button" onclick="myeditor.execCommand('insertorderedlist')" ><i class="ordered list icon "></i></button>
							  <button class="ui button  secondary " onclick="myeditor.execCommand('insertunorderedlist')"><i class="unordered list icon"></i></button>
							</div>
					
								<div class="ui icon mini buttons " style="padding-left: 1rem;" >
								  <button id="reply" class="ui secondary  button" onclick="myeditor.execCommand('undo')" ><i class="reply icon"></i></button>
								  <button id="share" class="ui button  secondary " onclick="myeditor.execCommand('redo')"><i class="share icon"></i></button>
								</div>

								<div class="ui icon mini buttons " style="padding-left: 1rem;" >
								  <button class="ui secondary  button" id="smilePicker" ><i class="smile icon"></i></button>
								  <button class="ui secondary  button" onclick="myeditor.execCommand('removeformat')" ><i class="erase icon"></i></button>
								  <button class="ui secondary  button" onclick="myeditor.execCommand('source')" ><i class="code icon"></i></button>
								</div>

								
						</div>
					</div>
					   
					
				</div>
				<div id="editor_iframe_holder" ></div>
				</div>
			</div>
			<div class="body-input ui fluid container"  style="margin-left:0!important;margin-right:0!important;" >
				<div class="body-input-body">
					<div class="body-input-body-head" ></div>
					<div id="note" class="text" data-emojiable="true" ></div>
				</div>
			</div>
			<div class="btn-body " >
				<button class="btn-ok " hidefocus="true" id="postok"  ></button>
				<button class="btn-cancel " hidefocus="true" onclick="location.href='/'" ></button>
			</div>
			
		</div>

		<div class="msg-body"  style="display:none" 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>

	</div>

	<div id="noteOrg" style="display:none">{{str2html .info.Note}}</div>

	<div class="ui small modal" id="weatherModal" >
	  
	  <div class="image content">
		<div class="description" style="width: 100%;">
            <div class="ui mini images" id="weatherImgs" >
			 
			</div>
		</div>
	  </div>
          
	</div>


	<script src="/static/js/util.js"></script>
	<script src='/static/js/umeditor/umeditor.config.js'></script>
	<script src='/static/js/umeditor/umeditor.min.js'></script>
	<script>
		var id = '{{.info.NoteId}}';
		var weather_icon = '{{.info.WeatherIcon}}';
		function $G(id){
            return document.getElementById(id);
        }
		
		if (typeof String.repeat == 'undefined'){
			String.prototype.repeat = function(num) {
				var tmpArr = [];
				for ( var i = 0; i < num; i++)
					tmpArr.push(this);
				return tmpArr.join("");
			}
		}

		var myeditor = UM.getEditor('note', {
				toolbar:[ ],
				initialContent : $('#noteOrg').html(),
				focus: true
			});

        myeditor.addListener('selectionchange', function (){
            var cmdName = ['bold','italic', 'underline', 'reply', 'share'],
                fontName = ['fontfamily','fontsize'];

            var i =-1;
            while(i++ < cmdName.length-1){
                var state = myeditor.queryCommandState(cmdName[i]);
				$('#' + cmdName[i]).toggleClass(state == 1?"active":"");
            }
           
        });

		myeditor.addListener( 'ready', function( editor ) {
			 myeditor.execCommand( 'focus' ); 
			 $('.edui-container').css('position','relative');
			 			 
			 $G('note').onkeydown = function(){
				 if (event.keyCode == 9){
					myeditor.execCommand('inserthtml', "&nbsp;".repeat(4));
				 }
			 };

		 } );

        function execUnderline(cmd){
            myeditor.execCommand(cmd);
        }

		function postNote(){
			var postObj = $('#postok');
			postObj.click(function(){
				postObj.addClass('ui loading button');

				$.post('/', {
					id: id,
					day: $("#dayPicker").text(),
					weather_icon : weather_icon,
					note : myeditor.getContent()
				}, function(data){
					$('#postok').removeClass('ui loading button');
					tip(data.msg, data.code == 1);

					if (data.code == 1){
						id = data.data;
					}

				});
			});
		}

		$(function(){
			postNote();

			$('.pop').popup();

			$('.message .close')
			  .on('click', function() {
				$(this)
				  .closest('#tipBox')
				  .transition('fade')
				;
			});			

			initWeatherIcon();
		});

		setInterval(function(){
			html = myeditor.getContent();
			if (html == "<p>" + "&nbsp;".repeat(4) + "</p>"){
				return;
			}
			$.post('/', {
				id: id,
				day: $("#dayPicker").text(),
				weather_icon : weather_icon,
				note : myeditor.getContent()
			}, function(data){
				if (data.code == 1){
					id = data.data;
				}
			});
		}, 10000);
		
		function initWeatherIcon(){
			var str = '';
			for (var i=1;i<=18 ;i++ ){
				str += '<img class="ui image" src="/static/img/weather/' + i + '.png" icon="' + i + '" >';
			}
			$('#weatherImgs').html(str);
			$('#weatherImgs img').click(function(){
				var icon = $(this).attr("icon");
				if (icon > 0){
					weather_icon = icon;
				}
				
				$('#weatherPicker').html('<img class="ui image" height="18" style="display: inline;margin-top: -3px;opacity:1;" src="/static/img/weather/' + icon + '.png" >');
				$('#weatherModal').modal('hide');	
			});
		}

		$('#weatherPicker').click(function(){
			$('#weatherModal').modal('show');			
		});
		
	</script>

	<link href="/static/lib/css/nanoscroller.css" rel="stylesheet">
	<link href="/static/lib/css/emoji.css" rel="stylesheet">
	<script src="/static/lib/js/nanoscroller.min.js"></script>
	<script src="/static/lib/js/tether.min.js"></script>
	<script src="/static/lib/js/config.js"></script>
	<script src="/static/lib/js/util.js"></script>
	<script src="/static/lib/js/jquery.emojiarea.js"></script>
	<script src="/static/lib/js/emoji-picker.js"></script>

	<link rel="stylesheet" href="/static/css/pikaday.css" >
	<script src="/static/js/pikaday.js" ></script>

	<script>
	$(function() {
	  window.emojiPicker = new EmojiPicker({
		icon_id : '#smilePicker',
        emojiable_selector: '#note',
		assetsPath: '/static/lib/img/',
		insertCall: function(msg){
			myeditor.execCommand('inserthtml', 	msg.outerHTML );
		}
	  });
	  window.emojiPicker.discover();

	  var picker = new Pikaday({
			field: document.getElementById('dayPicker'),
			i18n: {
				previousMonth : '上月',
				nextMonth     : '下月',
				months        : ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
				weekdays      : ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
				weekdaysShort : ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
			},
			onSelect: function(s) {
				var day = s.getFullYear()  + '/' + (s.getMonth() +1) + '/' + s.getDate();
				$('#dayPicker').text(day);
			}
		});
		picker.setDate($('#dayPicker').text());
	});
	</script>


	
  </body>
</html>