﻿function RenderOnTheRoadTextAndImageWidget(uId, data, serviceType, customRender, showTitle, bgColor, titleColor, linkColor, textColor) {
    var titleClass, listClass, listItemClass, listAltItemClass;
    var elements = [];
    if (uId == '')
        uId = 'OnTheRoadTextAndImageWidget';

    switch (serviceType) {
        case 'blogger':
            titleClass = 'sidebar-title';
            listClass = '';
            listItemClass = '';
            listAltItemClass = '';
            break;
        case 'typepad':
            titleClass = 'module-header';
            listClass = 'module-list';
            listItemClass = 'module-list-item';
            listAltItemClass = 'module-list-item';
            break;
    }

    if (customRender) {
        elements.push('<div class="OTR-textAndImageWidget">');

        if (showTitle)
            elements.push('<h2 class="OTR-textAndImageWidget-title">' + data.Title + '</h2>');

        elements.push('<ul class="OTR-textAndImageWidget-list">');
        for (var idx = 0; idx < data.Articles.length; idx++) {
            elements.push('<li class="' + (idx % 2 == 0 ? 'OTR-textAndImageWidget-item' : 'OTR-textAndImageWidget-altItem') + '"><a href="' + data.Articles[idx].Url + '">' + data.Articles[idx].Title + '</a><p>');

            if (data.Articles[idx].ImageUrl != null ) {
		if (data.Articles[idx].ImageUrl.length > 0) {
                  elements.push('<img src="' + data.Articles[idx].ImageUrl + '" width="75px" height="75px" style="float:left;margin: 0px 4px 2px 0px;" />');
                }
            }

            elements.push(data.Articles[idx].Body + '<br class="OTR-textAndImageWidget-cleaner" /></p></li>');
        }
        elements.push('</ul>');

        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 + ';') : '');
        textColor = (textColor != '' ? ('color:' + textColor + ';') : '');

        elements.push('<div style="' + bgColor + '">');

        if (showTitle)
            elements.push('<h2 class="' + titleClass + '" style="' + titleColor + '">' + data.Title + '</h2>');

        elements.push('<ul class="' + listClass + '" style="margin:0px;padding:0px;">');
        for (var idx = 0; idx < data.Articles.length; idx++) {
            elements.push('<li class="' + (idx % 2 == 0 ? listItemClass : listAltItemClass) + '" style="margin:0px;padding:0px;list-style-type:none;"><a href="' + data.Articles[idx].Url + '" style="' + linkColor + '">' + data.Articles[idx].Title + '</a><p style="' + textColor + '">');

            if (data.Articles[idx].ImageUrl != null ) {
		if (data.Articles[idx].ImageUrl.length > 0) {
                  elements.push('<img src="' + data.Articles[idx].ImageUrl + '" width="75px" height="75px" style="float:left;margin: 0px 4px 2px 0px;" />');
                }
            }

            elements.push('<span style="font-size:85%">[' + data.Articles[idx].Date + ']</span>&nbsp;' + data.Articles[idx].Body + '<br style="clear:both;" /></p></li>');
        } 
        elements.push('</ul>');

        elements.push('<a href="' + data.Url + '" style="' + linkColor + '">' + data.UrlTitle + '</a>');
        elements.push("</div>");
    }

    document.getElementById(uId).innerHTML = elements.join("");
}