div.js-e

## Copyright (c) 2013, Empirical Modelling Group
## All rights reserved.
##
## See LICENSE.txt

${{
Div = function (html, x, y, width, height, id, classNames, style) {
	this.html = html;
	this.x = x;
	this.y = y;
	this.width = width;
	this.height = height;
	this.name = id;
	this.obsName = root.currentObservableName();
	this.classNames = classNames;
	this.style = style;

	//Separate font-size from other CSS information.
	var styleType = typeof(style);
	var matcher, matcher2;
	this.fontSizeSpecified = false;
	if (styleType == "string") {
		matcher = style.match(/(^|;)\s*font-size:\s*([^;]*)(;|$)/);
		if (matcher !== null) {
			matcher2 = matcher[2].match(/^(\d+(\.\d+)?)([a-z%]+)\s*$/);
			if (matcher2 !== null) {
				this.fontSizeNumber = Number(matcher2[1]);
				this.fontSizeUnits = matcher2[3];
				this.fontSizeSpecified = true;
			}
		} else {
			matcher = style.match(/(^|;)\s*font:([^\/;]+\s+)?(\d+(\.\d+)?)([a-z%]+)(\/|\s|;|$)/);
			if (matcher !== null) {
				this.fontSizeNumber = Number(matcher[3]);
				this.fontSizeUnits = matcher[5];
				this.fontSizeSpecified = true;
			}
		}
	} else if (styleType == "object") {
		var propertyValue = style.fontSize || style["font-size"];
		if (propertyValue) {
			matcher2 = propertyValue.match(/^(\d+(\.\d+)?)([a-z%]+)\s*$/);
			if (matcher2 !== null) {
				this.fontSizeNumber = Number(matcher2[1]);
				this.fontSizeUnits = matcher2[3];
				this.fontSizeSpecified = true;
			}
		} else {
			propertyValue = style.font;
			if (propertyValue) {
				matcher = style.match(/([^\/;]+\s+)?(\d+(\.\d+)?)([a-z%]+)(\/|\s|;|$)/);
				if (matcher !== null) {
					this.fontSizeNumber = Number(matcher[2]);
					this.fontSizeUnits = matcher[4];
					this.fontSizeSpecified = true;
				}
			}
		}
	}
}

Div.prototype.hash = function () {
	return this.x+"$$"+
		this.y+"$$"+
		this.width+"$$"+
		this.height+"$$"+
		this.html+"$$"+
		this.name+"$$"+
		this.classNames+"$$"+
		Eden.edenCodeForValue(this.style);
};
}}$;

/**
 * Create a Div tag to display HTML
 * 
 * @param html
 * @param x X-coordinate
 * @param y Y-coordinate
 * @param [width Width in pixels or as a string or undefined
 * @param [height]] Height in pixels or as a string or undefined
 * @param [id]
 * @param [css_class_list]
 * @param [style] An optional CSS style string
 * #canvas #div #html #css
 */

func Div { ${{
	var html = arguments[0];
	var x = arguments[1];
	var y = arguments[2];
	var width, height;   //Number of pixels, string (e.g. "50%") or undefined (automatic)
	var id, classNames;
	var style = "";
	
	var argsProcessed = 3;
	var argType = typeof(arguments[3]);
	
	if (argType == "number" || argType == "undefined") {
		width = arguments[3];
		argsProcessed++;
		
		argType = typeof(arguments[4]);
		if (argType == "number" || argType == "undefined") {
			height = arguments[4];
			argsProcessed++;
		}
	}

	if (arguments.length > argsProcessed) {
		if (arguments.length == argsProcessed + 3) {
			id = arguments[argsProcessed];
			classNames = arguments[argsProcessed + 1];
			style = arguments[argsProcessed + 2];
		} else {
			if (Array.isArray(arguments[argsProcessed])) {
				classNames = arguments[argsProcessed];
				if (arguments.length == argsProcessed + 2) {
					style = arguments[argsProcessed + 1];
				}
			} else if (arguments.length == argsProcessed + 2) {
				id = arguments[argsProcessed];
				if (Array.isArray(arguments[argsProcessed + 1])) {
					classNames = arguments[argsProcessed + 1];
				} else {
					style = arguments[argsProcessed + 1];
				}
			} else {
				argType = typeof(arguments[argsProcessed]);
				if ((argType == "string" && arguments[argsProcessed].indexOf(":") !== -1) ||
					argType == "object") {
					style = arguments[argsProcessed];
				} else {
					id = arguments[argsProcessed];
				}
			}
		}
	}	
	return new Div(html, x, y, width, height, id, classNames, style);
}}$; }

