{% extends "base.html" %}

<!-- Navbar Button -->
{% block topNavbar %}
<li>
    <a class="nav-link" href="/">Home</a>
</li>
<li>
    <a class="nav-link" href="/faststyle">Faststyle</a>
</li>
<li>
    <a class="nav-link" href="/styleswap">Styleswap</a>
</li>
<li>
    <a class="nav-link to-top activate" href="#">Maskstyle</a>
</li>
<li>
    <a class="nav-link" href="/about">About</a>
</li>
{% endblock topNavbar %}

{% block modal %}
<div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="infoModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="infoModalLabel">Woops!</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      	<p class="h4" id="infoModalText">Something goes wrong.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Ok</button>
      </div>
    </div>
  </div>
</div>
{% endblock modal %}


{% block header %}
<!-- Title Content -->
<header>
	<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
		<ol class="carousel-indicators">
			<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
			<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
			<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
		</ol>
		<div class="carousel-inner" role="listbox">
			<!-- Slide One - Set the background image for this slide in the line below -->
			<div class="carousel-item active" style="background-image: url('./static/img/landing/maskstyle_car.jpg')">
				<div class="carousel-caption d-none d-md-block">
					<h3>Car & 神奈川沖浪裏 & Udnie</h3>
					<p>Photo searched from internet.</p>
				</div>
			</div>
			<!-- Slide Two - Set the background image for this slide in the line below -->
			<div class="carousel-item" style="background-image: url('./static/img/landing/maskstyle_mi5.jpg')">
				<div class="carousel-caption d-none d-md-block">
					<h3>MI5 & La muse & Udnie</h3>
					<p>Photo searched from internet.</p>
				</div>
			</div>
			<!-- Slide Three - Set the background image for this slide in the line below -->
			<div class="carousel-item" style="background-image: url('./static/img/landing/maskstyle_sheep.jpg')">
				<div class="carousel-caption d-none d-md-block">
					<h3>Sheeps & 清明上河圖 & Des glaneuses</h3>
					<p>Photo searched from internet.</p>
				</div>
			</div>
		</div>
		<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
			<span class="carousel-control-prev-icon" aria-hidden="true"></span>
			<span class="sr-only">Previous</span>
		</a>
		<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
			<span class="carousel-control-next-icon" aria-hidden="true"></span>
			<span class="sr-only">Next</span>
		</a>
	</div>
</header>
{% endblock header %}

{% block introduce %}
<!-- About -->
<section id="introduce" class="mt-5">
	<div class="container">
		<div class="row">
			<div class="col-md-12 text-center">
				<h2 class="section-heading text-uppercase">Mask Style</h2>
				<h3 class="section-subheading text-muted">Steps to create a special stylish image.</h3>
			</div>
		</div>
		<section>
		  <div class="container">
		    <div class="row align-items-center">
		      <div class="col-lg-6 order-lg-2">
		        <div class="p-5">
		          <img class="img-fluid rounded-circle" src="{{url_for('static', filename='img/introduce/ms_intro_content.jpg')}}" alt="Your image">
		        </div>
		      </div>
		      <div class="col-lg-6 order-lg-1">
		        <div class="p-5">
		          <h2>Step 1: Upload your image</h2>
		          <p class="h5">Upload a picture you would like to combine with the style.</p>
		        </div>
		      </div>
		    </div>
		  </div>
		</section>

		<section>
		  <div class="container">
		    <div class="row align-items-center">
		      <div class="col-lg-6">
		        <div class="p-5">
		          <img class="img-fluid rounded-circle" src="{{url_for('static', filename='img/introduce/ms_intro_style.jpg')}}" alt="Style image">
		        </div>
		      </div>
		      <div class="col-lg-6">
		        <div class="p-5">
		          <h2>Step 2: Choose two styles</h2>
		          <p class="h5">Choose two styles you prefer. One will be apply to the object, and the other will be apply to the background.</p>
		        </div>
		      </div>
		    </div>
		  </div>
		</section>

		<section>
		  <div class="container">
		    <div class="row align-items-center">
		      <div class="col-lg-6 order-lg-2">
		        <div class="p-5">
		          <img class="img-fluid rounded-circle" src="{{url_for('static', filename='img/introduce/ms_intro_result.jpg')}}" alt="Result image">
		        </div>
		      </div>
		      <div class="col-lg-6 order-lg-1">
		        <div class="p-5">
		          <h2>Step 3: Press GO!</h2>
		          <p class="h5">As you submit, our model will combine the stylish image for you. In the case that model did not recognize anything, the result will be same as the output using fast style.</p>
		        </div>
		      </div>
		    </div>
		  </div>
		</section>
	</div>
