var borderWidth = 10;
var borderLeftOffset = 0;
var borderTopOffset = 0;
var glowCounter = 0;


function addInputGlow(target) {
	
	target.css({
		position: 'relative',
		zIndex: 101
	});

	glowId = 'glow-' + glowCounter;

	var html =  '<div class="backglow" style="display:none;" id="' + glowId + '">' +
		'<div class="inner-bg-tl bg-tl"></div>' + 
		'<div class="inner-bg-tc bg-tc"></div>' + 
		'<div class="inner-bg-tr bg-tr"></div>' + 
		'<div class="inner-bg-sl bg-sl"></div>' + 
		'<div class="inner-bg-sr bg-sr"></div>' + 
		'<div class="inner-bg-bl bg-bl"></div>' + 
		'<div class="inner-bg-bc bg-bc"></div>' + 
		'<div class="inner-bg-br bg-br"></div>' + 
		'</div>';

	tarHeight = target.outerHeight();
	tarWidth = target.outerWidth();
	tarOffset = target.offset();

	$('body').append(html);

	$('#' + glowId)
		.height(tarHeight + (2 * borderWidth))
		.width(tarWidth + (2 * borderWidth))
		.css({
			left: tarOffset.left - borderWidth,
			top: tarOffset.top - borderWidth,
			position: 'absolute',
			zIndex: 1
		});

	$('#' + glowId + ' .bg-sl').height(tarHeight - (34));
	$('#' + glowId + ' .bg-sr').height(tarHeight - (34));
	$('#' + glowId + ' .bg-tc').width(tarWidth - (34));
	$('#' + glowId + ' .bg-bc').width(tarWidth - (34));

	addInputBind(target, glowId);
	$(window).resize(function () {
		adjustPosition(target, glowId);
	});

	glowCounter++;
}

function addInputBind(target, glowId) {
	target.bind('focus', function() {
		// show glow
		$('#' + glowId).fadeIn('slow');
	});
	
	target.bind('blur', function() {
		// hide glow
		$('#' + glowId).fadeOut('slow');
	});
	
}

function adjustPosition(myTarget, myGlowId) {
	tarOffset = myTarget.offset();
	$('#' + myGlowId).css({
		left: tarOffset.left - borderWidth,
		top: tarOffset.top - borderWidth
	});
}


var glowNavCounter = 0;

function addNavGlow(target) {
	target.css({
		position: 'relative',
		zIndex: 101
	});

	glowId = 'navglow-' + glowNavCounter;

	var html =  '<div class="backglow" style="display:none;" id="' + glowId + '">' +
		'<div class="bg-tl"></div>' + 
		'<div class="bg-tc"></div>' + 
		'<div class="bg-tr"></div>' + 
		'<div class="bg-sl"></div>' + 
		'<div class="bg-sr"></div>' + 
		'<div class="bg-bl"></div>' + 
		'<div class="bg-bc"></div>' + 
		'<div class="bg-br"></div>' + 
		'</div>';

	tarHeight = target.outerHeight();
	tarWidth = target.outerWidth();
	tarOffset = target.offset();

	$('body').append(html);

	$('#' + glowId)
		.height(tarHeight + (2 * borderWidth))
		.width(tarWidth + (2 * borderWidth))
		.css({
			left: tarOffset.left - borderWidth,
			top: tarOffset.top - borderWidth,
			position: 'absolute',
			zIndex: 1
		});

	$('#' + glowId + ' .bg-sl').height(tarHeight - (34));
	$('#' + glowId + ' .bg-sr').height(tarHeight - (34));
	$('#' + glowId + ' .bg-tc').width(tarWidth - (34));
	$('#' + glowId + ' .bg-bc').width(tarWidth - (34));

	addNavBind(target, glowId);

	glowNavCounter++;
}


function addNavBind(target, glowId) {
	target.hover(
		function () {
			$('#' + glowId).fadeIn('slow');
		},
		function () {
			$('#' + glowId).fadeOut('slow');
		}
	);
}

//$('input[type=submit]').each(function () {addGlow($(this))});
//$('#navigation li a').each(function () {addGlow($(this))});