${{

Div.prototype.draw = function(context) {

  if (this.elements === undefined) {
	var me = this;

	var divElement = document.createElement("div");
	if (this.name !== undefined) {
		divElement.id = this.name;
	}

	divElement.addEventListener("click", function(event) {
		var script = event.target.getAttribute("data-jseden");
		if (!event.target.className.includes("disabled") && script !== null && script != "") {
			eden.execute2(script);
		}
	});

	if (Array.isArray(this.classNames)) {
		divElement.setAttribute("class", "canvashtml-item canvashtml-div-item " + this.classNames.join(" "));
	} else {
		divElement.setAttribute("class", "canvashtml-item canvashtml-div-item");
	}

	if (this.style != "") CSSUtil.setStyle(divElement, this.style);
	divElement.innerHTML = this.html;

	if (this.name !== undefined) {
		divElement.onmousedown = function (event) {
			var mouseFollow = root.lookup("mouseFollow").value();
			root.lookup("mouseDownZone").assign(event.target.id, root.scope, EdenSymbol.hciAgent, mouseFollow);
		};
		divElement.onmouseup = function (event) {
			edenUI.plugins.Canvas2D.endClick();
		};
		divElement.onmouseenter = function (event) {
			var mouseFollow = root.lookup("mouseFollow").value();
			root.lookup("mouseZone").assign(event.target.id, root.scope, EdenSymbol.hciAgent, mouseFollow);
		};
		edenUI.plugins.Canvas2D.initZoneFromName(name, "Div")
	}

	//Create object properties that record the automatically generated width and/or height.
	if (this.width === undefined || this.name !== undefined) {
		var objectElement = document.createElement("object");
		objectElement.setAttribute("style", "display: block; position: absolute; top: 0px; left: 0px; " + 
			"height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;");

		objectElement.onload = function () {
			me.resize();
		}

		objectElement.type = "text/html";
		objectElement.data = "about:blank";
		divElement.appendChild(objectElement);
	}

	this.elements = [divElement];
  }
};

Div.prototype.resize = function () {
	var scale = this.cachedScale;
	if (scale === undefined) {
		//Not yet added drawn onto a canvas.
		return;
	}

	var element = this.elements[0];
	var style = element.style;
	//style.transform = "scale("+scale+")";
	var autoWidth = this.width === undefined;
	var autoHeight = this.height === undefined;

	/*if (autoWidth) {
		var savedHeight = style.height;
		style.width = "auto";
		style.height = "auto";
		var contentWidth = element.clientWidth;
		style.width = contentWidth + "px";
		style.height = savedHeight;
		var scrollBarSize = element.offsetWidth - element.clientWidth;
		if (scrollBarSize > 0) {
			scrollBarSize = scrollBarSize + 2;
			style.width = String(contentWidth + scrollBarSize) + "px";
		} else {
			style.width = "auto";
		}
	}*/

	if (this.name !== undefined) {
		var agent = root.lookup("Div");
		var widthSymName = this.name + "_width";
		var heightSymName = this.name + "_height";

		if (autoWidth || widthSymName in root.symbols) {
			root.lookup(widthSymName).assign(element.offsetWidth / scale, root.scope, agent);
		}
		if (autoHeight || heightSymName in root.symbols) {
			root.lookup(heightSymName).assign(element.offsetHeight / scale, root.scope, agent);
		}
	}
}

Div.prototype.scale = function (scale, zoom , origin) {
	var style = this.elements[0].style;
	style.left = Math.round((this.x + origin.x) * scale) + "px";
	style.top = Math.round((this.y + origin.y) * scale) + "px";

	if (this.width !== undefined) {
		style.width = Math.round(this.width) + "px";
	}
	if (this.height !== undefined) {
		style.height = Math.round(this.height) + "px";
	}
	/*if (this.fontSizeSpecified) {
		style.fontSize = String(this.fontSizeNumber * zoom) + this.fontSizeUnits;
	} else {
		if (zoom == 1) {
			style.fontSize = ""; //Could be specified by a CSS class.
		} else {
			style.fontSize = zoom + "em";
		}
	}*/
	//if (scale != this.cachedScale) {
		style.transform = "scale("+zoom+")";
	//}
	this.cachedScale = scale;
	this.resize();
};

Div.prototype.toString = function() {
	return this.getEdenCode();
};

Div.prototype.getEdenCode = function () {
	var s = "Div(" + Eden.edenCodeForValues(this.html, this.x, this.y, this.width, this.height);

	if (this.name !== undefined) {
		s = s + ", \"" + this.name + "\"";
	}
	if (this.classNames !== undefined) {
		s = s + ", " + Eden.edenCodeForValue(this.classNames);
	}
	if (this.style != "") {
		s = s + ", \"" + this.style + "\"";
	}
	s = s + ")";
	return s;
};

}}$;