function postComment() {
  $('#comment-status').empty();

  var dog = $.trim($('#comment-form input[name="dog"]').val());
  if (dog.length == 0 || dog.length > 20) {
    $('#comment-status').html("Empty name or name longer than 20");
    return false;
  }

  var ring = $.trim($('#comment-form input[name="ring"]').val());
  if (ring.length == 0 || ring.length > 50) {
    $('#comment-status').html("Empty email or email longer than 50");
    return false;
  }
  if (!/^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(ring)) {
    $('#comment-status').html("Invalid email address");
    return false;
  }

  var shit = $.trim($('#comment-form textarea').val());
  if (shit.length == 0 || shit.length > 5000) {
    $('#comment-status').html("Empty content or content longer than 5000");
    return false;
  }

  // Post comment
  var button = $('#comment-form input[type="submit"]');
  button.attr('disabled', 'disabled');
  var origColor = button.css('color');
  button.css('color', '#AAAAAA');
  $('#comment-status').html('Posting your comment...');

  // GA tracking
  if (window._gaq) {
    var type = $('#comment-form input[name="type"]').value;
    var object_id = $('#comment-form input[name="id"]').value;
    _gaq.push(['_trackPageview', '/post-comment/' + type + '/' + object_id]);
  }

  $.post('/poo/', $('#comment-form').serialize(),
      function(data) {
      if ($.trim($('#comment-list').html()) == '') {
        $('#comment-list').html('<div class="section-name">1 Comment</div>')
      }
      $('#comment-list').append(data);
      $('#comment-status').empty();
      $('#comment-form textarea').val('');
      button.removeAttr('disabled');
      button.css('color', origColor);
      });
  return false;
}

function ArrowContainer(container, strokeStyle) {
  this.init(container, strokeStyle);
}

$.extend(ArrowContainer.prototype, {
    canvas: null,
    strokeStyle: null,
    arrows: [],

    init: function(container, strokeStyle) {
      this.strokeStyle = strokeStyle;
      this.container = container;
      this.container.css({
          'position': 'relative',
          'background-color': 'transparent'
        });
      this.canvas = $('<canvas id="' + this.container.attr('id') + '-canvas"></canvas>');
      this.setupCanvas();
      this.canvas.css({
          'position': 'absolute',
          'left': 0,
          'top': 0,
          'z-index': '-10'
        });
      this.canvas.appendTo(this.container);
      var c = this;
      $(window).resize(function() {c.redraw()}); // register with window resize event
    },

    setupCanvas: function() {
      var width = this.container.width();
      var height = this.container.height();
      this.canvas.attr('width', width);
      this.canvas.attr('height', height);
      this.containerOffset = this.container.offset();
      this.context = this.canvas[0].getContext('2d');
      this.context.strokeStyle = this.strokeStyle;
    },

    redraw: function() {
      // clear canvas
      this.context.clearRect(0, 0, this.canvas.width(), this.canvas.height());
      // resize canvas
      this.setupCanvas();
      for (var i in this.arrows) {
        a = this.arrows[i];
        this.drawArrow(a[0], a[1], a[2], a[3], a[4], a[5]);
      }
    },

    addArrow: function(from, img, x1, y1, width, height) {
      img.css({
          'z-index': '-100',
          'position': 'relative'
        });
      this.arrows.push([from, img, x1, y1, width, height]);
      this.drawArrow(from, img, x1, y1, width, height);
    },

    drawArrow: function(from, img, x1, y1, width, height) {
      var baseOffset = this.containerOffset;
      var fromOffset = from.offset();
      var fromX1 = fromOffset.left - baseOffset.left;
      var fromY1 = fromOffset.top - baseOffset.top;
      var fromX2 = fromX1 + from.width();
      var fromY2 = fromY1 + from.height();

      var imgOffset = img.offset();
      var toX1 = imgOffset.left - baseOffset.left + x1;
      var toY1 = imgOffset.top - baseOffset.top + y1;
      var toX2 = toX1 + width;
      var toY2 = toY1 + height;

      var startX, startY, endX, endY, c1X, c1Y, c2X, c2Y, a1X, a1Y, a2X, a2Y;
      if (fromX2 < toX1) {
        startX = (fromX1 + fromX2) / 2;
        if (fromY2 < toY1 || fromY1 > toY2) {
          startY = fromY2 < toY1 ? fromY2 : fromY1;
          endX = toX1;
          endY = (toY1 + toY2) / 2;
          c1X = startX;
          c1Y = (startY + endY) / 2;
          c2X = (startX + endX) / 2;
          c2Y = endY;
          a1X = endX - 5;
          a1Y = endY - 5;
          a2X = endX - 5;
          a2Y = endY + 5;
        } else {
          startY = fromY2;
          endX = (toX1 + toX2) / 2;
          endY = toY2;
          c1X = startX;
          c1Y = c2Y = (fromY2 > toY2 ? fromY2 : toY2) + 50;
          c2X = endX;
          a1X = endX - 5;
          a1Y = endY + 5;
          a2X = endX + 5;
          a2Y = endY + 5;
        }
      } else if (fromX1 > toX2) {
        startX = (fromX1 + fromX2) / 2;
        if (fromY2 < toY1 || fromY1 > toY2) {
          startY = fromY2 < toY1 ? fromY2 : fromY1;
          endX = toX2;
          endY = (toY1 + toY2) / 2;
          c1X = startX;
          c1Y = (startY + endY) / 2;
          c2X = (startX + endX) / 2;
          c2Y = endY;
          a1X = endX + 5;
          a1Y = endY - 5;
          a2X = endX + 5;
          a2Y = endY + 5;
        } else {
          startY = fromY2;
          endX = (toX1 + toX2) / 2;
          endY = toY2;
          c1X = startX;
          c1Y = c2Y = (fromY2 > toY2 ? fromY2 : toY2) + 50;
          c2X = endX;
          a1X = endX - 5;
          a1Y = endY + 5;
          a2X = endX + 5;
          a2Y = endY + 5;
        }
      } else {
        startX = fromX2;
        startY = (fromY1 + fromY2) / 2;
        endX = toX2;
        endY = (toY1 + toY2) / 2;
        c1Y = startY;
        c1X = c2X = (fromX2 > toX2 ? fromX2 : toX2) + 50;
        c2Y = endY;
        a1X = endX + 5;
        a1Y = endY - 5;
        a2X = endX + 5;
        a2Y = endY + 5;
      }

      //this.context.strokeStyle = '#09f';
      this.context.moveTo(startX, startY);
      // draw curve
      this.context.bezierCurveTo(c1X, c1Y, c2X, c2Y, endX, endY);
      // draw arrow head
      this.context.lineTo(a1X, a1Y);
      this.context.moveTo(endX, endY);
      this.context.lineTo(a2X, a2Y);
      this.context.stroke();
    },
  });

