<?php
	$photo_tags_json = $vars['photo_tags_json'];
?>
<script type="text/javascript" src="<?= $vars['url'] ?>mod/tidypics/vendors/jquery.imgareaselect-0.7.js"></script>
<script type="text/javascript" src="<?= $vars['url'] ?>mod/tidypics/vendors/jquery.quicksearch.js"></script>
 
<script type="text/javascript">

	var coordinates = "";
	var user_id = 0;
	var tagging = 0;

	// add to DOM as soon as ready
	$(document).ready(function () {
			$('ul#phototagging-menu li').quicksearch({
				position: 'before',
				attached: 'ul#phototagging-menu',
				loaderText: '',
				inputClass: 'input-filter',
				labelText: "<p><?php echo elgg_echo('tidypics:tagthisphoto'); ?></p>",
				delay: 100
			});

			$('#quicksearch').submit( function () { addTag() } );
		}
	);

	// images are loaded so process tags
	$(window).load(function () {
			$('#tidypics_image').setupTags();
		}
	);

	// get tags over image ready for mouseover
	$.fn.setupTags = function() 
	{

		image = this;

		imgOffset = $(image).offset();

		tags = <?php echo $photo_tags_json; ?>; 

		$(tags).each(function(){
			appendTag(imgOffset, this);
		});
		
		$(image).hover(
			function(){
				$('.tidypics_tag').show();
			},
			function(){
				$('.tidypics_tag').hide();
			}
		);

		addTagEvents();
		
		$('.phototag-links').hover(
			function(){
				code = this.id.substr(7); // cut off taglink to get unique id
				$('#tag'+code).show();
			},
			function(){
				code = this.id.substr(7);
				$('#tag'+code).hide();
			}
		);

		// make sure we catch and handle when the browser is resized
		$(window).resize(function () {
			$('.tidypics_tag').remove();

			imgOffset = $(image).offset();

			$(tags).each(function(){
				appendTag(imgOffset, this);
			});

			addTagEvents();
		});
	} 

	function appendTag(offset, tag)
	{
		tag_top   = parseInt(imgOffset.top) + parseInt(tag.y1);
		tag_left  = parseInt(imgOffset.left) + parseInt(tag.x1);

		tag_div = $('<div class="tidypics_tag" id="tag'+tag.id+'"></div>').css({ left: tag_left + 'px', top: tag_top + 'px', width: tag.width + 'px', height: tag.height + 'px' });

		tag_text_div = $('<div class="tidypics_tag_text">'+tag.text+'</div>').css({ left: tag_left + 'px', top: tag_top + 'px', width: tag.width + 'px', height: 20 + 'px' });

		$('body').append(tag_div);
		$('body').append(tag_text_div);
	}

	function addTagEvents() 
	{
		$('.tidypics_tag').hover(
			function(){
				$('.tidypics_tag').show();
				$(this).next('.tidypics_tag_text').show();
				$(this).next('.tidypics_tag_text').css("z-index", 10000);
			},
			function(){
				$('.tidypics_tag').show();
				$(this).next('.tidypics_tag_text').hide();
				$(this).next('.tidypics_tag_text').css("z-index", 0);
			}
		);
	}


	function selectUser(id, name) 
	{
		user_id = id;
		$("input.input-filter").val(name);
	}

	function startTagging() 
	{
		if (tagging != 0)
		{
			stopTagging();
			return;
		}
		
		tagging = 1;
		
		$('#tag_control').text("Stop Tagging");
		
		showTagInstruct();
		

		$('#tidypics_image').hover(
			function(){
				$('.tidypics_tag').hide();
			},
			function(){
				$('.tidypics_tag').hide();
			}
		);

		$('img#tidypics_image').imgAreaSelect( { 
			borderWidth: 2,
			borderColor1: 'white',
			borderColor2: 'white',
			disable: false,
			hide: false,
			onSelectEnd: showTagMenu,
			onSelectStart: hideTagMenu 
			}
		);
	}

	function stopTagging() 
	{
		tagging = 0;
		
		hideTagInstruct();
		hideTagMenu();

		$('#tag_control').text("Tag this photo");

		$('img#tidypics_image').imgAreaSelect( {hide: true, disable: true} );

		// restart tag hovering
		$('#tidypics_image').hover(
			function(){
				$('.tidypics_tag').show();
			},
			function(){
				$('.tidypics_tag').hide();
			}
		);
	}

	function showTagMenu(oObject, oCoordenates)
	{
		offsetX = -100;

		imgOffset = $('#tidypics_image').offset();

		// show the list of friends
		if (oCoordenates.width != 0 && oCoordenates.height != 0) {
			coordinates = oCoordenates;
			
			top = imgOffset.top + oCoordenates.y2;
			left = imgOffset.left + oCoordenates.x2 + offsetX;

			$('#tag_menu').show().css({
				"top": top + "px",
				"left": left + "px"
			});

			$(".input-filter").focus();
		}
	}


	function hideTagMenu()
	{
		$('#tag_menu').hide();
	}

	function showTagInstruct()
	{
		offsetY = -60;
		
		imgOffset = $('#tidypics_image').offset();
		imgWidth  = $('#tidypics_image').width();
		
		top = imgOffset.top + offsetY;
		left = imgOffset.left;

		$('#tagging_instructions').show().css({
			"top": top + "px",
			"left": left + "px"
		});
	}

	function hideTagInstruct()
	{
		$('#tagging_instructions').hide();
	}

	function addTag()
	{
		// do I need a catch for no tag?

		$("input#user_id").val(user_id);
		$("input#word").val( $("input.input-filter").val() );

		coord_string  = '"x1":"' + coordinates.x1 + '",';
		coord_string += '"y1":"' + coordinates.y1 + '",';
		coord_string += '"width":"' + coordinates.width + '",';
		coord_string += '"height":"' + coordinates.height + '"';

		$("input#coordinates").val(coord_string);

		//Show loading
		//$("#tag_menu").replaceWith('<div align="center" class="ajax_loader"></div>');
	}
</script>