5 files changed, 112 insertions, 4 deletions

diff --git a/views/default/js/photos/tagging.php b/views/default/js/photos/tagging.php
index f831200e7..b00200e74 100644
--- a/views/default/js/photos/tagging.php
+++ b/views/default/js/photos/tagging.php
@@ -11,16 +11,27 @@
 elgg.provide('elgg.tidypics.tagging');
 
 elgg.tidypics.tagging.init = function() {
+	elgg.tidypics.tagging.active = false;
 	$('[rel=photo-tagging]').click(elgg.tidypics.tagging.start);
 
 	$('#tidypics-tagging-quit').click(elgg.tidypics.tagging.stop);
-}
+
+	$('.tidypics-tag').each(elgg.tidypics.tagging.position);
+
+	elgg.tidypics.tagging.tag_hover = false;
+	elgg.tidypics.tagging.toggleTagHover();
+};
 
 /**
  * Start a tagging session
  */
 elgg.tidypics.tagging.start = function(event) {
 
+	if (elgg.tidypics.tagging.active) {
+		elgg.tidypics.tagging.stop(event);
+		return;
+	}
+
 	$('.tidypics-photo').imgAreaSelect({
 		disable      : false,
 		hide         : false,
@@ -31,12 +42,16 @@ elgg.tidypics.tagging.start = function(event) {
 		}
 	});
 
+	elgg.tidypics.tagging.toggleTagHover();
+
 	$('.tidypics-photo').css({"cursor" : "crosshair"});
 
 	$('#tidypics-tagging-help').toggle();
 
+	elgg.tidypics.tagging.active = true;
+
 	event.preventDefault();
-}
+};
 
 /**
  * Stop tagging
@@ -50,8 +65,11 @@ elgg.tidypics.tagging.stop = function(event) {
 	$('.tidypics-photo').imgAreaSelect({hide: true, disable: true});
 	$('.tidypics-photo').css({"cursor" : "pointer"});
 
+	elgg.tidypics.tagging.active = false;
+	elgg.tidypics.tagging.toggleTagHover();
+
 	event.preventDefault();
-}
+};
 
 /**
  * Start the selection stage of tagging
@@ -68,6 +86,54 @@ elgg.tidypics.tagging.startSelect = function(img, selection) {
 		'top' : selection.y2 + 10,
 		'left' : selection.x2
 	});
-}
+};
+
+/**
+ * Position the tags over the image
+ */
+elgg.tidypics.tagging.position = function() {
+	var tag_left = parseInt($(this).data('x1'));
+	var tag_top = parseInt($(this).data('y1'));
+	var tag_width = parseInt($(this).data('width'));
+	var tag_height = parseInt($(this).data('height'));
+
+	// add image offset
+	var image_pos = $('.tidypics-photo').position();
+	tag_left += image_pos.left;
+	tag_top += image_pos.top;
+
+	$(this).css({
+		left: tag_left + 'px',
+		top: tag_top + 'px',
+		width: tag_width + 'px',
+		height: tag_height + 'px'
+	});
+};
+
+/**
+ * Toggle whether tags are shown on hover over the image
+ */
+elgg.tidypics.tagging.toggleTagHover = function() {
+	if (elgg.tidypics.tagging.tag_hover == false) {
+		$('.tidypics-photo').hover(
+			function() {
+				$('.tidypics-tag').show();
+			},
+			function() {
+				$('.tidypics-tag').hide();
+			}
+		);
+	} else {
+		$('.tidypics-photo').hover(
+			function() {
+				$('.tidypics-tag').hide();
+			},
+			function() {
+				$('.tidypics-tag').hide();
+			}
+		);
+	}
+	elgg.tidypics.tagging.tag_hover = !elgg.tidypics.tagging.tag_hover;
+};
 
 elgg.register_hook_handler('init', 'system', elgg.tidypics.tagging.init);
diff --git a/views/default/object/image/full.php b/views/default/object/image/full.php
index 33ba49739..e12e96806 100644
--- a/views/default/object/image/full.php
+++ b/views/default/object/image/full.php
@@ -54,6 +54,7 @@ echo elgg_view('object/image/navigation', $vars);
 echo elgg_view('photos/tagging/help', $vars);
 echo elgg_view('photos/tagging/select', $vars);
 echo $img;
+echo elgg_view('photos/tagging/tags', $vars);
 echo '</div>';
 
 if ($photo->description) {
diff --git a/views/default/photos/css.php b/views/default/photos/css.php
index 31e3d9b53..23926adbc 100644
--- a/views/default/photos/css.php
+++ b/views/default/photos/css.php
@@ -116,6 +116,12 @@
 	max-width: 300px;
 }
 
+.tidypics-tag {
+	display: none;
+	position: absolute;
+	border: 2px solid white;
+}
+
 <?php
 return true;
 ?>
diff --git a/views/default/photos/tagging/tag.php b/views/default/photos/tagging/tag.php
new file mode 100644
index 000000000..4d3affeb6
--- /dev/null
+++ b/views/default/photos/tagging/tag.php
@@ -0,0 +1,24 @@
+<?php
+/**
+ * Photo tag view
+ *
+ * @uses $vars['tag'] Tag object
+ */
+
+$coords = json_decode('{' . $vars['tag']->coords . '}');
+
+$attributes = elgg_format_attributes(array(
+	'class' => 'tidypics-tag',
+	'data-x1' => $coords->x1,
+	'data-y1' => $coords->y1,
+	'data-width' => $coords->width,
+	'data-height' => $coords->height,
+));
+
+//var_dump($vars['tag']);
+//$text = "This is a something";
+
+echo <<<HTML
+<div $attributes>
+</div>
+HTML;
diff --git a/views/default/photos/tagging/tags.php b/views/default/photos/tagging/tags.php
new file mode 100644
index 000000000..7a4aa3a59
--- /dev/null
+++ b/views/default/photos/tagging/tags.php
@@ -0,0 +1,11 @@
+<?php
+/**
+ * View the tags for this image
+ *
+ * @uses $vars['entity']
+ */
+
+$tags = $vars['entity']->getPhotoTags();
+foreach ($tags as $tag) {
+	echo elgg_view('photos/tagging/tag', array('tag' => $tag));
+}