<div class="block">
	<div class="block_head">
		Чат
	</div>
	<div id="chat">
		<form>
			<div id="drop_zone">
				<div id="chat_messages"></div>

				<div id="chat_sound_playes"></div>
				<input id="load_val" type="hidden" value="1" />
				<input id="last_mess" type="hidden" value="" />
				<input id="stop_sending" type="hidden" value="0">
				{if(isset($_SESSION['id']))}
				<div class="input-group mt-3">
					<div class="smile_input">
						<input id="message_input" type="text" class="form-control p-r-30" placeholder="Введите сообщение...">
						<div id="smile_btn" class="smile_btn" data-container="body" data-toggle="popover" data-placement="top" data-content="empty"></div>
					</div>
					<span class="input-group-btn">
						<input id="send_button" type="button" class="btn btn-default" value="Отправить" onclick="chat_send_message();"/>
					</span>
				</div>
				{/if}
			</div>
		</form>
	</div>
	<div id="passive" class="disp-n">
		<center>
			<img src="{site_host}templates/{template}/img/zzz.png">
			<p class="mt-10">Включен пассивный режим.</p>
			<p>Вы отсутствовали более чем <b></b> минут.</p>
		</center>
	</div>

	<script>
		$(document).ready( function(){
			var dropZone = $('#drop_zone'),
			maxFileSize = 2*1024*1024; //2мб макс размер
			drop_file = true; //false - выкл , true - вкл | загрузка изображений в чат

			if (typeof(window.FileReader) != 'undefined' && drop_file) {
				dropZone[0].ondragover = function(event) {
					dropZone.addClass('hover');
					return false;
				};

				dropZone[0].ondragleave = function() {
					dropZone.removeClass('hover');
					return false;
				};

				dropZone[0].ondrop = function(event) {
					event.preventDefault();
					dropZone.removeClass('hover');

					var file = event.dataTransfer.files[0];

					if (file.size > maxFileSize) {
						show_noty('Down', 'error', '<a>Файл слишком большой</a>', '3000');
						dropZone.addClass('error');
						setTimeout(function(){
							dropZone.removeClass('error');
						}, 1000);
						return false;
					}

					var data = new FormData;
					data.append("file", file);
					data.append("token", $('#token').val());
					data.append("drop_img", '1');
					data.append("phpaction", '1');

					clearInterval(chat_interval);
					NProgress.start();
					$.ajax({
						type: "POST",
						url: "../ajax/chat_actions.php",
						data: data,
						processData: false,
						contentType: false,
						dataType: "json",

						success: function(result) {
							NProgress.done();
							chat_get_messages(1);
							if(result.status == 1){
								setTimeout(show_ok, 500);
							} else {
								setTimeout(show_error, 500);
								show_noty('Down', 'error', '<a>'+result.data+'</a>', '3000');
								dropZone.addClass('error');
								setTimeout(function(){
									dropZone.removeClass('error');
								}, 1000);
							}
						}
					});
				};
			}
		});

		$('#smile_btn').popover({ html: true, animation: true, trigger: "click" });
		$('#smile_btn').on('show.bs.popover', function () {
			$(document).mouseup(function (e) {
				var container = $(".popover-content");
				if (container.has(e.target).length === 0){
					$('#smile_btn').popover('hide'); selected = 'gcms_smiles';
				}
			});
		});

		function set_sticker(elem){
			if($('#stop_sending').val() == 0){
				var text = "sticker"+$(elem).attr("src");
				text = encodeURIComponent(text);
				chat_send_message(text);
				$('#smile_btn').popover('hide'); selected = 'gcms_smiles';
			}
		}
		function set_smile(elem){
			$("#message_input").focus();
			var text = $("#message_input").val();
			var smile = $(elem).attr("title");
			$("#message_input").val(text+" "+smile+" ");
			$('#smile_btn').popover('hide'); selected = 'gcms_smiles';
		}

		$(document).ready(function (){
			get_smiles('#smile_btn');
			chat_first_messages();

			$('#message_input').keydown(function(event){
				if (event.which == 13 && !event.shiftKey){
					if($('#stop_sending').val() == 0){
						event.preventDefault();
						chat_send_message();
					}
				}
			});
		});

		var block = document.getElementById("chat_messages");
		var load_val = $('#load_val').val();
		block.onscroll = function() {
			if((block.scrollTop < 300) && (load_val == $('#load_val').val())) {
				$('#load_val').val(+load_val + 1);
				chat_load_messages();
			}
		}

		idleTimer = null;
		idleState = false;
		idleWait = 600000;
		$(document).ready( function(){
			$(document).bind('mousemove keydown scroll', function(){
				clearTimeout(idleTimer);
				if(idleState == true){ 
					reset_page();
				}

				idleState = false;
				idleTimer = setTimeout(function(){ 
					clearInterval(chat_interval);
					$("#chat").fadeOut();
					$("#passive").fadeIn();
					$("#passive b").append(idleWait/1000/60);
					idleState = true; 
				}, idleWait);
			});
			$("body").trigger("mousemove");
		});
	</script>
</div>