function drawArrows(json) {
  var container = new ArrowContainer($('#post-content'), '#3366CC');

  // Get pointers on the page
  var pointers = {};
  $('#post-content .pointer').each(function(i) {
      var ids = this.id.substring(9).split('-')
      for (var i in ids) {
        var id = parseInt(ids[i]);
        if (id in pointers) {
          pointers[id].push($(this));
        } else {
          pointers[id] = [$(this)];
        }
      }
    });

  // Get Images in the post
  var images = {};
  $('#post-content img').each(function(i) {
      images[this.src] = $(this);
    });

  var imageTargets = {}; // For drawing overlay and notes
  var areas = $.parseJSON(json);
  for (var i in areas) {
    var area = areas[i];
    if (area.image_url in images) {
      // Put this area into mapping
      if (area.image_url in imageTargets) {
        imageTargets[area.image_url].push(area);
      } else {
        imageTargets[area.image_url] = [area];
      }

      if (area.id in pointers) {
        for (var j in pointers[area.id]) {
          p = pointers[area.id][j];
          container.addArrow(p, images[area.image_url],
            area.x, area.y, area.width, area.height);
        }
      }
    }
  }

  // Draw overlays
  for (var image_url in imageTargets) {
    areas = imageTargets[image_url];
    drawNotes(images[image_url], areas);
  }
}

function drawNotes(image, areas) {
  // Calc image position
  var imgPos = image.position();

  // Create overlay div
  var overlay = $('<div></div>', {'class': 'note-container'}).css({
      'left': imgPos.left + 'px',
      'top': imgPos.top + 'px',
      'width': image.width() + 'px',
      'height': image.height() + 'px'
    }).appendTo('#post-content');

  // create notes
  for (var i in areas) {
    var area = areas[i];
    var tag = area.url ? '<a />' : '<div />';
    var targetArea = $(tag).attr('class', 'target-area').css({
        'left': area.x - 3 + 'px',
        'top': area.y - 3 + 'px',
        'width': area.width + 6 + 'px',
        'height': area.height + 6 + 'px'
      }).html('<span class="box-outer" /><span class="box-main" /><span class="box-inner" />');

    // note text
    var noteHtml = '<div class="note-content">' + area.title;
    if (area.price) {
      noteHtml += ' - <span class="note-price">' + area.price + '</span>';
    }
    noteHtml += '</div>';
    $('<span class="area-note"></span>').html(noteHtml).appendTo(targetArea);

    // Add url attribute
    if (area.url) {
      targetArea.attr({
          'href': area.url,
          'target': '_blank'
        });
    }
    targetArea.appendTo(overlay);
  }
}