{% 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 to-top activate" href="#">Styleswap</a>
</li>
<li>
    <a class="nav-link" href="/maskstyle">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/styleswap_101.jpg')">
				<div class="carousel-caption d-none d-md-block">
					<h3>Taipei 101 & Chinese painting</h3>
					<p>Painting 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/styleswap_autumn.jpg')">
				<div class="carousel-caption d-none d-md-block">
					<h3>Blue Ridge Parkway & Water</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/styleswap_street.jpg')">
				<div class="carousel-caption d-none d-md-block">
					<h3>Street view & Composition X</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">Style Swap</h2>
				<h3 class="section-subheading text-muted">Steps to create a 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/ss_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/ss_intro_style.jpg')}}" alt="Style image">
		        </div>
		      </div>
		      <div class="col-lg-6">
		        <div class="p-5">
		          <h2>Step 2: Upload a style image</h2>
		          <p class="h5">In style swap method, you can upload any image you like.</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/ss_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. Typically, the image will be displayed on the bottom of the website in a minute.</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">
			<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>
		<!-- Style image section -->
		<div class="style-image-section col-md-6 mt-3">
			<div class="text-center mb-3">
				<h4 class="text-muted">Upload style image</h4>
			</div>
			<div class="card card-default">
				<div class="card-header">Styles</div>
				<form action="javascript:;" class="file-loading"  id="style-image-submit" onsubmit="return makeForm(this);" method=post enctype=multipart/form-data>
					<input name="file" type="file" id="style-img-input" data-show-preview="true" data-preview-file-type="text" multiple>
				</form>
			</div>
		</div>
		<HR>
	</div>
	<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 contentNotUploadedText = "Please upload a picture";
	var styleNotSelectedText = "Please select a style";


	// 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 && $("#style-img-input").fileinput('getFileStack') != undefined) {
			var form = new FormData();
			var files = $("#img-input").fileinput('getFileStack');
			var styles = $("#style-img-input").fileinput('getFileStack');
			var colorAdjustingMode = $('input[type=radio][name=original-color]:checked').val();

			form.append("file", files[0]);
        	form.append("style", styles[0]);
        	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($("#style-img-input").fileinput('getFileStack') == 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: "/styleswap_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,
		}
	});

	$("#style-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() {
		$('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;
		    }
		});

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

	  	// 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 %}