var GalleryView = View.extend({

  el: "#gallery",
  template: $("#gallery .template").html(),
  
  events: {
    "click .left": "prev",
    "click .right": "next",
    "touchstart .gallery": "touchstart",
    "touchmove .gallery": "touchmove",
    "touchend .gallery": "touchend",
  },
  
  initialize: function(){
    this.$prev = this.$(".prev")
    this.$next = this.$(".next")
    this.$slider = this.$(".slider")
  },
  
  populate: function(code, image_ids){
    var valid_styles = {}
    image_ids.forEach(function(id){
      if (id.indexOf("_") == -1) return
      var partz = id.split("_")
      var size = parseInt(partz[0]), style = partz[1]
      if (size > 13) return;
      if (! valid_styles[style] || valid_styles[style] < size) {
        valid_styles[style] = size
      }
    })
    Object.keys(valid_styles).forEach(function(style){
      var id = valid_styles[style] + "_" + style
      var t = this.template.replace(/{{image}}/, sdk.image(code, id))
                           .replace(/{{id}}/, sdk.image(code, id))
      this.$slider.append(t)
    }.bind(this))
  },

  prev: function(){
  },
  next: function(){
  },
  touchstart: function(e){
  },
  touchmove: function(e){
  },
  touchend: function(e){
  },

})