j=0;
            i=0;
            pid=0;
            editz=0;

            $(document).ready(function(){

                p=$("#tagarea img").attr("rel");
                ss="p="+p+"&ls="+"1"+"&sv="+'0';
                $("#taglist").load("tagit.php",ss,function(responseText){
                  i=$("#taglist li").size();
                  $("#key").html(i+1);
                });

              $(".edt").live('click',function(){
                tg2edt = $(".edt").index(this);
                $(".atag:gt("+(tg2edt)+")").fadeOut("medium");
                $(".atag:lt("+(tg2edt)+")").fadeOut("medium");
                $("#taglist li:gt("+(tg2edt)+")").slideUp("medium");
                $("#taglist li:lt("+(tg2edt)+")").slideUp("medium");
                 lll=$(".atag:eq("+(tg2edt)+")").offset().left - $("#tagarea").offset().left;
                 ttt=$(".atag:eq("+(tg2edt)+")").offset().top - $("#tagarea").offset().top;
                $("#details").slideDown("fast");
                $("#tmenu").slideUp("fast");
                // when editing set the value to textbox
                $("#dsc").val($(".tagname:eq("+tg2edt+")").html());
                $("#brnd").val($(".segment1:eq("+tg2edt+")").html());
                $("#prc").val($(".segment2:eq("+tg2edt+")").html());
                editz=1;
                $(".atag").draggable({stop: function() {
                  lll=$(".ui-draggable-dragging").offset().left - $("#tagarea").offset().left;
                  ttt=$(".ui-draggable-dragging").offset().top - $("#tagarea").offset().top;
                },
                  containment: 'parent'          
                });
              });

               $(".dlt").live('click',function(){
                   
                tg2dlt = $(".dlt").index(this);
                cou=$("#taglist li").size();
                b=$(".edt div:eq("+tg2dlt+")").html();
                ss="p="+p+"&n="+(tg2dlt+1)+"&i="+b+"&c="+cou+"&ls="+"1"+"&del="+"1";
                $("#taglist").load("tagit.php",ss,function(){location.reload();});
              });

              $("#key").draggable({
                start: function() {
                  $(".atag").fadeOut("medium");
                },
                drag: function() {
                },
                stop: function() {           
                                        
                  if(($(".ui-draggable-dragging").offset().left > $("#tagarea").offset().left) && ($(".ui-draggable-dragging").offset().left + $(".ui-draggable-dragging").width() < $("#tagarea").offset().left + $("#tagarea img").width()))
                  if(($(".ui-draggable-dragging").offset().top > $("#tagarea").offset().top) && ($(".ui-draggable-dragging").offset().top +$(".ui-draggable-dragging").height() < $("#tagarea").offset().top + $("#tagarea img").height()))
                  {
                    lll=$(".ui-draggable-dragging").offset().left - $("#tagarea").offset().left;
                    ttt=$(".ui-draggable-dragging").offset().top - $("#tagarea").offset().top;
                    i=i+1;
                    $("#tagarea").append('<div class="atag ui-draggable">'+i+'</div>');
                    
                    $(".atag").draggable({stop: function() {
                      lll=$(".ui-draggable-dragging").offset().left - $("#tagarea").offset().left;
                      ttt=$(".ui-draggable-dragging").offset().top - $("#tagarea").offset().top;
                      },
                      containment: 'parent'    
                    });

                    $(".atag:eq("+(i-1)+")").css({top:ttt,left:lll});

                    $("#key").html(i);
                    $("#details").slideDown("fast");
                    $("#tmenu").slideUp("fast");
                  }
                  else
                  {
                    $(".atag").fadeIn("medium");
                    $("#dump").css({"display":"none"});
                  }
                },
                helper:'clone',
                cursorAt: { cursor: 'move'}
              });
              $("#canceltg").click(function(){
                $("#details").slideUp("6000");
                $("#tmenu").slideDown("6000");
                //$("#details").slideUp("fast");
                //$("#tmenu").slideDown("fast");
                $(".atag").draggable( "disable" );
                // reset the value typed
                $("#dsc").val("");
                $("#brnd").val("");
                $("#prc").val("");
                if(editz != 1)
                {
                  //$(".atag:eq("+(i-1)+")").fadeOut("medium");
                  $(".atag:eq("+(i-1)+")").fadeOut("6000");
                  $(".atag:eq("+(i-1)+")").remove();
                  i=i-1;
                }
                else
                {
                  $(".atag:gt("+(tg2edt)+")").fadeIn("6000");
                  $(".atag:lt("+(tg2edt)+")").fadeIn("6000");
                  $("#taglist li:gt("+(tg2edt)+")").slideDown("6000");
                  $("#taglist li:lt("+(tg2edt)+")").slideDown("6000");
                 /* $(".atag:gt("+(tg2edt)+")").fadeIn("medium");
                  $(".atag:lt("+(tg2edt)+")").fadeIn("medium");
                  $("#taglist li:gt("+(tg2edt)+")").slideDown("medium");
                  $("#taglist li:lt("+(tg2edt)+")").slideDown("medium");*/
                  $("#dump").css({"display":"none"});
                  editz=0;
                }
              });
              $("#savetg").click(function(){
                if($("#dsc").val() == "")
                {
                  $("#dsclb div").append("(No Description inserted)");
                }
                else
                {
                  p=$("#tagarea img").attr("rel");
                  $(".atag").draggable( "disable" );
                  // get the value 
                  d_tx=$("#dsc").val();
                  s1_tx=$("#brnd").val();
                  s2_tx=$("#prc").val();
                  if(editz != 1)
                  {
                    ss="p="+p+"&n="+i+"&t="+ttt+"&l="+lll+"&d="+d_tx+"&s1="+s1_tx+"&s2="+s2_tx+"&ls="+"1"+"&sv="+'1';
                  }
                  else if (editz == 1 )
                  {
                    nn=$(".edt div:eq("+tg2edt+")").html();
                    ss="p="+p+"&n="+nn+"&t="+ttt+"&l="+lll+"&d="+d_tx+"&s1="+s1_tx+"&s2="+s2_tx+"&ls="+"1"+"&u="+"1";
                  }
                  $("#taglist").load("/tagit.php",ss,function(responseText){                                                         
                    $("#details").slideUp("fast");
                    $("#tmenu").slideDown("fast");
                    $(".atag").fadeIn("medium");
                    $("#dump").css({"display":"none"});
                    // reset the value
                    $("#dsc").val("");
                    $("#brnd").val("");
                    $("#prc").val("");
                    $("#key").html(i+1);
                  });
                }
              });
            });