var Option = function (obj, typ, id) {

	this.holder = obj;
	this.type = typ;
	this.ID = id + 1;

	this.holder.addClass("mcssOption");
	this.holder.addClass("hiddenOption");
	this.holder.attr("id", "mcOption_" + this.ID);
	this.holder.find("#tickCross").hide();
	var stopclick = false;

	this.addListeners = function () {

		this.resetTickCross();

		let _optionBox = this.holder.find("#optionBox");

		if (this.type == "mcss") {
			_optionBox.removeClass("MCSSbulletPointsDisable");
		}
		else {
			_optionBox.removeClass("MCMSBulletPointsDisabled");
		}

		_optionBox.attr("type", this.type);

		_optionBox.off('click').on("click", function () {

			if (stopclick == true) {
				return;
			}

			let _option_box = $(this);
			if (_option_box.attr("type") == "mcss") {
				if (_option_box.parents(".mcssOption").hasClass("selected")) {

					_option_box.removeClass("MCSSbulletPointsSelected");
					_option_box.parents(".mcssOption").removeClass("selected");
				} else {

					_option_box.addClass("MCSSbulletPointsSelected");
					_option_box.parents(".mcssOption").addClass("selected");
				}

			} else {
				if (_option_box.hasClass("MCMSbulletPointsSelected")) {
					_option_box.removeClass("MCMSbulletPointsSelected")
					_option_box.parents(".mcssOption").removeClass("selected");
				}
				else {
					_option_box.addClass("MCMSbulletPointsSelected")
					_option_box.parents(".mcssOption").addClass("selected");
				}
			}

			_option_box.trigger({
				type: "optionClicked",
				value: this.id
			});
		});

		_optionBox.off("keyup").on("keyup", function (e) {
			e.stopPropagation();
			let _btn = $(this);
			var KeyID = e.keyCode;
			switch (KeyID) {
				case 32:
					_btn.trigger('click');
					break;
				case 13:
					_btn.trigger('click');
					break;
				default:
					break;
			}
		})
	}

	this.showOption = function (txt) {

		this.holder.removeClass("hiddenOption");
		if (this.type == "mcss")
			this.holder.find("#optionBox").removeClass("MCSSbulletPointsSelected");
		else {
			this.holder.find("#optionBox").removeClass("MCMSbulletPointsSelected");
			this.holder.find("#optionBox").parents(".mcssOption").removeClass("selected");
		}
		this.holder.find("#optionTxt").html(txt);

		let _raw_txt = txt.replace(/<\/?span[^>]*>/g, "");
		_raw_txt = txt.replace(/<\/?a[^>]*>/g, "");
		_raw_txt = _raw_txt.replace(/<[\/]{0,1}(p)[^><]*>/ig, "");
		this.holder.find("#optionBox").attr("aria-label", _raw_txt);
	}

	this.showTickCross = function (className) {
		stopclick = true;
		this.holder.find("#tickCross").show();
		this.holder.find("#tickCross").addClass(className);
	}

	this.resetTickCross = function () {
		this.holder.find("#tickCross").hide();
		this.holder.find("#tickCross").removeClass("mcssCross").removeClass("mcssTick");
	}

	this.disable = function () {
		if (this.type == "mcss") {
			this.holder.find("#optionBox").addClass("MCSSbulletPointsDisable")
		} else {
			this.holder.find("#optionBox").addClass("MCMSBulletPointsDisabled")
		}
	}

	this.reset = function () {
		let _optionBox = this.holder.find("#optionBox")
		if (this.type == "mcss") {
			_optionBox.removeClass("MCSSbulletPointsSelected");
			_optionBox.removeClass("MCSSbulletPointsDisable");
			$(".mcssOption").removeClass("selected");
		} else {
			_optionBox.removeClass("MCMSbulletPointsSelected");
			_optionBox.removeClass("MCMSBulletPointsDisabled")
			_optionBox.parents(".mcssOption").removeClass("selected");
		}
		_optionBox.attr({ "aria-checked": "false" });
		this.resetTickCross();
	}
};