function set_indicator_positions() {
	//       $('test').update(sublink_width)

  viewport_offset   = $('mainLinks').viewportOffset().first();

	var	current_main_link = $('current_main_link');
	var current_sub_link = $('current_sub_link');
	
	main_link_width   = current_main_link.getWidth()
	sub_link_width    = current_sub_link.getWidth()
	main_link_offset  = current_main_link.positionedOffset().first()
	sub_link_offset   = current_sub_link.positionedOffset().first()
	// main_link_desired_position
	main = main_link_offset - viewport_offset + (main_link_width / 2) - 22 // 22 = half of the image width
	// sub_link_desired_position
	sub = sub_link_offset - viewport_offset + (sub_link_width / 2) - 22

	// 45 is the width of the image
	overlap_main_then_sub = (main + 45) > sub && main < sub
	overlap_sub_then_main = (sub + 45) > main && sub < main

	if (overlap_main_then_sub) {
		fix_overlap('main', 'sub');
		main = positions[0]
		sub = positions[1]
	} else if (overlap_sub_then_main) {
		fix_overlap('sub', 'main');
		sub = positions[0]
		main = positions[1]
	};

	set_current_link_indicator('current_main_link_indicator', main, 'up');
	set_current_link_indicator('current_sub_link_indicator', sub, 'down');

	// set line elements
	innermost_sublink = get_innermost_link('subLinks')
	innermost_mainlink = get_innermost_link('mainLinks')

	// make sure line extends out to the beginning of the indicator
	// if the indicator goes past the true beginning of the link
	// set this before setting width!
	line_start = Math.min(innermost_sublink, sub, innermost_mainlink)

	outermost_link_indicator = Math.max(sub, main) + 45 - line_start
	outermost_sublink = get_outermost_link('subLinks');
	outermost_mainlink = get_outermost_link('mainLinks');

	line_width = Math.max(outermost_link_indicator, outermost_sublink, outermost_mainlink)


	$('navigation_line').style.left = line_start - 10 + 'px'
	$('navigation_line').style.width = line_width + 20 + 'px'    

	$('navigation_line').appear({ duration: .8 })
}

function get_outermost_link(area) {
	return $(area).childElements().last().positionedOffset().first() + $(area).childElements().last().getWidth() - viewport_offset - line_start
}
function get_innermost_link(area) {
	return $(area).childElements().first().positionedOffset().first() - viewport_offset
}

function fix_overlap (left_item, right_item) {
	overlap_amount = (eval(left_item) + 45) - eval(right_item)

	// this is the amount of space from the outside
	// of the misplaced indicator out to the outside edge of the link
	space_for_left = (sub_link_width - 45) / 2
	space_for_right = (main_link_width - 45) / 2

	free_space = space_for_left + space_for_right

	// furthest right bounds - furthest left side bounds. (don't need it though)
	//      total_area =  Math.max((sub + sub_link_width), (main + main_link_width)) - Math.min(sub, main)

	// 1. Just spread them out by same amount
	//      sub = sub - overlap_amount/2
	//      main = main + overlap_amount/2

	// 2. Spread them out by proportion of free space available to each link
	left_item = eval(left_item) - overlap_amount*(space_for_left/free_space)
	right_item = eval(right_item) + overlap_amount*(space_for_right/free_space)

	return positions = [left_item, right_item]
}


function set_current_link_indicator(indicator, position, direction) {
	$(indicator).style.left = position + 'px'
	//    $(indicator).show();

	movement = direction == 'up' ? -9 : 9
	new Effect.Move(indicator + "_mask", { x: 0, y: movement, duration: .6} );
}