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

	"use strict";

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

		var shell = null,
			wrapper = null,
			originalWidth = 1024,
			originalHeight = 683,
			width = 300,
			height,
			imageFilename;

		// sets private variables to initial parameter values
		function initializeParameters(parameters) {
			width = parameters.asNumber("wrapperWidth", "300");

			var pic = parameters.get("picture", null);
			if (pic) {
				imageFilename = context.stage.getSharedPath() + pic.fileName;
				originalWidth = pic.width;
				originalHeight = pic.height;
			}
			else {
				imageFilename = context.getPath() + "zoom.jpg";
			}

			if (originalWidth === 0) {
				if (console) {
					console.log("Unexpected width! Picture width is zero!");
				}
				height = 0;
			} else {
				height = (width / originalWidth) * originalHeight;
			}
		}

		function createMarkup() {
			shell = jq(context.getElement())
				.css({
					"width": width + "px",
					"height": height + "px"
				});

			// if we are in authoring mode, create an object shield so we are able to select and drag element
			if (context.stage.isInAuthoringMode()) {
				shell.append(
					jq(document.createElement("div"))
						.css({
							"position": "absolute",
							"left": 0,
							"background-color": "#fff",
							"opacity": "0.4",
							"width": width + "px",
							"height": height + "px",
							"z-index": "9999"
						})
				);
			}

			wrapper = createWrapper();
			shell.append( wrapper );
		}

		function createImage() {
			return jq(document.createElement("img"))
				.attr("src", imageFilename)
				.css({
					"width" : width + "px",
					"height": height + "px"
				});
		}

		function createWrapper(){
			return jq(document.createElement("div"))
				.attr("id", "zoomArea" + metadata.getId())
				.width(width + "px")
				.height(height + "px")
				.css("position", "absolute")
				.append(createImage())
				.on("mousedown pointerdown touchstart", lockNavigation)
				.on("touchend touchleave touchcancel mouseup pointerup mouseout", unlockNavigation);
		}

		function lockNavigation() {
			if (context.stage.isInAuthoringMode() || (!context.stage.trigger)) {
				return;
			}

			context.stage.trigger.lock(metadata.getId());
		}

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

			context.stage.trigger.unlock(metadata.getId());
		}

		// revealing public API
		return {
			// declare public members
			onLoading: function () {
				context.page.event.bindOnEnter(this);

				initializeParameters(metadata.parameters);

				createMarkup();
			},

			onEnterPage: function () {
				if (!context.stage.isInAuthoringMode()) {
					wrapper.zoom();
				}
			}
		};
	};
});