// ==UserScript==
// @name           Kickstarter Add Percentage Funded
// @author         Didero
// @namespace      http://userscripts.org/users/didero
// @description    On a Kickstarter project page, displays the percentage of the goal reached, and the difference between the pledged and asked amount
// @include        http://www.kickstarter.com/projects/*/*
// @include        https://www.kickstarter.com/projects/*/*
// @version        3.2.3
// @grant          none
// @downloadURL none
// ==/UserScript==

function addThousandsSeparator(number) {
	if (number < 1000) return number.toString();
	//													 reverse the String			find groups of 3 numbers  add commas    reverse the string again
	else return number.toString().split('').reverse().join('').match(/\d{1,3}/g).join(',').split('').reverse().join('');
}

var pledgeAmountDiv = document.getElementById('pledged');
if (pledgeAmountDiv) {
	var percentageRaised = pledgeAmountDiv.getAttribute('data-percent-raised');
	if (percentageRaised != null) {
		percentageRaised = addThousandsSeparator(Math.round(parseFloat(percentageRaised) * 100));
		var pledgeDifference = Math.round(parseFloat(pledgeAmountDiv.getAttribute('data-goal')) - parseFloat(pledgeAmountDiv.getAttribute('data-pledged')));
		
		//Make sure we display the same currency symbol as on the rest of the page
		var currencySymbol = '$';
		if (pledgeAmountDiv.innerHTML.indexOf('£') > -1) currencySymbol = '£';
		
		var leftOrOverTarget = 'to';
		//If the target has already been reached, display how much more money has been promised
		if (pledgeDifference < 0) {
			leftOrOverTarget = 'over';
			pledgeDifference = Math.abs(pledgeDifference);
		}		
		pledgeDifference = addThousandsSeparator(pledgeDifference);
		
		//Display the percentage
		var percentageDisplay = document.createElement('span');
		percentageDisplay.innerHTML = ' ('+percentageRaised+'% )';
		pledgeAmountDiv.parentNode.appendChild(percentageDisplay);
		
		//Display the stats in a separate line, for more room. Nest it just like the other numbers, so it gets formatted properly
		var moneyDisplay = document.createElement('h5');
		moneyDisplay.innerHTML = '<div><span>' + currencySymbol + pledgeDifference + ' ' + leftOrOverTarget + ' target</span></div>';
		pledgeAmountDiv.parentNode.parentNode.insertBefore(moneyDisplay, pledgeAmountDiv.parentNode.nextSibling);
	}
}