// constructor
function Badge(){
	this.init();
}

Badge.prototype = {
	// set json to the class
	create: function(containerId, data, setting){
		
		if( isDefined(setting.src) ) this.src = setting.src;
		else this.src = "";
		
		if( isDefined(setting.width) ) this.width = setting.width;
		else this.width="";
		
		if( isDefined(setting.height) ) this.height = setting.height;		
		else this.height="";		

		this.containerId = containerId;
		this.createBadge();
	},
	init: function(){
	},
	createBadge: function(data){
		var output = '';
		var object = this;
		try{
			$.getJSON(object.src + "&callback=?", function(data){
				//data = eval("(" + data + ")");
				data = data.data;
				
				$("#" + object.containerId).html(object.createBadge3(data));
			});
		}catch(e){}
	},
	createBadge1:function(data){
		var id = data.id;
		var image = data.image + "?crop(48x48)";
		var name = data.title;
		var location = ucfirst( data.community.region_name ) + " - " + ucfirst( data.community.community );
		var url = data.url;
		var object = this;
		output = '<div class="badge bg-cream round" style="padding:10px;margin:30px; width: 200px;" id="myfj-badge-' + id + '">';
			output += '<div class="bg-white round" style="padding:5px;">';
				output += '<a href="' + url + '" target="_blank">' + name + '</a>';
				if( data.color == "yellow" || data.color == "orange" ) output += '<span style="padding-left:10px;"><img src="' + HTTP_SERVER + 'images/assets/heart/heart_small_darkgrey.png" /> ' + data.totalNomination + "</span>";
				else output += '<span style="padding-left:10px;"><img src="' + HTTP_SERVER + 'images/assets/heart/heart_small_cream.png" /> ' + data.totalNomination + "</span>";
				output += '<br />';
				output += '<a class="non-bold" href="' + data.community.url + '">' + ucwords(location) + '</a>';
			output += '</div>';		
			output += '<img src="' + HTTP_SERVER + 'images/assets/homepage/hearts/solid/home_logo_' + data.color + '.png?resize(160x120)" style="margin-top:30px;" />';
		output += '</div>';
		return output;
	},
	createBadge2:function(data){
		var id = data.id;
		if( this.width!="" ){
			var image = data.image + "?crop(" + this.width + "x" + this.height + ")";	
		}else{
			var image = data.image + "?crop(48x48)";
		}
		var name = data.title;
		var location = ucfirst( data.community.region_name ) + " - " + ucfirst( data.community.community );
		var url = data.url;
		var object = this;
		output = '<a href="' + url + '" target="_blank">';
		output += '<img id="myfj-image" border="0" src="' + HTTP_SERVER + 'images/assets/homepage/hearts/solid/home_logo_' + data.color + '.png?resize(38x38)" />';
		output += '</a>';
	
		var tooltipTxt = '<div class="bg-' + data.color + '" style="padding:3px; font-weight:bold; font-size:10px;">';
			tooltipTxt += '<a href="' + url + '" style="text-decoration:none;">' + name + '</a>';
			if( data.color == "yellow" || data.color == "orange" ) tooltipTxt += '<span style="text-decoration:none; line-height:10px; padding-left:10px;"><img src="' + HTTP_SERVER + 'images/assets/heart/heart_small_darkgrey.png?resize(12)" /> ' + data.totalNomination + "</span>";
			else tooltipTxt += '<span style="padding-left:10px; line-height:10px; text-decoration:none;"><img src="' + HTTP_SERVER + 'images/assets/heart/heart_small_cream.png?resize(12)" /> ' + data.totalNomination + "</span>";
			//tooltipTxt += '<span style="padding-left:10px;" style="text-decoration:none;">' + ucwords(location) + '</span>';
			tooltipTxt += '<div style="text-decoration:none;">Click to visit MYFJ.com</div>';			
		tooltipTxt += '</div>';			
		object.createTooltip(tooltipTxt);
		return output;
	},
	createBadge3:function(data){
		var id = data.id;
		var image = data.image + "?crop(48x48)";
		var name = data.title;
		var location = ucfirst( data.community.region_name ) + " - " + ucfirst( data.community.community );
		var url = data.url;
		var object = this;
		
		if( this.width==60 )
			var cropParameter = "?resize(60x45)";
		else
			var cropParameter = "?resize(40x30)";
			
		output = '<a href="' + url + '" target="_blank">';
		output += '<img id="myfj-image" border="0" src="' + HTTP_SERVER + 'images/assets/badge/myfjbadge_60x45_' + data.color + '_s.png' + cropParameter + '" onmouseover="this.src=\'' + HTTP_SERVER + 'images/assets/badge/myfjbadge_60x45_' + data.color + '_o.png' + cropParameter + '\';" onmouseout="this.src=\'' + HTTP_SERVER + 'images/assets/badge/myfjbadge_60x45_' + data.color + '_s.png' + cropParameter + '\';" />';
		output += '</a>';
		/*
		var tooltipTxt = '<div class="bg-' + data.color + '" style="padding:3px; font-weight:bold; font-size:10px;">';
			tooltipTxt += '<a href="' + url + '" style="text-decoration:none;">' + name + '</a>';
			if( data.color == "yellow" || data.color == "orange" ) tooltipTxt += '<span style="text-decoration:none; line-height:10px; padding-left:10px;"><img src="' + HTTP_SERVER + 'images/assets/heart/heart_small_darkgrey.png?resize(12)" /> ' + data.totalNomination + "</span>";
			else tooltipTxt += '<span style="padding-left:10px; line-height:10px; text-decoration:none;"><img src="' + HTTP_SERVER + 'images/assets/heart/heart_small_cream.png?resize(12)" /> ' + data.totalNomination + "</span>";
			//tooltipTxt += '<span style="padding-left:10px;" style="text-decoration:none;">' + ucwords(location) + '</span>';
			tooltipTxt += '<div style="text-decoration:none;">Click to visit MYFJ.com</div>';			
		tooltipTxt += '</div>';			
		object.createTooltip(tooltipTxt);
		*/
		return output;
	},
	createTooltip: function(text){
		$("#" + this.containerId).each(function(e) {
			var tt_txt = text;
			if( tt_txt!="" ){
				var tt_left = Math.round($(this).position().left);
				var tt_top = Math.round($(this).position().top-40);
				var tt_html = '<div id="tt-'+tt_left+tt_top+'" class="tooltip round hidden" style="height:15px;">' + tt_txt + '</div>';
				$(this).after(tt_html);
				$(this).hover(
					function(e) {
						$( '#tt-'+tt_left+tt_top ).css("left",tt_left+'px').css("top",tt_top+'px');
						$( '#tt-'+tt_left+tt_top ).fadeIn();
						e.stopImmediatePropagation();						
					},
					function(e) {
						$('.tooltip').fadeOut();
						e.stopImmediatePropagation();						
					}
				);
			}
		});
	}
}