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

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

function init_edit(partID) {
	$('table#details tr#location td p').hide();
	$('table#details tr#location td select').show();

	$('table#details tr#partno td p').hide();
	$('table#details tr#partno td input').show();

	$('table#details tr#description td p').hide();
	$('table#details tr#description td input').show();

	$('table#details tr#datasheet td input').show();

	var datasheet_input = $('<input type="file" class="part-edit-file" id="datasheet-input" accept=".pdf">')
	$('#datasheet-info').replaceWith(datasheet_input);

	var newButton = '<div class="round-button-left"><a href="#" onclick="save(' + partID + ')"><i class="fa fa-check" aria-hidden="true"></i></a></div>';
	$('.round-button-left').replaceWith(newButton);
}

function new_entry() {
	$('table#details tr#location td').text('');
	$('table#details tr#partno td').text('');
	$('table#details tr#description td').text('');
	// $('table#details tr#location select').text('');
	$('table#details tr#partno input').text('');
	$('table#details tr#description input').text('');
	init_edit(-1);
	overlay_in();
}

function end_edit() {
	$('table#details tr#location td p').show();
	$('table#details tr#location td select').hide();

	$('table#details tr#partno td p').show();
	$('table#details tr#partno td input').hide();

	$('table#details tr#description td p').show();
	$('table#details tr#description td input').hide();

	$('table#details tr#datasheet td input').hide();

	var newButton = '<div class="round-button-left"><a href="#" id="edit-button"><i class="fa fa-pencil" aria-hidden="true"></i></a></div>';
	$('.round-button-left').replaceWith(newButton);
}

function save(partID) {
	var block_v = $('#block-input').val();
	var type_v = $('#type-input').val();
	var partno_v = $('#partno-input').val();
	var description_v = $('#description-input').val();
	var quantity_v = $('#quantity-input').val();
	var notes_v = $('#notes-input').val();
	var datasheet = $('#datasheet-input')[0].files;
	if(! partno_v.match(/^([a-zA-Z0-9]{1,20}\s*){1,3}$/g)) {
		alert('Invalid part number format. Accepted: <Part-number-line-1(max 20 chars)> <Part-number-line-2(max 20 chars)> <Part-number-line-3(max 20 chars)>');
		return;
	}
	if(! block_v.match(/^[0-9]+$/g)) {
		alert('Invalid location field. Only numbers accepted.');
		return;
	}
	if(type_v.length > 25) {
		alert('Manufacturer name too long (max 25 characters).')
		return;
	}
	if(description_v.length > 200) {
		alert('Description too long (max 200 characters).')
		return;
	}
	if(quantity_v.length > 10) {
		alert('Quantity info too long (max 10 characters).')
		return;
	}
	if(notes_v.length > 200) {
		alert('Notes too long (max 200 characters).')
		return;
	}

	var partnos = partno_v.split(' ');

	var data = new FormData();

	if (datasheet.length == 1)
		if(! datasheet[0]['name'].match(/^[\w\-]+\.pdf$/g)) {
			alert('Invalid filename. Please match /^[\w\-]+\.pdf$/g');
			return;
		}
		data.append('datasheet-file', datasheet[0]);
	data.append('block', block_v);
	data.append('type', type_v);
	data.append('partno', partnos[0]);
	if (partnos.length > 1)
		data.append('partnoalt', partnos[1]);
	else
		data.append('partnoalt', '');
	if(partnos.length > 2)
	  data.append('partnoalt2', partnos[2]);
	else
		data.append('partnoalt2', '');
	data.append('description', description_v);
	data.append('quantity', quantity_v);
	data.append('notes', notes_v);

	$.ajax({
	        // Your server script to process the upload
	    url: 'http://127.0.0.1:5000/parts/alter/' + partID,
	    type: 'POST',

      data: data,

      // Tell jQuery not to process data or worry about content-type
      // You *must* include these options!
      cache: false,
      contentType: false,
      processData: false,
			success: function(data) {
				var datasheet_par = '<p id="datasheet-info"><i class="fa fa-check"></i></p>';
				$('#datasheet-info').replaceWith(datasheet_par);
			},
			error: function() {
				alert("Couldn't update the part information. Please retry.");
			}

	  });

	end_edit();
	$('#edit-button').click(function() {
		init_edit(partID);
	});
}

function text_filter(string) {
	if (string != null)
		return string;
	else
		return '';
}

