var selectLocation = ["Canada", "China", "France", "Germany"];
var selectLocation2 = ["China"];

$(function() {
	
	$(".dropdown").mouseover(function () {
	    $(this).addClass("open");
	});
	
	$(".dropdown").mouseleave(function(){
	    $(this).removeClass("open");
	})

	var selectDisciplines = [" Masterplanning"," Architecture"," Interiors", "Lighting"," Landscape"," AV & Acoustics"," MEP"," Art work & Accessories"," Graphics & Signage"," Branding"," Furniture, Lighting"];
	
	var newestList = window.localStorage.getItem("newestList")
	
	
	var resentlist = window.localStorage.getItem("resentlist")
	var trendinglist = [
		"Interior", "Architecture", "Masterplanning", "Lighting", "Landscape", "Acoustics", "MEP",
		"Art work & Accessories",
	]
	if(newestList==null){
		newestList=[...selectDisciplines]
		window.localStorage.setItem("newestList", JSON.stringify(newestList))
		
	}else{
		newestList = JSON.parse(newestList)
	}
	
	addlistNewest(".newest-list-pro",newestList)
	
	addlistBtn(".trendinglist", trendinglist)
	if (resentlist) {
		resentlist = JSON.parse(resentlist)
		addlistBtn(".resentlist", resentlist)
	} else {
		resentlist = []
	}
	
	
	$(".newest-list-pro").on("click", '.newest-item-x', function() {
		var name=$(this).parent().find(".query").text()
		
		var k2=newestList.indexOf(name)
		
		if (k2 != -1) {
			newestList.splice(k2, 1)
		}
 		
		window.localStorage.setItem("newestList", JSON.stringify(newestList))
		
		$(this).parent().remove()
	})
	$(".search-item").on("click", '.querybtnli', function() {

		var value = $(this).text()
		$(".landingpage_search").val(value);
		$(".querybtn").click()
	})
	$(".querybtn").click(function() {
		resentlistAdd($(".landingpage_search").val())
	})
	$(".querybtn2").click(function() {	
		resentlistAdd($(".landingpage_search").val())
	})


	function resentlistAdd(name) {

		if (name) {
			var k = resentlist.indexOf(name)
			var k2=newestList.indexOf(name)
			
			if (k != -1) {
				 resentlist.splice(k, 1)
			}
			if (k2 != -1) {
				newestList.splice(k2, 1)
			}
			var i = resentlist.unshift(name)
			  newestList.unshift(name)
			
			var num = 4
			if (i > num) {
				resentlist = resentlist.slice(0, num)
			}
			window.localStorage.setItem("resentlist", JSON.stringify(resentlist))
			window.localStorage.setItem("newestList", JSON.stringify(newestList))

		}
		addlistNewest(".newest-list-pro",newestList)
		addlistBtn(".resentlist", resentlist)
		$("#project-photo-row").empty();

		$.getJSON("../../assets/js/landingpage_photos.json", function(data) {
			data = data.sort(() => {
				return Math.random() > 0.5 ? -1 : 1
			})
			const tmphtml = template("flow-photos", {
				photos: data
			});

			$("#project-photo-row").append(tmphtml);
		});
	}
	addlistSelect(".selectDisciplines", selectDisciplines)
	addlistSelect(".selectLocation", selectLocation)

	
	function addlistNewest(name, list) {
		$(name).empty()
		list.forEach(function(item) {
				
			var btn = $('<div class="newest-item "> <span class="query">' + item + '</span><span class="newest-item-x" >x</span></div>')
	
			$(name).append(btn)
		})
	}
	function addlistBtn(name, list) {
		$(name).empty()
		list.forEach(function(item) {
			var btn = $('<button class="btn btn-lg  querybtnli">' + item + '</button>')

			$(name).append(btn)
		})
	}
	$(".query").click(function() {
		
		resentlistAdd($(this).text())

	})
	

	

	$('.selectpicker').selectpicker({
		template: {
			caret: '<span class="sel-icon glyphicon glyphicon-menu-down"></span>'
		}
	});
	
	$('#filter-select').on('changed.bs.select', function (e, clickedIndex, isSelected, prestate,currentVal) {
	   
	   alert(currentVal);
	});

	$.getJSON("../../assets/js/landingpage_photos.json", function(data) {
		const tmphtml = template("flow-photos", {
			photos: data
		});

		$("#project-photo-row").append(tmphtml);
	});

	$("#project-photo-row").on("click", ".thumbnail img", function() {

		var loginUser = window.localStorage.getItem("loginUser");
		if (!loginUser) {
			window.location.href = "../signin/signin.html"
			return
		}


		let imgname = $(this).data('imgname');
		zeroModal.show({
			url: 'landingpage_details.html?img=' + imgname,
			iframe: true,
			width: '95%',
			height: '95%',
			onClosed: function() {
				$("body").css('overflow', 'auto');
			},
			onComplete: function() {
				$("body").css('overflow', 'hidden');
			}
		});


	});
	
	//trigger search by enter
	$(".landingpage_search").on("keyup",function(event){
		var e = event || window.event;
		if(e && e.keyCode==13 && this.value.length>0){ 
			resentlistAdd($(".landingpage_search").val());
		}
	});
});
function selectOnchang(obj){ 
	console.log(obj.selectedIndex)
	if(obj.selectedIndex==1){
		addlistSelect(".selectpicker.selectLocation", selectLocation2)
		
	}else{
		addlistSelect(".selectpicker.selectLocation", selectLocation)
		
	}
	$(".selectpicker.selectLocation").selectpicker('refresh');
}
function addlistSelect(name, list) {
		$(name).empty()
		list.forEach(function(item) {
			var btn = $('<option>' + item + '</option>')

			$(name).append(btn)
		})
	}