
var parentFolder1= "app";
var subFolder1 = "glass-of-water";
var currentIdx1 = 0;

var folder1 = parentFolder1+ "/" + subFolder1;

let images1 = [];
let width1 = 0;

var scenes = ["glass-of-water", "kitchen", "living-room2", "bookshelf", "dining-room"];
let spp_1 = 64;
for(let i = 0; i < scenes.length; i++) {
	images1.push([
		{"name": "Base", "url": "color_" + spp_1 +".png", "select": false},
		{"name": "L1", "url": "l1_" + spp_1 +".png", "select": false},
		{"name": "L2", "url": "l2_" + spp_1 +".png", "select": false},
		{"name": "GradNet", "url": "gradnet_" + spp_1 +".png", "select": false},
		{"name": "NGPT", "url": "ngpt_" + spp_1 +".png", "select": false},
		{"name": "Ours", "url": "ours_" + spp_1 +".png", "select": true},
		{"name": "Ref", "url": "gt.png", "select": false},
	])
}

jQuery(function($) {
	
	// Generate list of method options
	function generateMethodList() {
		
		$("#sl1").empty();
		$("#zoom_text1").empty();
		$("#zoom_text1").append("<div class='col-md-3'></div>");
		$("#zoom_image1").empty();
		$("#zoom_image1").append("<div class='col-md-3'></div>");
		// var $span = $("<span class='clickBox'>"+images1[currentIdx1][0].name+"</span>").data({"id": 0, "active": images1[currentIdx1][0].select}).addClass("active");
		// $span.css("background-color","yellow");
		// $("#sl1").append($span);
		// $("#sl1").append("<br>");

		for(var i = 0; i < images1[currentIdx1].length; i += 1) {
			var $span = $("<span class='clickBox'>"+images1[currentIdx1][i].name+"</span>").data({"id": i, "active": images1[currentIdx1][i].select}).click(function() {
				for(var i = 0; i < images1[currentIdx1].length; i += 1) {
					$("#sl1").children(".active").data({"active": false}).removeClass("active");
				}

				$(this).addClass("active");
					
				init();
			}).addClass("active");
			if(!images1[currentIdx1][i].select)
				$span.removeClass("active");
			$("#sl1").append($span);
			$("#sl1").append("<br>");

			$("#zoom_text1").append("<div class='col' id='zoom1_" + i + "' style='padding-right: 0'> <div style='text-align: center'>" + images1[currentIdx1][i]["name"] + "</div></div>")
		}

		// Add images after all the text added
		for(let i = 0; i < images1[currentIdx1].length; i += 1) {
			width1 = $("#zoom1_" + i).width();
			$("#zoom_image1").append("<div class='col' style='padding-right: 0'><div style='width: " + width1 + "px; height: " + width1 + "px; overflow: hidden'>" +
				"<img id='zoom_image1_" + i +"' style='transform-origin: top left; transform: scale(1); ' src='" + folder1 + "/" + images1[currentIdx1][i].url + "'></div></div>")
		}

	}

	generateMethodList();
	
	function init() {		
		
		$("#c1").empty();
		
		$("#sl1").children(".active").each(function() {
			var idx = $(this).data("id");
			$("#c1").append('<img src="'+folder1+'/'+images1[currentIdx1][idx].url+'" title="'+images1[currentIdx1][idx].name+'">');
		});
		
		$("#c1").each(function() {
			var htmlStr = "";
			$(this).children("img").each(function(idx) {
				var topBottom = Math.floor(idx/2) ? "bottom" : "top";
				var leftRight = idx % 2 ? "right" : "left";
				try{
					var a=i;
				}
				catch(err){
					i=0;
				}
				htmlStr += "<div class='inner' style='position: absolute; "+topBottom+": 0px; "+leftRight+": 0px;'><img src='"+$(this).attr("src")+"' style='position:relative;'></div><div class='text' style='position: absolute; "+topBottom+": 0px; "+leftRight+": 0px;z-index: "+(50+i)+"'>"+$(this).attr("title")+"</div>";
			});
			$(this).html(htmlStr);
		});
		
		show(0, 0, $("#c1").first());
		
		
	}
	
	$("#s1").on("click", "*", function() {
		$("#s1").children().removeClass("scene-active");
		$("#s1").children().addClass("scene-inactive");
		$(this).removeClass("scene-active");
		$(this).addClass("scene-active");
		
		var idx = $("#s1").children().index(this);
		switchScene(idx);
	})
	
	var params = location.search.split('scene=');
	if (params.length <= 1) {
		var scene = 0;
	} else {
		var scene = parseInt(params[1]);
	}
	
	$('#scene' + scene).removeClass("scene-active");
	$('#scene' + scene).addClass("scene-active");
	
	subFolder1 = scenes[scene];
	folder1 = parentFolder1+ "/" + subFolder1;
	
	init();
	
	// Below controls the box
	
	$("#c1").mousemove(function(e) {
		var parentOffset = $(this).offset(); 
		var relX = Math.round(e.pageX - parentOffset.left);
		var relY = Math.round(e.pageY - parentOffset.top);
		show(relX, relY, $(this));
	});
	
	function show(relX, relY, $elem) {
		for(let i = 0; i < images1[currentIdx1].length; i += 1) {
			let img = $("#zoom_image1_" + i);
			let image_width = $("#c1").width();
			let image_height = $("#c1").height();
			let scale = img.height() / image_height;
			let rx = Math.max(0, Math.min(img.width() - width1, relX * scale - width1 / 2));
			let ry = Math.max(0, Math.min(img.height() - width1, relY * scale - width1 / 2));
			img.css("transform", "scale(" + 1 + ") translate(" + -rx + "px, " + -ry + "px)");
		}

	}
	
	function switchScene(newIdx) {
		currentIdx1 = newIdx;
		subFolder1 = scenes[newIdx];
		folder1 = parentFolder1+ "/" + subFolder1;		
		generateMethodList();
		init();
		
	}
	
});


