text: LayoutMode.registerPlugin({
  
  	create: function() {
  
  	},
  
  	activate: function() {
  
  		var that = this;
  
  		$(document)
  			.on('keydown', function(e) {
  				if(e.keyCode === 91) { // cmd key
  					that.enable();
  				}
  			})
  			.on('keyup', function(e) {
  				if(e.keyCode === 91) { // cmd key
  					that.disable();
  				}
  			});
  
  	},
  
  	deactivate: function() {
  		this.disable();
  	},
  
  	hoverTargetChange: function(e) {
  
  		if(this.enabled)
  			this.processCommandOverLogic(e);
  
  		// if we're holding shift and hover another element, show guides
  		if(this.enabled &&
  			LayoutMode.currentElement &&
  			LayoutMode.hoverElement !== LayoutMode.currentElement &&
  			!$.contains(LayoutMode.hoverElement, LayoutMode.currentElement) &&
  			!$.contains(LayoutMode.currentElement, LayoutMode.hoverElement)
  		) {
  			this.visualizeRelationTo(LayoutMode.hoverElement);
  			return false;
  		}
  
  	},
  
  	/* member functions */
  
  	enable: function() {
  
  		this.enabled = true;
  
  		LayoutMode.hide();
  
  		//LayoutMode.over = false;
  
  		// process over logic once
  		if(LayoutMode.__lastMouseMoveEvent)
  			this.processCommandOverLogic(LayoutMode.__lastMouseMoveEvent);
  
  		// visualize right away with what we previously hovered
  		if(LayoutMode.hoverElement !== LayoutMode.currentElement &&
  			!$.contains(LayoutMode.hoverElement, LayoutMode.currentElement) &&
  			!$.contains(LayoutMode.currentElement, LayoutMode.hoverElement)
  		) {
  			this.visualizeRelationTo(LayoutMode.hoverElement);
  		}
  
  	},
  
  	disable: function() {
  		this.enabled = false;
  		this.commandOver = false;
  		if(this.vLineX) this.vLineX.style.opacity = 0;
  		if(this.vLineY) this.vLineY.style.opacity = 0;
  		LayoutMode.show();
  	},
  
  	processCommandOverLogic: function(e) {
  
  		var extraMargin = 10;
  		var offset = LayoutMode.currentOffset;
  
  		// command over/out
  
  		if(
  			e.pageX > offset.left - LayoutMode.marginLeft - extraMargin &&
  			e.pageY > offset.top - LayoutMode.marginTop - extraMargin &&
  			e.pageX < (offset.left + LayoutMode.outerWidth + LayoutMode.marginRight + extraMargin) &&
  			e.pageY < (offset.top + LayoutMode.outerHeight + LayoutMode.marginBottom + extraMargin)
  		) {
  
  			if(!this.commandOver) {
  				this.commandOver = true;
  				this.visualizeRelationToWindow();
  			}
  
  		} else {
  
  			if(this.commandOver) {
  				this.commandOver = false;
  			}
  
  		}
  
  	},
  
  	createVisualizationLines: function() {
  
  		if(!this.vLineX) {
  			this.vLineX = document.createElement('div');
  			this.vLineX.className = 'vline-x';
  			document.body.appendChild(this.vLineX);
  
  			this.vLineXCaption = document.createElement('div');
  			this.vLineXCaption.className = 'caption';
  			this.vLineX.appendChild(this.vLineXCaption);
  
  			this.vLineXCrossBar = document.createElement('div');
  			this.vLineXCrossBar.className = 'crossbar';
  			this.vLineX.appendChild(this.vLineXCrossBar);
  		}
  
  		if(!this.vLineY) {
  			this.vLineY = document.createElement('div');
  			this.vLineY.className = 'vline-y';
  			document.body.appendChild(this.vLineY);
  
  			this.vLineYCaption = document.createElement('div');
  			this.vLineYCaption.className = 'caption';
  			this.vLineY.appendChild(this.vLineYCaption);
  
  			this.vLineYCrossBar = document.createElement('div');
  			this.vLineYCrossBar.className = 'crossbar';
  			this.vLineY.appendChild(this.vLineYCrossBar);
  		}
  
  	},
  
  	visualizeRelationToWindow: function() {
  
  		var currentElement = LayoutMode.currentElement;
  
  		this.createVisualizationLines();
  
  		this.vLineX.style.opacity = 1;
  		this.vLineX.style.top = (LayoutMode.currentOffset.top + (currentElement.offsetHeight / 2)) + 'px';
  		this.vLineX.style.left = 0 + 'px';
  		this.vLineX.style.width = LayoutMode.currentOffset.left + 'px';
  		this.vLineXCaption.innerHTML = LayoutMode.currentOffset.left + ' <span>px</span>';
  
  		this.vLineY.style.opacity = 1;
  		this.vLineY.style.left = (LayoutMode.currentOffset.left + (currentElement.offsetWidth / 2)) + 'px';
  		this.vLineY.style.top = 0 + 'px';
  		this.vLineY.style.height = LayoutMode.currentOffset.top + 'px';
  		this.vLineYCaption.innerHTML = LayoutMode.currentOffset.top + ' <span>px</span>';
  
  	},
  
  	visualizeRelationTo: function(relatedElement) {
  
  		var currentElement = LayoutMode.currentElement, top, left;
  		var currentOffset = LayoutMode.currentOffset;
  		var relatedOffset = $(relatedElement).offset();
  
  		this.createVisualizationLines();
  
  		var reRightEdge = relatedOffset.left + relatedElement.offsetWidth;
  		var ceRightEdge = currentOffset.left + currentElement.offsetWidth;
  		var reLeftEdge = relatedOffset.left;
  		var ceLeftEdge = currentOffset.left;
  
  		var reBottomEdge = relatedOffset.top + relatedElement.offsetHeight;
  		var ceBottomEdge = currentOffset.top + currentElement.offsetHeight;
  		var reTopEdge = relatedOffset.top;
  		var ceTopEdge = currentOffset.top;
  		
  		// horizontal connection
  		if(reRightEdge < ceLeftEdge) {
  
  			top = currentOffset.top + (currentElement.offsetHeight / 2);
  			this.vLineX.style.opacity = 1;
  			this.vLineX.style.top = top + 'px';
  			this.vLineX.style.left = reRightEdge + 'px';
  			this.vLineX.style.width = ceLeftEdge - reRightEdge + 'px';
  			this.vLineXCaption.innerHTML = ceLeftEdge - reRightEdge + ' <span>px</span>';
  
  			if(reBottomEdge < top) {
  				this.vLineXCrossBar.style.display = 'block';
  				this.vLineXCrossBar.style.left = '0px';
  				this.vLineXCrossBar.style.bottom = '0px';
  				this.vLineXCrossBar.style.top = 'auto';
  				this.vLineXCrossBar.style.height = (currentElement.offsetHeight / 2) + (ceTopEdge - reBottomEdge) + 'px';
  			} else if(top < reTopEdge) {
  				this.vLineXCrossBar.style.display = 'block';
  				this.vLineXCrossBar.style.left = '0px';
  				this.vLineXCrossBar.style.top = '0px';
  				this.vLineXCrossBar.style.bottom = 'auto';
  				this.vLineXCrossBar.style.height = (currentElement.offsetHeight / 2) + (reTopEdge - ceBottomEdge) + 'px';
  			} else {
  				this.vLineXCrossBar.style.display = 'none';
  			}
  
  		} else if(ceRightEdge < reLeftEdge) {
  
  			top = currentOffset.top + (currentElement.offsetHeight / 2);
  			this.vLineX.style.opacity = 1;
  			this.vLineX.style.top = top + 'px';
  			this.vLineX.style.left = ceRightEdge + 'px';
  			this.vLineX.style.width = reLeftEdge - ceRightEdge + 'px';
  			this.vLineXCaption.innerHTML = reLeftEdge - ceRightEdge + ' <span>px</span>';
  
  			if(reBottomEdge < top) {
  				this.vLineXCrossBar.style.display = 'block';
  				this.vLineXCrossBar.style.left = '100%';
  				this.vLineXCrossBar.style.bottom = '0px';
  				this.vLineXCrossBar.style.top = 'auto';
  				this.vLineXCrossBar.style.height = (currentElement.offsetHeight / 2) + (ceTopEdge - reBottomEdge) + 'px';
  			} else if(top < reTopEdge) {
  				this.vLineXCrossBar.style.display = 'block';
  				this.vLineXCrossBar.style.left = '100%';
  				this.vLineXCrossBar.style.top = '0px';
  				this.vLineXCrossBar.style.bottom = 'auto';
  				this.vLineXCrossBar.style.height = (currentElement.offsetHeight / 2) + (reTopEdge - ceBottomEdge) + 'px';
  			} else {
  				this.vLineXCrossBar.style.display = 'none';
  			}
  
  		} else {
  			this.vLineX.style.opacity = 0;
  		}
  
  		// vertical connection
  		if(reBottomEdge < ceTopEdge) {
  
  			left = currentOffset.left + (currentElement.offsetWidth / 2);
  			this.vLineY.style.opacity = 1;
  			this.vLineY.style.left = left + 'px';
  			this.vLineY.style.top = reBottomEdge + 'px';
  			this.vLineY.style.height = ceTopEdge - reBottomEdge + 'px';
  			this.vLineYCaption.innerHTML = ceTopEdge - reBottomEdge + ' <span>px</span>';
  
  			if(reRightEdge < left) {
  				this.vLineYCrossBar.style.display = 'block';
  				this.vLineYCrossBar.style.top = '0px';
  				this.vLineYCrossBar.style.right = '0px';
  				this.vLineYCrossBar.style.left = 'auto';
  				this.vLineYCrossBar.style.width = (currentElement.offsetWidth / 2) + (ceLeftEdge - reRightEdge) + 'px';
  			} else if(left < reLeftEdge) {
  				this.vLineYCrossBar.style.display = 'block';
  				this.vLineYCrossBar.style.top = '0px';
  				this.vLineYCrossBar.style.left = '0px';
  				this.vLineYCrossBar.style.right = 'auto';
  				this.vLineYCrossBar.style.width = (currentElement.offsetWidth / 2) + (reLeftEdge - ceRightEdge) + 'px';
  			} else {
  				this.vLineYCrossBar.style.display = 'none';
  			}
  
  		} else if(ceBottomEdge < reTopEdge) {
  
  			left = currentOffset.left + (currentElement.offsetWidth / 2);
  			this.vLineY.style.opacity = 1;
  			this.vLineY.style.left = left + 'px';
  			this.vLineY.style.top = ceBottomEdge + 'px';
  			this.vLineY.style.height = reTopEdge - ceBottomEdge + 'px';
  			this.vLineYCaption.innerHTML = reTopEdge - ceBottomEdge + ' <span>px</span>';
  
  			if(reRightEdge < left) {
  				this.vLineYCrossBar.style.display = 'block';
  				this.vLineYCrossBar.style.top = '100%';
  				this.vLineYCrossBar.style.right = '0px';
  				this.vLineYCrossBar.style.left = 'auto';
  				this.vLineYCrossBar.style.width = (currentElement.offsetWidth / 2) + (ceLeftEdge - reRightEdge) + 'px';
  			} else if(left < reLeftEdge) {
  				this.vLineYCrossBar.style.display = 'block';
  				this.vLineYCrossBar.style.top = '100%';
  				this.vLineYCrossBar.style.left = '0px';
  				this.vLineYCrossBar.style.right = 'auto';
  				this.vLineYCrossBar.style.width = (currentElement.offsetWidth / 2) + (reLeftEdge - ceRightEdge) + 'px';
  			} else {
  				this.vLineYCrossBar.style.display = 'none';
  			}
  
  		} else {
  			this.vLineY.style.opacity = 0;
  		}
  
  	}
  
  });