<?php
	use \app\models\PhotoFilter;
	$filter = new PhotoFilter();
	$f = $filter->findOne($news->id);
	if( !$f ){
		$f = new stdClass();
		$f->brightness = 100;
		$f->saturate = 100;
		$f->contrast = 100;
		$f->opacity = 0.5;
	}
?>
<style>
#fimgb{
	position: absolute;
	transition: .3s;
	opacity: 1;
	content: "";
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,<?=$f->opacity?>));
}
picture::after{
	background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0)) !important;
}
.meta {
	position: absolute;
	bottom: 0;
	left: 0;
	color: #fff;
	padding: 15px 30px;
}
div.picture-cont-16x9 {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	overflow: hidden;
}
</style>
<div class="modal" tabindex="-1" data-show="false" id="fphoto" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Фильтр фото для илюстраций с текстом</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
		<div class="input-group">
			<div class="news-item main mb-0" data-key="0" >
				<div class="picture-cont-16x9">
				<div class="ee">
					<picture class="w-100" id="fimg">
						<img src="<?=$imageSrc?>" id="photoexperement">
						<div id="fimgb"></div>
					</picture>
					</div>
				</div>
			<div class="meta">
				<h2 class="title"><a href="/news/rynok-razognalsya-pochemu-barnaulcy-massovo-skupayut-zhile-i-kogda-zakonchitsya-azhiotazh-529349">Рынок разогнался. Почему барнаульцы массово скупают жилье и когда закончится ажиотаж</a></h2>
				<div class="lead">Стоимость квартир в ближайшие месяцы может вырасти</div>            <div class="published_at">
					56 минут назад 09:05                                                                                <span class="commnets">&nbsp;<svg class="icon icon-comments"><use xlink:href="/svg/symbol/sprite-clear.svg#comments"></use></svg>3</span>
			</div>
		</div>
      </div>
      </div></div>
<div class="form-group mx-3">
    <label for="formControlRange">Осветление</label>
    <input type="range" class="form-control-range" id="formControlRange" name="PFilter[brightness]" min="10" max="200" value="<?=$f->brightness;?>" step="1" oninput="brightness(this)">
    <label for="formControlRange">Контрастность</label>
    <input type="range" class="form-control-range" id="formControlRange" name="PFilter[contrast]" min="10" max="200" value="<?=$f->contrast;?>" step="1" oninput="contrast(this)">
    <label for="formControlRange">Цветность</label>
    <input type="range" class="form-control-range" id="formControlRange" name="PFilter[saturate]" min="10" max="200" value="<?=$f->saturate;?>" step="1" oninput="saturate(this)">
    <label for="formControlRange">Затенение</label>
    <input type="range" class="form-control-range" id="formControlRange" name="PFilter[opacity]" min="0" max="0.9" value="<?=$f->opacity;?>" step="0.01" oninput="opacity(this)">
</div>
      <div class="modal-footer">
		<span class="btn btn-primary" onclick="$('#fphoto').modal('hide');">Применить<span>
      </div>
    </div>
  </div>
</div>

<script>
	// init
	if( typeof ext == 'undefined' ){
			ext = new Object();
			ext.brightness = <?=$f->brightness;?>;
			ext.saturate = <?=$f->saturate;?>;
			ext.contrast = <?=$f->contrast;?>;
			ext.opacity = <?=$f->opacity;?>;
	}
		filter = "saturate("+ext.saturate+"%)";
		filter += "brightness("+ext.brightness+"%)";
		filter += "contrast("+ext.contrast+"%)";
		$('#photoexperement').css( "filter", filter );
		$('#fimgb').css( "background", "linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,"+ext.opacity+"))"  );

	function brightness(e){
		ext.brightness = $(e).val();
		filter = "saturate("+ext.saturate+"%)";
		filter += "brightness("+ext.brightness+"%)";
		filter += "contrast("+ext.contrast+"%)";
		$('#photoexperement').css( "filter", filter );
	}
	function saturate(e){
		ext.saturate = $(e).val();
		filter = "saturate("+ext.saturate+"%)";
		filter += "brightness("+ext.brightness+"%)";
		filter += "contrast("+ext.contrast+"%)";
		$('#photoexperement').css( "filter", filter );
	}
	function contrast(e){
		ext.contrast = $(e).val();
		filter = "saturate("+ext.saturate+"%)";
		filter += "brightness("+ext.brightness+"%)";
		filter += "contrast("+ext.contrast+"%)";
		$('#photoexperement').css( "filter", filter );
	}
	function opacity(e){
		$('#fimgb').css( "background", "linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,"+$(e).val()+"))"  );

		ext.opacity = $(e).val();
	}
</script>
<?
if( $imageSrc='/img/e.gif' ){
?>
<script>
	$('#image').on('load', function(){
		$('#photoexperement').attr( 'src', $('#image').attr('src'));
	})
</script>
<?
}
