define([], function () {
    var QTypes = {
        SingleLineText: 0,
        MultipleLineText: 1,
        Email: 2,
        Number: 3,
        Integer: 4,
        YesOrNo: 5,
        Date: 6,
        DateAndTime: 7,
        DropDown: 8,
        List: 9,
        Picture: 10,
        Odometer: 11,
        EngingHours: 12,
        FuelRemaining: 13,
        EmailList: 14,
        FuelRecords: 15,
        BarCode: 16,
        BarCodeValidate: 17,
        FuelUsed: 18,
        AssetStatus: 19
    };
    var LookupSources = {
        None: 0,
        Jobsites: 1,
        Assets: 2,
        Employee: 3,
        AssetCustomerName: 4
    };
    var FuelRecordTypes = {
        TransactionDate: 0,
        TicketNumber: 1,
        DriverName: 2,
        RetailerName: 3,
        RetailerAddress: 4,
        City: 5,
        State: 6,
        Zip: 7,
        Odometer: 8,
        FuelType: 9,
        Quantity: 10,
        UnitCost: 11,
        TotalCost: 12,
        BrandName: 13,
        Notes: 14,
        Picture: 15,
        DistributedBy: 16
    };

    // base question type
    var question = function (q) {
        this.question = q;
        // comment
        // content
        // unit
        this.ui = {};
        // items
        this.data = {};
    };
    question.prototype.createContent = function (answer, medias, change) {
        this.answer = answer;
        var content = $('<div class="question-item" style="line-height: 26px; margin: 0 0 22px 22px"></div>');
        var q = this.question;

        var div_title = $('<div style="font-weight: bold; font-size: 1.1em"></div>').text(q.DisplayText);
        if (q.IsRequired) {
            div_title.append('<span style="color: red; margin-left: 4px">*</span>');
        }
        content.append(div_title);
        if (q.StaticPictures && q.StaticPictures.length > 0) {
            var div_pic = $('<div></div>');
            for (var i = 0; i < q.StaticPictures.length; i++) {
                var pic = q.StaticPictures[i];
                var img = $('<img style="width:40px;height:40px;margin-left:5px;"/>').attr('src', pic.Url).attr('title', pic.Name);
                img.click(pic.Url, function (e) {
                    window.open(e.data, "_blank")
                });
                div_pic.append(img);
            }
            content.append(div_pic);
        }

        var cnt = $('<div style="margin: 6px 0 0 22px"></div>');
        if (typeof this.createQuestion === 'function') {
            this.ui.content = this.createQuestion(answer, medias, change);
            cnt.append(this.ui.content);
        } else {
            cnt.append('<div style="font-style: italic; color: #ccc">&lt;Not implemented yet.&gt;</div>');
        }
        var divComment = $('<div style="padding: 6px 0"></div>');
        if (q.CanComment) {
            var comment = $('<textarea class="form-control" style="width: 100%; box-sizing: border-box; height: 70px" placeholder="Comment"></textarea>');
            comment.attr('maxlength', 500);
            if (answer && answer.Comment) {
                comment.val(answer.Comment);
            }
            this.ui.comment = comment;
            divComment.append(comment);
        }
        cnt.append(divComment);
        content.append(cnt);
        return content;
    };
    question.prototype.getAnswer = function () {
        var answer = this.answer;
        if (answer == null) {
            answer = {
                'QuestionId': this.question.Id,
                'SeverityLevel': this.question.SeverityLevel
            };
            this.answer = answer;
        }
        if (this.ui.comment != null) {
            answer.Comment = this.ui.comment.val();
        }
        return answer;
    };
    question.prototype.focus = function () {
        if (this.ui.comment != null) {
            this.ui.comment.focus();
        }
    };

    // input type question
    var inputQuestion = function (q) {
        question.call(this, q);
    };
    inputQuestion.prototype = Object.create(question.prototype);
    inputQuestion.prototype.constructor = inputQuestion;
    inputQuestion.prototype.createQuestion = function (answer, _medias, change) {
        var content = $('<div></div>');
        var input;
        if (this.question.QuestionType === QTypes.MultipleLineText
            || (this.question.QuestionType === QTypes.FuelRecords &&
                this.question.SubType === FuelRecordTypes.Notes)) {
            input = $('<textarea style="width: 100%; height: 70px"></textarea>');
        } else {
            input = $('<input type="text" style="width: 100%; height: 21px"></input>');
        }
        if (this.question.QuestionType === QTypes.Email) {
            input.attr('placeholder', 'name@example.com; ...');
        } else if (this.question.QuestionType === QTypes.FuelRecords) {
            if (this.question.SubType === FuelRecordTypes.TotalCost) {
                input.prop('readonly', true).css('background', '#eee');
            } else if (this.question.SubType === FuelRecordTypes.Quantity
                || this.question.SubType === FuelRecordTypes.UnitCost) {
                if (typeof change === 'function') {
                    input.on('input propertychange', this, change);
                }
            }
        }
        if (answer && answer.Result) {
            input.val(answer.Result);
        }
        input.attr('maxlength', 500);
        input.css('box-sizing', 'border-box');
        input.addClass('form-control');
        this.ui.input = input;
        if (typeof this.createUnit === 'function') {
            content.append(this.createUnit(answer));
            content.append($('<div style="margin-right: 110px"></div>').append(input));
        } else {
            content.append(input);
        }

        if (this.question.QuestionType === QTypes.AssetStatus) {
            if (_medias && _medias.length > 0) {
                var div_pic = $('<div></div>');
                for (var i = 0; i < _medias.length; i++) {
                    var pic = _medias[i];
                    var img = $('<img style="width:40px;height:40px;margin-left:5px;"/>').attr('src', pic.Url).attr('title', pic.Name);
                    img.click(pic.Url, function (e) {
                        window.open(e.data, "_blank")
                    });
                    div_pic.append(img);
                }
                content.append(div_pic);
            }
        }

        return content;
    };
    inputQuestion.prototype.getAnswer = function () {
        var answer = question.prototype.getAnswer.call(this);
        //if (this.question.QuestionType !== QTypes.FuelRecords ||
        //    this.question.SubType !== FuelRecordTypes.TotalCost) {
        answer.Result = this.ui.input.val();
        //}
        return answer;
    };
    inputQuestion.prototype.fillResult = function (result) {
        if (this.ui.input != null) {
            this.ui.input.val(result);
        }
    };
    inputQuestion.prototype.focus = function () {
        this.ui.input.focus();
    };

    // input with dropdown
    var inputDropQuestion = function (q) {
        inputQuestion.call(this, q);
    };
    inputDropQuestion.prototype = Object.create(inputQuestion.prototype);
    inputDropQuestion.prototype.constructor = inputDropQuestion;
    inputDropQuestion.prototype.createUnit = function (answer) {
        var selector = $('<select style="float: right; width: 100px; height: 21px; margin-top: 2px"></select>');
        var opts;
        if (this.question.QuestionType === QTypes.FuelRemaining) {
            opts = [{ v: 'percent', t: 'Percent' }];
        } else if (this.question.QuestionType === QTypes.Odometer) {
            opts = [
                { v: 'mile', t: 'Mile(s)' },
                { v: 'kilometre', t: 'kilometre' }
            ];
        } else if (this.question.QuestionType === QTypes.FuelUsed) {
            opts = [
                { v: 'Gallon', t: 'Gallon' },
                { v: 'Litre', t: 'Litre' }
            ];
        } else if (this.question.QuestionType === QTypes.FuelRecords) {
            if (this.question.SubType === FuelRecordTypes.Odometer) {
                opts = [
                    { v: 'mile', t: 'Mile(s)' },
                    { v: 'kilometre', t: 'Kilometer' }
                ];
            } else if (this.question.SubType === FuelRecordTypes.Quantity) {
                opts = [
                    { v: 'Gallon', t: 'Gallon' },
                    { v: 'Litre', t: 'Litre' }
                ];
            }
        } else {
            opts = [];
        }
        for (var i = 0; i < opts.length; i++) {
            var o = opts[i];
            selector.append($('<option></option>').val(o.v).text(o.t));
        }
        if (answer && answer.Units) {
            selector.val(answer.Units);
        } else {
            selector.val(opts[0].v);
        }
        this.ui.unit = selector;
        return selector;
    };
    inputDropQuestion.prototype.getAnswer = function () {
        var answer = inputQuestion.prototype.getAnswer.call(this);
        answer.Units = this.ui.unit.val();
        return answer;
    };

    // list question
    var listQuestion = function (q) {
        question.call(this, q);
    };
    listQuestion.prototype = Object.create(question.prototype);
    listQuestion.prototype.constructor = listQuestion;
    listQuestion.prototype.createQuestion = function (answer) {
        var content = $('<div></div>');
        var q = this.question;
        for (var i = 0; i < q.SelectItems.length; i++) {
            var item = q.SelectItems[i];
            var line = $('<div></div>');
            var check;
            var name = 'item_' + q.Id;
            var id = name + '_' + i;
            var left = $('<div style="float: left"></div>');
            var val = item.Value || item.Text;
            if (q.MultipleSelect) {
                check = $('<input type="checkbox"></input>').attr('id', id).val(val);
            } else {
                check = $('<input type="radio"></input>').attr({ 'id': id, 'name': name }).val(val);
            }
            check.data('item', item);
            if (answer && answer.SelectedItems) {
                var s = answer.SelectedItems.filter(function (a) { return (a.Value || a.Text) === val });
                if (s.length > 0) {
                    check.prop('checked', true);
                }
            }
            left.append(check);
            var circle = $('<div></div>').css({
                'width': 12,
                'height': 12,
                'border-radius': 6,
                'display': 'inline-block',
                'margin-left': 5,
                'vertical-align': 'middle'
            });
            circle.css('background-color', item.BackgroundColor);
            left.append(circle);
            line.append(left);
            line.append($('<label style="margin-left: 45px; display: block"></label>').attr('for', id).text(item.Text));

            content.append(line);
        }
        return content;
    };
    listQuestion.prototype.getAnswer = function () {
        var answer = question.prototype.getAnswer.call(this);
        var checks = this.ui.content.find('input:checked');
        var items = [];
        for (var i = 0; i < checks.length; i++) {
            var item = $(checks[i]).data('item');
            items.push(item);
        }
        answer.SelectedItems = items;
        if (items.length > 0) {
            answer.Result = items.map(function (i) { return i.Value || i.Text }).join('\n');
            //answer.SeverityLevel = items[0].SeverityLevel;
        } else {
            answer.Result = '';
        }
        return answer;
    };
    listQuestion.prototype.focus = function () {
        var ele = this.ui.content.find('input:first');
        if (ele.length > 0) {
            ele.focus();
        } else {
            question.prototype.focus.call(this);
        }
    };

    // date&time question
    var dateTimeQuestion = function (q) {
        question.call(this, q);
    };
    dateTimeQuestion.prototype = Object.create(question.prototype);
    dateTimeQuestion.prototype.constructor = dateTimeQuestion;
    dateTimeQuestion.prototype.createQuestion = function (answer) {
        var content = $('<div></div>');
        var q = this.question;
        var result;
        if (answer && answer.Result) {
            result = answer.Result.split(' ');
        }
        var date = $('<input type="text" style="width: 100px; height: 21px"></input>');
        date.css('box-sizing', 'border-box');
        date.addClass('form-control');
        if (result) {
            date.val(result[0]);
        }
        this.ui.date = date;
        content.append(date);
        date.datetimepicker({
            timepicker: false,
            format: 'Y-m-d',
            enterLikeTab: false,
            //onSelectDate: function (v, inp) {

            //}
        });
        if (q.QuestionType === QTypes.DateAndTime
            || (q.QuestionType === QTypes.FuelRecords &&
                q.SubType === FuelRecordTypes.TransactionDate)) {
            var time = $('<input type="text" style="width: 100px; margin-left: 10px; height: 21px"></input>');
            time.css('box-sizing', 'border-box');
            time.addClass('form-control');
            if (result) {
                time.val(result[1]);
            }
            this.ui.time = time;
            content.append(time);
            //time.blur(function () {
            //    var dt = new Date('1970-01-01T' + $(this).val());
            //    if (isNaN(dt.getDate())) {
            //        $(this).css('border-color', 'red');
            //    } else {
            //        $(this).css('border-color', '');
            //    }
            //});
            //time.datetimepicker({
            //    datepicker: false,
            //    format: 'H:m:s',
            //    enterLikeTab: false
            //});
        }
        return content;
    };
    dateTimeQuestion.prototype.getAnswer = function () {
        var answer = question.prototype.getAnswer.call(this);
        var date = this.ui.date.val();
        if (this.ui.time != null) {
            date += ' ' + this.ui.time.val();
        }
        if (date != ' ') {
            answer.Result = date;
        }
        return answer;
    };
    dateTimeQuestion.prototype.focus = function () {
        if (this.ui.time != null) {
            this.ui.time.focus();
        } else {
            this.ui.date.focus();
        }
    };

    // drop question
    var dropQuestion = function (q) {
        question.call(this, q);
    };
    dropQuestion.prototype = Object.create(question.prototype);
    dropQuestion.prototype.constructor = dropQuestion;
    dropQuestion.prototype.createQuestion = function (answer) {
        var _this = this;
        var content = $('<div></div>').click(function () { _this.openDrop(content.offset()) });
        var result = $('<div class="drop-result" style="float: left; cursor: pointer"></div>');
        this.fillResult(result, answer && answer.SelectedItems);
        content.append(result);
        var icon = $('<div class="icon-col iconcaretdown" style="float: left; margin-left: 10px; font-weight: bold"></div>');
        content.append(icon);
        if (!this.loaded && (
            this.question.LookupSource === LookupSources.Assets ||
            this.question.LookupSource === LookupSources.AssetCustomerName)) {
            var loading = $('<div class="loading c-spin" style="float: left; margin-left: 10px; color: gray"></div>');
            content.append(loading);
        }
        content.append('<div style="clear: both"></div>');
        return content;
    };
    dropQuestion.prototype.setLoaded = function () {
        this.loaded = true;
        this.ui.content && this.ui.content.find('.loading').remove();
    };
    dropQuestion.prototype.focus = function () {
        var ele = this.ui.content.find('input:first');
        if (ele.length > 0) {
            ele.focus();
        } else {
            question.prototype.focus.call(this);
        }
    };
    dropQuestion.prototype.fillResult = function (container, items) {
        container.empty();
        if (items && items.length > 0) {
            for (var i = 0; i < items.length; i++) {
                var item = items[i];
                var line = $('<div></div>');
                line.append($('<input type="hidden"></input>').data('item', item).val(item.Value || item.Text));
                var circle = $('<div></div>').css({
                    'width': 12,
                    'height': 12,
                    'border-radius': 6,
                    'display': 'inline-block',
                    'margin-left': 5,
                    'vertical-align': 'middle'
                });
                circle.css('background-color', item.BackgroundColor || '#ccc');
                line.append(circle);
                var text;
                if (this.question.QuestionType === QTypes.EmailList) {
                    text = item.Text + ' <' + item.Value + '>';
                } else {
                    text = item.Text;
                }
                line.append($('<span style="margin-left: 10px"></span>').text(text));
                container.append(line);
            }
        } else {
            if (this.question.QuestionType === QTypes.EmailList) {
                container.append($('<span style="color: #ccc">No Emails Selected</span>'));
            } else {
                container.append($('<span style="color: #ccc">No Selection</span>'));
            }
        }
    };
    dropQuestion.prototype.openDrop = function (pos) {
        var _this = this;
        var q = this.question;
        var mask = this.ui.mask;
        if (mask == null) {
            mask = $('<div style="position:fixed; left:0;right:0;top:0;bottom:0"></div>');
            this.ui.mask = mask;
        }
        mask.on('mousedown touchstart', function () {
            if (panel.is(":visible")) {
                panel.find(".iconcheck").click();
            }
            //_this.closeDrop()
        });
        $(document.body).append(mask);

        // drop panel
        var panel = this.ui.droplist;
        if (panel != null) {
            panel.remove();
        }
        panel = $('<div style="position:absolute;background:white;width:400px;height:300px;border:1px solid #ccc;box-shadow:3px 3px 10px #eee"></div>');
        var answer = this.answer;
        var isEmailList = q.QuestionType === QTypes.EmailList;
        var isEmployee = q.QuestionType === QTypes.DropDown && q.LookupSource === LookupSources.Employee;
        var refreshList = function (content, items) {
            content.find('.drop-item').remove();
            for (var i = 0; i < items.length; i++) {
                var item = items[i];
                var line = $('<div class="drop-item"></div>');
                var check;
                var name = 'item_' + q.Id;
                var id = name + '_' + i;
                var left = $('<div style="float: left"></div>');
                var val = item.Value || item.Text;
                if (isEmailList || q.MultipleSelect) {
                    check = $('<input type="checkbox"></input>').attr('id', id).val(val);
                } else {
                    check = $('<input type="radio"></input>').attr({ 'id': id, 'name': name }).val(val);
                }
                check.data('item', item);
                check.change(function () {
                    if (!q.MultipleSelect && q.QuestionType !== QTypes.EmailList) {
                        for (var i = 0; i < _this.data.items.length; i++) {
                            _this.data.items[i].Selected = false;
                        }
                    }
                    $(this).data('item').Selected = $(this).prop('checked');
                });
                if (answer && answer.SelectedItems) {
                    var s = answer.SelectedItems.filter(function (a) { return (a.Value || a.Text) === val });
                    if (s.length > 0) {
                        check.prop('checked', true);
                        item.Selected = true;
                    }
                }
                left.append(check);
                var circle = $('<div></div>').css({
                    'width': 12,
                    'height': 12,
                    'border-radius': 6,
                    'display': 'inline-block',
                    'margin-left': 5,
                    'vertical-align': 'middle'
                });
                circle.css('background-color', item.BackgroundColor);
                left.append(circle);
                line.append(left);
                line.append($('<label style="margin-left: 45px; display: block"></label>').attr('for', id).text(
                    isEmailList ? item.Text + ' <' + item.Value + '>' : item.Text));

                content.append(line);
            }
        };
        var search = $('<input type="text" placeholder="Search"></input>').css({
            'height': 29,
            'line-height': '29px',
            'padding': '0 6px',
            'width': '100%',
            'border': 'none',
            'border-bottom': '1px solid #ccc',
            'box-sizing': 'border-box'
        }).on('propertychange input', function () {
            var items = _this.data.items;
            var key = $(this).val().toLowerCase();
            if (items && items.length > 0) {
                items = items.filter(function (e) { return e.Text.toLowerCase().indexOf(key) >= 0 });
                refreshList(panelContent, items);
            }
        });
        var funcs = $('<div style="margin-right: 45px"></div>');
        funcs.append(search);
        panel.append($('<div class="sbutton iconcheck"></div>').css({
            'float': 'right',
            'padding': '0 10px',
            'height': 29,
            'line-height': '29px'
        }).click(function () {
            var checks = _this.data.items; // panelContent.find('input:checked');
            var items = [];
            for (var i = 0; i < checks.length; i++) {
                var item = checks[i]; // $(checks[i]).data('item');
                if (item.Selected) {
                    items.push(item);
                }
            }
            if (answer == null) {
                answer = {
                    'QuestionId': q.Id,
                    'SeverityLevel': q.SeverityLevel
                };
                _this.answer = answer;
            }
            answer.SelectedItems = items;
            _this.fillResult(_this.ui.content.find('.drop-result'), items);
            _this.closeDrop();
        }));
        panel.append(funcs);
        // scroller
        var panelContent = $('<div></div>').css({
            'overflow-y': 'auto',
            'line-height': '26px',
            'box-sizing': 'border-box',
            'height': 270,
            'padding': '4px 2px'
        });
        panel.append(panelContent);
        this.ui.panelContent = panelContent;
        var generateItem = function (text, value) {
            return {
                'BackgroundColor': '#cccccc',
                'SeverityLevel': q.SeverityLevel,
                'Text': text,
                'Value': value
            };
        };
        var items;
        if (q.SelectItems && q.SelectItems.length > 0) {
            items = q.SelectItems;
        } else if (isEmailList || isEmployee) {
            if (window.EmailList) {
                items = [];
                for (var i = 0; i < window.EmailList.length; i++) {
                    var item = window.EmailList[i];
                    items.push(generateItem(
                        isEmployee ? (item.UserName + ' <' + item.Email + '>') : item.UserName,
                        isEmailList ? item.Email : item.UserIID));
                }
            }
        } else if (q.LookupSource === LookupSources.Jobsites) {
            if (window.JobSiteList) {
                items = [];
                for (var i = 0; i < window.JobSiteList.length; i++) {
                    var item = window.JobSiteList[i];
                    items.push(generateItem(item.Name, String(item.Id)));
                }
            }
        } else if (q.LookupSource === LookupSources.Assets) {
            if (window.AssetList) {
                items = [];
                for (var i = 0; i < window.AssetList.length; i++) {
                    var item = window.AssetList[i];
                    var assetLabel = [item.Name, item.VIN, item.Make, item.Model, item.AssetType].filter(function (a) { return a && a.length > 0 }).join('/');
                    items.push(generateItem(assetLabel, String(item.Id)));
                }
            }
        } else if (q.LookupSource === LookupSources.AssetCustomerName) {
            if (window.AssetList) {
                items = [];
                for (var i = 0; i < window.AssetList.length; i++) {
                    var item = window.AssetList[i];
                    var assetLabel = item.Name;
                    items.push(generateItem(assetLabel, String(item.Id)));
                }
            }
        } else if (q.QuestionType === QTypes.FuelRecords) {
            if (q.SubType === FuelRecordTypes.State) {
                items = [
                    "AL", "AK", "AZ", "AR", "CA", "CO", "CT", "DE", "FL", "GA",
                    "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MD",
                    "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH", "NJ",
                    "NM", "NY", "NC", "ND", "OH", "OK", "OR", "PA", "RI", "SC",
                    "SD", "TN", "TX", "UT", "VT", "VA", "WA", "WV", "WI", "WY"
                ].map(function (s) { return generateItem(s, s) });
            } else if (q.SubType === FuelRecordTypes.FuelType) {
                items = [
                    { value: "BIOD", text: "B20 Diesel 20% Biodiesel" },
                    { value: "DEF", text: "Diesel Exhaust Fluid" },
                    { value: "DS+", text: "Premium Diesel #2" },
                    { value: "DSL", text: "Diesel #1" },
                    { value: "DSL2", text: "Regular Diesel #2" },
                    { value: "ETH-S", text: "Super Unleaded Ethanol (10% blend)" },
                    { value: "ETH", text: "Unleaded Ethanol (10% blend)" },
                    { value: "FRM", text: "Diesel Off Road (#1 and #2 non" },
                    { value: "FUL", text: "Miscellaneous Fuel" },
                    { value: "FUL-", text: "Other Fuel (Non-Taxable)" },
                    { value: "KERO", text: "Kerosene - Low Sulfur" },
                    { value: "MOT", text: "Motor Oil" },
                    { value: "OTH", text: "General Merchandise" },
                    { value: "SUP4", text: "Unleaded 4" },
                    { value: "SUP", text: "Unleaded Super" },
                    { value: "SVC", text: "Repairs" },
                    { value: "ULSD", text: "Ultra Low Sulfur #2" },
                    { value: "UN+", text: "Unleaded Plus" },
                    { value: "UNL", text: "Unleaded Regular" },
                    { value: "WASH", text: "Car Wash" },
                    { value: "HYD", text: "Hydraulic" },
                    { value: "SHY", text: "Synthetic Hydraulic" },
                    { value: "GRO", text: "Gear Oil" }
                ].map(function (t) { return generateItem(t.text, t.value) });
            } else if (q.SubType === FuelRecordTypes.DistributedBy) {
                items = [
                    { value: "0", text: "Fueling Station" },
                    { value: "1", text: "Fueling Asset" }
                ].map(function (t) { return generateItem(t.text, t.value) });
            }
        }
        if (items && items.length > 0) {
            this.data.items = items;
            refreshList(panelContent, items);
        }
        this.ui.droplist = panel;

        var screenHeight = $(window).height();
        if (pos.top + 300 > screenHeight) {
            pos.top = screenHeight - 310;
        }
        panel.css({ 'left': pos.left, 'top': pos.top });
        $(document.body).append(panel);
    };
    dropQuestion.prototype.closeDrop = function () {
        this.ui.mask.remove();
        this.ui.mask = null;
        this.ui.droplist.remove();
    };
    dropQuestion.prototype.getAnswer = function () {
        var answer = question.prototype.getAnswer.call(this);
        var checks = this.ui.content.children('.drop-result').find('input');
        var items = [];
        for (var i = 0; i < checks.length; i++) {
            var item = $(checks[i]).data('item');
            items.push(item);
        }
        answer.SelectedItems = items;
        if (items.length > 0) {
            answer.Result = items.map(function (i) { return i.Value || i.Text }).join('\n');
            //answer.SeverityLevel = items[0].SeverityLevel;
        } else {
            answer.Result = '';
        }
        return answer;
    };

    // picture question
    var pictureQuestion = function (q) {
        question.call(this, q);
    };
    pictureQuestion.prototype = Object.create(question.prototype);
    pictureQuestion.prototype.constructor = pictureQuestion;
    pictureQuestion.prototype.createQuestion = function (_answer, medias) {
        var content = $('<div></div>');
        if (medias && medias.length > 0) {
            for (var i = 0; i < medias.length; i++) {
                var m = medias[i];
                var ele;
                if (['.mp4', '.mov'].indexOf(m.FileType.toLowerCase()) >= 0) {
                    ele = $('<div></div>').css({
                        'float': 'left',
                        'border': '1px solid #ccc',
                        'height': 38,
                        'width': 38,
                        'text-align': 'center'
                    });
                    ele.append($('<span>&#61501;</span>').css({
                        'margin': '0 auto',
                        'font-family': 'Fontawesome',
                        'font-size': '20px',
                        'line-height': '38px',
                        'color': '#000'
                    }));
                } else {
                    ele = $('<img></img>').css({
                        'float': 'left',
                        'border': '1px solid #ccc',
                        'padding': '4px',
                        'height': 30,
                        'margin-right': 4
                    }).attr('src', m.ThumbnailUrl);
                }
                content.append($('<a target="_blank"></a>').attr('href', m.Url).append(ele));
            }
        } else {
            content.append('<div style="font-style: italic; color: #ccc">&lt;No media.&gt;</div>');
        }
        content.append('<div style="clear: both"></div>');
        return content;
    };


    // assetstatus question
    var assetStatusQuestion = function (q) {
        question.call(this, q);
    };
    assetStatusQuestion.prototype = Object.create(question.prototype);
    assetStatusQuestion.prototype.constructor = assetStatusQuestion;
    assetStatusQuestion.prototype.createQuestion = function (answer, medias) {
        var content = $('<div></div>');
        var q = this.question;
        q.SelectItems = [
            { Value: "0", Text: "In Use", BackgroundColor: "#93c47d" },
            { Value: "1", Text: "Available", BackgroundColor: "#9fc5e8" },
            { Value: "2", Text: "Standby", BackgroundColor: "#f3af83" },
            { Value: "10", Text: "Down", BackgroundColor: "#dd7e6b" }
        ];
        for (var i = 0; i < q.SelectItems.length; i++) {
            var item = q.SelectItems[i];
            var line = $('<div></div>');
            var name = 'item_' + q.Id;
            var id = name + '_' + i;
            var left = $('<div style="float: left"></div>');
            var val = item.Value || item.Text;
            var check = $('<input type="radio"></input>').attr({ 'id': id, 'name': name }).val(val);
            check.data('item', item);
            if (answer && answer.SelectedItems) {
                var s = answer.SelectedItems.filter(function (a) { return (a.Value || a.Text) === val });
                if (s.length > 0) {
                    check.prop('checked', true);
                }
            }
            left.append(check);
            var circle = $('<div></div>').css({
                'width': 12,
                'height': 12,
                'border-radius': 6,
                'display': 'inline-block',
                'margin-left': 5,
                'vertical-align': 'middle'
            });
            circle.css('background-color', item.BackgroundColor);
            left.append(circle);
            line.append(left);
            line.append($('<label style="margin-left: 45px; display: block"></label>').attr('for', id).text(item.Text));

            content.append(line);
            content.append('<div style="clear: both"></div>');
        }

        if (medias && medias.length > 0) {
            var cnt = $('<div style="margin: 6px 0 0 0px"></div>');
            for (var i = 0; i < medias.length; i++) {
                var m = medias[i];
                var ele;
                if (['.mp4', '.mov'].indexOf(m.FileType.toLowerCase()) >= 0) {
                    ele = $('<div></div>').css({
                        'float': 'left',
                        'border': '1px solid #ccc',
                        'height': 38,
                        'width': 38,
                        'text-align': 'center'
                    });
                    ele.append($('<span>&#61501;</span>').css({
                        'margin': '0 auto',
                        'font-family': 'Fontawesome',
                        'font-size': '20px',
                        'line-height': '38px',
                        'color': '#000'
                    }));
                } else {
                    ele = $('<img></img>').css({
                        'float': 'left',
                        'border': '1px solid #ccc',
                        'padding': '4px',
                        'height': 30,
                        'margin-right': 4
                    }).attr('src', m.ThumbnailUrl);
                }
                cnt.append($('<a target="_blank"></a>').attr('href', m.Url).append(ele));
            }
            content.append(cnt);
        }
        content.append('<div style="clear: both"></div>');

        cnt = $('<div style="margin: 6px 0 0 0px"></div>');
        var divResult = $('<div style="padding: 6px 0"></div>');
        var rst = $('<textarea class="form-control" style="width: 100%; box-sizing: border-box; height: 70px"></textarea>');
        rst.attr('maxlength', 500);
        if (answer && answer.Result) {
            rst.val(answer.Result);
        }
        this.ui.assetstatusresult = rst;
        divResult.append(rst);
        cnt.append(divResult);
        content.append(cnt);

        return content;
    };
    assetStatusQuestion.prototype.getAnswer = function () {
        var answer = question.prototype.getAnswer.call(this);
        var checks = this.ui.content.find('input:checked');
        var items = [];
        for (var i = 0; i < checks.length; i++) {
            var item = $(checks[i]).data('item');
            items.push(item);
        }
        answer.SelectedItems = items;
        answer.Result = this.ui.assetstatusresult.val();

        return answer;
    };
    assetStatusQuestion.prototype.focus = function () {
        var ele = this.ui.content.find('input:first');
        if (ele.length > 0) {
            ele.focus();
        } else {
            question.prototype.focus.call(this);
        }
    };


    return {
        types: QTypes,
        sources: LookupSources,
        fueltypes: FuelRecordTypes,
        factory: function (q) {
            switch (q.QuestionType) {
                case QTypes.Odometer:
                case QTypes.FuelRemaining:
                case QTypes.FuelUsed:
                    return new inputDropQuestion(q);
                case QTypes.YesOrNo:
                case QTypes.List:
                    return new listQuestion(q);
                case QTypes.DropDown:
                case QTypes.EmailList:
                    return new dropQuestion(q);
                case QTypes.Date:
                case QTypes.DateAndTime:
                    return new dateTimeQuestion(q);
                case QTypes.Picture:
                    return new pictureQuestion(q);
                case QTypes.FuelRecords:
                    switch (q.SubType) {
                        case FuelRecordTypes.TransactionDate:
                            return new dateTimeQuestion(q);
                        case FuelRecordTypes.State:
                        case FuelRecordTypes.FuelType:
                        case FuelRecordTypes.DistributedBy:
                            return new dropQuestion(q);
                        case FuelRecordTypes.Odometer:
                        case FuelRecordTypes.Quantity:
                            return new inputDropQuestion(q);
                        case FuelRecordTypes.Picture:
                            return new pictureQuestion(q);
                        default:
                            return new inputQuestion(q);
                    }
                    break;
                case QTypes.AssetStatus:
                    return new assetStatusQuestion(q);
                default:
                    return new inputQuestion(q);
            }
        },
        equals: function (s1, s2) {
            if (typeof s1 === 'string' && typeof s2 === 'string') {
                if (s1.toLowerCase() === s2.toLowerCase()) {
                    return true;
                }
            }
            return false;
        }
    }
});