var vm;
var reportdata;
var reportlayout;
var layoutStyle = 0;
var layoutDivider = 0;
var layoutSpacing = 0;
var layoutPicturesDisplay = 0;
var layoutCaptionImages = false;
var layoutHighlightColor = "";
var mediasdata = [];
$(function () {
    $("#host_header").find(".button").remove();
    $("#spanUserName").remove();

    checkBrowser();

    if (teamintelligence) {
        $('.assettr').remove();
        $(".assettrmobile").remove();
    }
    vm = new Vue({
        el: '#divreport',
        data: {
            report: {
                Asset: {},
                Template: {},
                ReportLayout: {}
            }
        },
        methods: {
            reload: function (data) {
                this.report = data;
            }
        }
    });
    GetInspectionReport();
});

function checkBrowser() {
    if (isMobile()) {
        $(".logo").remove();
        $(".logoright").remove();
        $(".headernote").remove();
        $("#host_header").css("text-align", "left").css("min-width", "unset");

        $("#divreport").css("width", "unset");
        //$("#button-edit").remove();
        $("#button-print").remove();
        $("#button-dl").css("margin-right", 10);
        $(".assettr").remove();

        $("#tdiissues").attr("colspan", "2");
        $("#tdpages").attr("colspan", "2");
        //$(".assettrmobile").children().eq(0).css("width", 130);
        //$(".assettrmobile").children().eq(1).css("width", "auto");
        $(".assettrmobile").show();
    }
    else {
        $(".assettrmobile").remove();
    }
}

function GetInspectionReport() {
    showmaskbg(true);
    var p = JSON.stringify([teamintelligence, htmlencode(reportid)]);
    inspectionrequest("GetInspectionReport", p, function (data) {
        if (typeof (data) === "string") {
            showAlert(data, GetTextByKey("P_IPT_ERROR", 'Error'));
        }
        else {
            reportdata = data;
            reportlayout = data.ReportLayout;
            if (reportlayout) {
                layoutStyle = parseInt(reportlayout.Style);
                layoutDivider = parseInt(reportlayout.Divider);
                layoutSpacing = parseInt(reportlayout.Spacing);
                layoutPicturesDisplay = parseInt(reportlayout.PicturesDisplay);
                layoutCaptionImages = reportlayout.CaptionImages;
                layoutHighlightColor = reportlayout.HighlightColor;
                if (layoutStyle == 2)
                    layoutPicturesDisplay = 1;
            };
            vm.reload(data);
            showReportLayout(data.ReportLayout);
            showIdentifiedQuestions(data.IdentifiedQuestions);
            showPages(data);
            showSignature(data);
            if (layoutPicturesDisplay == 1 && mediasdata && mediasdata.length > 0) {
                showMedias();
            }
        }

        showmaskbg(false);
    }, function (err) {
        showmaskbg(false);
    });
}

function showReportLayout(layout) {
    $('#reportlayoutlogo').hide();
    $('#reportlayoutcenterlogo').hide();
    $('#reportlayoutrightlogo').hide();
    $('.td_pageheaderleft').html('');
    $('.td_pageheadercenter').html('');
    $('.td_pageheaderright').html('');
    $('.td_pagefooterleft').html('');
    $('.td_pagefootercenter').html('');
    $('.td_pagefooterright').html('');
    if (layout) {
        $('.td_pageheaderleft').html(layout.PageHeaderLeft);
        $('.td_pageheadercenter').html(layout.PageHeaderCenter);
        $('.td_pageheaderright').html(layout.PageHeaderRight);
        $('.td_pagefooterleft').html(layout.PageFooterLeft);
        $('.td_pagefootercenter').html(layout.PageFooterCenter);
        $('.td_pagefooterright').html(layout.PageFooterRight);

        $('#reportlayoutlogo').show();
        $('#reportlayoutcenterlogo').show();
        $('#reportlayoutrightlogo').show();
        if (layout.LOGO && layout.LOGO.length > 0) {
            var jpeg = layout.LOGO;
            if (typeof (layout.LOGO) !== "string") {
                jpeg = arrayBufferToBase64(layout.LOGO);
            }
            $('#reportlayoutlogo').attr('src', 'data:image/png;base64,' + jpeg);
        }
        if (layout.CenterLOGO && layout.CenterLOGO.length > 0) {
            var jpeg = layout.CenterLOGO;
            if (typeof (layout.CenterLOGO) !== "string") {
                jpeg = arrayBufferToBase64(layout.CenterLOGO);
            }
            $('#reportlayoutcenterlogo').attr('src', 'data:image/png;base64,' + jpeg);
        }
        if (layout.RightLOGO && layout.RightLOGO.length > 0) {
            var jpeg = layout.RightLOGO;
            if (typeof (layout.RightLOGO) !== "string") {
                jpeg = arrayBufferToBase64(layout.RightLOGO);
            }
            $('#reportlayoutrightlogo').attr('src', 'data:image/png;base64,' + jpeg);
        }
    }
}

