// HTML4 / HTML5: No differences
define(["jquery"], function (jq) {

	"use strict";

	/**
	 * @constructor
	 */
	return function (context, metadata) {
		var instance,
			element = null,
			showWhenTestIsPassed = metadata.parameters.asBool("score_based_visibilty"),
			showWhenTestIsFailed = !metadata.parameters.asBool("score_based_visibilty");

		function createDOM() {
			element = jq(context.getElement());

			var parameterAsNumber = metadata.parameters.asNumber,
				parameterAsString = metadata.parameters.get,
				fontSize = parameterAsString("font-size", "14"),
				fontFamily = parameterAsNumber("font-family", "Arial, Helvetica, sans-serif"),
				borderWidth = parameterAsNumber("border-size", "1"),
				borderTransparency = parameterAsNumber("border-transparency", "0"),
				backgroundTransparency = parameterAsNumber("background-transparency", "100"),
				backgroundColor = hexToRgb(parameterAsString("background-color", "#cccccc")),
				borderColor = hexToRgb(parameterAsString("border-color", "#98a7b5")),
				textElement,
				authoringView;

			textElement = jq(document.createElement("div"))
				.html(parameterAsString("text", ""))
				.css( {
					"position": "absolute",
					"width": "100%",
					"height": "100%",
					"background-color": "rgba(" + backgroundColor.r + ", " + backgroundColor.g + ", " + backgroundColor.b + ", " + ((100 - backgroundTransparency) / 100) + ")",
					"font-family": getFontFamilyString(fontFamily),
					"font-size": fontSize + "px",
					"font-weight": "bold",
					"font-style": "normal",
					"color": parameterAsString("color", "#919191"),
					"line-height": fontSize + "px",
					"padding-left": (parameterAsNumber("padding-left", "15") - borderWidth) + "px",
					"padding-right": (parameterAsNumber("padding-right", "15") - borderWidth) + "px",
					"padding-top": (parameterAsNumber("padding-top", "15") - borderWidth) + "px",
					"text-align": parameterAsString("text_orientation", "center"),
					"box-sizing": "border-box"
				});

			if (borderWidth !== 0) {
				textElement.css("border", borderWidth + "px solid rgba(" + borderColor.r + ", " + borderColor.g + ", " + borderColor.b + ", " + ((100 - borderTransparency) / 100) + ")");
			}

			element
				.append(textElement);

			if (context.stage.isInAuthoringMode()) {
				authoringView = jq(document.createElement("div"));
				authoringView.css({
					"width": "100%",
					"height": "100%",
					"position": "absolute",
					"opacity": "0.15"
				});
				if (backgroundTransparency === 100) {
					authoringView.css({
						"background-image": "url(\"" + context.getPath() + "invis.png\")"
					});
				}
				element.prepend(authoringView);
			}
		}

		function getFontFamilyString(fontFamily) {
			switch (parseInt(fontFamily)) {
				case 2:
					return "'Times New Roman', Times, serif";
				case 3:
					return "Verdana, Geneva, sans-serif";
				case 4:
					return "'Courier New', Courier, monospace";
				case 1:
				default:
			}
			return "Arial, Helvetica, sans-serif";
		}

		function hideElement() {
			element.hide();
			var arrayElementIDs = element.attr("id").split("I").filter(Boolean);
			if (arrayElementIDs.length > 0) {
				jq("#I" + arrayElementIDs[0]).children().hide();
			}
		}

		function showElement() {
			element.show();
			var arrayElementIDs = element.attr("id").split("I").filter(Boolean);
			if (arrayElementIDs.length > 0) {
				jq("#I" + arrayElementIDs[0]).children().show();
			}
		}

		function hexToRgb(hex) {
			var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
			return result ? {
				r: parseInt(result[1], 16),
				g: parseInt(result[2], 16),
				b: parseInt(result[3], 16)
			} : {
				r: 0,
				g: 0,
				b: 0
			};
		}
		
		function checkConditionAndShowElement(){

			var testIsPassed = context.quiz.getScore() >= context.quiz.getMasteryScore();
			if( (testIsPassed && showWhenTestIsPassed ) || (!testIsPassed && showWhenTestIsFailed ) ) {
                showElement();
                setTimeout( function(){ context.page.event.trigger(instance, "on_show"); }, 50 );
                return;
            }

            hideElement();
		}

		// revealing public API
		return {
			onLoading: function () {

				instance = this;

				context.page.event.bindOnEnter(this);
                context.page.quiz.event.bindOnEvaluateTestRun(this);
				
				createDOM();

				// always show in authoring mode
				if (context.stage.isInAuthoringMode()) {
					showElement();
					return;
				}

				checkConditionAndShowElement();
			},

			onEnterPage: function () {
                checkConditionAndShowElement();
			},

            onEvaluateTestRun : function(){
                checkConditionAndShowElement();
            }
        };
	};
});