//特殊标识模块
var specialTag = function (option, success) {
    var object = new SpecialTag(option);
    success();
    return object;
}

function SpecialTag(option) {
    this.markControl = option.markControl;
    this.maxWidth = option.width != undefined ? option.width : 200;
    this.show = false;
    this.tagName = undefined;
    this.init();
    this.markControl.on('task.get.before', this, function (event, context, eventObject) {
        this.task = undefined;
        this.reset();
    });
    this.markControl.on('task.load.finish', this, function (event, context, eventObject) {
        this.task = context.task;
        if (this.task.tagList == undefined) {
            this.task.tagList = [];
        }
        for (var i = 0; i < this.task.tagList.length; i++) {
            this.markControl.trigger('mark.tag.show', {
                content: this.task.tagList[i].tagName,
                positionX: this.task.tagList[i].positionX,
                positionY: this.task.tagList[i].positionY
            });
        }
        this.markControl.trigger('special.tag.disable');
    });
    this.markControl.on('task.get.none', this, function (event, context, eventObject) {
        this.task = undefined;
    });
    this.markControl.on('image.click.event', this, function (event, context, eventObject) {
        if (this.task != undefined && this.tagName != undefined && this.show == true) {
            var specialTag = {
                tagName: this.tagName,
                positionX: eventObject.positionX,
                positionY: eventObject.positionY,
                offsetIndex: eventObject.offsetIndex,
                offsetX: eventObject.offsetX,
                offsetY: eventObject.offsetY
            }
            this.task.tagList.push(specialTag);
            this.markControl.trigger('mark.tag.show', {
                content: specialTag.tagName,
                positionX: specialTag.positionX,
                positionY: specialTag.positionY
            });
        }
    })
    //图片重新加载后，恢复显示所有标记
    this.markControl.on('image.reload.event', this, function (event, context, eventObject) {
        if (this.task != undefined) {
            for (var i = 0; i < this.task.tagList.length; i++) {
                this.markControl.trigger('mark.tag.show', {
                    content: this.task.tagList[i].tagName,
                    positionX: this.task.tagList[i].positionX,
                    positionY: this.task.tagList[i].positionY
                });
            }
        }
    });
}

SpecialTag.prototype.init = function () {
    var self = this;
    this.container = getDom(this.container_dom, this.markControl).appendTo(this.markControl.container);
    this.container.width(this.maxWidth);
    this.container.offset({
        top: 100,
        left: 800
    });
    this.container.header = getDom(this.container_header_dom, this.markControl).appendTo(this.container);
    this.container.header.width('100%');

    this.container.content = getDom(this.container_content_dom, this.markControl).appendTo(this.container);
    this.container.content.width('100%');

    this.onclickList = this.container.content.find('#problem-list');

    this.container.draggable({
        containment: "window"
    });

    this.onclickList.find('a').click(function () {
        self.tagName = undefined;
        if (self.task != undefined) {
            if ($(this).hasClass('selected')) {
                self.tagName = undefined;
                $(this).removeClass('selected');
            } else {
                self.tagName = $(this).attr('value');
                self.onclickList.find('a').removeClass('selected');
                $(this).addClass('selected');
            }
        }
        if (self.tagName != undefined) {
            self.markControl.trigger('special.tag.enable');
        } else {
            self.markControl.trigger('special.tag.disable');
        }

    });
    this.container.find('#undo-button').click(function () {
        if (self.task != undefined) {
            self.task.tagList.pop();
            self.markControl.trigger('mark.tag.clear');
        }
    });
    this.container.find('#clear-button').click(function () {
        if (self.task != undefined) {
            self.task.tagList = [];
            self.markControl.trigger('mark.tag.clear');
        }
    });
    this.container.header.find('#close-button').click(function () {
        self.toggle(false);
    });

    this.control = getDom(this.control_dom, this.markControl).appendTo(this.markControl.container.assistant);
    this.control.find('#show-SpecialTag-button').click(function () {
        self.markControl.container.assistant.hide();
        self.toggle(true);
    });
    this.control.find('#hide-SpecialTag-button').click(function () {
        self.markControl.container.assistant.hide();
        self.toggle(false);
    });
}

SpecialTag.prototype.toggle = function (show) {
    if (show == true) {
        this.show = true;
        this.container.show();
    } else {
        this.show = false;
        this.markControl.trigger('special.tag.disable')
        this.container.hide();
        this.onclickList.find('a').removeClass('selected');
    }
}

SpecialTag.prototype.reset = function () {
    this.tagName = $(this).attr('value');
    this.onclickList.find('a').removeClass('selected');
}

SpecialTag.prototype.container_dom = '<div class="score-board score-board-popover" style="display:none"></div>';

SpecialTag.prototype.container_header_dom = '<div class="header" style="border-radius: 15px 15px 0px 0px;">\
<p class="fl" id="header" data-i18n-text="mark.special.tag">特殊标记</p>\
<a class="header-close" id="close-button" href="#"><img src="{staticServer}/images/close.png"></a>\
</div>';

SpecialTag.prototype.container_content_dom = '<div class="content popover-content" style="padding:4px;border-radius: 0px 0px 15px 15px;">\
<p id="problem-list" class="popover-list buttonCss">\
    <a href="#" value="√">√</a>\
    <a href="#" value="X">×</a>\
    <a href="#" value="乄">乄</a>\
	<a href="#" value="___" ><u data-i18n-text="mark.special.underline">下划线</u></a></p>\
<p><a href="#" id="undo-button" style="margin-left: 20px;" data-i18n-text="mark.special.back">回&nbsp;&nbsp;&nbsp;退</a>\
<a href="#" id="clear-button" data-i18n-text="mark.special.clear">全部清除</a></p></div>';

SpecialTag.prototype.control_dom = '<h3 class="popover-title" data-i18n-text="mark.special.tag">特殊标记</h3>\
<div class="popover-content"><p id="problem-list" class="popover-list">\
<a href="#" id="show-SpecialTag-button" data-i18n-text="mark.special.open">打开</a><a href="#" id="hide-SpecialTag-button" data-i18n-text="mark.special.close">关闭</a>\
</p></div>';