function arrayBufferToBase64(buffer) {
    var binary = '';
    var bytes = new Uint8Array(buffer);
    var len = bytes.byteLength;
    for (var i = 0; i < len; i++) {
        binary += String.fromCharCode(bytes[i]);
    }
    return window.btoa(binary);
}

function showIdentifiedQuestions(questions) {
    if (!questions || questions.length == 0)
        return;
    var content = $('<div></div>');
    content.append($('<div class="catelog">IDENTIFIED ISSUES</div>'));
    if (questions && questions.length > 0) {
        createQuestionContent1(content, questions, true);
    }
    else
        content.append($('<div class="question"></div>').text(GetTextByKey("P_IPT_NOQUESTIONS", 'No Questions')));

    $('#divquestions').append(content);
}


function showSeverityLevel(level) {
    if (layoutStyle == 1 || layoutStyle == 2)
        return "";

    var levertext = GetTextByKey("P_IPT_SEVERITYLEVEL_COLON", "Severity Level: ");
    if (level === 0)
        levertext = "";
    if (level === 1)
        levertext += GetTextByKey("P_IPT_SL_LOW", "Low");
    else if (level === 2)
        levertext += GetTextByKey("P_IPT_SL_MEDIUM", "Medium");
    else if (level === 3)
        levertext += GetTextByKey("P_IPT_SL_HIGH", "High");
    return levertext;
}

function showPages(report) {
    var pages = report.Template.Pages;
    var pagescontent = $('<div></div>');
    pagescontent.append($('<div class="catelog" style="margin-top:20px;">' + GetTextByKey("P_IPT_INSPECTIONDETAIL", "INSPECTION DETAIL") + '</div>'));

    for (var i = 0; i < pages.length; i++) {
        var p = pages[i];
        var pagecontent = createPage(p);
        pagescontent.append(pagecontent);
    }
    $('#divpages').append(pagescontent);
}

function showSignature(report) {
    if (report && report.SignatureUrl && report.SignatureUrl != "") {
        var divsign = $('#divsign');
        divsign.append($('<div class="catelog" style="margin-top:20px;">' + GetTextByKey("P_IPT_SIGNATURE", "Signature") + '</div>'));
        var div_pic = $('<div></div>');
        divsign.append(div_pic);
        var pic = $('<img style="height:320px; margin-left:70px;margin-right:10px;margin-bottom:10px;"></img>').attr('src', report.SignatureUrl);

        div_pic.append(pic);
        if (layoutDivider == 1)//Line
            div_pic.addClass('question_line');
        else if (layoutDivider == 2)//Grid
            div_pic.addClass('question_div_grid');

        div_pic.css('line-height', layoutSpacing == 1 ? '32px' : '16px');
    }
}

