function RenderOnTheRoadMapWidget(uId, data, serviceType, customRender, showTitle, bgColor, titleColor, linkColor) {
	var titleClass;
	var elements = [];
	
	var markerAreaRadius = 8;
	var markerAreaXOffset = -7;
	var markerAreaYOffset = -15;

	switch (serviceType) {
		case 'blogger':
			titleClass = 'sidebar-title';
			break;
		case 'typepad':
			titleClass = 'module-header';
			break;
	}
	
	if (customRender) {
		elements.push('<div>');
		
		if (showTitle)
			elements.push('<h2>' + data.Title + '</h2>');
		
		elements.push('<div style="position:relative;">');
		
		var mapSize = data.MapSize.split(', ');
		elements.push('<img src="' + data.MapUrl + '" alt="" width="' + mapSize[0] + 'px" height="' + mapSize[1] + 'px" usemap="#' + uId + '-map" border="0" />');
		
		elements.push('<map name="' + uId + '-map">');
		for (var idx = 0; idx < data.Markers.length; idx++) {
			if (data.Markers[idx].ShowBubble) {
				var bubblePosition = data.Markers[idx].PixelPosition.split(', ');
				elements.push('<area shape="circle" coords="' + (parseInt(bubblePosition[0]) + markerAreaXOffset) + ',' + (parseInt(bubblePosition[1]) + markerAreaYOffset) + ',' + markerAreaRadius + '" href="' + data.Markers[idx].ArticleUrl + '" alt="" onmouseover=\'ShowMarkerInfoBubble("'+ uId + '", ' + bubblePosition[0] + ', ' + bubblePosition[1] + ', "' + data.Markers[idx].ImageUrl + '", "' + data.Markers[idx].Title + '", "' + data.Markers[idx].Date + '", "' + data.Markers[idx].Description + '");\' onmouseout="HideMarkerInfoBubble("' + uId + '");" />');
			}
		}
		elements.push('</map>');
		
		elements.push('<div id="' + uId + '-bubble" style="display:none;position:absolute;top:0px;left:0px;z-index:1000000;width:320px;height:103px;background-image:url(http://www.ontheroad.to/res/homepage/backBubble.png);background-repeat:no-repeat;padding-left:24px;padding-top:14px;">');
			elements.push('<span style="display:block;float:left;margin-left:0px;"><img id="' + uId + '-bubble-img" alt="" src="" width="75" height="75"></span>');
			elements.push('<span id="' + uId + '-bubble-title" style="color:#0982c0;margin-left:10px;font: 12px Arial, Helvetica, sans-serif;"></span>');
			elements.push('<br />');
			elements.push('<span id="' + uId + '-bubble-info" style="color:#787878;margin-left:10px;font: 11px Arial, Helvetica, sans-serif;"></span>');
			elements.push('<span id="' + uId + '-bubble-text" style="float:left;margin-top:10px;width:188px;margin-left:10px;font: 11px Arial, Helvetica, sans-serif;"></span>');
		elements.push('</div>');
		
		elements.push('</div>');
		
		elements.push('<br />');
		elements.push('<a href="' + data.Url + '">' + data.UrlTitle + '</a>');
		elements.push('</div>');
	}
	else {
		bgColor = (bgColor != '' ? ('background-color:' + bgColor + ';padding:5px;') : '');
		titleColor = (titleColor != '' ? ('color:' + titleColor + ';') : '');
		linkColor = (linkColor != '' ? ('color:' + linkColor + ';') : '');
	
		elements.push('<div style="' + bgColor + '">');
		
		if (showTitle)
			elements.push('<h2 class="' + titleClass + '" style="' + titleColor + '">' + data.Title + '</h2>');
		
		elements.push('<div style="position:relative;">');
		
		var mapSize = data.MapSize.split(', ');
		elements.push('<img src="' + data.MapUrl + '" alt="" width="' + mapSize[0] + 'px" height="' + mapSize[1] + 'px" usemap="#' + uId + '-map" border="0" />');
		
		elements.push('<map name="' + uId + '-map">');
		for (var idx = 0; idx < data.Markers.length; idx++) {
			if (data.Markers[idx].ShowBubble) {
				var bubblePosition = data.Markers[idx].PixelPosition.split(', ');
				elements.push('<area shape="circle" coords="' + (parseInt(bubblePosition[0]) + markerAreaXOffset) + ',' + (parseInt(bubblePosition[1]) + markerAreaYOffset) + ',' + markerAreaRadius + '" href="' + data.Markers[idx].ArticleUrl + '" alt="" onmouseover=\'ShowMarkerInfoBubble("'+ uId + '", ' + bubblePosition[0] + ', ' + bubblePosition[1] + ', "' + data.Markers[idx].ImageUrl + '", "' + data.Markers[idx].Title + '", "' + data.Markers[idx].Date + '", "' + data.Markers[idx].Description + '");\' onmouseout="HideMarkerInfoBubble("' + uId + '");" />');
			}
		}
		elements.push('</map>');
		
		elements.push('<div id="' + uId + '-bubble" style="display:none;position:absolute;top:0px;left:0px;z-index:1000000;width:320px;height:103px;background-image:url(http://www.ontheroad.to/res/homepage/backBubble.png);background-repeat:no-repeat;padding-left:24px;padding-top:14px;">');
			elements.push('<span style="display:block;float:left;margin-left:0px;"><img id="' + uId + '-bubble-img" alt="" src="" width="75" height="75"></span>');
			elements.push('<span id="' + uId + '-bubble-title" style="color:#0982c0;margin-left:10px;font: 12px Arial, Helvetica, sans-serif;"></span>');
			elements.push('<br />');
			elements.push('<span id="' + uId + '-bubble-info" style="color:#787878;margin-left:10px;font: 11px Arial, Helvetica, sans-serif;"></span>');
			elements.push('<span id="' + uId + '-bubble-text" style="float:left;margin-top:10px;width:188px;margin-left:10px;font: 11px Arial, Helvetica, sans-serif;"></span>');
		elements.push('</div>');
		
		elements.push('</div>');
		
		elements.push('<br />');
		elements.push('<a href="' + data.Url + '" style="' + linkColor + '">' + data.UrlTitle + '</a>');
		elements.push('</div>');
	}
	
	elements.push('<A HREF="http://www.toplist.cz/" target="_top"><IMG SRC="http://www.toplist.cz/count.asp?ID=917622&logo=blank" BORDER="0" ALT="TOPlist" WIDTH="1" HEIGHT="1"></A>');
	document.getElementById(uId).innerHTML = elements.join("");
	
	if (serviceType == 'blogger' && (document.getElementById('main-wrapper') != null))
		document.getElementById('main-wrapper').style.overflow = 'visible';
}

function ShowMarkerInfoBubble(uId, posX, posY, imgUrl, title, date, description)
{
	var markerAreaXOffset = 5;
	var markerAreaYOffset = -50;
	
	var bubble = document.getElementById(uId + '-bubble');
	
	bubble.style.display = 'block';
	bubble.style.top = (posY + markerAreaYOffset) + 'px';
	bubble.style.left = (posX + markerAreaXOffset) + 'px';
	
	document.getElementById(uId + '-bubble-img').src = imgUrl;
	document.getElementById(uId + '-bubble-title').innerHTML = title;
	document.getElementById(uId + '-bubble-info').innerHTML = date;
	document.getElementById(uId + '-bubble-text').innerHTML = description;
}

function HideMarkerInfoBubble(uId)
{
	var bubble = document.getElementById(uId + '-bubble');
	bubble.style.display = 'none';
}