/*******************************************************
 FORM FUNCTIONS

 *******************************************************/

function clearField(tar) {
	tar.value = '';
}

function fillField(tar, def) {
	if (tar.value == '')
		tar.value = def;
}

function togle(id)
{
	if (document.getElementById(id).style.display == 'none') {
		return document.getElementById(id).style.display = 'block';
	} else {
		return document.getElementById(id).style.display = 'none';
	}
}

function togleSelect(id, tar)
{
	if(id.checked) {
		return document.getElementById(tar).style.backgroundColor = 'F6FCA4';
	} else {
		return document.getElementById(tar).style.backgroundColor = 'F0f0F0';
	}
}

function popupWindow(url, wi, he)
{
	newwindow = window.open(url, 'Detail picture', 'statusbar=0, toolbar=0, scrollbars=0, resizeable=0, width='+ wi +', height='+ he +'');
	if (window.focus) { newwindow.focus(); }
	return false;
}

function copyRighted()
{
	return window.alert("Copyright of Nakal");
}

/*******************************************************
 jQuery functions

 *******************************************************/

//Placed outside .ready for scoping
var targetX, targetY;
var tagCounter = 0;

$(document).ready(function(){
	//Dynamically wrap image
	$("img#tag").wrap('<div id="tag-wrapper"></div>');

	//Dynamically size wrapper div based on image dimensions
	$("#tag-wrapper").css({width: $("img").outerWidth(), height: $("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">Title:</label><input type="text" id="tag-name"><label for="tag-price">Price:</label><input type="text" id="tag-price" value="$ "><label for="tag-desc">Description:</label><textarea name="tag-desc" id="tag-desc" rows="5"></textarea><button type="submit" id="btn-submit">Submit</button><button type="reset">Cancel</button></div>');

	//$("#tag-wrapper").click(function(e){
	$("img").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
	$('#btn-submit').click(function(){
		submitTag();
	});
$("a.fancy").fancybox();
}); //$(document).ready

function submitTag()
{
	tagValue = $("#tag-name").val() +';'+ $("#tag-desc").val() +';'+ $("#tag-price");
	
	var tempX = targetX;
	var tempY = targetY;
	//tagValue = ('X: '+targetX +' Y: '+ targetY);

	//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('<div id="hotspot-' + tagCounter + '" class="hotspot" style="left:' + targetX + 'px; top:' + targetY + 'px;"><span>' + tagValue + '</span></div>');
	
	xajax_addTag(xajax.getFormValues('itemForm'), targetX, targetY, tagValue );
	
	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");
}