var Gallery = function() {
  this.current = 0;
  this.photoWidth = 720;
  this.photoHeight = 500;
  this.photoAspectRatio = this.photoWidth / this.photoHeight;
  this.count = 7;
  this.demos = [
    {'src': 'large_portrait_1.jpg', 'width': 665, 'height': 1000, 'meta': 'sake'},
    {'src': 'large_portrait_2.jpg', 'width': 665, 'height': 1000, 'meta': 'flower'},
    {'src': 'large_landscape_1.jpg', 'width': 1000, 'height': 670, 'meta': 'snow'},
    {'src': 'large_landscape_2.jpg', 'width': 1000, 'height': 665, 'meta': 'sushi'},
  ];
}

Gallery.prototype = {
  init: function(e) {
    var container = $('#photo-viewer');
     for (var i = 0; i < this.count; i++) {
       $('#thumb-' + i).click(function() {
         var photoNum = this.id.replace('thumb-', '');
         window.gallery.skip(photoNum);
       });
       var photo = this.demos[i % this.demos.length];
       var photoId = 'photo-' + i;
       var photoUrl = '/demo/' + photo.src;
       var photoDiv = $('<div id="' + photoId + '" class="photo" />');
       var photoImg = $('<img src="' + photoUrl + '" alt="" class="photo" />');
       var photoMeta = $('<div class="meta" />');
       var photoText = $('<div class="meta-text">' + photo.meta + ' | 28 aug 09</div>');
       var photoFunc = $('<div class="meta-func"><a href="">BUY</a></div>');
       photoMeta.append(photoText);
       photoMeta.append(photoFunc);
       photoDiv.append(photoImg);
       photoDiv.append(photoMeta);
       
       var photoAspectRatio = photo.width / photo.height;
       if (photoAspectRatio > this.photoAspectRatio) {
         // landscape.
         var scaledWidth = this.photoWidth;
         var scaledHeight = this.photoWidth / photoAspectRatio;
         var vertMargin = (this.photoHeight - scaledHeight) / 2;
         photoImg.css({
           'width': scaledWidth,
           'height': scaledHeight,
           'margin-top': vertMargin
         });
         photoMeta.css({
           'width': scaledWidth,
           'margin-bottom': vertMargin,
         });
       } else {
         var scaledWidth = this.photoHeight * photoAspectRatio;
         var scaledHeight = this.photoHeight;
         var horzMargin = (this.photoWidth - scaledWidth) / 2;
         photoImg.css({
           'width': scaledWidth,
           'height': scaledHeight,
           'margin-left': horzMargin
         });
         photoMeta.css({
           'width': scaledWidth,
           'margin-left': horzMargin,
         });
       }
       
       var offset = this.photoWidth * i;
       photoDiv.css({
         '-webkit-transform': 'translate(' + offset + 'px, 0)',
       });
       container.append(photoDiv);
     }    
  },
  prev: function(e) {
  },
  next: function(e) {
  },
  skip: function(n) {
    var diff = Math.abs(this.current - n);
    for (var i = 0; i < this.count; i++) {
      var offset = (i - n) * this.photoWidth;
      var duration = diff * 0.3;
      $('#photo-' + i).css({
        '-webkit-transform': 'translate(' + offset + 'px, 0)',
        '-webkit-transition': 'all ' + duration + 's ease-in-out'        
      })
    }
    this.current = n;
  },
};

$(document).ready(function() {
  window.gallery = new Gallery();
  window.gallery.init();
});