// com.tts.initial.html5.quiz.dropdown
// HTML4 / HTML5: No differences
define([
		"./dropdown.builder",
		"jquery"
		], function (
			DropdownBuilder,
			jq) {

	"use strict";

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

		// GLOBAL VARIABLES
		var shellElement,
			dropdown,
			isInAuthoringMode = false,
			isInPreviewMode = false,
			isInLearningMode = false,
			pointerDownEventName,
			pointerMoveEventName,
			pointerUpEventName,
			pointerLeaveEventName,
			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'
			],
			isStandardPlayer = false,
			instance = null;

		// HELPER FUNCTIONS
		function getText(parameterName, defaultTextName) {
			var paramValue = (metadata.parameters.get(parameterName, "")||"").trim();
			return (paramValue.length > 0) ? paramValue : defaultTextName;
		}

		function loadImage(key, image) {
			var result = {};

			if (image) {
				result.fileNameURL = context.stage.getSharedPath() + image.fileName;
				result.width = image.width;
				result.height = image.height;
			}
			else {
				switch (key) {
					case "dropdownfield":
						result.fileNameURL = context.getPath() + "dropdownfield.png";
						result.width = 200;
						result.height = 280;
						break;
					case "entries":
						result.fileNameURL = context.getPath() + "entries.png";
						result.width = 200;
						result.height = 120;
						break;
					case "dropdownfield-assessment":
						result.fileNameURL = context.getPath() + "dropdownfield.png";
						result.width = 200;
						result.height = 280;
						break;
					case "entries-assessment":
						result.fileNameURL = context.getPath() + "entries.png";
						result.width = 200;
						result.height = 120;
						break;
					default:
						return null;
				}
			}

			return result;
		}

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

		function getChoicesArray() {
			var result = new Array();

			for (var i = 1; i <= 10; i++) {
				result.push([getText("choice-" + i, null), metadata.parameters.asBool("is-choice-" + i + "-correct")])
			}

			return result;
		}

		// EVENTS FUNCTIONS
		function initPointerEventNames() {
			if (pointerDownEventName) {
				return;
			}

			var nodeName = shellElement.get(0).nodeName;
			pointerDownEventName = context.device.getDownEvents(nodeName);
			pointerUpEventName = context.device.getUpEvents(nodeName);
			pointerMoveEventName = context.device.getMoveEvents(nodeName);
			pointerLeaveEventName = context.device.getReleaseEvents(nodeName);
		}

		// CREATE FUNCTIONS
		function initializeDropdown() {
			var parameters = metadata.parameters,
				backgroundImageDropdownField = loadImage("dropdownfield", parameters.get("state-picture-dropdownfield", null)),
				backgroundImageEntries = loadImage( "entries", parameters.get( "state-picture-entries", null ) ),
				backgroundImageDropdownFieldAssessment = loadImage( "dropdownfield-assessment", parameters.get( "state-picture-dropdownfield-assessment", null ) ),
				backgroundImageEntriesAssessment = loadImage("entries-assessment", parameters.get("state-picture-entries-assessment", null)),
				setDifferentAssessmentDesign = (!isInLearningMode && parameters.asBool("different-assessment-design")) ? true : false;

			initPointerEventNames();

			dropdown = new DropdownBuilder({
				pointerEvents: {
					pointerUp: pointerUpEventName,
					pointerDown: pointerDownEventName,
					pointerMove: pointerMoveEventName,
					pointerLeave: pointerLeaveEventName
				},
				instance: instance,
				elementVariableNameSpace: "com_tts_quiz",
				elementVariableName: "dropdown" + metadata.getId(),
				instanceID: metadata.getId(),
				isInAuthoringMode: isInAuthoringMode,
				isInPreviewMode: isInPreviewMode,
				isStandardPlayer: isStandardPlayer,
				dropdownField: setDifferentAssessmentDesign ? {
					autoform: {
						backgroundImageDropdownField: backgroundImageDropdownFieldAssessment
					},
					text: {
						fontFamily: getFont(parameters.get("font-familyAM", "0")),
						fontSize: parameters.get("font-sizeAM", "14"),
						color: parameters.get("text-colorAM", "#142534"),
						mouseoverColor: parameters.get("text-mouseover-colorAM", "#fd7326"),
						mousedownColor: parameters.get("text-mousedown-colorAM", "#142534"),
						correctColor: parameters.get("text-correct-colorAM", "#fd7326"),
						wrongColor: parameters.get("text-wrong-colorAM", "#fd7326"),
						sampleSolutionColor: parameters.get("text-samplesolution-colorAM", "#fd7326"),
						orientation: parameters.get("text-orientationAM", "left"),
						paddingLeft: parameters.asNumber("padding-leftAM", "12"),
						paddingRight: parameters.asNumber("padding-rightAM", "12"),
						paddingTop: parameters.asNumber("padding-topAM", "12"),
						paddingBottom: parameters.asNumber("padding-bottomAM", "12")
					}
				} : {
					autoform: {
						backgroundImageDropdownField: backgroundImageDropdownField
					},
					text: {
						fontFamily: getFont(parameters.get("font-family", "0")),
						fontSize: parameters.get("font-size", "14"),
						color: parameters.get("text-color", "#142534"),
						mouseoverColor: parameters.get("text-mouseover-color", "#fd7326"),
						mousedownColor: parameters.get("text-mousedown-color", "#142534"),
						correctColor: parameters.get("text-correct-color", "#fd7326"),
						wrongColor: parameters.get("text-wrong-color", "#fd7326"),
						sampleSolutionColor: parameters.get("text-samplesolution-color", "#fd7326"),
						orientation: parameters.get("text-orientation", "left"),
						paddingLeft: parameters.asNumber("padding-left", "12"),
						paddingRight: parameters.asNumber("padding-right", "12"),
						paddingTop: parameters.asNumber("padding-top", "12"),
						paddingBottom: parameters.asNumber("padding-bottom", "12")
					}
				},
				dropdownContainer: {
					autoform: {
						location: parameters.get("container-location"),
						locationX: parameters.asNumber("container-position-x", "0"),
						locationY: parameters.asNumber("container-position-y", "0")
					}
				},
				entries: setDifferentAssessmentDesign ? {
					autoform: {
						backgroundImageEntries: backgroundImageEntriesAssessment
					},
					text: {
						fontFamily: getFont(parameters.get("entries-font-familyAM", "0")),
						fontSize: parameters.get("entries-font-sizeAM", "14"),
						color: parameters.get("entries-text-colorAM", "#142534"),
						mouseoverColor: parameters.get("entries-text-mouseover-colorAM", "#fd7326"),
						mousedownColor: parameters.get("entries-text-mousedown-colorAM", "#142534"),
						orientation: parameters.get("entries-text-orientationAM", "#fd7326"),
						paddingLeft: parameters.asNumber("entries-padding-leftAM", "12"),
						paddingRight: parameters.asNumber("entries-padding-rightAM", "12"),
						paddingTop: parameters.asNumber("entries-padding-topAM", "12"),
						paddingBottom: parameters.asNumber("entries-padding-bottomAM", "12")
					},
					choices: getChoicesArray()
				} : {
					autoform: {
						backgroundImageEntries: backgroundImageEntries
					},
					text: {
						fontFamily: getFont(parameters.get("entries-font-family", "0")),
						fontSize: parameters.get("entries-font-size", "14"),
						color: parameters.get("entries-text-color", "#142534"),
						mouseoverColor: parameters.get("entries-text-mouseover-color", "#fd7326"),
						mousedownColor: parameters.get("entries-text-mousedown-color", "#142534"),
						orientation: parameters.get("entries-text-orientation", "#fd7326"),
						paddingLeft: parameters.asNumber("entries-padding-left", "12"),
						paddingRight: parameters.asNumber("entries-padding-right", "12"),
						paddingTop: parameters.asNumber("entries-padding-top", "12"),
						paddingBottom: parameters.asNumber("entries-padding-bottom", "12")
					},
					choices: getChoicesArray()
                },
				settings: {
					sampleSolution: getText("sample-solution", null),
					defaultText: getText("default-text", null),
					groupId: parameters.get("toggle_group_id")
				}
			}, context, metadata).build();

			shellElement.css({
				"width": backgroundImageDropdownField.width + "px",
				"height": (backgroundImageDropdownField.height / 7) + "px"
			})

			shellElement.append(dropdown.getElement());

			if (isInAuthoringMode) {
				createAuthoringShield();
			}
		}

		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"
					})
			);
		}

		// revealing public API
		return {
			onLoading: function () {
				instance = this;

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

				shellElement = jq(context.getElement());

				isInAuthoringMode = !!context.stage.isInAuthoringMode();
				isInPreviewMode = !!context.stage.isInPreviewMode();
				isInLearningMode = !!context.stage.isInLearningMode();
				isStandardPlayer = context.getPlayerName() === "standard";

				initializeDropdown();
			},

			onEnterPage: function () {
				dropdown.onEnterPage();
			},

			onExitPage: function () {
				dropdown.onExitPage();
			},

			onUserSolution: function () {
				dropdown.onUserSolution();
			},

			onBestPracticeSolution: function () {
				dropdown.onBestPracticeSolution();
			}
		};
	};
});