function showMedias() {
    var content = $('<div></div>');
    content.append($('<div class="catelog">Required	Images</div>'));
    if (layoutStyle == 1) {//Compressed
        var div_question = $('<table style="width:100%;" class="question_table"></table>');
        content.append(div_question);
        var tr_question = "";
        for (var i = 0; i < mediasdata.length; i++) {
            var m = mediasdata[i];
            if (i % 3 == 0) {
                tr_question = $('<tr style="width:100%;"></tr>');
                div_question.append(tr_question);
            }

            var td_pic = $('<td style="width:33%;"></td>');
            tr_question.append(td_pic);
            var piccontent = createMedias(m);
            td_pic.append(piccontent);
        }

        var m_count = mediasdata.length % 3;
        if (m_count != 0) {
            for (var i = 0; i < 3 - m_count; i++) {
                tr_question.append($('<td style="width:33%;"></td>'));
            }
        }

        if (layoutDivider == 1)//Line
            div_question.addClass('question_line');
        else if (layoutDivider == 2)//Grid
            div_question.addClass('question_table_grid');

        div_question.css('line-height', layoutSpacing == 1 ? '32px' : '16px');
    }
    else if (layoutStyle == 2) {//Split
        var div_question = $('<table style="width:100%;" class="question_table"></table>');
        content.append(div_question);
        var tr_question = "";
        for (var i = 0; i < mediasdata.length; i++) {
            var m = mediasdata[i];
            if (i % 4 == 0) {
                tr_question = $('<tr style="width:100%;"></tr>');
                div_question.append(tr_question);
            }

            var td_pic = $('<td style="width:25%;"></td>');
            tr_question.append(td_pic);
            var piccontent = createMedias(m);
            td_pic.append(piccontent);
        }

        var m_count = mediasdata.length % 4;
        if (m_count != 0) {
            for (var i = 0; i < 4 - m_count; i++) {
                tr_question.append($('<td style="width:25%;"></td>'));
            }
        }

        if (layoutDivider == 1)//Line
            div_question.addClass('question_line');
        else if (layoutDivider == 2)//Grid
            div_question.addClass('question_table_grid');

        div_question.css('line-height', layoutSpacing == 1 ? '32px' : '16px');
    }
    else {
        var div_question = $('<table style="width:100%;" class="question_table"></table>');
        content.append(div_question);
        for (var i = 0; i < mediasdata.length; i++) {
            var m = mediasdata[i];
            var tr_question = $('<tr style="width:100%;"></tr>');
            div_question.append(tr_question);

            var td_pic = $('<td style="width:100%;"></td>');
            tr_question.append(td_pic);
            var piccontent = createMedias(m);
            td_pic.append(piccontent);
        }

        if (layoutDivider == 1)//Line
            div_question.addClass('question_standard_table_line');
        else if (layoutDivider == 2)//Grid
            div_question.addClass('question_standard_table_grid');

        if (layoutSpacing == 1)//Double Space
            div_question.css('line-height', layoutSpacing == 1 ? '32px' : '16px');
    }
    $('#divpages').append(content);
}

function createMedias(m) {
    var piccontent = $('<div style="float:left;"></div>');
    if (['.mp4', '.mov'].indexOf(m.FileType.toLowerCase()) >= 0) {
        var v = $('<div class="media"><span class="video"></span></div>');
        v.click(m.Url, function (e) {
            window.open(e.data, "_blank")
        });
        piccontent.append(v);
        if (layoutCaptionImages) {
            var div_caption = $('<div class="mediacaption"></div>').attr('title', m.FileName);
            piccontent.append(div_caption);
            var span_caption = $('<span></span>').text(m.FileName);
            div_caption.append(span_caption);
        }
    }
    else {
        var pic = $('<img class="media"></img>').attr('src', m.ThumbnailUrl);
        pic.click(m.Url, function (e) {
            window.open(e.data, "_blank")
        });
        piccontent.append(pic);
        if (layoutCaptionImages) {
            var div_caption = $('<div class="mediacaption"></div>').attr('title', m.FileName);;
            piccontent.append(div_caption);
            var span_caption = $('<span></span>').text(m.FileName);
            div_caption.append(span_caption);
        }
    }
    return piccontent;
}

