Pin Shout

shouts.js

$(document).ready(function() {

  var API_URL = "http://3n7g.localtunnel.com";

  function newMap(lat, lng) {
    var prevMap = $("#map img");
    prevMap.css("z-index", 2);

    var mapHTML = '<img width="450" height="350" src="http://maps.google.com/maps/api/staticmap?sensor=false&center=';
    mapHTML += lat + ',' + lng + '&zoom=14&size=450x350&markers=color:blue|label:S|' + lat + ',' + lng + '" />';
    var newMap = $(mapHTML).css("x-index", 1);

    $("#map").append(newMap);
    prevMap.fadeOut();
  }

  function formError(input, message) {
    $(".error").html(message);
    $(".error").show();
    input.focus();
  }

  function initRadius() {
    $("#update_radius").submit(function() {
      var radius = $("#radius").val();
      if (radius) {
        getShouts(lat, lng, radius);
      }
      return false;
    });
  }

  function getShouts(lat, lng, radius) {
    $.get(
      API_URL + "/api/shouts/get",
      { lat: lat, lng: lng, radius: radius },
      function(data) {
        var shouts = $.parseJSON(data);
        $("#shouts").empty();
        for (i in shouts) {
          addShout(shouts[i]);
        }
      }
    );
  }

  // prepends a shout to the list of shouts
  function addShout(shout) {
    var shoutDivHTML = '<div class="single-shout"><div class="shout-header"><h3>';
    shoutDivHTML += shout.author + '</h3></div><div class="shout-info"><div class="date">';
    shoutDivHTML += shout.date_created + '</div><div class="coords">(' + shout.lat + ', ';
    shoutDivHTML += shout.lng + ')</div></div><div style="clear:both;"></div><div class="message">';
    shoutDivHTML += shout.message + '</div></div>';

    var $shoutDiv = $(shoutDivHTML);
    $("#shouts").prepend($shoutDiv);

    $shoutDiv.click(function() {
      newMap(shout.lat, shout.lng);
    });
  }

  function getLocation() {
    navigator.geolocation.getCurrentPosition(function(pos) {
        lat = pos.coords.latitude;
        lng = pos.coords.longitude;
        newMap(lat, lng);
        getShouts(lat, lng, $("#radius").val());
        initRadius();
      }, function() {
        $("#yes-location").hide();
        $("#no-location").show();
    });
  }

  /*
   * Submits the shouts.
   */
  function shoutSubmission() {
    $("#shout").submit(function() {
      var author = $("#author");
      var message = $("#message");

      if (!author.val()) {
        formError(author, "Please enter your name!");
        return false;
      }
      else if (!message.val()) {
        formError(message, "Please enter a message!");
        return false;
      }
      else {
        $(".error").hide();
      }

      $.post(
        API_URL + "/api/shouts/new",
        { lat: lat, lng: lng, author: author.val(), message: message.val() },
        function (data) {
          var new_shout = $.parseJSON(data);
          addShout(new_shout);
          message.val('');
          message.focus();
        }
      );

      return false;
    });
  }

  var lat, lng;

  getLocation();
  shoutSubmission();
});