View difference between Paste ID: eDD4kFaY and TfgQZYTX

 // =========================
 // Utilities
 // =========================
 var utils = utils || {};
 
 // ========================================
 // Flag which defines the behaviour of the routes
 // and templates.
 // If set to 'true', the page will clean everytime
 // the route changes.
 //
 // ========================================
 utils.resetTemplateOnRouteChange = false;
 
 // ========================================
 // Que for all AJAX request for the current view,
 // cleaned after every reload.
 //
 // ========================================
 utils.queuedAjax = [];
 
 // ========================================
 // Load template file into the DOM webpage
 // Params:
 // 	url  - url to the template file (starting from the index.html directory)
 //  args - parameters to be put into the template, on the template mark
 //         them with double curly braces like: {{argumentName}}
 //  override - OPTIONAL override the previous template ( default: false )
 //  callback - OPTIONAL callback function run after template is loaded
 //
 // ========================================
 utils.loadTemplate = (function(f,u,n,c){
 	var $templateDom = $('#dynamic-template'),
 		  $ajaxCall;
 
 	if( typeof n === 'function' && typeof c === 'undefined' ) c = n;
 
 	$ajaxCall = $.get(f).success(function(response){
 		var mustachedTemplate = Mustache.render(response,u);
 
 		if( n === true ){
 			$templateDom.html(mustachedTemplate);
 		} else {
 			$templateDom.append(mustachedTemplate);
 		}
 
 		if( typeof c === 'function' ){
 			c(mustachedTemplate);
 		}
 
 	}).fail(function(response){
 		console.warn('Template error',response);
 
 	});
 
 	utils.queuedAjax.push($ajaxCall);
 
 	return true;
 });
 
 // ========================================
 // Load a json file from the back-end ( via GET )
 // Params:
 // 	url  - url/path to the external, back-end server
 //  callback - OPTIONAL callback function for the request
 //
 // ========================================
 utils.getData = utils.loadJSON = (function(f,u){
 	var $ajaxCall,
 			json;
 
 	$ajaxCall = $.get(f).success(function(response){
 		if( typeof response === 'String'){
 			try {
 				json = JSON.parse(response);
 			} catch(exception){
 				console.warn('JSON error',exception);
 			}
 		} else {
 			json = response;
 		}
 
 		if( typeof u === 'function' ){
 			u( json || null );
 		}
 	}).fail(function(response){
 		// console.warn('JSON error',response);
 
 	});
 
 	utils.queuedAjax.push($ajaxCall);
 });
 
 // ========================================
 // Send data to the back-end ( via POST )
 // Params:
 // 	url  - url/path to the external, back-end server
 //  data - parameters sent to the back-end
 //  callback - OPTIONAL function called after the back-end responds
 //
 // ========================================
 utils.sendData = utils.sendJSON = (function(f,u,n){
 	var $ajaxCall;
 
 	$ajaxCall = $.post(f,u).success(function(response){
 		if( typeof response === 'String'){
 			try {
 				json = JSON.parse(response);
 			} catch(exception){
 				console.warn('JSON error',exception);
 			}
 		} else {
 			json = response;
 		}
 
 		if( typeof n === 'function' ){
 			n( json || null );
 		}
 	}).fail(function(response){
 		console.warn('POST error',response);
 
 	});
 });
 
 // ========================================
 // Call a callback when a proper URL is given
 // Params:
 // 	url  - url/path expected
 //  callback - function called after URL is matched with the expected
 //
 // ========================================
 utils.onRoute = (function(f,u){
 	var urlParams = [];
 
 	if( f === null ){
 		f = 'index';
 	}
 
 	if( f[0] === '#' ){
 		f = f.substr(1);
 	}
 
 	urlParams = (f.match(/\{\w+\}/g) || []).map(function(paramQuote){
 		return paramQuote.substr(1,paramQuote.length-2);
 	});
 
 	f = f.replace(/\{\w+\}/g,'{p}');
 
 	if( typeof u === 'function' ){
 		utils.routesMapping[f] = {
 			callback: u,
 			params: urlParams
 		};
 	}
 
 	return utils;
 });
 
 // ========================================
 // Routing Setup Function
 // ========================================
 utils.routesMapping = {};
 
 $(function(){
 	$(window).on('hashchange load',function(ev){
 		var route = window.location.href.substr(window.location.origin.length).substr(2),
 				routeCallbackParams = {},
 				routeCallback;
 
 		utils.clearAjaxRequests();
 		if( utils.resetTemplateOnRouteChange === true ){
 			utils.clearTemplates();
 		}
 
 		for( var path in utils.routesMapping ){
 			var pathOption = utils.routesMapping[path],
 					regexMapping,
 					regexMatch,
 					regexSplit,
 					splitStep;
 
 			if( pathOption.params.length < Object.keys(routeCallbackParams).length && Object.keys(routeCallbackParams).length !== 0 ){
 				continue;
 			}
 
 			var a;
 
 			regexMapping = path.replace(/\//g,'\\/').replace(/{p}/g,'\\w+');
 
 			if( (regexMatch = route.match(new RegExp(regexMapping,'g')) || []) && regexMatch.length === 1 ){
 				routeCallbackParams = {};
 
 				regexSplit = (path.split(/\{\w+\}/) || []).filter(function(value){
 					return value;
 				});
 
 				splitStep = route;
 				for( var i = 0, j = regexSplit.length; i < j; i++ ){
 					var splitIndex = splitStep.indexOf(regexSplit[i]),
 							splitHead = splitStep.slice(0, splitIndex),
 							splitTail = splitStep.slice(splitIndex + regexSplit[i].length);
 
 					splitStep = splitTail;
 
 					if( splitHead && splitHead.indexOf('/') === -1 ){
 						routeCallbackParams[pathOption.params[i-1]] = splitHead;
 					}
 					if( splitTail && i === j-1 && splitTail.indexOf('/') === -1 ){
 						routeCallbackParams[pathOption.params[i]] = splitTail;
 					}
 				}
 
 				routeCallback = pathOption.callback;
 				a = pathOption;
 			}
 		}
 
 		if( !routeCallback ){
 			routeCallback = utils.routesMapping['index'];
 			a = 'index';
 		}
 
 		console.log(a);
 
 		if( typeof routeCallback === 'function' ){
 			routeCallback(routeCallbackParams);
 		}
 	});
 });
 
 // ========================================
 // Remove previous templates
 // ========================================
 utils.clearTemplates = (function(){
 	var $templateDom = $('#dynamic-template');
 
 	$templateDom.html('');
 });
 
 // ========================================
 // Cancel previous AJAX requests
 // ========================================
 utils.clearAjaxRequests = (function(){
 	$.each(utils.queuedAjax, function(i,request){
 		request.abort();
 	});
 	utils.queuedAjax = [];
 });
-// TODO: (URL masking function) window.history.pushState(null, null, route.substr(1) );
+
 
 // DOCCOOKIES
 
 var docCookies = {
   getItem: function (sKey) {
     if (!sKey) { return null; }
     return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
   },
   setItem: function (sKey, sValue, vEnd, sPath, sDomain, bSecure) {
     if (!sKey || /^(?:expires|max\-age|path|domain|secure)$/i.test(sKey)) { return false; }
     var sExpires = "";
     if (vEnd) {
       switch (vEnd.constructor) {
         case Number:
           sExpires = vEnd === Infinity ? "; expires=Fri, 31 Dec 9999 23:59:59 GMT" : "; max-age=" + vEnd;
           break;
         case String:
           sExpires = "; expires=" + vEnd;
           break;
         case Date:
           sExpires = "; expires=" + vEnd.toUTCString();
           break;
       }
     }
     document.cookie = encodeURIComponent(sKey) + "=" + encodeURIComponent(sValue) + sExpires + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "") + (bSecure ? "; secure" : "");
     return true;
   },
   removeItem: function (sKey, sPath, sDomain) {
     if (!this.hasItem(sKey)) { return false; }
     document.cookie = encodeURIComponent(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT" + (sDomain ? "; domain=" + sDomain : "") + (sPath ? "; path=" + sPath : "");
     return true;
   },
   hasItem: function (sKey) {
     if (!sKey) { return false; }
     return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
   },
   keys: function () {
     var aKeys = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
     for (var nLen = aKeys.length, nIdx = 0; nIdx < nLen; nIdx++) { aKeys[nIdx] = decodeURIComponent(aKeys[nIdx]); }
     return aKeys;
   }
 };