function displayTopHTML(pickup, noPickup) {
    var html = '';

    html += '<ul>';
    pickupCount = pickup.length;
    if (pickupCount > 4) pickupCount = 4;
    for (var i = 0; i < pickupCount; i++) {
        if (!pickup[i]) break;
        var areaIcon = getAreaIcon(pickup[i].area);
        html += '<li>';
        html += '<div>';
        html += '<p class="photo"><a href="/event/detail/' + pickup[i].id + '.html">';
        html += pickup[i].event_image + '</a></p>';
        html += '<div class="articleBox">';
        html += '<p class="text"><a href="/event/detail/' + pickup[i].id + '.html">' + pickup[i].title.escapeHTML() + '</a></p>';
        html += '<p class="articleInfo"><img src="/common/images/' + areaIcon + '" alt="' + pickup[i].area + '" width="45" height="19" />';
        html += '（' + pickup[i].list_view_term.escapeHTML() + '）</p>';
        html += '<p class="outline">' + pickup[i].pickup_summary.escapeHTML() + '</p>';
        html += '</div>';
        html += '</div>';
        html += '</li>';
    }
    html += '</ul>';
    html += '<!-- /articleBlock -->';
    html += '</div>';
    html += '<div class="articleList">';
    html += '<ul>';

    noPickupCount = noPickup.length;
    if (noPickupCount > 4) noPickupCount = 2;
    for (var i = 0; i < noPickupCount; i++) {
        var areaIcon = getAreaIcon(noPickup[i].area);
        html += '<li><img src="/common/images/' + areaIcon + '" alt="' + noPickup[i].area + '" width="45" height="19" />';
        html += '<p><a href="/event/detail/' + noPickup[i].id + '.html">' + noPickup[i].title.escapeHTML();
        html += '（' + noPickup[i].list_view_term.escapeHTML() + '）</a></p>';
        html += '</li>';
    }
    html += '</ul>';

    if (pickupCount == 0 && noPickupCount == 0) html = '現在イベントはありません。';
    document.getElementById('topEvent').innerHTML = html;
}

function displayRightNaviHTML(obj) {
    var html = '';
    html += '<ul>';
    objCount = obj.length;
    if (objCount > 4) objCount = 4;
    for (var i = 0; i < objCount; i++) {
        var areaIcon = getAreaIcon(obj[i].area);
        html += '<li>';
        html += '<div>';
        html += '<p class="photo"><a href="/event/detail/' + obj[i].id + '.html">';
        html += obj[i].event_image + '</a></p>';
        html += '<div class="articleBox">';
        html += '<p class="text"><a href="/event/detail/' + obj[i].id + '.html">' + obj[i].title.escapeHTML() + '</a></p>';
        html += '<p class="articleInfo"><img src="/common/images/' + areaIcon + '" alt="' + obj[i].area + '" width="45" height="19" />';
        html += '（' + obj[i].list_view_term.escapeHTML() + '）</p>';
        html += '</div>';
        html += '</div>';
        html += '</li>';
    }
    html += '</ul>';
    html += '<!-- /articleBlock -->';

    if (objCount == 0) html = '現在イベントはありません。';
    document.getElementById('rightNavi').innerHTML = html;
}

function displayEventPickupHtml(obj, count) {
    var html = '';
    if (!count || obj.length < 4) {
        count = obj.length;
    }
    html += '<ul>';
    for (var i = 0; i < count; i++) {
        areaIcon = getAreaIcon(obj[i].area);

        html += '<li>';
        html += '<div>';
        html += '<p class="photo">';
        html += '<a href="/event/detail/' + obj[i].id + '.html">';
        html += obj[i].event_image;
        html += '</a></p>';
        html += '<div class="articleBox">';
        html += '<p class="text">';
        html += '<a href="/event/detail/' + obj[i].id + '.html">' + obj[i].title.escapeHTML() + '</a></p>';
        html += '<p class="articleInfo">';
        html += '<img src="/common/images/' + areaIcon + '" alt="' + obj[i].area + '" width="45" height="19">（' + obj[i].list_view_term.escapeHTML() + '）';
        html += '</p>';
        html += '</div>';
        html += '</div>';
        html += '</li>';
    }
    html += '</ul>';

    if (count == 0) html = '現在イベントはありません。';
    document.getElementById('topEventPickup').innerHTML = html;
}

