HTML Generated on the tagging page

gistfile1.txt

<script type="text/javascript">

  $(document).ready(function() {

      $("#imageMap").click(function(e){

          var image_left = $(this).offset().left;
          var click_left = e.pageX;
          var left_distance = click_left - image_left ;

          var image_top = $(this).offset().top;
          var click_top = e.pageY;
          var top_distance = click_top - image_top;

          var mapper_width = $('#mapper').width();
          var imagemap_width = $('#imageMap').width();

          var mapper_height = $('#mapper').height();
          var imagemap_height = $('#imageMap').height();


          if((top_distance + mapper_height > imagemap_height) && (left_distance + mapper_width > imagemap_width)){
              $('#mapper').css("left", (click_left - mapper_width - image_left))
              .css("top",(click_top - mapper_height - image_top  ))
              .css("width","25px")
              .css("height","25px")
              .show();
          }

          else if(left_distance + mapper_width > imagemap_width){
              $('#mapper').css("left", (click_left - mapper_width - image_left  ))
              .css("top",top_distance)
              .css("width","25px")
              .css("height","25px")
              .show();
          }

          else if(top_distance + mapper_height > imagemap_height){
              $('#mapper').css("left", left_distance)
              .css("top",(click_top - mapper_height - image_top  ))
              .css("width","25px")
              .css("height","25px")
              .show();
          }
          else{
              $('#mapper').css("left",left_distance)
              .css("top",top_distance)
              .css("width","25px")
              .css("height","25px")
              .show();
          }

          $("#mapper").resizable({ containment: "parent" });
          $("#mapper").draggable({ containment: "parent" });
          
      });
  
$("span.connection").each(function() {
    var pos_width = $(this).data('pos-width');
    var pos_height = $(this).data('pos-height');

    var xpos = $(this).data('pos-x');
    var ypos = $(this).data('pos-y');

    $(".tagged_box").css("display","block");
    $(".tagged").css("border","5px solid #EEE");

    if ((xpos !== undefined) && (ypos !== undefined)) {
        console.log('X:' + xpos + 'px' + ' ' + 'Y:' + ypos +'px');
        console.log(pos_height)
          
        $('#planetmap').append('<div class="tagged"  style="width:'+pos_width+'px;height:'+
        pos_height+'px;left:'+xpos+'px;top:'+ypos+'px;" ><div class="tagged_box" style="width:'+pos_width+'px;height:'+
        pos_height+'px;display:none;" ></div><div class="tagged_title" style="top:'+(pos_height)+';display:none;" >'+
        $("#title").val()+'</div></div>')

         }

        });   //END OF SPAN.CONNECTION ITERATION

});  //END OF DOCUMENT.READY FUNCTION


    var addTag = function(){
        var position = $('#mapper').position();
        var pos_x = position.left;
        var pos_y = position.top;
        var pos_width = $('#mapper').width();
        var pos_height = $('#mapper').height();


        $('#planetmap').append('<div class="tagged"  style="width:'+pos_width+'px;height:'+
            pos_height+'px;left:'+pos_x+'px;top:'+pos_y+'px;" ><div class="tagged_box" style="width:'+pos_width+'px;height:'+
            pos_height+'px;display:none;" ></div><div class="tagged_title" style="top:'+(pos_height)+';display:none;" >'+
            $("#title").val()+'</div></div>')


        $("#mapper").hide();
        $("#title").val('');
        $('#contact_pos_x').val(pos_x);
        $('#contact_pos_y').val(pos_y);
        $('#contact_pos_width').val(pos_width);
        $('#contact_pos_height').val(pos_height);
    };



</script>



<!-- END OF JAVASCRIPT -->



  <div id='main_panel'>
    <div style='margin: auto; width: 600px;'>
      <div id='image_panel'>
        <div class="pagination"><a class="previous_page" rel="prev start" href="/contacts/new?page=1&amp;product_id=18&amp;utf8=%E2%9C%93">&#8592; Previous</a> <a rel="prev start" href="/contacts/new?page=1&amp;product_id=18&amp;utf8=%E2%9C%93">1</a> <em class="current">2</em> <span class="next_page disabled">Next &#8594;</span></div>
            <span class="connection" data-pos-x="469" data-pos-y="209"  data-pos-width="25" data-pos-height="25"> </span>
            <span class="connection" data-pos-x="467" data-pos-y="183"  data-pos-width="29" data-pos-height="25"> </span>
            <span class="connection" data-pos-x="393" data-pos-y="219"  data-pos-width="43" data-pos-height="25"> </span>
            <span class="connection" data-pos-x="40" data-pos-y="193"  data-pos-width="60" data-pos-height="47"> </span>
            <span class="connection" data-pos-x="377" data-pos-y="194"  data-pos-width="74" data-pos-height="25"> </span>
          <input id="contact_image_id" name="contact[image_id]" type="hidden" value="17" />  
          <img alt="Xbox360_hdmi_203w_back" id="imageMap" src="http://s3.amazonaws.com/mymanual/images/images/000/000/017/large/Xbox360_HDMI_203W_back.jpg?1373489559" />
        <div id='mapper'></div>

        <div id="planetmap"></div>
<!--         <div id='form_panel'>
          <div class='row'>
              <div class='label'>Title</div>
              <div class='field'>
                <input type='text' id='title' />
              </div>
            </div>
            <div class='row'>
              <div class='label'></div>
              <div class='field'></div>
            </div>
          </div> -->
        </div>
      </div>
      <div style="background: none repeat scroll 0 0 #C7C7C8;
                border: 1px solid #AEAEAE;
               clear: both;
               margin: 20px auto;
               padding: 20px 0;
               text-align: center;
               width: 600px;">
        <input type="button" value="Add Tag" onclick="addTag()" />
        <input type="button" value="Show Tags" onclick="showTags()" />
        <input type="button" value="Hide Tags" onclick="hideTags()" />
      </div>
    </div>



  <div class="form-inputs">
    <input id="contact_pos_x" name="contact[pos_x]" type="hidden" />
    <input id="contact_pos_y" name="contact[pos_y]" type="hidden" />
    <input id="contact_pos_width" name="contact[pos_width]" type="hidden" />
    <input id="contact_pos_height" name="contact[pos_height]" type="hidden" />