Element.implement({
  overlay : function(){
    if(!$('overlay')){
      // Get Information
      var content = $(this.id)
      if(content.length == 1){
        var img_src = content[0].get('name')
        var title = $$('.slideshow-captions')[0].get('html')
        var descr = content[0].get('rel')
      } 
      if(content.length != 1) {
        var img_src = $(this.id + 'i').get('src').replace(/\_thumb/, '')
        var title = $(this.id + 'n').get('html')
        var descr = $(this.id + 'd').get('html')
      }
      // Make Overlay
      var overlay = new Element('div', {
        styles: {
          'height': window.getScrollSize().y
        },
        events: {
          click: function(){
            out = new Fx.Tween(this)
            out.start('opacity', 0).chain(function(el){ overlay.dispose() })
            outa = new Fx.Tween(art)
            outa.start('opacity', 0).chain(function(){ art.dispose() })
          }
        },
        'id' : 'overlay'
      }).inject(document.body).fade(1)
      
      // The image Container
      var art = new Element('div', {
        styles: {
          'opacity': 0,
          'position': 'fixed',
          'top': 20,
          'left': window.getSize().x / 2 - this.getSize().x / 2,
          'width': 100,
          'height': 100
          },
        id: 'art'
      }).inject(document.body).fade('in')
      // Close Button
      new Element('a', {
        id: 'close',
        html: 'x',
        events: {
          click: function(){
            out = new Fx.Tween(overlay)
            out.start('opacity', 0).chain(function(el){ overlay.dispose() })
            outa = new Fx.Tween(art)
            outa.start('opacity', 0).chain(function(){ art.dispose() })
          }
        }
      }).inject(art)

      // Description
      var description = new Element('div', {
        'class': 'over_descr',
        styles: {
          'opacity': 0
        }
      }).inject(art)
      new Element('h2', {
        html: title
      }).inject(description)
      new Element('span', {
        html: descr
      }).inject(description)
      
      // Image
      new Asset.image(img_src, {
        title: title,
        styles: {
          opacity: 0
        },
        onload: function(el) {
          artFx = new Fx.Morph(art)
          artFx.start({
            'left': window.getScrollSize().x/2 - el.getSize().x/2,
            'width': el.getSize().x,
            'height': el.getSize().y
          }).chain( function(){ 
            el.fade('in')
            description.fade('in')
            art.makeDraggable()
            art.tween('height', art.getSize().y + description.getSize().y - 20)
          })
        }
      }).inject(art, 'top')
    }
  }
})

window.addEvent('domready', function(){
  if($('work')){
    $$('#work li').each(function(el, idx){
      el.addEvent('click', function(){
        el.overlay()
      })
    })
  }
  
  if($('filter_featured')){
    var a = [$('filter_featured'), $('filter_commercial'), $('filter_personal'), $('all')]
    a.each(function(el){
      el.addEvent('click', function(){
        if(el == $('all')){
          $$('#content li').each(function(e){
            e.reveal()
          })
        } else {
          var del = el.id.substr(7)
          $$('#content li').each(function(e){
            if(!e.className.contains(del)){
              if(e != $('slideshow'))
                e.dissolve()
            } else {
              e.reveal()
            }
          })
        }
      })
    })
  }
})