function createPage(page) {
    var content = $('<div style="padding:0px;"></div>');
    if (layoutStyle == 1 || layoutStyle == 2) {
        var tabpage = $('<table class="question_table"style="width:100%;background-color:#a9a9a9" ></table>');
        content.append(tabpage);
        var trpage = $('<tr style="width:100%;text-align:center;" ></tr>');
        tabpage.append(trpage);
        var tdpage = $('<td style="width:100%;" ></td>');
        trpage.append(tdpage);
        tdpage.append($('<span></span>').text(page.DisplayText));

        if (layoutDivider == 1)//Line
            tabpage.addClass('question_line');
        else if (layoutDivider == 2)//Grid
            tabpage.addClass('question_table_grid');

        tabpage.css('line-height', layoutSpacing == 1 ? '32px' : '16px');
    }
    else {
        var divpage = $('<div class="page"></div>');
        content.append(divpage);

        var btnpage = $('<em class="spanbtn iconangledown" style="font-size:22px;width:24px;"></em>');
        btnpage.click(function () {
            var icon = $(this);
            if (icon.hasClass('iconangleright')) {
                icon.removeClass('iconangleright').addClass('iconangledown');
                icon.parent().next().show();
            }
            else {
                icon.removeClass('iconangledown').addClass('iconangleright');
                icon.parent().next().hide();
            }
        });
        divpage.append(btnpage);
        divpage.append($('<span></span>').text(page.DisplayText));
    }

    var sectioncontent = createSectionContent(page);
    content.append(sectioncontent);

    return content;
}

function createSectionContent(page) {
    var content = $('<div style="margin-bottom:30px;"></div>');
    if (layoutStyle == 1 || layoutStyle == 2) {
        if (page.Sections && page.Sections.length > 0) {
            for (var i = 0; i < page.Sections.length; i++) {
                var s = page.Sections[i];

                var tabsection = $('<table class="question_table"style="width:100%;background-color:#cbcbcb;" ></table>');
                content.append(tabsection);
                var trsection = $('<tr style="width:100%;text-align:center;" ></tr>');
                tabsection.append(trsection);
                var tdsection = $('<td style="width:100%;" ></td>');
                trsection.append(tdsection);
                tdsection.append($('<span></span>').text(s.DisplayText));

                if (layoutDivider == 1)//Line
                    tabsection.addClass('question_line');
                else if (layoutDivider == 2)//Grid
                    tabsection.addClass('question_table_grid');

                tabsection.css('line-height', layoutSpacing == 1 ? '32px' : '16px');

                var qc = createQuestionContent(s);
                content.append(qc);
            }
        }
    }
    else {
        if (page.Sections && page.Sections.length > 0) {
            for (var i = 0; i < page.Sections.length; i++) {
                var s = page.Sections[i];
                var divsection = $('<div class="section"></div>');
                content.append(divsection);

                var btnsection = $('<em class="spanbtn iconangledown" style="font-size:18px;display:inline-block;"></em>');
                btnsection.click(function () {
                    var icon = $(this);
                    if (icon.hasClass('iconangleright')) {
                        icon.removeClass('iconangleright').addClass('iconangledown');
                        icon.parent().next().show();
                    }
                    else {
                        icon.removeClass('iconangledown').addClass('iconangleright');
                        icon.parent().next().hide();
                    }
                });
                divsection.append(btnsection);
                var ispic = false;
                if (s.StaticPictures && s.StaticPictures.length > 0) {
                    ispic = true;
                    var div_pic = $('<span></span>');
                    createPictures(s.StaticPictures, div_pic);
                    divsection.append(div_pic);
                    divsection.append('<br/>');
                }
                var span_title = $('<span></span>').text(s.DisplayText);
                if (ispic)
                    span_title.css('margin-left', 24);
                divsection.append(span_title);

                var qc = createQuestionContent(s);

                content.append(qc);
            }
        }
        else
            content.append($('<div class="question"></div>').text('No Sections'));
    }
    return content;
}

function createQuestionContent(section) {
    var content = $('<div style="margin-bottom:30px;"></div>');
    if (section.Questions && section.Questions.length > 0) {
        createQuestionContent1(content, section.Questions, false);
    }
    else
        content.append($('<div class="question"></div>').text(GetTextByKey("P_IPT_NOQUESTIONS", 'No Questions')));
    return content;
}

