function xlWidgetRenderer() {

    this.drawWidget = function(options) {
    	// old "arguments" API
    	if(arguments.length > 1) {
	    	var newOptions = {};
    			optionNames = ["type", "host", "altTitle", "altText", "pageId", "prefillQuestion", "readOnly", "height"],
	    		name,
	    		i,
	    		j;
	    	for(var i = 0, j = arguments.length; i < j; i++) {
	    		name = optionNames[i];
	    		newOptions[name] = arguments[i];
	    	}
	    	options = newOptions;
    	}
        if(options.type == "teamhelpnow" && document.getElementById('helpNowWidgetDefaultContent')) {
            if(typeof(xlTeamJSON) != "undefined" && xlTeamJSON.availableExpertCount > 0) {
                document.getElementById('helpNowWidgetDefaultContent').innerHTML = this.renderWidget.call(this, options);
            }
        }
        else {
            document.write(this.renderWidget.call(this, options));
        }
    }

    this.renderWidget = function(options)  {
    	options = options || {};
    	var optionNames = ["type", "host", "altTitle", "altText", "pageId", "prefillQuestion", "readOnly", "height"],
    		name,
    		i,
    		j;
    	for(i = 0, j = optionNames.length; i < j; i++) {
    		name = optionNames[i];
    		options[name] = options[name] || null;
    	}
    	var type = options.type,
	    	host = options.host,
	    	altTitle = options.altTitle,
	    	altText = options.altText,
	    	pageId = options.pageId,
	    	prefillQuestion = options.prefillQuestion, 
	    	readOnly = options.readOnly,
	    	height = (options.height || 200) - 55;
    	
        // make sure we've loaded the team JSON
        if(typeof(xlTeamJSON) == "undefined")
            return;

        if(this.type=="")
            type = "teammembers";
        var html = "";

        if(type == "membersbadge") {
            var title = altTitle? altTitle : "About " + xlTeamJSON.team.name;

            html += '<div class="xlWidgetContainer">';
            html += '<div class="xlWidgetTitle">'+title+'</div>';
            html += xlTeamJSON.team.headline;
            html += "<br><br>Total number of help sessions: "+xlTeamJSON.teamSessions+"<br>";
            html += "Total number of customers helped: "+xlTeamJSON.teamCustomers+"<br>";
            html += "Team rating: +"+xlTeamJSON.teamPlusCount+"/-"+xlTeamJSON.teamMinusCount+'<br><hr style="border:0; height: 1px; background-color: #AAAAAA">';
            html += xlTeamJSON.team.aboutTeam;

            html += this.renderPoweredBy();
            html += '</div>';
        }
        else if (type == "teamrates") {

            var title = altTitle? altTitle : xlTeamJSON.team.name+" Rates";

            html += '<div class="xlWidgetContainer">';
            html += '<div class="xlWidgetTitle">'+title+'</div>';

            //alert($.toJSON(xlTeamJSON));

            html += '<table class="xlWidgetRatesTable" border="0" cellpadding="3" cellspacing="0">';
            html += '<tr>';
            html += '<td><strong>Standard Hourly Rate</strong></td>';
            html += '<td><strong>USD 50</strong></td>';
            html += '<tr>';
            for(var i in xlTeamJSON.ownerServiceRates) {
                var rate = xlTeamJSON.ownerServiceRates[i];
                html += '<tr>';
                html += '<td><strong>'+rate.service+'</strong><br>'+rate.description+'</td>';
                html += '<td><strong>'+rate.price+'</strong></td>';
                html += '<tr>';
            }
            html += '</table>';

            html += this.renderPoweredBy();
            html += '</div>';
        }
        else if (type == "teamhelpnow") {
            var title = altTitle? altTitle : "I need help with...";
            var buttonTextParam = altText? "&buttonText="+altText : "";
            var partner = options.partner? options.partner : "";
            var prefill = prefillQuestion? prefillQuestion : "";
            var ro = readOnly? "true" : "false";
            var url = pageId? "&url="+pageId : "";

            html += '<div class="xlHelpNowWidgetContainer">';
            html += '<div style="padding:6px;">';
            html += '<div style="padding:0px 0px 6px 0px;font-size:16px; font-weight:bold;float:none; ">' + title + '</div>';

            html += '<div align="center"><iframe id="xlHelpNowWidgetIframe" scrolling="no" height="'+height+'" width="100%" allowtransparency="true" frameborder="0" style="overflow-x: hidden; overflow-y: hidden;" src="https://'+host+'/team/'+xlTeamJSON.team.name+'?type=teamhelpnow'+url+'&prefill='+prefill+buttonTextParam+'&partner='+partner+'&ro='+ro+'&rand='+(new Date()).getTime()+'&textheight='+(height-50)+'"></iframe></div>';

            html += '</div>';

            html += '<div style="float:none;">'+this.renderPoweredBy()+'</div>';
            html += '</div>';
        }
        else if (type == "teamtestimonials") {
            html += '<div class="xlWidgetContainer">';
            html += '<div class="xlWidgetTitle">'+xlTeamJSON.team.name+' Testimonials</div>';

            for(var i in xlTeamJSON.teamComments) {
                var comment = xlTeamJSON.teamComments[i];
                html += '<div class="xlWidgetQuote">"'+comment.comment + '"';
                html += '<div class="xlWidgetQuoteName">- '+comment.helpeeScreenName+' at ';
                html += '<script type="text/javascript">';
                html += 'document.write("'+this.renderStandardDate(comment.when)+'");';
                html += '</script>';
                html += '</div>';
                html += '</div>';
                
            }
                    
            html += this.renderPoweredBy();
            html += '</div>';
        }
        else if (type == "teammembers") {
            html += '<div class="xlWidgetContainer">';
            html += '<div class="xlWidgetTitle">'+xlTeamJSON.team.name+' Members</div>';
            //alert($.toJSON(xlTeamJSON.members));            
            for (var member in xlTeamJSON.members) {
                var data = xlTeamJSON.members[member];
                html += '<div class="xlWidgetExpertContainer">';
                html += '<img class="xlWidgetExpertImage" src="http://'+ host + "/" + data.imageUrl + '"/>';
                html += '<div class="xlWidgetExpertDetails">';
                html += '<strong><a style="float: left" href="http://'+ host + '/' + data.screenName + '">' + data.firstName + ' ' + data.lastName + '</a></strong>';
                var tags = data.tags? data.tags.substring(0, 50) : "none";
                html += '<div style="clear:both; font-size: 10px; font-weight: bold">Expertise: '+tags+'</div>';
                html += '<div style="font-size: 10px;">'+data.publicSessionCount+' Sessions<br>';
                html += data.customerCount+' Customers<br>';
                html += 'Rating: +' +data.plusCount+'/-'+data.minusCount;
                html += '</div>';
                html += '</div>';
                //if (data.availableNow)
                //    html += '<div class="xlWidgetChatNowSmall"><a href="#" onclick="return xlWidgets.chatNow(\''+data.obfuscatedAccountId+'\',\''+host+'\');">Chat Now</a></div>';
                html += '<div style="clear:both"></div>';
                html += '</div>';
            }

            html += this.renderPoweredBy();
            html += '</div>';
        }

        return html;
    }

    this.renderPoweredBy = function() {
        if(document.location.href.match(/http:\/\/\w+.crossloop.com/))
            return '';
        else
            return '<div class="xlWidgetPoweredBy">Powered By <a href="http://www.crossloop.com" style="color:#228822;">CrossLoop</a></div>';
    }

    this.renderStandardDate = function(dateAsEpochInt) {
        var date = (new Date(parseInt(dateAsEpochInt)));
        var mins = date.getMinutes() >= 10? date.getMinutes() : "0" + date.getMinutes();
        var secs = date.getSeconds() >= 10? date.getSeconds() : "0" + date.getSeconds();

        return date.getHours() + ":" + mins + ":" + secs + " on " + (date.getMonth() + 1) + "/" + date.getDate();
    }

    this.chatNow = function(contactMeId, host){
        var helpeeChatURL = "https://"+host+"/contacthelper.htm?id="+contactMeId;

        var chatw = window.open(helpeeChatURL, '_blank','toolbar=no, location=0, directories=no, status=0, menubar=no, scrollbars=no, resizable=yes, copyhistory=no, width=670, height=500');
        var xmlHttp = [];
        var date = new Date();
        return false;
    }
}

var xlWidgets = new xlWidgetRenderer();