{
	"addClass": {
		"body": [
			"addClass(${1:class})"
		],
		"description": "Adds specified class to the element.",
		"prefix": "addClass"
	},
	"attribute": {
		"body": [
			"attribute(${1:attr}, ${2:[value]})"
		],
		"description": "Adds a new attribute or changes the value of an existing attribute  on the specified element. If no value is specified, returns the  value of the given attribute, or null if attribute is not set.",
		"prefix": "attribute"
	},
	"changed": {
		"body": [
			"changed(${1:fxn})"
		],
		"description": "The .changed() function is called when the value of an element is changed. This can be used to attach an element specific event listener.",
		"prefix": "changed"
	},
	"child": {
		"body": [
			"child(${1:[child]})"
		],
		"description": "Attaches the element  as a child to the parent specified.  Accepts either a string ID, DOM node, or p5.Element.  If no argument is specified, an array of children DOM nodes is returned.",
		"prefix": "child"
	},
	"class": {
		"body": [
			"class(${1:[class]})"
		],
		"description": "Adds given class to the element. If no class argument is passed in, it  instead returns a string containing the current class(es) of the element.",
		"prefix": "class"
	},
	"dragLeave": {
		"body": [
			"dragLeave(${1:fxn})"
		],
		"description": "The .dragLeave() function is called once after every time a dragged file leaves the element area. This can be used to attach an element specific event listener.",
		"prefix": "dragLeave"
	},
	"dragOver": {
		"body": [
			"dragOver(${1:fxn})"
		],
		"description": "The .dragOver() function is called once after every time a file is dragged over the element. This can be used to attach an element specific event listener.",
		"prefix": "dragOver"
	},
	"drop": {
		"body": [
			"drop(${1:callback}, ${2:callback})"
		],
		"description": "The .drop() function is called for each file dropped on the element. It requires a callback that is passed a p5.File object.  You can optionally pass two callbacks, the first one (required) is triggered for each file dropped when the file is loaded.  The second (optional) is triggered just once when a file (or files) are dropped.",
		"prefix": "drop"
	},
	"elt": {
		"body": [
			"elt"
		],
		"description": "Underlying HTML element. All normal HTML methods can be called on this.",
		"prefix": "elt"
	},
	"hide": {
		"body": [
			"hide()"
		],
		"description": "Hides the current element. Essentially, setting display:none for the style.",
		"prefix": "hide"
	},
	"html": {
		"body": [
			"html(${1:[html]}, ${2:[append]})"
		],
		"description": "If an argument is given, sets the inner HTML of the element,  replacing any existing html. If true is included as a second  argument, html is appended instead of replacing existing html.  If no arguments are given, returns  the inner HTML of the element.",
		"prefix": "html"
	},
	"id": {
		"body": [
			"id(${1:[id]})"
		],
		"description": "Sets the ID of the element. If no ID argument is passed in, it instead  returns the current ID of the element.",
		"prefix": "id"
	},
	"input": {
		"body": [
			"input(${1:fxn})"
		],
		"description": "The .input() function is called when any user input is detected with an element. The input event is often used to detect keystrokes in a input element, or changes on a slider element. This can be used to attach an element specific event listener.",
		"prefix": "input"
	},
	"mouseClicked": {
		"body": [
			"mouseClicked(${1:fxn})"
		],
		"description": "The .mouseClicked() function is called once after a mouse button is pressed and released over the element. This can be used to attach element specific event listeners.",
		"prefix": "mouseClicked"
	},
	"mouseMoved": {
		"body": [
			"mouseMoved(${1:fxn})"
		],
		"description": "The .mouseMoved() function is called once every time a mouse moves over the element. This can be used to attach an element specific event listener.",
		"prefix": "mouseMoved"
	},
	"mouseOut": {
		"body": [
			"mouseOut(${1:fxn})"
		],
		"description": "The .mouseOut() function is called once after every time a mouse moves off the element. This can be used to attach an element specific event listener.",
		"prefix": "mouseOut"
	},
	"mouseOver": {
		"body": [
			"mouseOver(${1:fxn})"
		],
		"description": "The .mouseOver() function is called once after every time a mouse moves onto the element. This can be used to attach an element specific event listener.",
		"prefix": "mouseOver"
	},
	"mousePressed": {
		"body": [
			"mousePressed(${1:fxn})"
		],
		"description": "The .mousePressed() function is called once after every time a mouse button is pressed over the element. This can be used to attach element specific event listeners.",
		"prefix": "mousePressed"
	},
	"mouseReleased": {
		"body": [
			"mouseReleased(${1:fxn})"
		],
		"description": "The .mouseReleased() function is called once after every time a mouse button is released over the element. This can be used to attach element specific event listeners.",
		"prefix": "mouseReleased"
	},
	"mouseWheel": {
		"body": [
			"mouseWheel(${1:fxn})"
		],
		"description": "The .mouseWheel() function is called once after every time a mouse wheel is scrolled over the element. This can be used to attach element specific event listeners.  The function accepts a callback function as argument which will be executed when the wheel event is triggered on the element, the callabck function is passed one argument event. The event.deltaY property returns negative values if the mouse wheel is rotated up or away from the user and positive in the other direction. The event.deltaX does the same as event.deltaY except it reads the horizontal wheel scroll of the mouse wheel.  On OS X with \"natural\" scrolling enabled, the event.deltaY values are reversed.",
		"prefix": "mouseWheel"
	},
	"parent": {
		"body": [
			"parent(${1:parent})"
		],
		"description": "Attaches the element to the parent specified. A way of setting  the container for the element. Accepts either a string ID, DOM  node, or p5.Element. If no arguments given, parent node is returned.  For more ways to position the canvas, see the    positioning the canvas wiki page.",
		"prefix": "parent"
	},
	"position": {
		"body": [
			"position(${1:[x]}, ${2:[y]})"
		],
		"description": "Sets the position of the element relative to (0, 0) of the  window. Essentially, sets position:absolute and left and top  properties of style. If no arguments given returns the x and y position  of the element in an object.",
		"prefix": "position"
	},
	"remove": {
		"body": [
			"remove()"
		],
		"description": "Removes the element and deregisters all listeners.",
		"prefix": "remove"
	},
	"removeAttribute": {
		"body": [
			"removeAttribute(${1:attr})"
		],
		"description": "Removes an attribute on the specified element.",
		"prefix": "removeAttribute"
	},
	"removeClass": {
		"body": [
			"removeClass(${1:class})"
		],
		"description": "Removes specified class from the element.",
		"prefix": "removeClass"
	},
	"show": {
		"body": [
			"show()"
		],
		"description": "Shows the current element. Essentially, setting display:block for the style.",
		"prefix": "show"
	},
	"size": {
		"body": [
			"size(${1:[w]}, ${2:[h]})"
		],
		"description": "Sets the width and height of the element. AUTO can be used to  only adjust one dimension. If no arguments given returns the width and height  of the element in an object.",
		"prefix": "size"
	},
	"style": {
		"body": [
			"style(${1:property}, ${2:[value]}, ${3:[value]}, ${4:[value]}, ${5:[value]})"
		],
		"description": "Sets the given style (css) property (1st arg) of the element with the given value (2nd arg). If a single argument is given, .style() returns the value of the given property; however, if the single argument is given in css syntax ('text-align:center'), .style() sets the css appropriatly. .style() also handles 2d and 3d css transforms. If the 1st arg is 'rotate', 'translate', or 'position', the following arguments accept Numbers as values. ('translate', 10, 100, 50);",
		"prefix": "style"
	},
	"touchEnded": {
		"body": [
			"touchEnded(${1:fxn})"
		],
		"description": "The .touchEnded() function is called once after every time a touch is registered. This can be used to attach element specific event listeners.",
		"prefix": "touchEnded"
	},
	"touchMoved": {
		"body": [
			"touchMoved(${1:fxn})"
		],
		"description": "The .touchMoved() function is called once after every time a touch move is registered. This can be used to attach element specific event listeners.",
		"prefix": "touchMoved"
	},
	"touchStarted": {
		"body": [
			"touchStarted(${1:fxn})"
		],
		"description": "The .touchStarted() function is called once after every time a touch is registered. This can be used to attach element specific event listeners.",
		"prefix": "touchStarted"
	},
	"value": {
		"body": [
			"value(${1:[value]})"
		],
		"description": "Either returns the value of the element if no arguments given, or sets the value of the element.",
		"prefix": "value"
	}
}