/**
 * 
 * @author Vish Vishvanath <vish.vishvanath@ef.com>
 * Remove these comments before sending it onto live server, and compress it too, if you can...
 */

$(document).ready(function() {
	// append appropriate layers onto list
	$(".nav_bar").append('<div class="selected_list_item_top absolute"></div><div id="top_spacer"><div id="blue_block"><div id="block"></div></div></div><div class="selected_list_item_bottom absolute"></div>');
    // set correct height of ListWrapper	
	$("#ListWrapper").height($(".animated_list").height() - $("#ListWrapper").height() - 10);
	
	// add lined class to all li
	// add plain class to selected li and one above and remove lined from both
	$(".animated_list > ul > li").addClass("lined").addClass("unselected");
	$(".animated_list > ul > li.selected").removeClass("unselected").removeClass("lined").addClass("plain").children().css("color", "black").parent().prev("li").removeClass("lined").addClass("plain");
	
	// time to calculate all the distances between the top of the screen, top of the list, and the currently selected navigation item
	var topHeight = $(".animated_list > ul > li.selected").height() + $(".selected_list_item_top").height();

	// position marker at initially selected item
	var newOffset = parseInt($(".animated_list > ul > li.selected").offset().top, 10) - 142;
	var itemHeight = parseInt($(".animated_list > ul > li.selected").height(), 10);
	var dTop = newOffset - 7;
	var dBottom = newOffset;
	var blockHeight = itemHeight - 2

    // set up heights of middle bar
	$("#top_spacer").height(topHeight - 7);
	$("#blue_block").height(topHeight - 9);
	$("#block").height(topHeight - 9);
	
	// move the bar to the right spot
	setTop(dTop);
	setMiddle(itemHeight, blockHeight, dTop);
	setBottom(dBottom);
	
	
	// now, set up listeners for hover/unhover actions on list items
	$("li.unselected").hover(
	
	function() {
		$(this).removeClass("lined").addClass("plain").prev("li").removeClass("lined").addClass("plain");		
		var newOffset = parseInt($(this).offset().top, 10) - 142;
		var itemHeight = parseInt($(this).height(), 10);
		var dTop = newOffset - 7;
		var dBottom = newOffset;
		var blockHeight = itemHeight - 2
		setTop(dTop);
		setMiddle(itemHeight, blockHeight, dTop);
		setBottom(dBottom);
	},
	function() {
		$(this).addClass("lined").removeClass("plain").prev("li").addClass("lined").removeClass("plain");
		$(".animated_list > ul > li.selected").removeClass("lined").addClass("plain").prev("li").removeClass("lined").addClass("plain");		
		var newOffset = parseInt($(".animated_list > ul > li.selected").offset().top, 10) - 142;
		var itemHeight = parseInt($(".animated_list > ul > li.selected").height(), 10);
		var dTop = newOffset - 7;
		var dBottom = newOffset;
		var blockHeight = itemHeight - 2
		setTop(dTop);
		setMiddle(itemHeight, blockHeight, dTop);
		setBottom(dBottom);

	});
	
	function setTop(topHeight) {
		$(".selected_list_item_top").stopAll().animate({style: 'margin-top:' + topHeight}, 'normal');
	}
	
	function setBottom(bottomHeight) {
		$(".selected_list_item_bottom").stopAll().animate({style: 'margin-top:' + bottomHeight}, 'normal');
	}
	
	function setMiddle(spacerHeight, blockHeight, dTop) {
		dTop = dTop + 7;
		$("#top_spacer").stopAll().animate({height: spacerHeight, top:dTop}, 'normal');
		$("#blue_block").stopAll().animate({height: blockHeight}, 'normal');
		$("#block").stopAll().animate({height: blockHeight}, 'normal');
	}
	
});