var loader = {

	get : function(URL, DATA, CALLBACK){

		var http = new XMLHttpRequest();
		var params = loader.params(DATA);

		http.open("GET", URL+'?'+params, true);

		return loader.send(http, '', CALLBACK);

	},


	getJSON : function(URL, DATA, CALLBACK){

		return this.get(URL, DATA, function(http){
	    	var data = JSON.parse(http.responseText);
			CALLBACK(data);
		});

	},


	post : function(URL, DATA, CALLBACK){

		var http = new XMLHttpRequest();
		var params = loader.params(DATA);

		http.open("POST", URL, true);
		http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

		return loader.send(http, params, CALLBACK);

	},


	params : function(DATA){

		var dataStr = '';

		if (DATA){
			var c = 0;
			var andStr = '';
			for (var i in DATA){
				andStr = (c>0)? '&' : '';
				dataStr += andStr+i+'='+encodeURI(DATA[i]);
				c++;
			}
		}

		return dataStr;

	},


	send: function(HTTP, PARAMS, CALLBACK){

		HTTP.onreadystatechange = function(){
			if(HTTP.readyState === XMLHttpRequest.DONE){
				CALLBACK(HTTP);
			}
		}

		HTTP.onerror = function(){
			CALLBACK(false);
		}

		HTTP.send(PARAMS);

		return HTTP;

	}

};

var myResponse = {};

var formHandler = {

	submitListener : function(NAME, EMAIL, FOUND, RATING, COMMENTS){

		var errorEls = document.querySelectorAll('.testimonial-form .error');
		errorEls.forEach(function(item){
			item.classList.add('hidden');
		});

		loader.post(
			'https://shopify.johnwpalmer.com/testimonials/api/add',
			{
				name : NAME,
				email : EMAIL,
				source : FOUND,
				stars : RATING,
				text : COMMENTS
			},
			function(data){

// 				console.debug(JSON.parse(data.response).response);
				formHandler.postCallback(JSON.parse(data.response).response);

			}
		);

	},

	postCallback : function(response){

		myResponse = response;

		if (!response.error){

// 			console.debug(response);

			loader.get('https://shopify.johnwpalmer.com/testimonials/view/list/', '', function(response){

				var el = document.getElementById('testimonials-container');
				el.innerHTML = response.responseText;

				var successEl = document.createElement('div');
					successEl.classList.add('success');
					successEl.innerHTML = 'Thank you! Your comments have been successfully added.';
				el.appendChild(successEl);

			});

		}else{

			console.log('An error occurred.');
			console.debug(response);

			var el = document.getElementById('testimonials-container');

			var errorEls = document.querySelectorAll('.testimonial-form .error');
			errorEls.forEach(function(item){
				item.classList.remove('hidden');
				item.innerHTML = response.message;
			});

		}

	}

};


// = = = = = PAGE LOAD = = = = =
document.addEventListener('DOMContentLoaded', function () {

	loader.get('https://shopify.johnwpalmer.com/testimonials/view/all/', '', function(response){
		var el = document.getElementById('testimonials-container');
		el.innerHTML = response.responseText;

		window.dispatchEvent(new Event('resize')); 		// fix weird broken-scrolling issue on Chrome

		var ratingInputs= document.querySelectorAll('.rating-input');
		var stars 		= document.querySelectorAll('.rating-btns .star');
		var forms		= document.querySelectorAll('.testimonial-form form');
		var rating		= 5;

		stars.forEach(function(item, index){

			item.addEventListener('click', function(E){

				E.preventDefault();

				rating = this.dataset.value;
				ratingInputs.forEach(function(item){
					item.value = rating;
				});

				stars.forEach(function(item, index){
					if ((5-index) <= rating){ item.classList.add('checked'); }
					else{ item.classList.remove('checked'); }
				});

			});

		});


		forms.forEach(function(item){

			var name = item.querySelectorAll('.name-input');
			var email = item.querySelectorAll('.email-input');
			var found = item.querySelectorAll('.found-input');
			var comments = item.querySelectorAll('.comments-input');

			item.addEventListener('submit', function(E){

				E.preventDefault();

				formHandler.submitListener(name[0].value, email[0].value, found[0].value, rating, comments[0].value)

			});

		});
	});

});