function createQuestionContent1(content, questions, isidentified) {
    if (questions && questions.length > 0) {
        if (layoutStyle == 1) {//Compressed
            var div_question = $('<table style="width:100%;" class="question_table"></table>');
            content.append(div_question);
            for (var i = 0; i < questions.length; i++) {
                var q = questions[i];
                if (ignoreQuestion(q, isidentified)) continue;

                var tr_question = $('<tr style="width:100%;"></tr>');
                div_question.append(tr_question);
                tr_question.append($('<td style="width:33%;"></td>').text(q.DisplayText));
                var td_answer = $('<td style="width:33%;"></td>');
                tr_question.append(td_answer);
                createAnswerContent(td_answer, q, isidentified);
                var td_comment = $('<td style="width:33%;"></td>');
                tr_question.append(td_comment);
                var comment = td_answer.data('comment');
                if (comment && comment != "") {
                    td_comment.append($('<div class="answer"></div>').html(replaceHtmlText(comment)));
                }
                if (q.IsImportant && layoutHighlightColor)
                    tr_question.css('color', layoutHighlightColor);
            }

            if (layoutDivider == 1)//Line
                div_question.addClass('question_line');
            else if (layoutDivider == 2)//Grid
                div_question.addClass('question_table_grid');

            div_question.css('line-height', layoutSpacing == 1 ? '32px' : '16px');
        }
        else if (layoutStyle == 2) {//Split
            var div_question = $('<table style="width:100%;" class="question_table"></table>');
            content.append(div_question);
            var tr_question = "";
            var qindex = 0;
            for (var i = 0; i < questions.length; i++) {
                var q = questions[i];
                if (ignoreQuestion(q, isidentified)) continue;

                if (qindex % 2 == 0) {
                    tr_question = $('<tr style="width:100%;"></tr>');
                    div_question.append(tr_question);
                }
                var td_question = $('<td style="width:25%;"></td>').text(q.DisplayText);
                tr_question.append(td_question);
                var td_answer = $('<td style="width:25%;"></td>');
                tr_question.append(td_answer);
                createAnswerContent(td_answer, q, isidentified);
                if (q.IsImportant && layoutHighlightColor) {
                    td_question.css('color', layoutHighlightColor);
                    td_answer.css('color', layoutHighlightColor);
                }

                qindex++;
            }
            if (qindex % 2 != 0) {
                tr_question.append($('<td style="width:25%;"></td><td style="width:25%;"></td>'));
            }
            if (layoutDivider == 1)//Line
                div_question.addClass('question_line');
            else if (layoutDivider == 2)//Grid
                div_question.addClass('question_table_grid');

            div_question.css('line-height', layoutSpacing == 1 ? '32px' : '16px');
        }
        else {
            for (var i = 0; i < questions.length; i++) {
                var q = questions[i];
                if (ignoreQuestion(q, isidentified)) continue;

                var tab_question = $('<table style="width:100%;" class="question_table"></table>');
                content.append(tab_question);
                var tr_question = $('<tr style="width:100%;"></tr>');
                tab_question.append(tr_question);
                var td_question = $('<td style="width:100%;"></td>');
                tr_question.append(td_question);
                var div_question = $('<div class="question"></div>');
                td_question.append(div_question);
                var div_title = $('<div style="width:320px;flex-grow:1;"></div>').text(q.DisplayText);
                div_question.append(div_title);
                if (q.StaticPictures && q.StaticPictures.length > 0) {
                    var div_pic = $('<div style=""></div>');
                    div_pic = createPictures(q.StaticPictures, div_pic);
                    div_question.append(div_pic)
                }

                tr_question = $('<tr style="width:100%;"></tr>');
                tab_question.append(tr_question);
                var td_answer = $('<td style="width:100%;"></td>');
                tr_question.append(td_answer);
                createAnswerContent(td_answer, q, isidentified);

                if (layoutDivider == 1)//Line
                    tab_question.addClass('question_standard_table_line');
                else if (layoutDivider == 2)//Grid
                    tab_question.addClass('question_standard_table_grid');

                tab_question.css('line-height', layoutSpacing == 1 ? '32px' : '16px');

                if (q.IsImportant && layoutHighlightColor) {
                    tab_question.css('color', layoutHighlightColor);
                    div_question.css('color', layoutHighlightColor);
                }
            }
        }

        content.find('.answer').each(function () {
            var div_answer = $(this);
            if (layoutStyle == 1 || layoutStyle == 2) {
                div_answer.addClass('table_content');
            }
        });
        content.find('.div_media').each(function () {
            var div_media = $(this);
            if (layoutStyle == 1 || layoutStyle == 2) {
                div_media.css('padding-left', '3px');
            }
        });
    }
    return content;
}