function displayEventMonthHtml(obj, count, after) {
    if (after) {
        var divId = 'topEventMonthAfter';
    } else {
        var divId = 'topEventMonth';
    }

    if (!count) {
        count = obj.length;
    } else if (count > obj.length) {
        count = obj.length;
    }

    var html = '';
    html += '<ul>';
    for (var i = 0; i < count; i++) {
        areaIcon = getAreaIcon(obj[i].area);
        start = obj[i].start_term.split('-');
        end = obj[i].end_term.split('-');

        html += '<li>';
        html += '<img src="/common/images/' + areaIcon + '" alt="' + obj[i].area + '" width="45" height="19" />';
        html += '<p>';
        html += '<a href="/event/detail/' + obj[i].id + '.html">' + obj[i].title.escapeHTML() + '（' + obj[i].list_view_term.escapeHTML() + '）</a>';
        html += '</p>';
        html += '</li>';
    }
    html += '</ul>';

    if (count == 0) html = '現在イベントはありません。';
    document.getElementById(divId).innerHTML = html;

}

function displayEventInTerm(obj) {
    var html = '';

    if (obj.length > 0) {
        html += '<div class="section">';
        html += '<h3 class="design02"><img src="/event/images/com_h006.gif" alt="このイベントの期間内で開催しているほかのイベント" width="670" height="29" /></h3>';
        html += '<div class="scrollBlock">';
        html += '<div class="articleBlock">';
        html += '<ul>';

        for (var i = 0; i < obj.length; i++) {
            var areaIcon = getAreaIcon(obj[i].area);

            html += '<li>';
            html += '<div>';
            if (obj[i].event_image != "") {
                html += '<p class="photo">';
                html += '<a href="/event/detail/' + obj[i].id + '.html">';
                html += obj[i].event_image + '</a></p>';
            }
            html += '<div class="articleBox">';
            html += '<p class="text"><a href="/event/detail/' + obj[i].id + '.html">' + obj[i].title.escapeHTML() + '</a></p>';
            html += '<p class="articleInfo"><img src="/common/images/' + areaIcon + '" alt="' + obj[i].area + '" width="45" height="19" />';
            html += '（' + obj[i].list_view_term.escapeHTML() + '）</p>';
            html += '</div>';
            html += '</div>';
            html += '</li>';
        }
        html += '</ul>';
        html += '</div>';
        html += '</div>';
        html += '</div>';
    } else {
        html += '';
    }
    document.getElementById('detailEventInTerm').innerHTML = html;

}

function displayRelatedEvent(obj) {
    var html = '';
    html += '<ul>';
    for (var i = 0; i < obj.length; i++) {
        var areaIcon = getAreaIcon(obj[i].area);
        html += '<li>';
        html += '<div>';
        if (obj[i].event_image != "") {
            html += '<p class="photo">';
            html += '<a href="/event/detail/' + obj[i].id + '.html">';
            html += obj[i].event_image + '</a></p>';
        }
        html += '<div class="articleBox">';
        html += '<p class="text"><a href="/event/detail/' + obj[i].id + '.html">';
        html += obj[i].title.escapeHTML() + '</a></p>';
        html += '<p class="articleInfo"><img src="/common/images/' + areaIcon + '" alt="' + obj[i].area + '" width="45" height="19" />';
        html += '（' + obj[i].list_view_term.escapeHTML() + '）</p>';
        html += '</div>';
        html += '</div>';
        html += '</li>';
    }
    html += '</ul>';
    html += '<!-- /articleBlock -->';

    if (obj.length == 0) html = '現在イベントはありません。';
    document.getElementById('detailRelatedEvent').innerHTML = html;
}

function getMDDate(startStr, endStr) {
    var startArr = startStr.split('-');
    var endArr = endStr.split('-');
    var returnStr = '';
    var sdate = new Date(startArr[0], startArr[1] - 1, startArr[2]);

    if (startStr == endStr) {
        returnStr = (sdate.getMonth() + 1) + '月' + sdate.getDate() + '日';
    } else {
        var edate = new Date(endArr[0], endArr[1] - 1, endArr[2]);
        returnStr = (sdate.getMonth() + 1) + '月' + sdate.getDate() + '日～' + (edate.getMonth() + 1) + '月' + edate.getDate() + '日';
    }
    return returnStr;
}