$(document).ready(function(){
						   
	//Dynamically wrap image
	$("#trendis img").wrap('<div id="tag-wrapper"></div>');
	//Dynamically size wrapper div based on image dimensions
	$("#tag-wrapper").css({width: $("#trendis img").outerWidth(), height: $("#trendis img").outerHeight()});
	//Append #tag-target content and #tag-input content
	$("#tag-wrapper").append('<div id="tag-target"></div><div id="tag-input"><label for="tag-name">Add URL:</br><span style="font-size:9px;">ex: www.google.com</span></label><input type="text" id="tag-name"><button type="submit">Submit</button><button type="reset">Cancel</button></div>');
	//$("#tag-wrapper").click(function(e){
	$("#trendisimg").click(function(e){
	//Determine area within element that mouse was clicked
	mouseX = e.pageX - $("#tag-wrapper").offset().left;
	mouseY = e.pageY - $("#tag-wrapper").offset().top;
	//Get height and width of #tag-target
	targetWidth = $("#tag-target").outerWidth();
	targetHeight = $("#tag-target").outerHeight();
	//Determine position for #tag-target
	targetX = mouseX-targetWidth/2;
	targetY = mouseY-targetHeight/2;
	//Determine position for #tag-input
	inputX = mouseX+targetWidth/2;
	inputY = mouseY-targetHeight/2;
	//Animate if second click, else position and fade in for first click
	if($("#tag-target").css("display")=="block")
	{
	$("#tag-target").animate({left: targetX, top: targetY}, 500);
	$("#tag-input").animate({left: inputX, top: inputY}, 500);
	} else {
	$("#tag-target").css({left: targetX, top: targetY}).fadeIn();
	$("#tag-input").css({left: inputX, top: inputY}).fadeIn();
	}
	//Give input focus
	$("#tag-name").focus();
	});
	//If cancel button is clicked
	$('button[type="reset"]').click(function(){
	closeTagInput();
	});
	//If enter button is clicked within #tag-input
	$("#tag-name").keyup(function(e) {
	if(e.keyCode == 13) submitTag();
	});
	//If submit button is clicked
	$('button[type="submit"]').click(function(){
	submitTag();
	});
}); //$(document).ready
	
	
	
	
	
function submitTag()
{
	tagValue = $("#tag-name").val();
	//Adds a new list item below image. Also adds events inline since they are dynamically created after page load
	$("#tag-wrapper").after('<p id="hotspot-item-' + tagCounter + '">' + tagValue + ' <span class="remove" onclick="removeTag(' + tagCounter + ')" onmouseover="showTag(' + tagCounter + ')" onmouseout="hideTag(' + tagCounter + ')">(Remove)</span></p>');
	//Adds a new hotspot to image
	$("#tag-wrapper").append('<a href="http://'+tagValue+'"  target="_blank"><div id="hotspot-' + tagCounter + '" class="hotspot" style="left:' + targetX + 'px; top:' + targetY + 'px;"></div></a>');
	tagCounter++;
	closeTagInput();
}
function closeTagInput()
{
	$("#tag-target").fadeOut();
	$("#tag-input").fadeOut();
	$("#tag-name").val("");
}
function removeTag(i)
{
	$("#hotspot-item-"+i).fadeOut();
	$("#hotspot-"+i).fadeOut();
}
function showTag(i)
{
	$("#hotspot-"+i).addClass("hotspothover");
}
function hideTag(i)
{
	$("#hotspot-"+i).removeClass("hotspothover");
}