function createPictures(pictures, p) {
    for (var i = 0; i < pictures.length; i++) {
        var pic = pictures[i];
        var img = $('<img style="height:30px;margin-left:5px;"/>').attr('src', pic.Url).attr('title', pic.Name);
        img.click(pic.Url, function (e) {
            window.open(e.data, "_blank")
        });
        $(p).append(img);
    }
    return p;
}
function ignoreQuestion(q, isidentified) {
    var ignore = false;
    if (q.QuestionType == 10 || (q.QuestionType == 15 && q.SubType == 15)) {//Picture
        var hasPicture = false;
        if (reportdata && reportdata.Answers) {
            for (var i = 0; i < reportdata.Answers.length; i++) {
                var a = reportdata.Answers[i];
                if (a.QuestionId.toLowerCase() == q.Id.toLowerCase()) {
                    if (reportdata.Medias && reportdata.Medias.length > 0) {
                        for (var j = 0; j < reportdata.Medias.length; j++) {
                            var m = reportdata.Medias[j];
                            if (m.AnswerId.toLowerCase() == a.Id.toLowerCase()) {
                                if (layoutPicturesDisplay == 1)//Displayed At Bottom
                                {
                                    if (isidentified == false)
                                        mediasdata.push(m);
                                }
                                else
                                    hasPicture = true;
                            }
                        }
                    }
                }
            }
        }
        ignore = !hasPicture;
    }
    else
        ignore = false;
    return ignore;
}

