function overlay_in() {
	$('.shadow').css({'display' : 'block'});
	$('.overlay').css({'display' : 'block'});
	$('.shadow').animate({'opacity' : 0.7});
	$('.overlay').animate({'top' : '10%'});
}

function overlay_out() {
	$('.shadow').animate({'opacity' : 0.0}, function () {
		$('.overlay').css({'display' : 'none'});
	});
	$('.overlay').animate({'top' : '-70%'}, function () {
		$('.shadow').css({'display' : 'none'});
	});
}

$(document).ready(function() {
    $('.search-bar').on('keyup', function() {
        var query = $('.search-bar').val();
        var filter = 0;
        if($('#type').is(':checked'))
          filter += 1;
        if($('#partno').is(':checked'))
          filter += 2 + 4 + 8;
        if($('#description').is(':checked'))
          filter += 16;
        if($('#notes').is(':checked'))
          filter += 32;
        $.getJSON('http://127.0.0.1:5000/query/' + filter  + '/' + query, function(data) {
            var newResults = '<div class="results">';
            for(var i = 0; i < data.length; i++) { // Create new view for results
              newResults += '<div class="results-row" part-id="' + data[i].id + '">';
              newResults += '<a href=#>'

              newResults += '<div class="results-block">';
              if (data[i].block != null)
                newResults += data[i].block;
              newResults += '</div>';

              newResults += '<div class="results-type">';
              if (data[i].type != null)
                newResults += data[i].type;
              newResults += '</div>';

              newResults += '<div class="results-partno">';
              if (data[i].partno != null)
                newResults += data[i].partno;
              newResults += '</div>';

              newResults += '<div class="results-description">';
              if (data[i].description != null)
                newResults += data[i].description;
              newResults += '</div>';

              newResults += '<div class="results-notes">';
              if (data[i].notes != null)
                newResults += '<div class="tooltip"><i class="fa fa-sicky-note"></i><span class="tooltiptext">' + data[i].notes + '</span></div>';
                //newResults += data[i].notes;
              newResults += '</div>';

              newResults += '<div class="results-datasheet">';
              if (data[i].datasheet != null)
                newResults += '<a href="http://127.0.0.1:5000/getfile/' + data[i].datasheet + '"><i class="fa fa-file-text" aria-hidden="true"></i></a>';
              newResults += '</div>';
              newResults += '</a>'
              newResults += '</div>';
            }
            newResults += '</div>';
            $('.results').replaceWith(newResults);
        }).fail(function() {
          console.log( "Query failed" );
        });
    });

    $('.results-row').on('click', function() {
      var partID = $(this).attr('part-id');
      $.getJSON('http://127.0.0.1:5000/getpartinfo/' + partID, function(data) {
        // TODO: Fill stuff with the fetched info
      }).fail(function() {
        console.log( "Fetching part info failed" );
      });
    });
});