<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
   	<script>
	
		$(document).ready(function(){
			// Fading
			$(".galleryx-window").hide().fadeIn(300);
			
			// NO SCROLLBAR
			$(".galleryx-content").css("width", "600px");
			
			// CLICK OUTSIDE
			$(".graybg").click(function(){
				$(".galleryx-window").fadeOut(250, function(){$(this).remove();});
				$(this).remove();
			});
			
			function bindChangeEvent(){
				// UNBIND PREVIOUS EVENT IN DOM
				$(".galleryx-image").unbind("dblclick");
				
				// SET NEW EVENT
				$(".galleryx-image").dblclick(function(){
					var command = $(".galleryx-window").attr("binder");
					var avatarLink = $(this).attr("src");
					if (command == "avatar") {
						$.ajax({
							type: "POST",
							url: "changeAvatarX",
							data: "avatar=" + avatarLink,
							success: function(){
								//
							}
						});
					} else {
						$.ajax({
							type: "POST",
							url: "changeCoverX",
							data: "cover=" + avatarLink,
							success: function(){
								//
							}
						});
					}
					$(this).parent().append('<div class="galleryx-process"><img src="images/loading-large.gif"/></div>');
					$(".galleryx-window").delay(800).fadeOut(250, function(){
						if (command == "avatar") {
							$(".headerTinymanPhoto").attr("src", avatarLink).hide().fadeIn();
							$("#my-avatarX-x").attr("src", avatarLink).hide().fadeIn();
						} else {
							$("#my-coverX-x").css("background-image", "url('" + avatarLink + "')").hide().fadeIn();
						}
						$(this).remove();
					});
					$(".graybg").remove();
				});
			}

			
			// LOAD IMAGES
			function loadImages(offset){
				$.ajax({
					type: "POST",
					url: "getMyImagesX",
					data: "offset=" + offset,
					success: function(res){
						var data = $.parseJSON(res);
						if (data.length == 0) $(".galleryx-content").append('<div class="galleryx-empty">Không tìm thấy hình ảnh nào trong album</div>');
						else if (data.length == 16) {
							for (var i = (data.length - 1); i >= 1; i--){
								appendImage(data[i]);
							}
							$(".galleryx-wrapper").append('<div offset = "' + (parseInt(data[0]) + 1) + '" class="galleryx-seemore">Xem thêm ▼</div>');
							bindChangeEvent();
							getMoreImages();
						} else {
							for (var i = (data.length - 1); i >= 0; i--){
								appendImage(data[i]);
							}
							bindChangeEvent();
							$(".galleryx-seemore").remove();
						}
					}
				});
			}
			
			// GET MORE IMAGES
			function getMoreImages(){
				// UNBIND PREVIOUS EVENT IN DOM
				$(".galleryx-seemore").unbind("click");
				
				// SET NEW EVENT
				$(".galleryx-seemore").click(function(){
	
					if ($(".galleryx-wrapper .jspScrollable").length == 0)
						setupScrollBar();
					
					// REMOVE PREVIOUS TRIGGER
					$(".galleryx-seemore").remove();
					
					// LOAD IMAGES
					loadImages($(this).attr("offset"));
				});
			}

			// LOAD INITIAL
			loadImages(0);
			
			//Scroll bar
			var jSP = null;
			function setupScrollBar(){
				var elem = $(".galleryx-content").jScrollPane({
					hideFocus: true,
					animateScroll: true,
					'showArrows': false
				});
				var api = elem.data('jsp');
				jSP = api;
				api.scrollToBottom();
				
				// ĐẶT EVENT CHO SCROLLBAR
				//$(".jspDrag").hide();
				$(".jspScrollable").mouseenter(function(){
					$(this).find(".jspDrag").stop(true, true).fadeIn("slow");
				});
				
				$(".jspScrollable").mouseleave(function(){
					$(this).find(".jspDrag").stop(true, true).fadeOut("slow");
				});
			}
			
			function appendImage(link){
				var html = '<div class="galleryx-images"><img class="galleryx-image" src="' + link + '"/></div>';
				if ($(".galleryx-wrapper .jspScrollable").length == 0)
					$(".galleryx-content").append(html);
				else {
					jSP.getContentPane().append(html);
					jSP.reinitialise();
					jSP.scrollToBottom();
				}
			}
		});
	</script>

	<div class="graybg"></div>
	
	<div class="galleryx-window">
		<div class="galleryx-wrapper">
			<div class="galleryx-title">Thay Đổi Ảnh Đại Diện</div>
			<div class="galleryx-content">
				<!-- <div class="galleryx-images"><img class="galleryx-image" src="images/member/30.jpg"/></div> -->
				<!-- <div class="galleryx-empty">Không tìm thấy hình ảnh nào trong album</div> -->
			</div>
			<!-- <div class="galleryx-seemore">Xem thêm ▼</div> -->
		</div>
	</div>