Misc

demo.html

<!-- maps -->
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>

<!-- twitter -->
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

<!-- facebook -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1&appId=414409925244939";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!-- resistol -->
<script>
(function($self){

  // MISC

  var _coef_history = 3;
  var _coef_history_map = 50;

  var tmpl_hisotry = "<div id=\"history_token\" class=\"history\" style=\"display:none;\">"
           + " <div class=\"history-images\">"
           + "   <img src=\"/static/img/histories/user_{1}.png\" alt=\"my\"/>"
           + "   <img src=\"/static/img/histories/friend_{2}.png\" alt=\"friend\"/>"
           + "   <img src=\"/static/img/relation_{3}.png\" alt=\"icon\"/>"
           + " </div>"
           + " <div class=\"history-body\">"
           + "   <h3>{4}</h3>"
           + "   <p>{5}</p>"
           + "   <a href=\"{6}\">VER HISTORIA</a>"
           + " </div>"
           + " <div class=\"history-social\">"
           + "   <a href=\"https://twitter.com/share\""
           + "      class=\"twitter-share-button\""
           + "      data-url=\"{7}\""
           + "      data-text=\"{8}\""
           + "      data-via=\"resistolmexico\""
           + "      data-lang=\"es\""
           + "      data-hashtags=\"pegando_historias\">Twittear</a>"
           + " </div>"
           + "</div>";

  // GUI

  $('a[data-toggle="pill"]').on('shown', function (e) {
    var name = $(e.target).attr("href").replace("#cat_", "");
    CreateMap(name, 1, _coef_history_map);
    CreateHistories(name, 1, _coef_history);
  });

  $('.hisotry-list-pags li').live('click', function (e) {
    var data = $(e.target).attr("href").split("_");
    var query = (data.length > 4) ? data[4] : null;
    CreateHistories(data[1], data[2], data[3], query);
  });

  $(".form-search button").live('click', function(e){
    e.preventDefault();
    var scope = $(".form-search input");
    var query = scope.val();
    if( query.length <= 0) return;
    CreateHistories(0, 1, _coef_history, query.toString());
    scope.val("");
  });

  // MAP's

  var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom:2,
    center: new google.maps.LatLng(20.341219, -25.142264),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    panControl: true,
    zoomControl: true,
    mapTypeControl: false,
    scaleControl: false,
    streetViewControl: true,
    overviewMapControl: true
  });

  var cnx = new Young.Server();
  var tmp_storage = [];

  function getURL(category, page_number, page_size){
    var url = '/histories/list/{1}/{2}/{3}';
    return url.replace('{1}', category || 0)
          .replace('{2}', page_number || 1)
          .replace('{3}', page_size || _coef_history);
  }

  function RemoveMap(){
    if(!tmp_storage.length) return;
    while(tmp_storage.length){
      tmp_storage.pop().setMap(null);
    }
  }

  function CreateMap(category, page_number, page_size){
    var url = getURL(category, page_number, page_size);
    cnx.simple_get(url, {}, function(r){
      RemoveMap();
      var data = r.response.result;
      var profile, image, category, paths, relations, m_lat_lng, m_marker, f_lat_lng, f_marker;
      var tmpl_color = ['#000', '#EA2F8C', '#3365CA', '#EC0000'];
      var tmpl_image = '/static/img/maps/ping_{1}.png';
      for(var a=0; a < data.length; a++){
        profile = data[a];
        category = profile.history_category;
        image = new google.maps.MarkerImage(tmpl_image.replace('{1}', category),
            new google.maps.Size(32,32), new google.maps.Point(0,0), new google.maps.Point(16,16));
        m_lat_lng = new google.maps.LatLng(profile.my_location_x, profile.my_location_y);
        m_marker = new google.maps.Marker({map: map, position: m_lat_lng, icon: image});
        tmp_storage.push(m_marker);
        f_lat_lng = new google.maps.LatLng(profile.friend_location_x, profile.friend_location_y);
        f_marker = new google.maps.Marker({map: map, position: f_lat_lng, icon: image});
        tmp_storage.push(f_marker);
        paths = [m_lat_lng, f_lat_lng]
        relations = new google.maps.Polyline({
          path: [m_lat_lng, f_lat_lng],
          strokeColor: tmpl_color[category],
            strokeOpacity: 1.0,
            strokeWeight: 2});
        relations.setMap(map);
        tmp_storage.push(relations);
      }
    });
  }

  function ResolvePagination(data){
    var response = data.response;
    var view = (response.total > 3);
    var scope = $(".hisotry-list-pags");
    if(!view) {
      scope.hide();
      return;
    }
    var url = "#pag_{1}_{2}_{3}";
    url = url.replace("{1}", response.category)
         .replace("{3}", response.page_size);
    if(response.query)
      url += "_" + response.query;
    var btn_prev = $(".hisotry-list-pags li.previous");
    btn_prev.children().attr("href", url.replace("{2}", response.page_prev));
    if(response.page_number <= 1)
      btn_prev.hide();
    else btn_prev.show();
    var btn_next = $(".hisotry-list-pags li.next");
    btn_next.children().attr("href", url.replace("{2}", response.page_next));
    if(response.page_number >= response.page_total)
      btn_next.hide();
    else btn_next.show();
    scope.show();
  }

  function RemoveHistories(category, page_number, page_size){
    $(".hisotry-list").empty();
  }

  /**
   * {1}: imagen del usuario (my_photo)
   * {2}: imagen del amigo del usuario (friend_photo)
   * {3}: imagen del tipo de relación (history_category)
   * {4}: titulo de la historia (history_detail)
   * {5}: detalle de la historia (history_detail)
   * {6}: liga de la historia (history_detail)
   * {7}: url twitter (http://{domain}/history/{token})
   * {8}: text twitter ({my} y {friend} quedaron pegados con su historia. / http://{domain}/history/view/{token})
   * {9}: url facebook (http://{domain}/history/{token})
   */

   var hisotry_title = "{my} y {friend}";
   var hisotry_twitter = "{my} y {friend} quedaron pegados con su historia.";
   var hisotry_url = "https://apps.facebook.com/pegandohistorias/history/view/{token}";

  function CreateHistories(category, page_number, page_size, query){
    var url = getURL(category, page_number, page_size);
    var params = (query) ? {q:query} : {};
    cnx.simple_get(url, params, function(r){
      RemoveHistories();
      var data = r.response.result;
      var profile, h_title, h_detail, h_url, h_tweet;
      var scope = $(".hisotry-list");
      for(var a=0; a < data.length; a++){
        profile = data[a];
        h_title = hisotry_title.replace("{my}", profile.my_name).replace("{friend}", profile.friend_name);
        h_detail = profile.history_detail.split(" ").slice(0, 50  ).join(" ") + "...";
        h_url = hisotry_url.replace("{token}", profile.token);
        h_tweet = hisotry_twitter.replace("{my}", profile.my_name).replace("{friend}", profile.friend_name);
        scope.append(tmpl_hisotry.replace("display:none;", "")
           .replace("history_token", profile.token)
           .replace("{1}", 0 /*profile.my_photo*/)
           .replace("{2}", 0 /*profile.friend_photo*/)
           .replace("{3}", profile.history_category)
           .replace("{4}", h_title)
           .replace("{5}", h_detail)
           .replace("{6}", h_url)
           .replace("{7}", h_url)
           .replace("{8}", h_tweet)
           .replace("{9}", h_url)
        ); twttr.widgets.load();
      } ResolvePagination(r);
    });
  }

  CreateMap(0, 1, _coef_history_map);
  CreateHistories(0, 1, _coef_history);

}).call(this);
</script>