var icons = { 'title': {img: 'text.png',   alt: 'Titel / Beschreibung'},
              'where': {img: 'map.png',    alt: 'Ort'},
              'what':  {img: 'thing.png',    alt: 'Sache'},
              'photography':  {img: 'camera.png',    alt: 'Fotografie'},
              'gallery':  {img: 'gallery.png',    alt: 'Galerie'},
              'who'  : {img: 'person.png', alt: 'Person'},
              'year' : {img: 'calendar.png', alt: 'Jahr'},
              'default' : {img: 'calendar.png', alt: 'default'},
              'description' : {img: 'description.png', alt: 'Beschreibung'} };

var jdata = JSON.parse(data);
var metadata = JSON.parse(metadata);

$(document).ready(function(){
    // $('#txt-search').keyup(function(){
    $('#txt-search').on('keyup input', function(){
        $('#myTab a[href="#filters"]').tab('show') 
        var searchField = $(this).val();
	if(searchField === '')  {
	    $('#filter-records').html('');
	    return;
	}
	
        var regex = new RegExp(searchField, "i");
        var output = '<div class="row">';
        var count = 1;
        $.each(jdata, function(key, val) {
	    if (val.name.search(regex) != -1) {
                // console.log('Type: ' + val.type);
		output += '<div id="search-'+val.id+'"class="col-md-6 well" onclick="javascript:build_lightgallery('+val.id+')">';
		output += '<div class="col-md-3"><img class="img-responsive" src="/res/images/' + icons[val.type || 'default']['img'] + '" alt="' + icons[val.type]['alt'] + '" title="' + icons[val.type]['alt'] + '" /></div>';
		output += '<div class="col-md-8">';
		output += '<h4>' + val.name + '</h4>';
		output += '</div>';
		output += '</div>';
		if(count%4 == 0){
		    output += '</div><div class="row">'
		}
		count++;
	    }
	});
	output += '</div>';
	$('#filters').html(output);
    });
});

function thumb_with_path( img ) {
    path = img.replace(/\/.*$/gi, '');
    thumb = img.replace(/.*\//gi, '');
    return(path + '/_thumbnails/' + thumb);
}

function build_lightgallery(id) {
    console.log('build_lightgallery ' + id);
    record = jdata[id];
    if (record.type == 'gallery') {
        console.log(window.location + record.dir + '/');
        window.open(window.location + record.dir + '/');
    } else {
        images = record.images;
        var dynimages = [];
        var output = ''
        // i = 0;
        for (let img of images) {
            // console.log(img);
            // dynimages[i] = {'src': img, 'thumb': thumb_with_path(img), 'subHtml':'dummy'};
            output += '<div class="img-wrapper" data-src="' + img + '" data-sub-html="' + metadata[img] + '">';
            output += '<a href="' + img + '">'
            output += '<img src="' + thumb_with_path(img) + '"></a></div>';
            //i = i + 1;
        }
        $('#results').html(output);
        $('#myTab a[href="#results"]').tab('show')
        
        lightGallery(document.getElementById('results'), {
            plugins: [lgZoom, lgThumbnail, lgAutoplay, lgFullscreen
                     ], /* , lgMediumZoom, lgRelativeCaption, lgShare, lgPager, lgHash */
            speed: 500,
            // licenseKey: '0000-0000-000-0000',
            mode: 'fade'
        });
    }
}