function createAnswerContent(p, q, isidentified) {
    var leveltext = showSeverityLevel(q.SeverityLevel);
    var label_level = $('<label class="label_level"></label>').text(leveltext);
    if (reportdata && reportdata.Answers) {
        for (var i = 0; i < reportdata.Answers.length; i++) {
            var a = reportdata.Answers[i];
            if (a.QuestionId.toLowerCase() == q.Id.toLowerCase()) {
                p.data('comment', a.Comment);
                if ([5, 8, 9, 10, 14, 15, 19].indexOf(q.QuestionType) < 0
                    || (q.QuestionType == 15 && q.SubType != 15)) {//except YesOrNo/DropDown/MultipleChoice/Picture/FuelRecords
                    var result = a.Result;
                    if (result == null) {
                        result = '';
                    }
                    if (q.QuestionType == 6 && result.indexOf(' ') >= 0)//Date do not show time
                        result = result.split(' ')[0];
                    if (q.QuestionType == 11//Odometer
                        || q.QuestionType == 18 //FuelUsed
                        || (q.QuestionType == 15 && q.SubType == 8)//FuelRecords Odometer
                        || (q.QuestionType == 15 && q.SubType == 10))//FuelRecords Quantity
                        result += " " + convertUnits(a.Units);

                    var div_answer = $('<div class="answer"></div>').data('isimportant', q.IsImportant);
                    if (q.QuestionType == 1
                        || (q.QuestionType == 15 && q.SubType == 14))
                        p.append(div_answer.html(replaceHtmlText(result)));
                    else if (q.QuestionType == 17 && q.TextToCompare != null && result.toLowerCase() != q.TextToCompare.toLowerCase())  // BarCodeValidate
                        p.append(div_answer
                            .append($('<span style="color:red"></span>').text(result))
                            .append($('<span style="margin-left:6px"></span>').text('(' + q.TextToCompare + ')'))
                        );
                    else
                        p.append(div_answer.text(result));

                    div_answer.append(label_level);
                    p.append(item);
                    if (layoutStyle == 0)
                        p.append("<div style='clear:both;'></div>");
                }
                else if (q.QuestionType == 5) {//YesOrNo
                    if (a.SelectedItems && a.SelectedItems.length > 0) {
                        var item = $('<div class="answer" ></div>').data('isimportant', q.IsImportant);
                        var div_bg = $('<div class="circle"></div>');
                        var label = $('<label style="margin-left:5px;"></lable>').text(a.SelectedItems[0].Text);
                        item.append(div_bg);
                        item.append(label);
                        leveltext = showSeverityLevel(a.SelectedItems[0].SeverityLevel);
                        label_level = $('<label class="label_level"></label>').text(leveltext);
                        item.append(label_level);
                        if (a.SelectedItems[0].BackgroundColor && a.SelectedItems[0].BackgroundColor != "") {
                            div_bg.css('background-color', a.SelectedItems[0].BackgroundColor);
                        }

                        p.append(item);
                        if (layoutStyle == 0)
                            p.append("<div style='clear:both;'></div>");
                    }
                }
                else if (q.QuestionType == 8 || q.QuestionType == 9//DropDown、List
                    || (q.QuestionType == 15 && q.SubType == 6)
                    || (q.QuestionType == 15 && q.SubType == 9)) {
                    if (q.MultipleSelect) {
                        if (a.SelectedItems && a.SelectedItems.length > 0) {
                            for (var j = 0; j < a.SelectedItems.length; j++) {
                                var item = $('<div class="answer"></div>').data('isimportant', q.IsImportant);
                                var div_bg = $('<div class="circle"></div>');
                                var label = $('<label style="margin-left:5px;"></lable>').text("" + (j + 1) + ". " + a.SelectedItems[j].Text);
                                item.append(div_bg);
                                item.append(label);
                                leveltext = showSeverityLevel(a.SelectedItems[j].SeverityLevel);
                                label_level = $('<label class="label_level"></label>').text(leveltext);
                                item.append(label_level);
                                if (a.SelectedItems[j].BackgroundColor && a.SelectedItems[j].BackgroundColor != "") {
                                    div_bg.css('background-color', a.SelectedItems[j].BackgroundColor);
                                }

                                p.append(item);
                                if (layoutStyle == 0)
                                    p.append("<div style='clear:both;'></div>");
                            }
                        }
                    }
                    else {
                        if (a.SelectedItems && a.SelectedItems.length > 0) {
                            var item = $('<div class="answer"></div>').data('isimportant', q.IsImportant);
                            var div_bg = $('<div class="circle"></div>');
                            var label = $('<label style="margin-left:5px;"></lable>').text(a.SelectedItems[0].Text);
                            item.append(div_bg);
                            item.append(label);
                            leveltext = showSeverityLevel(a.SelectedItems[0].SeverityLevel);
                            label_level = $('<label class="label_level"></label>').text(leveltext);
                            item.append(label_level);
                            if (a.SelectedItems[0].BackgroundColor && a.SelectedItems[0].BackgroundColor != "") {
                                div_bg.css('background-color', a.SelectedItems[0].BackgroundColor);
                            }
                            p.append(item);
                            if (layoutStyle == 0)
                                p.append("<div style='clear:both;'></div>");
                        }
                    }
                }
                else if (q.QuestionType == 14) {//Email (Drop Down)
                    if (a.SelectedItems && a.SelectedItems.length > 0) {
                        for (var j = 0; j < a.SelectedItems.length; j++) {
                            var item = $('<div class="answer"></div>').data('isimportant', q.IsImportant);
                            var label = $('<label style="margin-left:5px;"></lable>').text("" + (j + 1) + ". " + a.SelectedItems[j].Text + "<" + a.SelectedItems[j].Value + ">");
                            item.append(label);
                            item.append(label_level);
                            p.append(item).append("<div style='clear:both;'></div>");
                        }
                    }
                }
                else if (q.QuestionType == 10
                    || (q.QuestionType == 15 && q.SubType == 15)) {//Picture
                    if (layoutPicturesDisplay != 1) {//Displayed At Bottom
                        var pics = $('<div class="div_media" style="min-height:80px;overflow:auto;padding-left:90px;"></div>').data('isimportant', q.IsImportant);
                        p.append(pics);
                    }
                    //pics.append(label_level);
                    if (reportdata.Medias && reportdata.Medias.length > 0) {
                        for (var j = 0; j < reportdata.Medias.length; j++) {
                            var m = reportdata.Medias[j];
                            if (m.AnswerId.toLowerCase() == a.Id.toLowerCase()) {
                                if (layoutPicturesDisplay == 1)//Displayed At Bottom
                                {
                                    if (isidentified == false)
                                        mediasdata.push(m);
                                }
                                else {//Displayed As Taken
                                    var media = createMedias(m);
                                    pics.append(media);
                                }
                            }
                        }
                    }
                }
                else if (q.QuestionType == 19) {//Asset Status
                    var divanswer = $('<div class="answer" ></div>').data('isimportant', q.IsImportant);
                    if (a.SelectedItems && a.SelectedItems.length > 0) {
                        var div_bg = $('<div class="circle"></div>');
                        var label = $('<label style="margin-left:5px;"></lable>').text(a.SelectedItems[0].Text);
                        divanswer.append(div_bg);
                        divanswer.append(label);
                        if (a.SelectedItems[0].BackgroundColor && a.SelectedItems[0].BackgroundColor != "") {
                            div_bg.css('background-color', a.SelectedItems[0].BackgroundColor);
                        }

                        p.append(divanswer);
                        if (layoutStyle == 0)
                            p.append("<div style='clear:both;'></div>");
                    }
                    divanswer.append(label_level);
                    if (layoutPicturesDisplay != 1) {//Displayed At Bottom
                        var pics = $('<div class="div_media" style="min-height:80px;overflow:auto;padding-left:90px;"></div>').data('isimportant', q.IsImportant);
                        p.append(pics);
                    }
                    if (reportdata.Medias && reportdata.Medias.length > 0) {
                        for (var j = 0; j < reportdata.Medias.length; j++) {
                            var m = reportdata.Medias[j];
                            if (m.AnswerId.toLowerCase() == a.Id.toLowerCase()) {
                                if (layoutPicturesDisplay == 1)//Displayed At Bottom
                                {
                                    if (isidentified == false)
                                        mediasdata.push(m);
                                }
                                else {//Displayed As Taken
                                    var media = createMedias(m);
                                    pics.append(media);
                                }
                            }
                        }
                    }
                    if (a.Result && a.Result != "") {
                        var divresult = $('<div class="answer"></div>').data('isimportant', q.IsImportant).html(replaceHtmlText(a.Result));
                        p.append(divresult);
                        if (q.IsImportant && layoutHighlightColor)
                            divresult.css('color', layoutHighlightColor);
                    }
                }
                if (layoutStyle != 1 && layoutStyle != 2 && a.Comment && a.Comment != "") {
                    var divcomment = $('<div class="answer" style="color:#808080"></div>').data('isimportant', q.IsImportant).html(replaceHtmlText(a.Comment));
                    p.append(divcomment);
                    if (q.IsImportant && layoutHighlightColor)
                        divcomment.css('color', layoutHighlightColor);
                }
            }
        }
    }


    //public string Id { get; set; }
    //public string QuestionId { get; set; }
    //public string Result { get; set; }
    //public string Comment { get; set; }
    //public string Units { get; set; }
    //public SeverityLeveles SeverityLevel { get; set; }
    //public List<SelectItem> SelectedItems { get; }

    //SingleLineText = 0,
    //MultipleLineText = 1,
    //Email = 2,
    //Number = 3,
    //Integer = 4,
    //YesOrNo = 5,
    //Date = 6,
    //DateAndTime = 7,
    //DropDown = 8,
    //MultipleChoice = 9,
    //Picture = 10,
    //Odometer = 11,
    //EngingHours = 12

    //如果是非select类型，则是界面上直接录的值
    //如果question type为odometer时，units表示所用的单位，其它类型忽略units
    //如果question是select类型的(多选，单选，yes / no) ，则忽略result, 此时question的答案要从selecteditems当中去取
    //如果是picture类型，result存的是media的id,
    //@Tsanie picture类型是这样的吧
    //picture类型的没在ReportInfo结构上存，是MediaInfo里的AnswerId为ReportInfo里的Id
    //如果AssetStatus类型，result存的是notes


}

function convertUnits(u) {
    switch (u.toLowerCase()) {
        case "mile":
            return "Mile(s)";
        case "kilometre":
        case "kilometer":
            return "Kilometer";
        case "percent":
            return "Percent";
        case "gallon":
        case "gal":
            return "Gallon";
        case "litre":
            return "Litre";
        default:
            break;
    }
    return u;
}

function isLight(color) {
    color = color.replace('#', '');
    var r, g, b;
    if (color.length == 6) {
        r = '0x' + color.substr(0, 2);
        g = '0x' + color.substr(2, 2);
        b = '0x' + color.substr(4, 2);

        return 0.213 * parseInt(r) + 0.715 * parseInt(g) + 0.072 * parseInt(b) > 255 / 2;
    }
    return true;
}