$(document).ready(function(){
	$i = 0;
	$('.person_div').each(function(){
		$i++;
		if ($.browser.msie){
			$('#talkbox'+$i).css('position', 'absolute');
			$('#talkbox'+$i).css('top', $(this).offset().top + 10);
			$('#talkbox'+$i).css('left', $(this).offset().left + 10);
		} else {
			$('#talkbox'+$i).css('top', 60);
			$('#talkbox'+$i).css('left', 10);
		}
	});
});

$(function() {
	var $effecttime = 150;
	var $top = 10;
	var $left = 10;
	var $max_width = 150;
	var $max_height = 100;
	var $min_width = 50;
	var $min_height = 48;

	$(".person_div").each(function(){
		$(this).hover(
			function(){
				if ($.browser.msie){
					$top = $(this).position().top - 90;
					$left = $(this).position().left;
				}
				$animated = $(this).find("div.talkbox");
				
				$animated.animate({width: $max_width, height: $max_height, top: $top+10, left: $left-20}, $effecttime, '', function(){
					$child_text = $animated.find("div.talkbox_text");
					switch ($child_text.attr("id")){
						case "talkbox1_text":
							$child_text.html("<p><strong>What is social engagement?</strong><br/><a href='social-engagement.html'>Answer here</a></p>");
						break;
						case "talkbox2_text":
							$child_text.html("<p><strong>How can this help my company?</strong><br/><a href='why-social-engagement.html'>Answer here</a></p>");
						break;
						case "talkbox3_text":
							$child_text.html("<p><strong>Why consider 'Say It Social' over all others?</strong><br/><a href='why-say-it-social.html'>Answer here</a></p>");
						break;
						case "talkbox4_text":
							$child_text.html("<p><strong>How do we get started?</strong><br/><a href='contact.html'>Answer here</a></p>");
						break;
					}
				});
			},
			function(){
				if ($.browser.msie){
					$top = $(this).position().top - 40;
					$left = $(this).position().left+10;
				}
				$child_text = $animated.find("div.talkbox_text");
				$child_text.html("");
				$animated.animate({width: $min_width, height: $min_height, top: $top+50, left: $left}, $effecttime);
			}
		);
		
	});
});