define(['common', 'modules/templates/templatepicture'], function (Common, TemplatePicture) {
    var fsm = function (istemplate, pageele, onok) {
        this.pageele = pageele || {};
        this.holder = null;
        this.dialog = null;
        this.istemplate = istemplate;
        this.onok = onok;
        this.title = GetTextByKey("P_IPT_PICTURES", "Picture");
    };
    fsm.prototype.description = GetTextByKey("P_IPT_PICTURES", "Picture");
    fsm.prototype.version = "1.0.0.0";

    fsm.prototype.createContent = function () {
        var _this = this;
        var input = null;
        var nopictr = null;
        var tabindex = 0;
        if (sectiontype === 0) {
            if (!_this.pageele.IssueId || _this.pageele.IssueId == "")
                editable = true;
            else
                editable = false;
        }

        var content = $('<div style="max-height: 200px;overflow-y: auto;"></div>');
        var tb = $('<table style="max-height:300px;line-height:30px;"></table>');

        function createPictureContent() {
            if (_this.pageele && _this.pageele.StaticPictures && _this.pageele.StaticPictures.length > 0) {
                for (var i = 0; i < _this.pageele.StaticPictures.length; i++) {
                    var p = _this.pageele.StaticPictures[i];
                    if (!p.Id)
                        p.Id = $.newGuid();
                    addpicturerow(p);
                }
            }
            //else {
            //    addnopicrow();
            //}
            return tb;
        }

        function createAddButton() {
            if (!templatereadonly && editable) {
                var addpicdiv = $('<div style="line-height: 30px;"></div>');
                var addpicicon = $('<span class="sbutton iconadd">' + GetTextByKey("P_IPT_ADDPICTURE", "Add Picture") + '</span>').click(function () {
                    browsePicture();
                });
                addpicdiv.append(addpicicon);

                if (!_this.istemplate && sectiontype == 1) {
                    var addtemppicicon = $('<span class="sbutton iconadd">' + GetTextByKey("P_IPT_ADDREFERENCE", "Add Reference") + '</span>').click(function () {

                        var dialogTemplatePicture = new TemplatePicture().getDialogPicture();

                        dialogTemplatePicture.onDialogClosed = function () {
                        }
                        dialogTemplatePicture.onOK = function (pics, iscopy) {
                            onTemplatePictures(pics, iscopy);
                        }

                        dialogTemplatePicture.showSelector();
                    });
                }
                addpicdiv.append(addtemppicicon);
                content.append(addpicdiv);
            }
        }

        function onTemplatePictures(pics, iscopy) {
            if (pics && pics.length > 0) {
                var sids = [];
                for (var i = 0; i < pics.length; i++) {
                    var it = pics[i].Values;
                    if (it.Selected) {
                        var p = {};
                        p.Id = $.newGuid();
                        p.ReferenceId = it.Id;
                        p.Name = it.Name;
                        p.DataType = it.DataType;
                        p.ContentId = it.ContentId;
                        p.Url = it.Url;
                        addpicturerow(p);
                    }
                }
            }
        }

        function addnopicrow() {
            nopictr = $('<tr style="height:30px;"></tr>');
            var td = $('<td style="padding:5px;padding-left:10px;">' + GetTextByKey("P_IPT_NOPICTURE", "No Picture") + '</td>');
            nopictr.append(td);
            tb.append(nopictr);
        }

        function addpicturerow(p) {
            if (nopictr) {
                nopictr.remove();
                nopictr = null;
            }
            var tr = $('<tr class="pic"></tr>');
            tb.append(tr);
            if (!templatereadonly && editable)
                createdragtd(tr);
            createlinktd(tr, p);

            var td = $('<td style="width:50px;"></td>');
            var img = $('<img style="width:30px;height:30px;float:right;margin-right:10px;"/>').attr('src', p.Url);
            td.append(img);
            tr.append(td);
            input = $('<input type="text" class="form-control" style="width:220px" maxlength="100" autocomplete="off"/>').attr("tabindex", ++tabindex);
            if (templatereadonly || p.ReferenceId || !editable)
                input.prop('disabled', true);
            input.val(p.Name);
            tr.data("pic", p);

            tr.append($('<td></td>').append(input));

            td = $('<td></td>');
            if (!templatereadonly && !IsReferenced(p.Id) && editable) {
                var del = $('<span class="spanbtn icondelete"></span>').click(tr, function (e) {
                    showConfirm(GetTextByKey("P_IPT_DELETEFILECONFIRM", 'Are you sure you want to delete this file?'), GetTextByKey("P_IPT_DELETEFILE", 'Delete File'), function () {
                        var p = e.data.data("pic");
                        e.data.remove();
                        //var p = JSON.stringify([teamintelligence, p.ContentId]);
                        //inspectionrequest("DeleteStaticPicture", htmlencode(p), function (data) {
                        //}, function (err) {
                        //});
                    });
                });
                td.append(del)
            }
            tr.append(td);
            tb.append(tr);
        }

        var draggingpicobj
        function createdragtd(tr) {
            var td = $('<td style="width:32px;"></td>');
            var drag = $('<div class="question-icon" style="width:30px;"><em class="spanbtn iconmove rowdrag" style="font-size:14px;padding:0;"></em></div>');
            td.append(drag);
            tr.append(td);

            drag.attr('draggable', true);
            tr.bind('dragstart', function (e) {
                //var data = e.originalEvent.dataTransfer;
                draggingpicobj = tr;
            });
            tr.bind('dragend', function (e) {
                draggingpicobj = null;
            });
            tr.bind('dragover', function (e) {
                e.originalEvent.preventDefault()
            });
            tr.bind('drop', function (e) {
                var t = $(this);
                if (!draggingpicobj || t.is(draggingpicobj))
                    return;
                var after = e.originalEvent.clientY > t.offset().top + t.height() / 2;
                if (after)
                    t.after(draggingpicobj);
                else
                    t.before(draggingpicobj);

                //draggingobj.pagemodule.dragOutSection(draggingobj);
                //_this.pagemodule.dragInSection(_this.section, draggingobj, after);

            });
        }

        function createlinktd(tr, pic) {
            var td = $('<td style="width:32px;"></td>');
            if (pic.ReferenceId) {
                var link = $('<div class="question-icon" style="width:30px;"><em class="spanbtn iconlink" style="cursor:default;margin:0;padding:0;font-size:10px;"></em></div>');
                td.append(link);
            }
            else {
                td.text(" ");
            }
            tr.append(td);
        }

        function IsReferenced(picid) {//check if template picture can be deleted
            if (!_this.istemplate)
                return false;
            if (currenttemplate && currenttemplate.Pages && currenttemplate.Pages.length > 0) {
                for (var i = 0; i < currenttemplate.Pages.length; i++) {
                    var page = currenttemplate.Pages[i];
                    for (var j = 0; j < page.Sections.length; j++) {
                        var section = page.Sections[j];
                        if (section.StaticPictures) {
                            for (var m = 0; m < section.StaticPictures.length; m++) {
                                var p = section.StaticPictures[m];
                                if (p.ReferenceId == picid)
                                    return true;
                            }
                        }
                        for (var k = 0; k < section.Questions.length; k++) {
                            var question = section.Questions[k];
                            if (question.StaticPictures) {
                                for (var n = 0; n < question.StaticPictures.length; n++) {
                                    var p = question.StaticPictures[n];
                                    if (p.ReferenceId == picid)
                                        return true;
                                }
                            }
                        }
                    }
                }
            }

            return false;
        }

        function browsePicture() {
            var file = $('<input type="file" style="display: none;" accept="image/png,image/jpg,image/jpeg" />');
            file.change(function () {
                var files = this.files;
                var file = files[0];
                if (file.size == 0) {
                    alert(GetTextByKey("P_IPT_FILETIPS", "File size is 0kb, uploading failed."));
                    return false;
                }
                if (file.size > 1024 * 1024 * 2) {
                    alert(GetTextByKey("P_IPT_FILETIPS1", "File is too large. Maximum size is 2MB."));
                    return false;
                }
                SavePicture(file);
            }).click();
        }

        function SavePicture(file) {
            var formData = new FormData();
            formData.append("pic", file);
            formData.append("MethodName", "UploadStaticPicture");
            formData.append("ClientData", teamintelligence);
            $.ajax({
                url: 'Inspection.aspx',
                type: 'POST',
                dataType: 'json',
                processData: false,
                contentType: false,
                data: formData,
                async: true,
                success: function (data) {
                    if (data) {
                        var p = {};
                        p.Id = $.newGuid();
                        p.ContentId = data.Item1;
                        p.Url = data.Item2;
                        p.Name = file.name;
                        p.DataType = file.name.substring(file.name.lastIndexOf("."));
                        addpicturerow(p);
                    }
                },
                error: function (err) {
                }
            });
        }

        function OnSave() {
            if (!templatereadonly && editable) {
                var pics = [];

                tb.find("tr.pic").each(function () {
                    var tr = $(this);
                    var p = tr.data("pic");
                    p.Name = tr.find("input").val();
                    pics.push(p);
                })

                //for (var i in inputs) {
                //    var input = inputs[i];
                //    var p = input.data("pic");
                //    p.Name = input.val();
                //    pics.push(p);
                //}
                _this.pageele.StaticPictures = pics;
                _this.dialog.hideDialog();
                if (_this.onok)
                    _this.onok();
            }
        }


        content.append(createAddButton());
        content.append(createPictureContent());


        _this.dialog = Common.createDialog(GetTextByKey("P_IPT_PICTURE", "Picture"), content, OnSave, true);
        _this.dialog.showDialogfixed();
    }

    return fsm;
});