App.Gallery = {
  paintings: {},

  initialize: function() {
    this.painting = $('#painting')
    this.award    = $('#caption .award')
    this.title    = $('#caption .title')
    this.sold     = $('#caption .sold')
    this.preload()
    this.init_events()
    this.init_recent_work()
  },
  
  preload: function() {
    var self = this,
        file = null,
        src  = null

    $('.imgrow a').each(function(index, img) {
      file = $(img).attr('data-filename')
      src  = '/images/paintings/' + file + '.jpg'

      ;(new Image()).src = src
    })
  },
  
  init_events: function() {
    $('div.imgrow a').hover(this.swap)
    $('#recent').click(this.show)
    $('#next a').click(this.next)
    $('#back a').click(this.back)
  },
  
  init_recent_work: function() {
    if (window.location.hash == "#recent-work")
      this.show()
  },
  
  show: function() {
    $('#recent').css({ color: '#FFFFFF' })
    $('#recent-li').show()
  },
  
  next: function() {
    $('#recent-wrap').css({ left: -200 })
  },
  
  back: function() {
    $('#recent-wrap').css({ left: 0 })
  },
  
  swap: function(e) {
    var $this = $(this),
        file  = $this.attr('data-filename'),
        title = $this.attr('data-title'),
        sold  = $this.attr('data-sold')

    App.Gallery.award.hide()
    App.Gallery.painting.attr('src', '/images/paintings/'+file+'.jpg')
    App.Gallery.title.text(title)

    if (sold)
      App.Gallery.sold.show()
    else
      App.Gallery.sold.hide()
  }
}

$(function() { App.Gallery.initialize() })