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.$(".template").remove()
  },
  
  reset: function(){
    this.gallery && this.gallery.destroy()
    this.$el.empty()
  },
  
  populate: function(code, image_ids){
    var valid_styles = {}
    var large_styles = {}
    image_ids.forEach(function(id){
      if (id.indexOf("_") == -1) return
      var partz = id.split("_")
      var size = parseInt(partz[0]), style = partz[1]

      if (! large_styles[style] || large_styles[style] < size) {
        large_styles[style] = size
      }
      if (size > 13) return;
      if (! valid_styles[style] || valid_styles[style] < size) {
        valid_styles[style] = size
      }
    })

    Object.keys(valid_styles).sort(sort_image_styles).forEach(function(style){
      var id = valid_styles[style] + "_" + style
      var t = this.template
        .replace(/{{image}}/, sdk.image(code, id))
        .replace(/{{alt}}/, YOOX_IMAGE_STYLE_LABELS[style] || "Alternate view")
      this.$el.append(t)
    }.bind(this))

    var gallery = this.gallery = new Flickity( "#gallery", {
      selector: '.item',
      cellAlign: 'center',
      autoPlay: false,
      freeScroll: false,
      wrapAround: true,
      imagesLoaded: true,
      prevNextButtons: false,
      pageDots: false,
      contain: true,
      draggable: true,
    })

    this.gallery.on('change', function(){
      var currentImage = this.gallery.selectedElement.style.backgroundImage.replace(/url\(\"?/,"").replace(/\"?\)/,"")
      var partz = currentImage.split("_")
      var head = partz[0]
      var size = partz[1]
      var tail = partz[2]
      var end_partz = tail.split(/\./)
      var style = end_partz[0]
      var label = YOOX_IMAGE_STYLE_LABELS[style] || "Image: Alternate view"
      $("#product .gallery-target").attr('aria-label', label)
    })

    this.gallery.on('staticClick', this.static_click.bind(this))

    if (accessibility.voiceOver) {
      $("#product .gallery-target").click(this.static_click.bind(this))
      $("#product .gallery-target").attr('aria-label', "Image: Front view")
    } else {
      $("#product .gallery-target").remove()
    }
  },
  static_click: function(e){
    var currentImage = this.gallery.selectedElement.style.backgroundImage.replace(/url\(\"?/,"").replace(/\"?\)/,"")
    var partz = currentImage.split("_")
    var head = partz[0]
    var size = partz[1]
    var tail = partz[2]
    var end_partz = tail.split(/\./)
    var style = end_partz[0]
    var largest_size = large_styles[style]
    var hiresImage = [head, largest_size, tail].join("_")
    app.fullscreenViewer.show(currentImage, hiresImage)
  },

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

})

var YOOX_IMAGE_STYLE_ORDER = "ZZZ f r d e a b c g l".split(" ")
var YOOX_IMAGE_STYLE_LABELS = {
  f: 'Image: Front view',
  r: 'Image: Rear view',
}
function sort_image_styles (b,a){ return (YOOX_IMAGE_STYLE_ORDER.indexOf(b)) - (YOOX_IMAGE_STYLE_ORDER.indexOf(a)) }