var lineWidth = 2;
var padding = 3;
var orange = 'f26649';
var gray = '999999';
//set global references to contentTop and contentLeft
var contentTop = null;
var contentLeft = null;

function storeImageLines(el) {
	//draw the lines
//	$(window).load(function() {
		var i = 0;
		$('img.storeImage').each(function() {
			i++;
			var startY = endY = verticalStart($(this));
			var startX = horizontalStart($(this), 'left', false);
			var endX = horizontalStart(el, 'left');
			drawLine(startX, endX, startY, endY, 'imageLine'+i);
		});		
//	});
}

function horizontalStart(sel, end, doPadding) {
	if (!doPadding) {
		var thisPadding = 0;
	} else {
		var thisPadding = padding;
	}
	if (end == 'right') {
		var pad = $(sel).width() + thisPadding;
	} else if (end == 'left') {
		var pad = -thisPadding;
	} else {
		//default to middle
		var pad = $(sel).width() / 2 - lineWidth / 2;
	}	
	return $(sel).offset().left - contentLeft + pad;
}

function verticalStart(sel, end, doPadding) {
	if (!doPadding) {
		var thisPadding = 0;
	} else {
		var thisPadding = padding;
	}
	if (end == 'top') {
		var pad = -thisPadding + lineWidth / 2;
	} else if (end == 'bottom') {
		var pad = $(sel).height() + thisPadding;
	} else {
		//default to middle
		var pad = $(sel).height() / 2 - lineWidth / 2;
	}
	return $(sel).offset().top - contentTop + pad;
}

function drawLine(startX, endX, startY, endY, id) {
	if (startY == endY) {
		type = 'horizontal';
	} else if (startX == endX) {
		type = 'vertical';
	} else {
		return false; //do nothing
	}
	
	$('#content').prepend('<div class="line" id="'+id+'"></div>');
	
	if (type == 'vertical') {
		var h = endY - startY;
		if (h < 0) {
			//flip the endy and starty properties...
			var oldStartY = startY;
			startY = endY;
			endY = oldStartY;
			h = endY - startY;
		}
		$('#'+id).css({
			'top': startY+'px',
			'left': startX+'px',
			'backgroundColor': '#'+orange,
			'zIndex': 1000
		}).height(h+'px');
	} else if (type == 'horizontal') {
		var w = endX - startX;
		if (w < 0) {
			//flip the endy and starty properties...
			var oldStartX = startX;
			startX = endX;
			endX = oldStartX;
			w = endX - startX;
		}
		$('#'+id).css({
			'top': startY+'px',
			'left': startX+'px',
			'backgroundColor': '#'+orange,
			'zIndex': 1000
		}).width(w+'px');
	}
}

function linesToAbs() {
	var focused = $('#menu a.focus').length;
	var abs = $('a.abs').length;

	if (focused == 1 && abs) {
		
		var lineY = 0;
		var focusX = $('#menu a.focus').offset().left - contentLeft;
		var focusW = $('#menu a.focus').width();
		
		var spacing = padding; //(focusW - (abs * lineWidth)) / abs; //or abs + 1?
		
		var totalWidth = abs * lineWidth + (abs - 1) * spacing;

		var lineX = focusX + (focusW - totalWidth) / 2;// + spacing + 2; //take account of the border
		
		//draw the lines
		$('a.abs').each(function() {
			
			var id = $(this).attr('id');
			$('#content').prepend('<div class="line" id="vertical_line_'+id+'"></div><div class="line" id="horizontal_line_'+id+'"></div>');
			
			if ($(this).hasClass('focus')) {
				//make the lines orange
				$('#vertical_line_'+id+', #horizontal_line_'+id).css('backgroundColor', '#'+orange);
				$(this).css('color', '#'+orange);
			}
			
			var h = $(this).offset().top + $(this).height() / 2 - contentTop - lineWidth / 2;
			
			$('#vertical_line_'+id).css({
				'top': lineY+'px',
				'left': lineX+'px'
			}).height(h+'px');
			
			var horizX = $(this).offset().left + $(this).width() + padding - contentLeft;
			var horizW = lineX - horizX + 2;
			var horizY = lineY + h;
			
			if (horizW < 0) {
				//the a.abs is to the right of the thing - got to fix this
				horizX = lineX;
				horizW = -horizW - $(this).width() - padding * 2;
			}
			
			if (horizW > 0) {
				//draw the line
				$('#horizontal_line_'+id).css({
					'top': horizY+'px',
					'left': horizX+'px'
				}).width(horizW+'px');
			} else {
				//shorten the top line (the link is directly below the menu button)
				h -= padding * 2;
				$('#vertical_line_'+id).height(h+'px');
				$('#horizontal_line_'+id).hide();
			}
			
			lineX += lineWidth + spacing;
		});
		
		//color the lines on hover
		$('a.abs').hover(
			function() {
				if (!$(this).hasClass('focus')) {
					var id = $(this).attr('id');
					$('#vertical_line_'+id+', #horizontal_line_'+id).css('backgroundColor', '#'+orange);
				}
			},
			function() {
				if (!$(this).hasClass('focus')) {
					var id = $(this).attr('id');
					$('#vertical_line_'+id+', #horizontal_line_'+id).css('backgroundColor', '#'+gray);
				}
			}
		);
		
	}
}

$(function() {
	//set the contenTop and contentLeft
	contentTop = $('#content').offset().top;
	contentLeft = $('#content').offset().left;
	//draw lines from the focused thing to the other guys
	linesToAbs();
	//do the person links
	$('span.person').each(function() {
		var name = $(this).html();
		var newName = name.replace(/\ /, '_');
		var href = root+'people/view/'+newName;
		$(this).replaceWith('<a class="person" href="'+href+'">'+name+'</a>');
	});
});