</section>
{% endblock introduce %}

<!-- Page Content -->
{% block main %}
<HR class="mt-3">
<div class="container mt-5">
	<div class="row">
		<div class="col-md-12 text-center">
			<h2 class="section-heading text-uppercase">Create your own!</h2>
		</div>
	</div>
</div>
<main class="container mt-3">
	<div class="mt-3 row">
		<!--  Form upload section -->
		<div class="col-md-6 mt-3 mx-auto">
			<div class="text-center mb-3">
				<h4 class="text-muted">Upload your image</h4>
			</div>
			<div class="card card-default">
				<div class="card-header">Image</div>
				<form action="javascript:;" class="file-loading" id="image-submit" onsubmit="return makeForm(this);" method=post enctype=multipart/form-data>
					<input name="file" type="file" id="img-input" data-show-preview="true" data-preview-file-type="text" multiple>
				</form>
			</div>
		</div>
	</div>
	<!-- Style image section -->
	<div class="mt-5 row">
		<!-- Foreground style -->
		<section class="style-image-section col-md-6">
			<h4 class="text-muted text-center mb-3">Choose foreground style</h4>
			<div class="card card-default">
				<div class="card-header">Styles</div>
				<div class="container-fluid card-body" style="max-height: 450px;overflow-y: scroll;">
					<div class="row mt-2">
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="mosaic" class="img-item">
								<img class="img-fluid img-thumbnail fore-style-image m-1" src="{{url_for('static', filename='img/styles/mosaic.jpg')}}" alt="Mosaic">
							</div>
						</div>
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="udnie" class="img-item">
								<img class="img-fluid img-thumbnail fore-style-image m-1" src="{{url_for('static', filename='img/styles/udnie.jpg')}}" alt="Udnie">
							</div>
						</div>
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="la_muse" class="img-item">
								<img class="img-fluid img-thumbnail fore-style-image m-1" src="{{url_for('static', filename='img/styles/la_muse.jpg')}}" alt="La_muse">
							</div>
						</div>
					</div>
					<div class="row mt-2">
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="chinese" class="img-item">
								<img class="img-fluid img-thumbnail fore-style-image m-1" src="{{url_for('static', filename='img/styles/chinese.jpg')}}" alt="Chinese">
							</div>
						</div>
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="mountain_water" class="img-item">
								<img class="img-fluid img-thumbnail fore-style-image m-1" src="{{url_for('static', filename='img/styles/mountain_water.jpg')}}" alt="MountainWater">
							</div>
						</div>
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="zhangdachien" class="img-item">
								<img class="img-fluid img-thumbnail fore-style-image m-1" src="{{url_for('static', filename='img/styles/zhangdachien.jpg')}}" alt="Zhangdachien">
							</div>
						</div>    
					</div>

					<div class="row mt-2">
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="des_glaneuses" class="img-item">
								<img class="img-fluid img-thumbnail fore-style-image m-1" src="{{url_for('static', filename='img/styles/des_glaneuses.jpg')}}" alt="Des_glaneuses">
							</div>
						</div>
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="wave_crop" class="img-item">
								<img class="img-fluid img-thumbnail fore-style-image m-1" src="{{url_for('static', filename='img/styles/wave_crop.jpg')}}" alt="Wave_crop">
							</div>
						</div>
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="starry_night" class="img-item">
								<img class="img-fluid img-thumbnail fore-style-image m-1" src="{{url_for('static', filename='img/styles/starry_night.jpg')}}" alt="Starry_night">
							</div>
						</div>
					</div>
					<div class="row mt-2">
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="monalisa" class="img-item">
								<img class="img-fluid img-thumbnail fore-style-image m-1" src="{{url_for('static', filename='img/styles/monalisa.jpg')}}" alt="Monalisa">
							</div>
						</div>
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="picassoself" class="img-item">
								<img class="img-fluid img-thumbnail fore-style-image m-1" src="{{url_for('static', filename='img/styles/picassoself.jpg')}}" alt="Picassoself">
							</div>
						</div>
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="jingdo" class="img-item">
								<img class="img-fluid img-thumbnail fore-style-image m-1" src="{{url_for('static', filename='img/styles/jingdo.jpg')}}" alt="Jingdo">
							</div>
						</div>
					</div>
					<div class="row mt-2">
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="aurora" class="img-item">
								<img class="img-fluid img-thumbnail fore-style-image m-1" src="{{url_for('static', filename='img/styles/aurora.jpg')}}" alt="Aurora">
							</div>
						</div>
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="colorful" class="img-item">
								<img class="img-fluid img-thumbnail fore-style-image m-1" src="{{url_for('static', filename='img/styles/colorful.jpg')}}" alt="Colorful">
							</div>
						</div>
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="crystal" class="img-item">
								<img class="img-fluid img-thumbnail fore-style-image m-1" src="{{url_for('static', filename='img/styles/crystal.jpg')}}" alt="Crystal">
							</div>
						</div>
					</div>
					<div class="row mt-2">
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="fire" class="img-item">
								<img class="img-fluid img-thumbnail fore-style-image m-1" src="{{url_for('static', filename='img/styles/fire.jpg')}}" alt="Fire">
							</div>
						</div>
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="tiger" class="img-item">
								<img class="img-fluid img-thumbnail fore-style-image m-1" src="{{url_for('static', filename='img/styles/tiger.jpg')}}" alt="Tiger">
							</div>
						</div>
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="ybfire" class="img-item">
								<img class="img-fluid img-thumbnail fore-style-image m-1" src="{{url_for('static', filename='img/styles/ybfire.jpg')}}" alt="Ybfire">
							</div>
						</div>
					</div>
					<div class="row mt-2">
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="sky" class="img-item">
								<img class="img-fluid img-thumbnail fore-style-image m-1" src="{{url_for('static', filename='img/styles/sky.jpg')}}" alt="Sky">
							</div>
						</div>
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="water" class="img-item">
								<img class="img-fluid img-thumbnail fore-style-image m-1" src="{{url_for('static', filename='img/styles/water.jpg')}}" alt="Water">
							</div>
						</div>
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="chingmin" class="img-item">
								<img class="img-fluid img-thumbnail fore-style-image m-1" src="{{url_for('static', filename='img/styles/chingmin.jpg')}}" alt="Chingmin">
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row mt-3">
				<div class="col-md-12 text-center">
					<h4 class="text-muted" id="fore-selected-style">Foreground: </h4>
				</div>
			</div>
		</section>
		<!-- Background style -->
		<section class="style-image-section col-md-6">
			<h4 class="text-muted text-center mb-3">Choose background style</h4>
			<div class="card card-default">
				<div class="card-header">Styles</div>
				<div class="container-fluid card-body" style="max-height: 450px;overflow-y: scroll;">
					<div class="row mt-2">
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="mosaic" class="img-item">
								<img class="img-fluid img-thumbnail back-style-image m-1" src="{{url_for('static', filename='img/styles/mosaic.jpg')}}" alt="Mosaic">
							</div>
						</div>
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="udnie" class="img-item">
								<img class="img-fluid img-thumbnail back-style-image m-1" src="{{url_for('static', filename='img/styles/udnie.jpg')}}" alt="Udnie">
							</div>
						</div>
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="la_muse" class="img-item">
								<img class="img-fluid img-thumbnail back-style-image m-1" src="{{url_for('static', filename='img/styles/la_muse.jpg')}}" alt="La_muse">
							</div>
						</div>
					</div>
					<div class="row mt-2">
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="chinese" class="img-item">
								<img class="img-fluid img-thumbnail back-style-image m-1" src="{{url_for('static', filename='img/styles/chinese.jpg')}}" alt="Chinese">
							</div>
						</div>
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="mountain_water" class="img-item">
								<img class="img-fluid img-thumbnail back-style-image m-1" src="{{url_for('static', filename='img/styles/mountain_water.jpg')}}" alt="MountainWater">
							</div>
						</div>
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="zhangdachien" class="img-item">
								<img class="img-fluid img-thumbnail back-style-image m-1" src="{{url_for('static', filename='img/styles/zhangdachien.jpg')}}" alt="Zhangdachien">
							</div>
						</div>    
					</div>

					<div class="row mt-2">
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="des_glaneuses" class="img-item">
								<img class="img-fluid img-thumbnail back-style-image m-1" src="{{url_for('static', filename='img/styles/des_glaneuses.jpg')}}" alt="Des_glaneuses">
							</div>
						</div>
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="wave_crop" class="img-item">
								<img class="img-fluid img-thumbnail back-style-image m-1" src="{{url_for('static', filename='img/styles/wave_crop.jpg')}}" alt="Wave_crop">
							</div>
						</div>
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="starry_night" class="img-item">
								<img class="img-fluid img-thumbnail back-style-image m-1" src="{{url_for('static', filename='img/styles/starry_night.jpg')}}" alt="Starry_night">
							</div>
						</div>
					</div>
					<div class="row mt-2">
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="monalisa" class="img-item">
								<img class="img-fluid img-thumbnail back-style-image m-1" src="{{url_for('static', filename='img/styles/monalisa.jpg')}}" alt="Monalisa">
							</div>
						</div>
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="picassoself" class="img-item">
								<img class="img-fluid img-thumbnail back-style-image m-1" src="{{url_for('static', filename='img/styles/picassoself.jpg')}}" alt="Picassoself">
							</div>
						</div>
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="jingdo" class="img-item">
								<img class="img-fluid img-thumbnail back-style-image m-1" src="{{url_for('static', filename='img/styles/jingdo.jpg')}}" alt="Jingdo">
							</div>
						</div>
					</div>
					<div class="row mt-2">
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="aurora" class="img-item">
								<img class="img-fluid img-thumbnail back-style-image m-1" src="{{url_for('static', filename='img/styles/aurora.jpg')}}" alt="Aurora">
							</div>
						</div>
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="colorful" class="img-item">
								<img class="img-fluid img-thumbnail back-style-image m-1" src="{{url_for('static', filename='img/styles/colorful.jpg')}}" alt="Colorful">
							</div>
						</div>
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="crystal" class="img-item">
								<img class="img-fluid img-thumbnail back-style-image m-1" src="{{url_for('static', filename='img/styles/crystal.jpg')}}" alt="Crystal">
							</div>
						</div>
					</div>
					<div class="row mt-2">
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="fire" class="img-item">
								<img class="img-fluid img-thumbnail back-style-image m-1" src="{{url_for('static', filename='img/styles/fire.jpg')}}" alt="Fire">
							</div>
						</div>
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="tiger" class="img-item">
								<img class="img-fluid img-thumbnail back-style-image m-1" src="{{url_for('static', filename='img/styles/tiger.jpg')}}" alt="Tiger">
							</div>
						</div>
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="ybfire" class="img-item">
								<img class="img-fluid img-thumbnail back-style-image m-1" src="{{url_for('static', filename='img/styles/ybfire.jpg')}}" alt="Ybfire">
							</div>
						</div>
					</div>
					<div class="row mt-2">
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="sky" class="img-item">
								<img class="img-fluid img-thumbnail back-style-image m-1" src="{{url_for('static', filename='img/styles/sky.jpg')}}" alt="Sky">
							</div>
						</div>
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="water" class="img-item">
								<img class="img-fluid img-thumbnail back-style-image m-1" src="{{url_for('static', filename='img/styles/water.jpg')}}" alt="Water">
							</div>
						</div>
						<div class="col-lg-4 col-md-4 col-sm-4">
							<div id="chingmin" class="img-item">
								<img class="img-fluid img-thumbnail back-style-image m-1" src="{{url_for('static', filename='img/styles/chingmin.jpg')}}" alt="Chingmin">
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="row mt-3">
				<div class="col-md-12 text-center">
					<h4 class="text-muted" id="back-selected-style">Background: </h4>
				</div>
			</div>
		</section>
	</div>
	<HR>
	<section class="container mt-3 text-center" id="color-adjusting">
		<div class="text-center mb-3">
			<h4 class="text-muted">Optional adjustment</h4>
		</div>
		<div class="radio">
			<div class="col-md-4 div-centered"> 
		  	<label><input type="radio" name="original-color" value="0" id="not-preserve-original" checked>None</label>
		  </div>
		</div>
		<div class="radio">
			<div class="col-md-4 div-centered"> 
		  	<label><input type="radio" name="original-color" value="1" id="preserve-color-radio">Preserve original color</label>
		  </div>
		</div>
		<div class="radio">
			<div class="col-md-4 div-centered"> 
			  	<label><input type="radio" name="original-color" value="2" id="blend-original-radio">Blend with original color</label>
			  	<div class="slidecontainer text-center d-none" id="blend-slider-container">
			  		<input type="range" min="0" max="100" value="50" class="slider" id="blend-ratio">
			  		<span>Ratio: <span id="blend-value-text">50</span>%</span>
			  	</div>
		  	</div>
		</div>
	</section>
	<div class="container mt-3">
		<div class="d-flex justify-content-center">
		  <div class="row">
		    <button type="submit" onclick="return makeForm(this);" id="img-upload" class="btn btn-primary mt-4">Go!</button>
		  </div>
		</div>
	</div>
