<script>
	function updatePhotobank() {
		$('#photo').val('');
		$('#caption').val('');
		$.getJSON("/json/getmyartphotos", function (data) {
			$('#photobank').html('');
			$.each(data, function (key, val) {
				$("<img/> ", {
					"class": "my-new-list",
					src: '/photos/articles/small/' + val.name,
					title: 'img #'+val.id+' :: '+val.caption,
					photoId: val.id
				}).appendTo('#photobank');
			});

			$("#photobank img").on("click", function () {
				articleText = document.getElementById('articleText');
				imgText = '\n[img|#'+$(this).attr('photoid')+']\n';
				insertAtCursor(articleText, imgText);
			});
		});
	}

function insertAtCursor(myField, myValue) {
    //IE support
    if (document.selection) {
        myField.focus();
        sel = document.selection.createRange();
        sel.text = myValue;
    }
    //MOZILLA and others
    else if (myField.selectionStart || myField.selectionStart == '0') {
        var startPos = myField.selectionStart;
        var endPos = myField.selectionEnd;
        myField.value = myField.value.substring(0, startPos)
            + myValue
            + myField.value.substring(endPos, myField.value.length);
    } else {
        myField.value += myValue;
    }
}
</script>
<div id="pageSmoothBackground" style="background-image: url(<?= $randomPoint->getImg('middle') ?>);"></div>

<div class="container" style="background-color: rgba(255,255,255, 0.8);margin-top: -10px;padding-bottom: 30px;">
	<div class="row">
		<div class="col-md-12">
			<h1 style="text-align: right;">Редактирование статьи</h1>
			<div class="coords-container">
				Вернуться: <a href="/articles">к списку статей</a> / <a href="/">на карту</a>.
			</div>
			<div style="text-align: justify;">
				<form method="POST" action="/articles/save">
					<input type="hidden" name="id" value="<?= $article->id ?>" />

					<div class="form-group">
						<label for="articleTitle">Название статьи</label>
						<input type="text" name="title" id="articleTitle" class="form-control" value="<?= $article->title ?>" placeholder="" />
					</div>

					<div class="form-group">
						<label for="articleText">Текст статьи</label>
						<textarea name="text" id="articleText" class="form-control" rows="10"><?= $article->text ?></textarea>
						<i>*текст*</i> <b>**текст**</b> <b><i>***текст***</i></b> <a href="#">http://ссылка.ру</a> # заголвок1 ## заголовк2 ### заголовк3 [#512|ссылка на точку 512]
					</div>

					<div class="checkbox">
						<label>
							<input type="checkbox" name="allowComments" id="articleComments" <?= $article->allowComments ? 'checked' : '' ?> />Разрешить комментарии
						</label>
					</div>

					<button type="submit" class="btn btn-default">Сохранить</button>
				</form>
			</div>
		</div>
		<div class="col-md-12" style="margin: 20px 0; border-top: solid 1px #bbb; border-bottom: solid 1px #bbb;">
			<form enctype="multipart/form-data" id="articlePhotoloader" action="/images/loadPhoto" method="POST" name="loadavatar" target="hiddenframe"  class="form-inline">
				<input type="hidden" name="MAX_FILE_SIZE" value="2097152" />
				<div class="form-group">
					<label for="photo">Загрузить новое изображение</label>
					<input id="photo" name="photo" type="file" class="form-control" />
				</div>
				<div class="form-group">
					<input id="caption" name="caption" type="text" class="form-control" placeholder="Описание (по желанию)" />
				</div>
				<div class="form-group">
					<button type="submit" class="btn btn-sm btn-default">Загрузить на сервер</button>
				</div>
			</form>
		</div>
		<div class="col-md-12" id="photobank"></div>
		<iframe id=hiddenframe name="hiddenframe" style="width:0px; height:0px; border:0px" onload="updatePhotobank()"></iframe>
	</div>
</div>
