(function ($) {
    $(function () {
    	class People{
    		constructor(selector, data){
    			this.selector = selector;
    			this.data = $(selector).data();
    			this.template = '#people_template';
            	this.sample_people = {
                		login: '01515b52-6936-46b2-a000-9ad4cd7a5b50',
                		firstname: "first",
                		lastname: "last",
                		phone: '041122221',
                		email: 'abc@gmail.com',
                		pay: 0,
                		hour: 12,
                		OT: 3,
                		petrol: 50,
                		rating: 3,
                	};    	
            	this.load_data(this.data);
    		}
    		
    		load_data(data){
    			var template = $(this.template).html(); 
    			var html = Mustache.render(template, data);
    			$(selector).html(html);
    			//save it
    			$(selector).data(data);
    		}
    		
    	}//end of class People
    	
		function bts_people_html(data){
			var template = $('#people_template').html(); 
			var html = Mustache.render(template, data);
			var head = '<div class="peopleitem" id="'+ data.login +'">';
			r = head + html + '</div>' ;
			return r;
		}
    	
        for (var i=1; i<100; i++){
        	var sample_people = {
            		login: '01515b52-6936-46b2-a000-9ad4cd7a5b50' +i,
            		firstname: "first"+i,
            		lastname: "last",
            		phone: '041122221' +i,
            		email: 'abc@gmail.com' + i,
            		wages: 0,
            		hour: i,
            		OT: 3,
            		petrol: 50 +i,
            		rating: 3,
            	};
            var html = bts_people_html(sample_people);
            jQuery('div.stafflist').append(html);
         }    	
    	
    });
})(jQuery);