var rendered = "";

function loadTube(data) {
  var c = 0,
      tmpl,
      mgr,
      wid,
      // class
      Manager,
      Video,
      Widget;

  // initialize variables/objects
  Video = Backbone.Model.extend({});
  Manager = Backbone.Collection.extend({
    model: Video
  });
  VideoWidget = Backbone.View.extend({
    render: function(model) {
      var r = tmpl(model.toJSON());
      return r;
    }
  });
  mgr = new Manager;
  wid = new VideoWidget;

  // template
  tmpl = _.template(" \
    <div id='<%= mid %>' class='<%= mclass %>'> \
      <a href='<%= url %>' target='_blank'> \
        <img src='<%= thumbnail %>'  alt='<%= title %>' /> \
      </a> \
    </div> \
  ");

  // grab the first 4 videos
  while( c < 4 ) {
    var cls;
    if( c === 0 ) {
      cls = "social-first";
    } else {
      cls = "social-item";
    }
    var video = new Video({
      mid: "",
      mclass: cls,
      url: data.data.items[c].player["default"],
      thumbnail: data.data.items[c].thumbnail.hqDefault,
      title: data.data.items[c].title
    });

    mgr.add(video);
    rendered += wid.render(video);
    // set first video to featured ?
    c += 1;
  }
}

$(document).ready(function() {
  $("#youtube").append(rendered);

  // flickr
  function loadFootos() {
    var req_url = "/flickr/photos/";

    $.ajax({
      url: 'http://' + window.location.host + req_url,
      success: function(data) {
        $.each(data, function(i) {
          if( i === 0 ) {
            $("#flickr").append('<div class="social-first"><a href="' + data[i].url + '" target="_blank"><img src="' + data[i].thumbnail + '" /></a></div>');
          } else {
            $("#flickr").append('<div class="social-item"><a href="' + data[i].url + '" target="_blank"><img src="' + data[i].thumbnail + '" /></a></div>');
          }
        });
      }
    });
  }

  loadFootos();
});