<%@page import="org.mynonglam.dao.AccountDAO"%>
<%@page import="org.mynonglam.entitys.Account"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String accountlogin = (String) session.getAttribute("accountinfo");
	Account acclogin = new AccountDAO().getAccountInfoByComment(accountlogin);
%>	
	<script>
	
		$(document).ready(function(){
			// Fading
			$(".profilex-imagesx-window").hide().fadeIn(300);
			
			$(".profilex-avatarx, .profilex-imagex-upload-trigger").click(function(){
				$("#profilex-imagex-input").click();
			});
			
			$("#profilex-imagex-input").change(function(){
				$(".profilex-avatarx-function span").remove();
				if ($(this).val().length > 0) {
					if(!/(\.bmp|\.gif|\.jpg|\.jpeg|\.png)$/i.test($(this).val())) {
						if ($(".profilex-avatarx-function").is(":hidden")) {
							$(".profilex-avatarx-upload-wrapper").hide().fadeIn(300);
							$(".profilex-avatarx-function").fadeIn(200);
						}
						$(".profilex-avatarx-function").children().hide();
						$(".profilex-avatarx-function").prepend('<span>* Định dạng tệp tin không hợp lệ !<br></span>').hide().fadeIn().delay(100).fadeOut().delay(50).fadeIn();
						$(this).val("");
					} else {
						if ($(".profilex-avatarx-function").is(":hidden")) {
							$(".profilex-avatarx-upload-wrapper").hide().fadeIn(300);
							$(".profilex-avatarx-function").fadeIn(600);
						}
						if ($(".profilex-imagesx-accept").is(":hidden"))
							$(".profilex-avatarx-function").children().fadeIn(600);
						upload();
					}
				}
			});
			
			// Upload
			function upload(){
				// Load biểu tượng
				$(".profilex-avatarx-process").empty().html("<img src='images/loading-large.gif'/>");
				
				var formData = new FormData();
				formData.append('file', $('#profilex-imagex-input')[0].files[0]);
			    $.ajax({
			    	url: 'UploadProfilePicture?filename=' + $('#profilex-imagex-input')[0].files[0].name,
			        type: 'POST',
			        xhr: function() {
			            myXhr = $.ajaxSettings.xhr();
			            if(myXhr.upload){
			                myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
			            }
			            return myXhr;
			        },
			        success: function(data, status, xhr) {
			        	$(".xChangBietDatTenGi").empty();
			        	$('<img style="width: 595px; height: auto;" class="profilex-avatarx-image" src="images/member/' + xhr.responseText +'"/>').load(function(){
			        		$(".profilex-avatarx-process").empty().html("Thay đổi...");
			        		$(".xChangBietDatTenGi").hide().fadeIn();
			        	}).appendTo(".xChangBietDatTenGi");
			        },
			        data: formData,
			        cache: false,
			        contentType: false,
			        processData: false
			    });
			}
			
			// Tính % kích thước đã đc upload, lấy link tải về
			function progressHandlingFunction(e){
		    	if(e.lengthComputable){
			    	var per = ((e.loaded / e.total) * 100) + "%";
			        if (per == "100%") {
			        	//
			        }
		   		}
			}
			
			// Lưu
			$(".profilex-imagesx-accept").click(function(){
				$.ajax({
					type: "POST",
					url: "changeCoverX",
					data: "cover=" + $(".profilex-avatarx-image").attr("src"),
					success: function(){
						$("#my-coverX-x").css("background-image", "url('" + $(".profilex-avatarx-image").attr("src") + "')").hide().fadeIn();
						$(".profilex-imagesx-cancel").trigger("click");
					}
				});
			});
			
			$(".graybg").click(function(){
				$(".profilex-imagesx-window").fadeOut(250, function(){$(this).remove();});
				$(this).remove();
			});
			
			$(".profilex-imagesx-window").on("click", ".profilex-imagesx-cancel", function(){
				$(".profilex-imagesx-window").fadeOut(250, function(){$(this).remove();});
				$(".graybg").remove();
			});
			
			// Load Gallery
			$(".profilex-imagesx-see-gallery").click(function(){
				$(".profilex-imagesx-cancel").trigger("click");
				$.post("gallery.jsp", function(data){
					$("body").append(data);
					$(".galleryx-window").attr("binder", "cover");
				});
			});
		});
	</script>

	<div class="graybg"></div>
	
	<div  class="profilex-imagesx-window" style="left: 20%;">
		<div class="profilex-imagesx-wrapper">
			<div class="profilex-imagesx-title">Thay Đổi Ảnh Đại Diện</div>
			<div style="width: 600px;" class="profilex-imagesx-content">
				<div style="width: 595px; height: 180px;" class="profilex-avatarx">
					<div class="xChangBietDatTenGi" style="border-radius: 6px; overflow: hidden;"><img style="width: 595px; height: auto;" class="profilex-avatarx-image" src="<%= acclogin.getCoverphoto() %>"/></div>
					<div style="top: 36%; padding: 10px 0 16px 0;" class="profilex-avatarx-process">Thay đổi...</div>
				</div>
				<div style="float: right; margin-right: 2px; margin-top: 12px; margin-bottom: 7px;" class="profilex-avatarx-upload-wrapper">
					<div style="border-radius: 8px; overflow: hidden; height: 28px;"><img class="profilex-imagex-upload-trigger" src="images/upload-profile-icon.png"/></div>
					<input id="profilex-imagex-input" type="file"/>
				</div>
				<div style="width: 220px; margin-left: 2px; margin-top: 14px;" class="profilex-avatarx-function">
					<input class="profilex-imagesx-accept" type="button" value="Thay đổi"/>
					<input class="profilex-imagesx-cancel" type="button" value="Hủy bỏ"/>
				</div>
			</div>
			
			<div class="profilex-imagesx-see-gallery">Dùng hình ảnh trong album ▼</div>
		</div>
	</div>