let mainNav = document.getElementById('menu-items');
let navBarToggle = document.getElementById('js-navbar-toggle');


navBarToggle.addEventListener('click', function () {
    mainNav.classList.toggle('active');
});


var loadModels = function(inputData, container){
	//create slick interface
	var SLICK_FRAME = document.createElement("DIV");
	SLICK_FRAME.id = "slickFrame";
	SLICK_FRAME.className = "slickFrame";
	SLICK_FRAME.models = inputData;
	container.appendChild(SLICK_FRAME); 
	
	for(var i = 0; i < inputData.length; i++) {
		var basicName = inputData[i];
		var html = "assets/model_viewer/models/" + basicName + "/" + basicName + ".html";
		var screenshot = "assets/model_viewer/models/" + basicName + "/screen.jpg";
	
		//create slick slides
		var SLICK_SLIDE = document.createElement("DIV");
		SLICK_FRAME.appendChild(SLICK_SLIDE); 
		
		var SLIDE_IMG = document.createElement("IMG");
		SLIDE_IMG.src = screenshot
		SLIDE_IMG.alt = basicName + " screenshot";
		SLIDE_IMG.height = "150";
		SLIDE_IMG.modelHTMLSource = html;
		SLICK_SLIDE.appendChild(SLIDE_IMG); 
	}
	$('.slickFrame').slick({
		centerMode: true,
		dots: true,
		slidesToShow: 5,
		initialSlide: 1,
		variableWidth: true,
		touchMove: true,
		focusOnSelect: true,
		responsive: [{
			breakpoint: 768,
			settings: {
				arrows: true,
				centerMode: true,
				slidesToShow: 5,
				variableWidth: true,
				touchMove: true,
				dots: true,
				focusOnSelect: true,
			}
			},
			{
			breakpoint: 480,
			settings: {
				arrows: true,
				centerMode: true,
				slidesToShow: 1,
				variableWidth: true,
				touchMove: true,
				dots: true,
				focusOnSelect: true,
			}
		}]
	}).slick('slickPrev');
	$('.slickFrame').on('afterChange', function(event, slick, currentSlide){
		var newModel = this.models[currentSlide];
		var frame = document.getElementById("modelTarget");
		if(frame.contentWindow !== undefined){
			if(frame.contentWindow.swapModel != undefined){
				frame.contentWindow.swapModel(newModel);
			}
		}
	});
	//now add the main model viewing window
	var MODEL_IFRAME_WINDOW_WRAPPER = document.createElement("DIV");
	MODEL_IFRAME_WINDOW_WRAPPER.width = "854";
	container.appendChild(MODEL_IFRAME_WINDOW_WRAPPER); 
	
	var MODEL_IFRAME_WINDOW = document.createElement("IFRAME");
	MODEL_IFRAME_WINDOW.id = "modelTarget"
	MODEL_IFRAME_WINDOW.width = "100%";
	MODEL_IFRAME_WINDOW.frameBorder = "0";
	MODEL_IFRAME_WINDOW.scrolling = "no";
	MODEL_IFRAME_WINDOW.style.display = "block";
	MODEL_IFRAME_WINDOW.style.margin = "0 auto";
	MODEL_IFRAME_WINDOW_WRAPPER.appendChild(MODEL_IFRAME_WINDOW); 	
	
	var basicNameInit = inputData[0];
	var w = 854;
	var h = 370;
	var htmlInit = "assets/model_viewer/model_viewer.html?param1=" + basicNameInit + "&param2=" + w + "&param3=" + h;
	   
	MODEL_IFRAME_WINDOW.src = htmlInit;
	
	
	var body = document.body;
	var html = document.documentElement;
	MODEL_IFRAME_WINDOW.height = "500px";
	MODEL_IFRAME_WINDOW.regularHeight = MODEL_IFRAME_WINDOW.height;
}

var load_models = function(){
	//request the models
	var httpReq = (window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
	var container = document.getElementById("content-container");
	httpReq.onload = function() {
		var response = httpReq.responseText;
		var result = JSON.parse(response);
		loadModels(result,container);
	}
	try {
		httpReq.open("GET", "scripts/getModels.php", true);
		httpReq.send(null);
	} catch(e) {
		console.log(e);
	}
}







$(document).ready(function(){
	$('.videoitem').mouseover(function(){
		$(this).get(0).play();
	}).mouseout(function(){
		$(this).get(0).pause();
	})
	
	$('.videoitem').load(function(){
		$(this).get(0).pause();
	})
	
	
});
$(document).ready(load_models);