var movies;
$( document ).ready(function() {

	var urlMovies = "js/data/movies.json";
	$.ajax({					
		async: true,
		url: urlMovies
	})
	.done(function( data ) {
		movies = data.movies;
		
		printList('n');	
	});
	
});
function printList(task) {
	document.getElementById("contentItems").innerHTML = "";
	switch (task) {
		case 'a': 
			returnVar = orderList('a');
			break;
		case 'd':
			returnVar = orderList('d');
			break;
		case 'f':
			returnVar = filterList(document.getElementById("search-bar").value);
			break;
		case 'n':
			returnVar = movies;
			break;
		case 'r':
			location.reload();
			return;
		default:
			break;
	}
	for(var i = 0; i < returnVar.length; i++){
		document.getElementById("contentItems").innerHTML += 
		`<tr>` + 
			`<td scope="row">` + i + `</td>` + 
			`<td scope="row">` + returnVar[i].title + `</td>` + 
			`<td scope="row">` + returnVar[i].year + `</td>` + 
			`<td><img src="` + returnVar[i].url + `" style="width:100%; max-width: 75px"></td>` +
			`<td scope="row">` + returnVar[i].rating + `</td>` +
			`<td scope="row"><button class="btn btn-dark w3-margin" onclick="openModal(` +
				`'` + returnVar[i].url + `', ` +
				`'` + returnVar[i].title + `', ` +
				`'` + returnVar[i].year + `', ` +
				`'` + returnVar[i].rating + `', ` +
				`'` + returnVar[i].countries[0] + `', ` +
				`returnVar[` + i + `].plot` +
			`)">Details &#9432;</button></td>` + 
		`</tr>`;
	}

	document.getElementById("contentTable").style.display='block';
}

function openModal(image, title, year, rating, country, plot) {
	document.getElementById("modalMovieImage").src = image;
	document.getElementById("modalMovieTitle").innerHTML = title;
	document.getElementById("modalMovieYear").innerHTML = "Year: "  + year;
	document.getElementById("modalMovieRating").innerHTML = "Rating: "  + rating;
	document.getElementById("modalMovieCountry").innerHTML = "Country: "  + country;
	document.getElementById("modalMoviePlot").innerHTML = "Plot: "  + plot;
	
	$('#myModal').modal('show')
}


function calcMitjana() {
	var ratinTotal = 0;
	for(var i = 0; i < movies.length; i++){
		ratinTotal += parseInt(movies[i].rating);
	}
	document.getElementById("calcMitjana").innerHTML = "Average Rating: " + (ratinTotal/movies.length).toFixed(2);
}

function search() {
	if(event.key === 'Enter') {
		printList('f');	
    }
}

function filterList(inputVar) {
	var obj;

	for(var i = 0; i < movies.length; i++){
		if (movies[i].title.indexOf(inputVar) != -1) {

			console.log(movies[i]);
			// obj.push(movies[i]);
		}
	}
	return obj;
}

function orderList(order) {
	var obj = movies.sort(function compare( a, b ) {
		if ( a.title < b.title ){
		  return -1;
		}
		if ( a.title > b.title ){
		  return 1;
		}
		return 0;
	  });
    if (order=='d') return obj.reverse();
		
    return obj;
}