Stopping jquery function at second click

Could someone help to ‘how to stop the event at below at second click?

this is a simple photo tagging system..

[U]progress:[/U] when clicking the ‘.button’ link, a ‘#tagdiv’ is sliding down(shows the tag status/tagged names.. i didnt write these codes yet)..
we tag photos at some another div…

when we finished the tagging… we sould click again the ‘.button’; and slideup the #tagdiv(with toggle()?.. and [U]stop the tagging function[/U].. but how?

here is the codes:

[CODE]

<script>
$(document).ready(function(){

var counter = 0;
var mouseX = 0;
var mouseY = 0;

$(“.button”).click(function(e){
$(‘#tagdiv’).toggle(“slow”, function() {
$(‘#imgtag_img’).css(“cursor”,”crosshair”);

$(“#imgtag img”).click(function(e){

var imgtag = $(this).parent();
mouseX = e.pageX – $(imgtag).offset().left;
mouseY = e.pageY – $(imgtag).offset().top;
$(‘#tagit’).remove();
$(imgtag).append(‘<input type=”text” name=”txtname” id=”tagname” class=”sag” /><input type=”button” name=”btnsave” value=”Submit” id=”btnsave” class=”sagbut” /><input type=”button” name=”btncancel” class=”sagbut” value=”Cancel” id=”btncancel” /></div>’);
$(‘#tagit’).css({top:mouseY,left:mouseX});
$(‘#tagname’).focus();

$(‘#tagit #btncancel’).live(‘click’,function(){
$(‘#tagit’).fadeOut();});

$(‘#tagname’).focus(); });

$(‘#tagit #btnsave’).live(‘click’,function(){
name = $(‘#tagname’).val();

$.ajax({
type: “POST”,
url: “savetag.php”,
data: “id=<?=$q[id];?>&name=” + name + “&pic_x=” + mouseX + “&pic_y=” + mouseY + “&type=insert”,
cache: true,
success: function(data){
$(‘#tagdiv’).fadeOut();
viewtag();
}
});

});});
</script>[/CODE]

Also in #JavaScript _↴