function hostedDataSidebar(i) {
    var totalRecords = GoogleMapping.hostedData.length;
    if ((totalRecords % 5) == 0) {
        numberOfPages = parseInt(totalRecords / 5);
    }
    else {
        numberOfPages = parseInt(totalRecords / 5) + 1;
    }
    
    var hostedDiv = new StringBuilder();
    hostedDiv.append('<table class="gsc-resultsHeader" cellpadding="0" cellspacing="0"><tr><td id="twidle" class="gsc-twiddleRegionCell gsc-twiddle-opened" onclick="javascript:toggle();">');
    hostedDiv.append('<div class="gsc-twiddle"><div class="gsc-title">Validated Locations</div></div></td></tr></table>');
    hostedDiv.append('<div id="sidebar" style="display:block">');
    if (i != numberOfPages) {
        for (var j = (i - 1) * 5; j < (5*i); j++) {
            var title = GoogleMapping.hostedDataHtml[j].title;
            var type = GoogleMapping.hostedDataHtml[j].type;
            var address = GoogleMapping.hostedDataHtml[j].address;
            //title = title.replace(type, '');
            hostedDiv.append('<a style="color: #f89828; text-decoration: none; font-family: Arial, Verdana; font-size: 12px;" href="javascript:closerHosted(' + j + ', \'none\')">' + title +'</a><br/>');
            hostedDiv.append('<div style="color: #808083; font-size: 12px;">' + address + '</div>');
            hostedDiv.append('<a style="color: #B9D300; font-size: 12px;" href="javascript:closerHosted(' + j + ', \'directions\')">directions</b></a><br/>');
        }
    }
    else {
        for (var j = (i - 1) * 5; j < GoogleMapping.hostedData.length; j++) {
            var title = GoogleMapping.hostedDataHtml[j].title;
            var type = GoogleMapping.hostedDataHtml[j].type;
            var address = GoogleMapping.hostedDataHtml[j].address;
            //title = title.replace(type, '');
            hostedDiv.append('<a style="color: #f89828; text-decoration: none; font-family: Arial, Verdana; font-size: 12px;" href="javascript:closerHosted(' + j + ', \'none\')">' + title + '</a><br/>');
            hostedDiv.append('<div style="color: #808083; font-size: 12px;">' + address + '</div>');
            hostedDiv.append('<a style="color: #B9D300; font-size: 12px;" href="javascript:closerHosted(' + j + ', \'directions\')">directions</b></a><br/>');
        }
    }
    
    if (GoogleMapping.hostedData.length > 5) {
        var pages = createPageLinks(i, numberOfPages);
        hostedDiv.append(pages);
    }
    hostedDiv.append('</div>');
    var div = document.getElementById('hostedData');
    div.style.display = 'block';
    div.innerHTML = hostedDiv;
}

function createPageLinks(i, numberOfPages) {
    var numberOfPages;
    var pages = new StringBuilder();
    
    pages.append('<div>');
    for (var j = 0; j < numberOfPages; j++) {
        if ((j+1) == i) {
            pages.append('<a style="color: #6b8b33; font-size: 11px;">' + (j + 1) + '</a>&nbsp;');
            if ((j + 1) % 9 == 0) {
                pages.append('<br/>');
            }
        }
        else {
            pages.append('<a style="color: #6b8b33; font-size: 11px;" href="javascript:hostedDataSidebar(' + (j + 1) + ');">' + (j + 1) + '</a>&nbsp;');
            if ((j + 1) % 9 == 0) {
                pages.append('<br/>');
            }
        }
    }
    pages.append('</div>');
    return pages.toString();
}

function toggle() {
    var twiddle = document.getElementById('sidebar');
    if (twiddle.style.display == 'block') {
        twiddle.style.display = 'none';
        document.getElementById('twidle').setAttribute('class', 'gsc-twiddleRegionCell gsc-twiddle-closed');
    }
    else {
        twiddle.style.display = 'block';
        document.getElementById('twidle').setAttribute('class', 'gsc-twiddleRegionCell gsc-twiddle-opened');
    }
}