$(document).ready(function(){
	$("#add_student").on("click", function() {
		bootbox.prompt("請輸入學生的完整姓名", function(name) {
			if (name != null) {
				$.ajax({
					url: "/children",
					type: "POST",
					dataType: "json",
					data: { name: name },
					success: function(res) {
						if (res.status == "success") {
							bootbox.alert("已經成功將學生關聯到帳號",function() {
								if ($.inArray(res.child_id, child_ids)) {
									child_ids.push(res.child_id);
									Profile.load_children();
								}
							});
						} else {
							bootbox.alert("目前無法將學生關聯到帳號，請來電(02)2345-8832，讓我們提供更多協助");
						}
					},
					error: function(xhr, err) {
						bootbox.alert("目前無法將學生關聯到帳號，請來電(02)2345-8832，讓我們提供更多協助");
					}
				});
			}
		});
	});
});

var Profile = {};

Profile.load_children = function () {
	$.ajax({
		type: "GET",
		url: "/profile/json/" + child_ids.join("|"),
		success: function(res) {
			html = '';
			for (var j = 0; j < res.photos.length; j++) {
				p = res.photos[j];
				photos[p.id] = p;
				item_html = Profile.get_line_html(p);
				html += item_html;
			}
			Profile.set_isotope_handlers(html);
			$("#profile_filter").show();

		}
	}); //ajax
} //load_children


Profile.load_course = function () {
	$.ajax({
		type: "GET",
		url: "/gallery/course/json/" + course_id,
		success: function(res) {
			html = '';
			for (var j = 0; j < res.photos.length; j++) {
				p = res.photos[j];
				photos[p.id] = p;
				item_html = Profile.get_line_html(p);
				html += item_html;
			}
			Profile.set_isotope_handlers(html);
			$("#profile_filter").show();

		}
	}); //ajax
} //load_course

Profile.load_event = function () {
	$.ajax({
		type: "GET",
		url: "/gallery/event/json/" + event_id,
		success: function(res) {
			html = '';
			for (var j = 0; j < res.photos.length; j++) {
				p = res.photos[j];
				photos[p.id] = p;
				item_html = Profile.get_line_html(p);
				html += item_html;
			}
			
			Profile.set_isotope_handlers(html);
			$("#profile_filter").show();

		}
	}); //ajax
} //load_event

Profile.load_public = function() {
	$.ajax({
		type: "GET",
		url: "/gallery/json",
		success: function(res) {
			html = '';
			for (var j = 0; j < res.photos.length; j++) {
				p = res.photos[j];
				photos[p.id] = p;
				item_html = Profile.get_line_html(p);
				html += item_html;
			}
			
			Profile.set_isotope_handlers(html);
			$("#public_filter").show();			
			$('#gallery').isotope({
				filter: "*"
			});
			$(".desc.icon-comment-alt").hide();
		}
	}); //ajax
}

Profile.get_line_html = function(photo) {
	var line = "";
	if (photo.title=="None") photo.title = '';
	photo.has_title = (photo.title && photo.title != '');
	photo.has_description = (photo.description && photo.description != '');
	var type = ((photo.is_photo) ? " photo" : " video");
	var latest = ((photo.latest) ? " latest" : "");
	var featured = ((photo.has_title && photo.has_description) ? " featured" : "");
	var extra = ((photo.extra) ? " "+photo.extra : "");

	line += '<div class="gallery_item' + featured + type + latest + extra + '" id="'+photo.id+'">';

	if (photo.has_title) {
		line += '<a href="'+photo.url+'" title="'+photo.title+'">';
	} else {
		line += '<a href="'+photo.url+'">';
	}
	if (photo.is_photo == false) line += '<div class="play"></div>';
	
	line += '<img src="'+photo.thumb_url+'">';

	if  (photo.has_title || photo.has_description) {
		line += '<div class="ellipsis title"><span>';
		if (photo.has_description) line += '<i class="desc icon-comment-alt" title="'+photo.description+'"></i>';
		if (photo.has_title) line += photo.title;
		line += '</span></div>'
	}
	line += '</a></div>';	
	return line;

};

Profile.set_isotope_handlers = function(html) {
	var $container = $('#gallery');	
	$container.html(html);
	
	var columnWidth = 200;
	if ($container.width() > 1000) columnWidth = $container.width() / 5;
	else if ($container.width() > 800) columnWidth = $container.width() / 4;
	else if ($container.width() > 600) columnWidth = $container.width() / 3;
	else columnWidth = $container.width() / 2;

	$container.isotope({
		// options
		isAnimated: false,
		itemSelector : '.gallery_item',
		layoutMode : 'masonry',
		//filter: '.latest',		
		resizable: true, // disable normal resizing
		resizesContainer: true,
		animationEngine: 'best-available',
		masonry: {
			columnWidth: columnWidth
		}
	});
	
	
	$container.infinitescroll({
		navSelector: '#page_nav',    // selector for the paged navigation 
		nextSelector: '#page_nav a',  // selector for the NEXT link (to page 2)
		itemSelector: '.gallery_item',     // selector for all items you'll retrieve		
		debug: false,
		loading: {
			msgText: '載入更多過去課程的照片 more images...',
            finishedMsg: '沒有照片可以載入了...',
            img: '/assets/images/loader.gif'
        }
		},
		function( newElements ) {
			var $newElements =  $(newElements);
			$container.imagesLoaded(function(){
				//$container.html('');
                $container.isotope('appended', $newElements, function(){console.log('Appended');});
				var selector = $(".sort a.active").attr('data-filter');						
				$container.isotope({ filter: selector });									
            });			
		}		
	);
	
  
	$('.sort a').click(function() {
		$(".gallery_item.large").removeClass("large");
		$(".sort a.active").removeClass("active");
		$(this).addClass("active");
		var selector = $(this).attr('data-filter');
		$container.isotope({ filter: selector });
		return false;
	});

	$(".gallery_item").on("click", function(e) {
		if (!$(this).hasClass("large") && $("body").width() >= 767) {
			// restore original size
			var old_img = $(".gallery_item.large").find("img");
			old_img.css({ "width": old_img.attr("w"), "height": old_img.attr("h") });
			$(".gallery_item.large").removeClass("large");
			
			// double clicked item
			var img = $(this).find("img");
			var w = $(this).width();
			var h = $(this).height();
			var target_w = w * (252 / h);
			var target_h = 252;
			if (target_w > $("#gallery").width()) {
				target_w = $("#gallery").width();
				target_h = h * (target_w / w);
			}
			
			img.attr("w", w).attr("h", h).animate({"width": target_w, "height": target_h}, 300, function() {
				$container.isotope("reLayout");
			});
			$(this).addClass("large");
		} else {
			var link = $(this).find("a").attr("href");
			if (link && link != "") window.open(link);
		}
		e.preventDefault();
		e.stopPropagation();
	});
	
	$("#filter").on("click", function() {
		$("#option").show();
	});
	
	//Profile.FixImgWidth();
}

Profile.fixCount = 0;
Profile.FixImgWidth = function () {
	Profile.fixCount++;
	var gotWidth = false;
	
	var w = $(".gallery_item img:first").width();
	if (w > 60) gotWidth = true;
	
	if (gotWidth || Profile.fixCount > 5) {
		
		$(".gallery_item").each(function() {
			var h = $(this).height();
			$(this).find("img").css({"height": h, "width" : "auto"});
		});
		$("#gallery").isotope("reLayout");
	} else {
		var r = Profile.fixCount*200;		
		setTimeout(Profile.FixImgWidth, r);
		return;
	}
}