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();

		if(this.type=="mcss"){
			this.holder.find("#optionBox").removeClass("MCSSbulletPointsDisable");		
		}
		else{			
			this.holder.find("#optionBox").removeClass("MCMSBulletPointsDisabled");		
		}

		this.holder.find("#optionBox").attr("type",this.type);
		
		this.holder.find("#optionBox").off('click').on("click",function(){
			 
			if(stopclick == true){
				return;
			}

			if($(this).attr("type")=="mcss"){
				if ($(this).parents(".mcssOption").hasClass("selected")){
					
					$(this).removeClass("MCSSbulletPointsSelected");
					$(this).parents(".mcssOption").removeClass("selected");
				}else{
					
					$(this).addClass("MCSSbulletPointsSelected");
					$(this).parents(".mcssOption").addClass("selected");
				}	

			}else{
				if($(this).hasClass("MCMSbulletPointsSelected")){
					$(this).removeClass("MCMSbulletPointsSelected")
					$(this).parents(".mcssOption").removeClass("selected");
				}
				else{
					$(this).addClass("MCMSbulletPointsSelected")
					$(this).parents(".mcssOption").addClass("selected");
				}
			}
			
			//trigger event
			$(this).trigger({
				type:"optionClicked",
				value:this.id
			});
		});
	}
	
	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).parents(".mcssOption").removeClass("selected");
			this.holder.find("#optionBox").parents(".mcssOption").removeClass("selected");	
		}
		this.holder.find("#optionTxt").html(txt);

		let _raw_txt = txt.replace(/<\/?span[^>]*>/g,""); 
		_raw_txt = _raw_txt.replace(/<[\/]{0,1}(p)[^><]*>/ig,"");
		this.holder.find("#optionBox").attr("aria-label",_raw_txt);
		// this.holder.find("#optionBox").attr("name",_raw_txt);
	}
	
	this.showTickCross=function(className){
		stopclick = true;
	//	console.log("-----"+className)
		this.holder.find("#tickCross").show();
		this.holder.find("#tickCross").addClass(className);

		if(className == 'mcssTick'){
			this.holder.find("#optionBox").addClass("MCMSbulletPointsSelected").addClass('eventNone');
			this.holder.find("#optionBox").parents(".mcssOption").addClass("selected").addClass('eventNone');
		}

		if(className == 'mcssCross'){
			this.holder.find("#optionBox").removeClass("MCMSbulletPointsSelected").addClass('eventNone');
			this.holder.find("#optionBox").parents(".mcssOption").removeClass("selected").addClass('eventNone');
		}
		


	}

	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.holder.find("#optionBox").unbind();
	}
	
	this.reset=function(){
		if (this.type == "mcss") {
			this.holder.find("#optionBox").removeClass("MCSSbulletPointsSelected");	
			this.holder.find("#optionBox").removeClass("MCSSbulletPointsDisable")
		}else {
			this.holder.find("#optionBox").removeClass("MCMSbulletPointsSelected");
			this.holder.find("#optionBox").removeClass("MCMSBulletPointsDisabled")
			this.holder.find("#optionBox").parents(".mcssOption").removeClass("selected");	
		}
		this.resetTickCross();
	}
};