<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Position Visual Test: Feedback</title>
	<link rel="stylesheet" href="../../../themes/base/all.css">
	<style>
	#target, .element {
		position: absolute;
		border: 1px solid black;
		border-radius: 5px;
		width: 75px;
		height: 25px;
		padding: 5px;
		font-size: 62.5%;
	}
	#target {
		height: 75px;
	}
	.element:before {
		font-size: 12pt;
		content: "↑";
		position: absolute;
		top: -19px;
		left: 5px;
	}
	.right:before {
		left: auto;
		right: 5px;
	}
	.bottom:before {
		content: "↓";
		top: auto;
		bottom: -19px;
	}
	.center:before {
		left: 50%;
		right: auto;
	}
	.middle:before {
		top: 50%;
		bottom: auto;
	}
	.horizontal:before {
		height: 10px;
		top: 50%;
		margin-top: -8px;
		bottom: auto;
		left: -18px;
		right: auto;
		content: "←";
	}
	.right.horizontal:before {
		left: auto;
		right: -18px;
		content: "→";
	}
	.bottom.horizontal:before {
		top: auto;
		bottom: 5px;
	}
	.top.horizontal:before {
		top: 5px;
	}
	</style>
	<script src="../../../external/requirejs/require.js"></script>
	<script src="../../../demos/bootstrap.js">
		function using( position, feedback ) {
			$( this )
				.css( position )
				.text( feedback.horizontal + " " + feedback.vertical + " " + feedback.important )
				.removeClass( "left right top bottom center middle vertical horizontal" )
				.addClass( feedback.horizontal )
				.addClass( feedback.vertical )
				.addClass( feedback.important );
		}

		var element = $( ".element" ),
			target = $( "#target" ).position({
				my: "center",
				at: "center",
				of: window
			}),
			targetOffset = target.offset(),
			oppositeElement = element.clone().width( 50 ).appendTo( "body" ),
			leftElement = element.clone().width( 50 ).height( 150 ).appendTo( "body" ),
			rightElement = element.clone().height( 150 ).width( 150 ).appendTo( "body" );

		$.each([
			"center top-100",
			"right+25 top-50",
			"right+75 top",
			"right+75 center",
			"right+75 bottom",
			"right+25 bottom+50",
			"center bottom+100",
			"left-25 bottom+50",
			"left-75 bottom",
			"left-75 center",
			"left-75 top",
			"left-25 top-50"
		], function( index, direction ) {
			element.clone().insertAfter( target ).position({
				my: "center",
				at: direction,
				of: target,
				using: using
			});
		});

		element.width( 150 );
		function positionWithOffset( horizontal, vertical ) {
			return {
				my: "left top",
				at: "left" + (horizontal < 0 ? horizontal : "+" + horizontal) + " " +
					"top" + (vertical < 0 ? vertical : "+" + vertical),
				of: target,
				using: using
			};
		};
		$( document ).on( "mousemove", function( event ) {
			element.position( positionWithOffset(
				event.pageX - targetOffset.left, event.pageY - targetOffset.top ) );
			oppositeElement.position( positionWithOffset(
				-1 * (event.pageX - targetOffset.left), -1 * (event.pageY - targetOffset.top) ) );
			leftElement.position( positionWithOffset(
				-0.9 * (event.pageX - targetOffset.left), 0.9 * (event.pageY - targetOffset.top) ) );
			rightElement.position( positionWithOffset(
				0.9 * (event.pageX - targetOffset.left), -0.9 * (event.pageY - targetOffset.top) ) );
		});
	</script>
</head>
<body>

<div id="target">all around me</div>
<div class="element"></div>

</body>
</html>