// Positioning functions

// Position an element in relation to another element. Above, Below, left of, right of
// Takes: ID of target, ID of Neighbor, a direction, displacement in pixels, center or not
function juxtapositionById(target_id, neighbor_id, direction, displacement, center) {  
		var target = document.getElementById(target_id);
		var neighbor = document.getElementById(neighbor_id);
		var offsetMeY = 0;
		var offsetMeX = 0;
												
	if (neighbor.style.top != '' && neighbor.style.height != '' && neighbor.style.width != '' &&  neighbor.style.left != '' && target.style.top != '' && target.style.height != '' && target.style.width != '' && target.style.left != '') {
			var n_top = parseInt(neighbor.style.top.toString(), 10);
			var n_height = parseInt(neighbor.style.height.toString(), 10);
			var n_width = parseInt(neighbor.style.width.toString(), 10);
			var n_left = parseInt(neighbor.style.left.toString(), 10);
			var t_top = parseInt(target.style.top.toString(), 10);
			var t_height = parseInt(target.style.height.toString(), 10);
			var t_width = parseInt(target.style.width.toString(), 10);
			var t_left = parseInt(target.style.left.toString(), 10);
	} else if (neighbor.offsetParent && target.offsetParent) {
			var n_top = neighbor.offsetTop;
			var n_height = neighbor.offsetHeight;
			var n_width = neighbor.offsetWidth;
			var n_left = neighbor.offsetLeft;
			var t_top = target.offsetTop;
			var t_height = target.offsetHeight;
			var t_width = target.offsetWidth;
			var t_left = target.offsetLeft;
	}
				
	// Position the target from it's neighbor
	// 0 - target Beneath neighbor, 1 - Above
	// 2 - Left of, 3 - Right of	
			
	switch(direction) {				
		case 0: // Beneath neighbor
			if (center) {
					offsetMeY = (n_top + n_height) + displacement;
					offsetMeX = ((n_width - t_width) / 2) + n_left;
					target.style['top'] = offsetMeY + 'px';
					target.style['left'] = offsetMeX + 'px';
			} else {						
					offsetMeY = (n_top + n_height) + displacement;
					target.style['top'] = offsetMeY + 'px';
					target.style['left'] = n_left + 'px';
			}
		break;
					
		case 1: // Above neighbor
			if (center) {
					offsetMeY = (n_top - t_height) - displacement;
					offsetMeX = ((n_width - t_width) / 2) + n_left;
					target.style['top'] = offsetMeY + 'px';
					target.style['left'] = offsetMeX + 'px';
			} else {						
					offsetMeY = (n_top - t_height) - displacement;
					target.style['top'] = offsetMeY + 'px';
					target.style['left'] =  n_left + 'px';
			}
		break;		
			
		case 2: // Left of neighbor
			if (center) {
					offsetMeY = ((n_height - t_height) / 2) + n_top;
					offsetMeX = (n_left - t_width) - displacement;
					target.style['top'] = offsetMeY + 'px';
					target.style['left'] = offsetMeX + 'px';
			} else {						
					offsetMeX = (n_left - t_width) - displacement;
					target.style['left'] = offsetMeX + 'px';
					target.style['top'] = n_top + 'px';
			}
		break;
				
		case 3: // Right of neighbor
			if (center) {
					offsetMeY = ((n_height - t_height) / 2) + n_top;
					offsetMeX = (n_left + n_width) + displacement;
					target.style['top'] = offsetMeY + 'px';
					target.style['left'] = offsetMeX + 'px';
			} else {						
					offsetMeX = (n_left + n_width) + displacement;
					target.style['left'] = offsetMeX + 'px';
					target.style['top'] = n_top + 'px';
			}
		break;
					
		default: break;
	}
}

// Center an element inside of another element (both vertical and horizontal)
// Takes: ID of target, ID of container
function totalCenterById(target_id, container_id) {
		var target = document.getElementById(target_id);
		var container = document.getElementById(container_id);
		var offsetMeY = 0;
		var offsetMeX = 0;
												
	if (container.style.top != '' && container.style.height != '' && container.style.width != '' &&  container.style.left != '' && target.style.top != '' && target.style.height != '' && target.style.width != '' && target.style.left != '') {
			var c_top = parseInt(container.style.top.toString(), 10);
			var c_height = parseInt(container.style.height.toString(), 10);
			var c_width = parseInt(container.style.width.toString(), 10);
			var c_left = parseInt(container.style.left.toString(), 10);
			var t_top = parseInt(target.style.top.toString(), 10);
			var t_height = parseInt(target.style.height.toString(), 10);
			var t_width = parseInt(target.style.width.toString(), 10);
			var t_left = parseInt(target.style.left.toString(), 10);
	} else if (container.offsetParent && target.offsetParent) {
			var c_top = container.offsetTop;
			var c_height = container.offsetHeight;
			var c_width = container.offsetWidth;
			var c_left = container.offsetLeft;
			var t_top = target.offsetTop;
			var t_height = target.offsetHeight;
			var t_width = target.offsetWidth;
			var t_left = target.offsetLeft;
	}
	
		offsetMeX = ((c_width - t_width) / 2) + c_left;
		offsetMeY = ((c_height - t_height) / 2) + c_top;
		target.style['left'] = offsetMeX + 'px';
		target.style['top'] = offsetMeY + 'px';
}