var parentFolder2= "app";
var subFolder2 = "glass-of-water";
var currentIdx2 = 0;

var folder2 = parentFolder2+ "/" + subFolder2;

let images2 = [];
let width2 = 0;

let spp_2 = 256;

for(let i = 0; i < scenes.length; i++) {
	images2.push([
		{"name": "Base", "url": "color_" + spp_2 +".png", "select": false},
		{"name": "L1", "url": "l1_" + spp_2 +".png", "select": false},
		{"name": "L2", "url": "l2_" + spp_2 +".png", "select": false},
		{"name": "GradNet", "url": "gradnet_" + spp_2 +".png", "select": false},
		{"name": "NGPT", "url": "ngpt_" + spp_2 +".png", "select": false},
		{"name": "Ours", "url": "ours_" + spp_2 +".png", "select": true},
		{"name": "Ref", "url": "gt.png", "select": false},
	])
}

jQuery(function($) {
	
	// Generate list of method options
	function generateMethodList() {
		
		$("#sl2").empty();
		$("#zoom_text2").empty();
		$("#zoom_text2").append("<div class='col-md-3'></div>");
		$("#zoom_image2").empty();
		$("#zoom_image2").append("<div class='col-md-3'></div>");
		// var $span = $("<span class='clickBox'>"+images2[currentIdx2][0].name+"</span>").data({"id": 0, "active": images2[currentIdx2][0].select}).addClass("active");
		// $span.css("background-color","yellow");
		// $("#sl2").append($span);
		// $("#sl2").append("<br>");

		for(var i = 0; i < images2[currentIdx2].length; i += 1) {
			var $span = $("<span class='clickBox'>"+images2[currentIdx2][i].name+"</span>").data({"id": i, "active": images2[currentIdx2][i].select}).click(function() {
				for(var i = 0; i < images2[currentIdx2].length; i += 1) {
					$("#sl2").children(".active").data({"active": false}).removeClass("active");
				}

				$(this).addClass("active");

				init();
			}).addClass("active");
			if(!images2[currentIdx2][i].select)
				$span.removeClass("active");
			$("#sl2").append($span);
			$("#sl2").append("<br>");
			$("#zoom_text2").append("<div class='col' id='zoom2_" + i + "' style='padding-right: 0'> <div style='text-align: center'>" + images2[currentIdx2][i]["name"] + "</div></div>")
		}

		// Add images after all the text added
		for(let i = 0; i < images2[currentIdx2].length; i += 1) {
			width2 = $("#zoom2_" + i).width();
			console.log(images2[currentIdx2][i].url)
			$("#zoom_image2").append("<div class='col' style='padding-right: 0'><div style='width: " + width2 + "px; height: " + width2 + "px; overflow: hidden'>" +
				"<img id='zoom_image2_" + i +"' style='transform-origin: top left; transform: scale(1); ' src='" + folder2 + "/" + images2[currentIdx2][i].url + "'></div></div>")
		}

	}

	generateMethodList();
	
	function init() {		
		
		$("#c2").empty();
		
		$("#sl2").children(".active").each(function() {
			var idx = $(this).data("id");
			$("#c2").append('<img src="'+folder2+'/'+images2[currentIdx2][idx].url+'" title="'+images2[currentIdx2][idx].name+'">');
		});
		
		$("#c2").each(function() {
			var htmlStr = "";
			$(this).children("img").each(function(idx) {
				var topBottom = Math.floor(idx/2) ? "bottom" : "top";
				var leftRight = idx % 2 ? "right" : "left";
				try{
					var a=i;
				}
				catch(err){
					i=0;
				}
				htmlStr += "<div class='inner' style='position: absolute; "+topBottom+": 0px; "+leftRight+": 0px;'><img src='"+$(this).attr("src")+"' style='position:relative;'></div><div class='text' style='position: absolute; "+topBottom+": 0px; "+leftRight+": 0px;z-index: "+(50+i)+"'>"+$(this).attr("title")+"</div>";
			});
			$(this).html(htmlStr);
		});
		
		show(0, 0, $("#c2").first());

		
	}
	
	$("#s2").on("click", "*", function() {
		$("#s2").children().removeClass("scene-active");
		$("#s2").children().addClass("scene-inactive");
		$(this).removeClass("scene-active");
		$(this).addClass("scene-active");
		
		var idx = $("#s2").children().index(this);
		switchScene(idx);
	})
	
	var params = location.search.split('scene=');
	if (params.length <= 1) {
		var scene = 5;
	} else {
		var scene = parseInt(params[1]);
	}
	
	$('#scene' + scene).removeClass("scene-active");
	$('#scene' + scene).addClass("scene-active");
	
	subFolder2 = scenes[scene - 5];
	folder2 = parentFolder2+ "/" + subFolder2;
	
	init();
	
	// Below controls the box
	
	$("#c2").mousemove(function(e) {
		var parentOffset = $(this).offset(); 
		var relX = Math.round(e.pageX - parentOffset.left);
		var relY = Math.round(e.pageY - parentOffset.top);
		
		show(relX, relY, $(this));
	});
	
	function show(relX, relY, $elem) {
		for(let i = 0; i < images2[currentIdx2].length; i += 1) {
			let img = $("#zoom_image2_" + i);
			let image_width = $("#c2").width();
			let image_height = $("#c2").height();
			let scale = img.height() / image_height;
			let rx = Math.max(0, Math.min(img.width() - width2, relX * scale - width2 / 2));
			let ry = Math.max(0, Math.min(img.height() - width2, relY * scale - width2 / 2));
			img.css("transform", "scale(" + 1 + ") translate(" + -rx + "px, " + -ry + "px)");
		}
	}
	
	function switchScene(newIdx) {		
		currentIdx2 = newIdx;
		subFolder2 = scenes[newIdx];
		folder2 = parentFolder2+ "/" + subFolder2;		
		generateMethodList();
		init();
		
	}
	
});
