<link href="{site_host}templates/SquareLine/css/_small.css" rel="stylesheet">

<form>
	<div id="drop_zone">
		<div id="chat">
			<div id="messages" class="profile-messages">
				{messages}
			</div>
			<div class="form-input">
				<label for="text">Сообщение</label>
				<textarea id="text" rows="3"></textarea>
			</div>
			<div class="message-send">
				<i class="fa fa-smile-o" data-container="body" data-content="empty" data-placement="top" data-toggle="popover" id="msgsmile"></i>

				<div class="btn float-right" onclick="{func}('{id}')">Отправить</div>
			</div>
		</div>
	</div>
	<input id="load_val" name="load_val" type="hidden" value="1">
	<input id="last_mess" name="last_mess" type="hidden" value="{last_mess}">
	<input id="stop_sending" type="hidden" value="0">
</form>

<div id="passive" class="disp-n">
	<div class="bs-callout bs-callout-error bs-mini">
		<h4>Включен пассивный режим.</h4>
		<p>Вы отсутствовали более чем <b></b> минут.</p>
	</div>
</div>

<script>
	$(document).ready(function()
	{
		var dropZone = $('#drop_zone'),
			maxFileSize = 20000000;
			drop_file = true;

		if(drop_file && typeof(window.FileReader) != 'undefined') 
		{
			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');
				data.append('id', '{id}');

				NProgress.start();

				$.ajax({
					type: 'post',
					url: '../ajax/pm_actions.php',
					data: data,
					processData: false,
					contentType: false,
					dataType: 'json',
					success: function(result)
					{
						NProgress.done();

						get_messages(1,{id});

						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);
						}
					}
				});
			};
		}

		get_smiles('#msgsmile');

		$('[tooltip="yes"]').tooltip();

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

					{func}('{id}');
				}else
					return false;
			}
		});
	});

	$('#msgsmile').popover({html: true, animation: true, trigger: 'click'});
	$('#msgsmile').on('show.bs.popover', function()
	{
		$(document).mouseup(function(e)
		{
			var container = $('.popover-content');

			if(container.has(e.target).length === 0)
			{
				$('#msgsmile').popover('hide');

				selected = 'gcms_smiles';
			}
		});
	});

	function set_sticker(elem)
	{
		if($('#stop_sending').val() == 0)
		{
			{func}('{id}', encodeURIComponent('sticker'+$(elem).attr('src')));

			$('#msgsmile').popover('hide');
		}
	}

	function set_smile(elem)
	{
		$('#text').focus();

		var text = $('#text').val();
		var smile = $(elem).attr('title');

		$('#text').val(text+' '+smile+' ');
	}

	clearInterval(pm_interval);
	clearInterval(check_mess);

	<? if('{func}' == 'send_message') { ?>
		check_messages('none', 2);

		var check_mess = setInterval('check_messages({id}, 2)', 30000);
		var pm_interval = setInterval('get_messages(2,{id})', 5000);

		var block = document.getElementById("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);
				load_messages({id});
			}
		}

		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(pm_interval);
					$("#chat").fadeOut();
					$("#passive").fadeIn();
					$("#passive b").append(idleWait/1000/60);
					idleState = true; 
				}, idleWait);
			});
			$("body").trigger("mousemove");
		});
	<? } ?>
</script>