function delete_entry(partID) {
	if (partID < 0)
		return;
	if (!confirm('Delete the selected entry?'))
		return;
	$.ajax({
		url: 'http://127.0.0.1:5000/parts/delete/' + partID,
		type: 'GET',
		cache: false,
		contentType: false,
		processData: false,
		success: function() {
			overlay_out();
			perform_query();
		},
		fail: function() {
			console.log('An error occurred while deleting the entry');
		},
	});
}

function show_part_info(partID) {
	$.getJSON('http://127.0.0.1:5000/parts/getpartinfo/' + partID, function(data) {
		$('table#details tr#location td p').text(text_filter(data.name)); // name is the location friendly name
		$('table#details tr#location td select').val(data.location_id); // name is the location friendly name
		$('table#details tr#partno td p').text(text_filter(data.partno));
		$('table#details tr#partno td input').val(text_filter(data.partno));
		$('table#details tr#description td p').text(text_filter(data.description));
		$('table#details tr#description td input').val(text_filter(data.description));
		$('img#map').attr('src', 'parts/map/' + data.map);
		if (data.datasheet != null)
			$('tr#datasheet-head').html($('<td>DATASHEET: <a href="http://127.0.0.1:5000/parts/getfile/' + data.datasheet.substring(0, data.datasheet.length - 4) + '"><i class="fa fa-file-text" aria-hidden="true"></i></a></td>'));
		else
			$('tr#datasheet-head td').text('DATASHEET: ');
		$('#edit-button').click(function() {
			init_edit(partID);
		});
		$('#delete-button').click(function() {
			delete_entry(partID);
		});
		overlay_in();
	}).fail(function() {
		console.log( "Fetching part info failed" );
	});
}

function perform_query() {
	$('#no-results').css("opacity", 0);
	var query = $('.search-bar').val();
	var data = {
		l:$('#type').is(':checked'),
		p:$('#partno').is(':checked'),
		d:$('#description').is(':checked'),
		n:$('#notes').is(':checked')
	};
	filter = '0';
	$.getJSON('http://127.0.0.1:5000/parts/query/' + filter  + '/' + query, data, function(data) {
		$("#results").find("tr:not(:first)").remove(); // Delete all table rows
		for(var i = 0; i < data.length; i++) {
			var newRow = $('<tr onclick="show_part_info(' + data[i].id + ')"></tr>');

			newRow.append($('<td id="location"></td>').text(text_filter(data[i].location_descriptor)));
			newRow.append($('<td id="partno"></td>').text(text_filter(data[i].partno)));
			newRow.append($('<td id="description"></td>').text(text_filter(data[i].description)));
			$('#results').append(newRow);
		}
		if(data.length == 0) {
				$('#no-results').animate({opacity:1},2000);
		}
	}).fail(function() {
		var newResults = '<div class="results">';
		newResults += '<h3>No results.</h3>';
		newResults += '</div>';
		$('.results').replaceWith(newResults);
		console.log( "Query failed" );
	});
}

$(document).ready(function() {
	$.getJSON('http://127.0.0.1:5000/parts/getlocations', function(data){
		$.each(data, function(i, val) {
			$('table#details tr#location td select').append('<option value="' + i + '">' + val + '</option>');
		});
	});
    $.ajaxSetup({ cache: false });
    $('.search-bar').on('keyup', function() {
			perform_query();
    });
    $('.checkbox').change( function() {
        if (   !$('#location').is(':checked')
            && !$('#partno').is(':checked')
            && !$('#description').is(':checked')
            && !$('#notes').is(':checked'))
		$(this).prop('checked', true);
	else
		perform_query();
    });
});

$(document).ready(function() {
    $("#clickablemap").on("click", function(event) {
   		var $img = $(this);
    	var currentClickPosX = event.pageX - $img.offset().left;
    	var currentClickPosY = event.pageY - $img.offset().top;

    	var currentWidth = $img.width();
	    var currentHeight = $img.height();

	    var naturalWidth = this.naturalWidth;
	    var naturalHeight = this.naturalHeight;

	    var correctX = ((naturalWidth / currentWidth) * currentClickPosX).toFixed(0);
	    var correctY = ((naturalHeight / currentHeight) * currentClickPosY).toFixed(0);

        $("#mapURL").html("elab.png?x=" + correctX + "&y=" + correctY);
        $("#clickablemap").attr("src", "http://127.0.0.1:5000/parts/map/elab.png?x=" + correctX + "&y=" + correctY);
    });
});