/* Initiliaze several plugins. */

$(document).ready(function(){
	$('.dropdown-toggle').dropdown();
	$('input[type=file]').bootstrapFileInput();
});

/* Value of upload button. */

var buttonId = "";

/* Function to toggle button to disabled status. */

function toggleButton(id, enable, btnId){
	if(enable == "enable"){
		text = getBtnValue(btnId)
		$(id).prop('enable', true);
		$(id).removeClass('disabled');
		$(btnId).text(text);
	} else {
		$(id).prop('disabled', true);
		$(id).addClass('disabled');
		$(btnId).html('<i class="fa fa-spinner fa-spin"></i> Uploading...');
	}
};

/* Get the correct value from the button. */

function getBtnValue(buttonId){
	switch(buttonId) {
		case "#imageSubmit":
			return "Upload!";
			break;
		case "#urlSubmit":
			return "Fetch the image!";
			break;
		case "#base64Submit":
			return "Decode the image!";
			break;
	}
}

/* Resets DOM for bootstrap modal. */

$('.modal').on('hidden.bs.modal', function(e){
//	$('.btn-upload').addClass('hidden');
	$("#imageLink").text('');
	$('#created_img').remove();
	$('.error-msg').text('');
	toggleButton('.btn-upload', "enable", buttonId);
});

/* Do all the AJAX stuff. */

function doAjaxStuff(id, target, isFile){

	var client = new XMLHttpRequest();

	var file = document.getElementById(id);

	/* Create a FormData instance */
	var formData = new FormData();

	/* formData is a file to upload. */
	if(isFile == "isFile"){
		if(file.files[0] === null) {
			toggleButton('.btn-upload', "enable", buttonId);
			alert("Please add a photo first.");
		} else {
			/* Add the file */ 
			formData.append("image", file.files[0]);
		}
	} else {
		if(file.value === null) {
			toggleButton('.btn-upload', "enable", buttonId);
			$(buttonId).text('Try again!');
			alert("Please add a photo first.");
		} else {
			formData.append("image", file.value);
		}
	}
	client.open("post", target, true);
	/* Send to server */ 
	client.send(formData); 

	/* Check the response status */  
	client.onreadystatechange = function() {
	    if (client.readyState == 4) {
		if(client.status == 200){
			var r = JSON.parse(client.responseText);

			var imageLink = '<a id="created_img_link" title="' + r.data.link + '" href="' + r.data.link + '"> ' + r.data.link + '</a>';
			$("#imageLink").append(imageLink);

			var img = $('<img id="created_img" class="img-responsive">');
			img.attr('src', r.data.link)
			img.attr('alt', r.data.name)
			img.appendTo('#imageObj');

			$('#created_img').wrap(function() {
				return "<a href='" + r.data.link + "'/>";
			});

			//$('.btn-upload').html('<i class="fa fa-check"></i> Uploaded!');
			$(buttonId).html('<i class="fa fa-check"></i> Uploaded!');
			$('#uploaded-dialog').modal('show');

		} else if (client.status == 500) {
			if (client.responseText == "") {
				var errorMsg = "There was an error. That's everything we know.";
			} else {
				var r = JSON.parse(client.responseText);
				var errorMsg = r.data.error;
			}
			$('.error-msg').text(errorMsg);
			toggleButton('.btn-upload', 'enable', buttonId);
			$(buttonId).text('Try again!');
			$('#error-dialog').modal('show');
		} else {
			var errorMsg = "There was an error. That's everything we know.";
			$('.error-msg').text(errorMsg);
			toggleButton('.btn-upload', 'enable', buttonId);
			$(buttonId).text('Try again!');
			$('#error-dialog').modal('show');
		}
	    }
	}
};

/* Prevent the form submit when pressing 'enter'. */

$('form').submit(function(event){
	event.preventDefault();
});

/* Detects change on input #file. */

$(function() {
	$("#file").change(function (){
		//var fileName = $(this).val();
		//$(".filename").html(fileName);
		//console.log(fileName)
		//$('#imageSubmit').trigger('click');
		$('.btn-upload').addClass('hidden');
		$('#imageSubmit').removeClass('hidden');
	});
});

/* Start file upload via AJAX. */

$("#imageSubmit").click( function(event){
	event.preventDefault();
	buttonId = "#imageSubmit";

	toggleButton('.btn-upload', "disable", buttonId);

	doAjaxStuff("file", "/api/v1/file", "isFile");
});

/* Show upload button for urlBar on click. */

$("#urlBar").click(function (){
	$('.btn-upload').addClass('hidden');
	$('#urlSubmit').removeClass("hidden");
});

/* Start upload over url via AJAX. */

$("#urlSubmit").click( function(event){
	event.preventDefault();
	buttonId = "#urlSubmit";

	toggleButton('.btn-upload', "disable");

	doAjaxStuff("urlBar", "/api/v1/url", "isNoFile");
});

/* Show upload button for base64Bar on click. */

$("#base64Bar").click(function (){
	$('.btn-upload').addClass('hidden');
	$('#base64Submit').removeClass("hidden");
});

/* Start upload over base64 encoded image via AJAX. */

$("#base64Submit").click( function(event){
	event.preventDefault();
	buttonId = "#base64Submit";

	toggleButton('.btn-upload', "disable");

	doAjaxStuff("urlBar", "/api/v1/base64", "isNoFile");
});