starting and stopping tagging can be down through same button now

2 files changed, 77 insertions, 52 deletions

diff --git a/views/default/object/image.php b/views/default/object/image.php
index 3cb1e7ee3..e11dfe31a 100644
--- a/views/default/object/image.php
+++ b/views/default/object/image.php
@@ -130,7 +130,7 @@ if ($photo_tags) {
 		</div>
 		<div id="tidypics_controls">
 			<ul>
-				<li><a href="javascript:void(0)" onclick="startTagging()"><?= elgg_echo('image:tagthisphoto') ?></a></li>
+				<li><a id="tag_control" href="javascript:void(0)" onclick="startTagging()"><?= elgg_echo('image:tagthisphoto') ?></a></li>
 				<li><a href="<?php echo $vars['url']; ?>action/tidypics/download?file_guid=<?php echo $file_guid; ?>"><?php echo elgg_echo("image:download"); ?></a></li>
 			</ul>
 		</div>
@@ -214,6 +214,7 @@ if ($photo_tags) {
 
 	var coordinates = "";
 	var user_id = 0;
+	var tagging = 0;
 
 	// add to DOM as soon as ready
 	$(document).ready(function () {
@@ -324,38 +325,52 @@ if ($photo_tags) {
 
 	function startTagging() 
 	{
-		if ( $('#tagging_instructions').is(':hidden') )
+		if (tagging != 0)
 		{
-			$('#tagging_instructions').show();
-
-			$('#tidypics_image').hover(
-				function(){
-					$('.tidypics_tag').hide();
-				},
-				function(){
-					$('.tidypics_tag').hide();
-				}
+			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 
-				}
-			);
-		}
+		$('img#tidypics_image').imgAreaSelect( { 
+			borderWidth: 2,
+			borderColor1: 'white',
+			borderColor2: 'white',
+			disable: false,
+			hide: false,
+			onSelectEnd: showTagMenu,
+			onSelectStart: hideTagMenu 
+			}
+		);
 	}
 
 	function stopTagging() 
 	{
-		$('#tagging_instructions').hide();
-		$('#tag_menu').hide();
+		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();
@@ -392,9 +407,28 @@ if ($photo_tags) {
 	function hideTagMenu()
 	{
 		$('#tag_menu').hide();
-		coordinates = "";
 	}
 
+	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()
 	{
diff --git a/views/default/tidypics/css.php b/views/default/tidypics/css.php
index f9f57ceab..00fbb38de 100644
--- a/views/default/tidypics/css.php
+++ b/views/default/tidypics/css.php
@@ -182,19 +182,15 @@ padding:0 0 5px;
 
 /* ----------- tagging ---------------- */
 #tagging_instructions {
-background:#FFFBE2 none repeat scroll 0 0; 
-border:1px solid #FFE222; 
-margin:10px; 
+background:#FFFBE2; 
+border:1px solid #FFE222;  
 padding:10px;
+height:30px;
+width:400px;
 display:none;
-}
-
-#cont-image {
-margin:0px auto; 
-background:white none repeat scroll 0 0; 
-border:1px solid #DDDDDD; 
-padding:10px; 
-overflow:hidden;
+overflow:hidden; 
+position:absolute; 
+z-index:10000;
 }
 
 #tag_menu {
@@ -203,29 +199,24 @@ width:200px;
 position:absolute;
 z-index:10000; 
 display:none; 
-background:#fff; 
+background:#ffffff; 
 padding:5px; 
 font-size:12px; 
 text-align:left;
 }
 
-
 .tidypics_tag {
-	display: none;
-	background: url(spacer.gif); 
-	border: 2px solid rgb(255, 255, 255); 
-	overflow: hidden; 
-	position: absolute; 
-	z-index: 0;
-	cursor: text;
+display:none;
+border:2px solid #ffffff; 
+overflow:hidden; 
+position:absolute; 
+z-index:0;
 }
 
 .tidypics_tag_text {
-	display: none;
-	background: url(spacer.gif); 
-	border: 2px solid rgb(255, 255, 255); 
-	overflow: hidden; 
-	position: absolute; 
-	z-index: 0;
-	cursor: text;
+display:none;
+border:2px solid #ffffff; 
+overflow:hidden; 
+position:absolute; 
+z-index:0;
 }