</main>
<!--  Result section -->

<section class="result-section container mt-5 d-none">
	<div class="row">
		<div class="col-md-12 mb-5">
			<HR>
			<h4 class="text-muted text-center mt-5" id="result-state">Wait a minute</h4>
			<div class="loader text-center mt-5 mx-auto"></div>
			<img id="img-output" class="img-fluid d-none mx-auto" src="" alt="your image" />
		</div>        
	</div>
</section>

<!--  To top button -->
<a class="rounded to-top" id="scroll-to-top" href="#page-top">
	<i class="fa fa-angle-up"></i>
</a>
{% endblock main %}

{% block script %}

<script type="text/javascript">
	"use strict";
	var selectedForeground;
	var selectedBackground;
	var contentNotUploadedText = "Please upload a picture";
	var styleNotSelectedText = "Please select two styles";


	// Set the information text of modal and display it
	function showInfoModal(text) {
		var modal = $("#infoModal");
		modal.find('#infoModalText').text(text);
		modal.modal('show');
	}

	function makeForm(e) {
		// Prevent default form behavior
		event.preventDefault();
		// Check the file is not empty and a style has been selected
		if($("#img-input").fileinput('getFileStack')[0] != undefined && selectedForeground != undefined && selectedBackground != undefined) {
			var form = new FormData();
			var files = $("#img-input").fileinput('getFileStack');
			var colorAdjustingMode = $('input[type=radio][name=original-color]:checked').val();

			form.append("file", files[0]);
        	form.append("forestyle", selectedForeground);
        	form.append("backstyle", selectedBackground);
        	form.append("colorAdustingMode", colorAdjustingMode);
        	// Contain blend ratio
        	if(colorAdjustingMode == '2') {
        		var blendSlider = document.getElementById("blend-ratio");
        		var sliderValue = blendSlider.value;
        		if(sliderValue == null || sliderValue == undefined) {
        			sliderValue = 0
        		}
        		form.append("blendRatio", sliderValue);
        		console.log(sliderValue);
        	}

        	sendData(form);

			// Show the result section
			$(".result-section").toggleClass("d-none", false);
			$("#result-state").text("Wait a minute!");
			$(".loader").toggleClass("d-none", false);
			toggleOutputImage(false);
			// Scroll to the result section
			$('html, body').animate({
				scrollTop: $(".result-section").offset().top
			            }, 1000, //Millisecond
			            "easeInQuint");
		} else if(selectedForeground == undefined || selectedBackground != undefined) {
			showInfoModal(styleNotSelectedText);
		} else {
			showInfoModal(contentNotUploadedText);
		}
	}

	// Read the image user choosed to upload
	function readURL(input) {
		if (input.files && input.files[0]) {
			var reader = new FileReader();
			reader.onload = function(e) {
				$("#img-preview").css("visibility", "visible");
				$("#img-preview").attr("src", e.target.result);
			}
			reader.readAsDataURL(input.files[0]);
		}
	}

	// Submit form data
	function sendData(formdata) {
		$.ajax({
			url: "/maskstyle_upload_image",
			data: formdata,
			type: "POST",
			contentType: false,
			processData: false,
			async: true,
			cache: false,
			headers: { "cache-control": "no-cache" },
			success: function(response) {
				console.log('json return successful');
				console.log(typeof(response));
				var json_data = JSON.parse(response);
		        if (json_data["error"]) { // has error
		        	displayError(json_data["error"]);
		    	} else { // success
		    		setImage(JSON.parse(response));
		    	}
		    },
		    error: function(error) {
		    	console.log("fail");
		    	console.log(error);
		    	displayError("Fail");
		    	showInfoModal(error.responseText);
		    }
		});
	};

	// Set image while the request is success
	function displayError(data) {
		$(".loader").toggleClass("d-none", true);
		$("#result-state").text(data);
	}

	// Set image while the request is success
	function setImage(data) {
		$("#result-state").text("Success!");
		$(".loader").toggleClass("d-none", true);
		$("#img-output").attr("src","data:image/jpeg;base64," + data["image"]);
		$("#img-output").css("visibility", "visible");
		toggleOutputImage(true);
	}

	// Set image output display or not
	function toggleOutputImage(turnon) {
		if(turnon) {
			$("#img-output").toggleClass("d-block", true);
			$("#img-output").toggleClass("d-none", false);
		}
		else {
			$("#img-output").toggleClass("d-block", false);
			$("#img-output").toggleClass("d-none", true);
		}

	}

	var blendSlider = document.getElementById("blend-ratio");
	var blendSliderTextValue = document.getElementById("blend-value-text");
	blendSliderTextValue.innerHTML = blendSlider.value; // Display the default slider value

	// Update the current slider value (each time you drag the slider handle)
	blendSlider.oninput = function() {
	  blendSliderTextValue.innerHTML = this.value;
	}

	$("#img-input").fileinput({
		uploadUrl: '/dropzone_dummy',
		dropZoneEnabled: true,
		theme: "fa",
		autoReplace: true,
		showBrowse: true,
		showCaption: true,
		showRemove: true,
		showUpload: false,
		maxFileSize: 3072,
		browseOnZoneClick: true,
		allowedFileExtensions: ["jpg", "png", "gif", "jpeg", "tif", "tiff"],
		maxFileCount: 1,
		fileActionSettings: {
			showUpload: false,
			showZoom: false,
		}
	});
	// Load this part while the DOM is ready
	$(function() {
		// // Listen to the upload image button
		// $("#img-input").change(function() {
		// 	readURL(this);
		// });
		// // Clean the former selected image
		// $("#img-input").click(function() {
		// 	$("#img-preview").css("visibility", "hidden");
		// 	$("#img-input").prop("value", "");
		// 	$("#img-output").attr("src","");
		// 	toggleOutputImage(false);
		// 	$(".result-section").toggleClass("d-none", true);
		// });

		// Listen to the style image selected event


		$(".fore-style-image").click(function() {
			$(".fore-style-image").removeClass("item-onclick");
			$(this).addClass("item-onclick");
			var selectedId = $(this).parent(".img-item").attr('id');
			$("#fore-selected-style").text("Foreground: " + selectedId);
			selectedForeground = selectedId;
		});

		$(".back-style-image").click(function() {
			$(".back-style-image").removeClass("back-item-onclick");
			$(this).addClass("back-item-onclick");
			var selectedId = $(this).parent(".img-item").attr('id');
			$("#back-selected-style").text("Background: " + selectedId);
			selectedBackground = selectedId;
		});

		// To top button
		$(".to-top").click(function() {
			$('html, body').animate({
				scrollTop: $("#page-top").offset().top
			}, 1000, 
			"easeInOutExpo");
			return false;
		});

		$('input[type=radio][name=original-color]').change(function() {
		    switch(this.value) {
		      case '1':
		        $("#blend-slider-container").toggleClass("d-none", true);
		        break;
		      case '2':
		        $("#blend-slider-container").toggleClass("d-none", false);
		        break;
		      default:
		      	$("#blend-slider-container").toggleClass("d-none", true);
		      	break;
		    }
		});
		
	  	// Display the to top button
	  	$(document).scroll(function() {
	  		var scrollDistance = $(this).scrollTop();
	  		if (scrollDistance > 100) {
	  			$('#scroll-to-top').fadeIn();
	  		} else {
	  			$('#scroll-to-top').fadeOut();
	  		}
	  	});
	  }); 
	</script>
	{% endblock script %}