// com.tts.initial.html5.quiz.cloze
define([
	"./cloze.builder",
	"./event.utils",
	"jquery"
	], function (
		ClozeBuilder,
		EventUtil,
		jq
	){

"use strict";

/**
* @constructor 
*/
return function (context, metadata) {

	var shellElement,
		isStandardPlayer = context.getPlayerName() === "standard",
		instance = null,
		cloze,
		clozeInitialized = false,
		hasStageTriggerSupport = true,
		isInAuthoringMode = false,
		isInPreviewMode = false,
		isInLearningMode = false,
		elementVariableNameSpace = "com_tts_quiz",
		pointerUpEventName,
		fonts = [
			'Arial, Helvetica, sans-serif',
			'"Times New Roman", Times, serif',
			'Verdana, Geneva, sans-serif',
			'"Courier New", Courier, monospace',
			'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
			'"Droid Serif", "Times New Roman", Times, serif'
		];

	function initializeButton(){
		if( clozeInitialized ){
			return;
		}
		clozeInitialized = true;

		initPointerEventNames(shellElement);

		var scParams = metadata.parameters,
			isAutoAdjustHeight = scParams.asBool("auto-adjust-height");

		cloze = new ClozeBuilder({
			pointerEvents : {
				pointerUp : pointerUpEventName
			},
			isInAuthoringMode : isInAuthoringMode,
			isInPreviewMode : isInPreviewMode,
			isInLearningMode : isInLearningMode,
			isStandardPlayer : isStandardPlayer,
			elementVariableNameSpace : elementVariableNameSpace,
			instanceId : metadata.getId(),
			input : scParams.get("input", ""),
			sampleSolution : scParams.get("sample-solution", ""),
			alternativeSolutions : scParams.get("alternative-solutions", ""),
			isCaseSensitive : !scParams.asBool("case-sensitive"),
			groupId : scParams.get("toggle_group_id"),
			instance : instance,
			width : metadata.getWidth(),
			height : metadata.getHeight(),

			autoform : {
				default :{
					borderColor : scParams.get("border-color", "#000000"),
					borderWidth : scParams.asNumber("border-width", "1"),
					borderTransparency : (scParams.asNumber("borderTransparency", "0")),
					fillColor : scParams.get("fill-color", "#cccccc"),
					fillTransparency : (scParams.asNumber("fillColorTransparency", "0"))
				},
				correct : {
					borderColor : scParams.get("border-color-correct", "#74b65b"),
					borderTransparency : (scParams.asNumber("borderTransparency-correct", "0")),
					fillColor : scParams.get("fill-color-correct", "#cccccc"),
					fillTransparency : (scParams.asNumber("fillColorTransparency-correct", "0"))
				},
				wrong : {
					borderColor : scParams.get("border-color-wrong", "#fd7326"),
					borderTransparency : (scParams.asNumber("borderTransparency-wrong", "0")),
					fillColor : scParams.get("fill-color-wrong", "#cccccc"),
					fillTransparency : (scParams.asNumber("fillColorTransparency-wrong", "0"))
				},
				sampleSolution : {
					borderColor : scParams.get("border-color-samplesolution", "#000000"),
					borderTransparency : (scParams.asNumber("borderTransparency-samplesolution", "0")),
					fillColor : scParams.get("fill-color-samplesolution", "#cccccc"),
					fillTransparency : (scParams.asNumber("fillColorTransparency-samplesolution", "0"))
				}
			},

			text : {
				fontSize : scParams.asNumber("font-size", "12"),
				color : {
					default : scParams.get("text-color", "#000000"),
					correct : scParams.get("text-color-correct", "#000000"),
					wrong : scParams.get("text-color-wrong", "#000000"),
					sampleSolution : scParams.get("text-color-samplesolution", "#000000")
				},
				fontFamily : getFont(scParams.asNumber("font-family","0")),
				textAlign : scParams.get("text-align", "left"),
				paddingLeft : scParams.asNumber("padding-left", "10"),
				paddingRight : scParams.asNumber("padding-right", "10"),
				paddingTop : scParams.asNumber("padding-top", "10"),
				paddingBottom : scParams.asNumber("padding-bottom", "10")
			},

			settings : {
				maxCharacters : scParams.asNumber("max-characters", "26"),
				focused : scParams.asBool("focused"),
				showDeleteCross : scParams.asBool("show-delete-cross"),
				isAutoAdjustHeight : isAutoAdjustHeight
			},
		}, context, metadata).build();

		shellElement.css({
			"width": metadata.getWidth() + "px"
		});

		shellElement.append( cloze.getElement() );

		if(isAutoAdjustHeight){
			shellElement.css({
				"height": cloze.getJqElement().outerHeight(true) + "px"
			});
		}else{
			shellElement.css({
				"height": metadata.getHeight() + "px"
			});
		}

		if (isInAuthoringMode) {
			createAuthoringShield();
		}
	}

	function getFont( index ) {
		var fontIndex = (index > 0 && index < fonts.length) ? index-1: 0;
		return fonts[fontIndex];
	}

	function initPointerEventNames(element) {
		if( !pointerUpEventName ) {
			pointerUpEventName = EventUtil.getPointerUpEvent( element );
		}
	}

	function unlockNavigation() {
		if (isInAuthoringMode || !hasStageTriggerSupport) {
			return;
		}
		context.stage.trigger.unlock(metadata.getId());
	}

	// create an object shield so we are able to select and drag element
	function createAuthoringShield() {
		shellElement.append(jq(document.createElement("div"))
			.css({
				"position": "absolute",
				"left": 0,
				"top": 0,
				"background-color": "transparent",
				"opacity": "0.4",
				"width": "100%",
				"height": "100%",
				"z-index": "9999"
			}));
	}

	function bindEvents() {
		if (isInAuthoringMode) {
			return;
		}

		removeEvents();
		EventUtil.attachFirstSupportedEvent( shellElement.get(0), pointerUpEventName, focusInputField );
	}

	function removeEvents() {
		unlockNavigation();

		initPointerEventNames(shellElement);
		EventUtil.removeFirstSupportedEvent( shellElement.get(0), pointerUpEventName, focusInputField );
	}

	function focusInputField(){
		cloze.getElement().focus();
	}

	// revealing public API
	return {

		onLoading: function () {
			instance = this;

			context.page.event.bindOnEnter(instance);
			context.page.event.bindOnExit(instance);

			shellElement = jq(context.getElement());

			hasStageTriggerSupport = !!context.stage.trigger;
			isInAuthoringMode = !!context.stage.isInAuthoringMode();
			isInPreviewMode = !!context.stage.isInPreviewMode();
			isInLearningMode = !!context.stage.isInLearningMode();

			initializeButton();
		},

		onEnterPage: function() {
			cloze.onEnter();
			bindEvents();
		},

		onExitPage: function() {
			cloze.onExit();
			removeEvents();
		},

		onUserSolution: function() {
			removeEvents();
			unlockNavigation();
			cloze.onUserSolution();
		},

		onBestPracticeSolution: function() {
			removeEvents();
            unlockNavigation();
			cloze.onBestPracticeSolution()
		}
	};
};
});