var preview;

var PreviewHelper = new Class({
        
  initialize: function() {
  },

  next: function(id) {
    var media = $('media-' + id + '-previews');
    if (!media) return;
    var current = media.getElement('.current');
    if (!current) return;
    
    var next = current.getNext();
    if (!next || next.hasClass('clear')) {
      next = media.getFirst();
    }
    if (!next) return;
    
    var link = next.getElement('a');
    if (!link) return;
    
    //link.fireEvent('click');
    // Patch on fly and call
    try {
      var code = link.getAttribute('onclick');
      if (typeof(code) == 'function') {
        code.apply(link);
      } else {
        code = code.replace('this.blur();', '');
        eval(code);
      }
    } catch(e) {}
  },

  load: function(id, media_id, type, content) {
    container = $('media_' + id);
    if (!container) return;
    
    // switch preview
    try {                
      $('preview_' + id + '_' + media_id).getParent().getChildren().each(function(el) {
        if (el.id == 'preview_' + id + '_' + media_id) {
          el.addClass('current');
        } else {
          el.removeClass('current');
        }
      }.bind(this));
    } catch(e) {}
    
    var prev = container.getElement('.current-media');
    var next = container.getElement('#media_' + id + '_' + media_id);

    container.setStyles({'overflow': 'hidden', 'height': prev.offsetHeight});
    container.getParent().addClass('preview-loading');
    new Fx.Tween(container, {
      onComplete: function() {
        if (!next) {
          next = this.createMedia(container, id, media_id, type, content);
          prev.setStyle('display', 'none').removeClass('current-media');
          if (type == 'image') return;
        } else {
          prev.setStyle('display', 'none').removeClass('current-media');
        }
        next.setStyle('display', 'block').addClass('current-media');
        new Fx.Morph(container, {
          onComplete: function() {
            container.setStyles({'overflow': 'auto', 'height': ''});
            container.getParent().removeClass('preview-loading');
          }
        }).start({
          'height': next.clientHeight,
          'opacity': 1
        });
      }.bind(this)
    }).start('opacity', 0);
    
  },
  
  createMedia: function(container, id, media_id, type, content) {
    switch(type) {
      case 'image':
        var img = new Element('img', {'src': content});
        var el = new Element('div', {'id': 'media_' + id + '_' + media_id}).
          setStyle('opacity', 0.1).
          addClass('image').
          adopt(img).
          setStyle('display', 'block').addClass('current-media').
          inject(container);
          
        //img.addEvent('load', this.imageLoaded.bind(this, [container, img, el]));
        var self = this;
        img.addEvent('load', function() { self.imageLoaded(container, img, el); });
        return el;
        break;
      case 'html':
        return new Element('div', {'id': 'media_' + id + '_' + media_id}).
          setStyle('opacity', 0.1).
          addClass('html').
          set('html', content).
          inject(container);
        break;
      case 'video':
        return new Element('div', {'id': 'media_' + id + '_' + media_id, 'align': 'center'}).
          setStyle('opacity', 0.1).
          addClass('html').
          setStyle('height', 353).
          set('html', '<object width="695" height="353" type="application/x-shockwave-flash" data="' + content + '">' +
                      '  <param name="movie" value="' + content + '" />' +
                      '  <param name="allowFullScreen" value="true" />' +
                      '  <param name="quality" value="high" />' +
                      '</object>').
          inject(container);
        break;
      case 'flash':
        return new Element('div', {'id': 'media_' + id + '_' + media_id, 'align': 'center'}).
          setStyle('opacity', 0.1).
          addClass('flash').
          setStyle('height', content.height + 'px').
          set('html', '<object width="' + content.width + '" height="' + content.height + '" type="application/x-shockwave-flash" data="' + content.url + '">' +
                      '  <param name="movie" value="' + content.url + '" />' +
                      '  <param name="quality" value="high" />' +
                      '</object>').
          inject(container);
        break;
    }
  },
  
  imageLoaded: function(container, img, el) {
    el.tween('opacity', 1);
    new Fx.Morph(container, {
      onComplete: function() {
        container.setStyles({'overflow': 'auto', 'height': ''});
        container.getParent().removeClass('preview-loading');
      }
    }).start({
      'height': img.clientHeight,
      'opacity': 1
    });
  }
        
});

window.addEvent('domready', function() {
  preview = new PreviewHelper();
});
Asset.images([
  '/resources/i/site-loading.gif',

  '/resources/i/image-left-top.png',
  '/resources/i/image-right-top.png',
  '/resources/i/image-left-bottom.png',
  '/resources/i/image-right-bottom.png',
  
  '/resources/i/c-left-top.png',
  '/resources/i/c-right-top.png',
  '/resources/i/c-right-bottom.png',
  '/resources/i/c-left-bottom.png'
]);