/* Cubic transition */
Object.extend(Effect.Transitions, {
  cubic: function(pos) {
    pos /= 0.5; return pos<1 ? 0.5*pos*pos*pos : 0.5*((pos-2)*(pos-2)*(pos-2)+2);
  }
});
Effect.DefaultOptions.transition = Effect.Transitions.cubic;

var Homepage = {
  getGridItems: $$.curry('#home .grid-item'),
  
  initialize: function(){
    this._items = [];
    
    this.getGridItems().each(function(item, index) {
      this[index] = {
        'element': item, 
        'image': item.down('img'), 
        'fx_overlay': item.down('.layer-overlay'), 
        'text': item.down('.overlay-text'), 
        'txt_overlay': item.down('.overlay-bg'), 
        'hovered': false
      };
    }, this._items);
    
    /* Removing title and alt attributes */
    $$('#header a').invoke('writeAttribute', 'title', '');
    $$('.grid-item a[title]').invoke('writeAttribute', 'title', '');
    $$('.grid-item img').invoke('writeAttribute', 'alt', '');
    
    /* Appearing effect */
    new Effect.Fade('home-overlay', {
      duration: 3,
      to: 0,
      afterFinish: function(fx){
        fx.element.remove();
      }
    });

    this.registerEvents();
    //this.animate();
    /* Initialize Videos */
    this._items.each(function(item){
      if(item.element.hasClassName('type-video'))
        item.video = new Gucci.Video(item.element);
    }.bind(this));
  },
  
  registerEvents: function(){
    this._items.pluck('element').each(function(item, index){
      
      if(!this._items[index].mOverEvent) this._items[index].mOverEvent = this.mOverHandler.bindAsEventListener(this, index);
      if(!this._items[index].mOutEvent) this._items[index].mOutEvent = this.mOutHandler.bindAsEventListener(this, index);
      if(!this._items[index].mClickEvent) this._items[index].mClickEvent = this.mClickHandler.bindAsEventListener(this, index);
      
      item.observe('mouseover', this._items[index].mOverEvent);
      item.observe('mouseout', this._items[index].mOutEvent);
      item.observe('click', this._items[index].mClickEvent);
    }.bind(this));
  },
  
  dispatchEvents: function(){
    this._items.pluck('element').each(function(item, index){
      item.stopObserving('mouseover', this._items[index].mOverEvent);
      item.stopObserving('mouseout', this._items[index].mOutEvent);
      item.stopObserving('click', this._items[index].mClickEvent);
    }.bind(this));
  },
  
  mOverHandler: function(e, index){
    
    var overlay_queue = Effect.Queues.get('overlay' + index);
    var text_queue = Effect.Queues.get('text' + index);
    overlay_queue.each(function(effect) { effect.cancel(); });
    text_queue.each(function(effect) { effect.cancel(); });
    
    new Effect.Morph(this._items[index].fx_overlay, { 
      style: { opacity: '0' },
      duration: .35,
      queue: { position: 'end', scope: 'overlay' + index, limit: 3 }
    });
    
  },
  
  mOutHandler: function(e, index){
    
    var overlay_queue = Effect.Queues.get('overlay' + index);
    var text_queue = Effect.Queues.get('text' + index);
    overlay_queue.each(function(effect) { effect.cancel(); });
    text_queue.each(function(effect) { effect.cancel(); });
    
    new Effect.Morph(this._items[index].fx_overlay, { 
      style: { opacity: '0' },
      duration: 1,
      queue: { position: 'end', scope: 'overlay' + index, limit: 3 }
    });
    
  },
  
  mClickHandler: function(e, index){
    // yoda-yoda-yoda
    // doing some crazy stuffff...
  },
  
  animate: function(){
    var img = this._items.first().element.down('img');
    var delta = $('main-feature_01').getHeight() - img.getHeight();
    this.animateFX = new Effect.Morph(img, {
      style: {bottom: delta + 'px'},
      duration: 5,
      transition: Effect.Transitions.sinoidal
    });
  },
  
  showTextOverlay: function(overlay){
    var overlay = $(overlay);
    if(!Prototype.Browser.IE)
      new Effect.Appear(overlay, {
        duration: 1,
        to: .99
      });
    else overlay.show();
  },
  
  hideTextOverlay: function(overlay){
    var overlay = $(overlay);
    if(!Prototype.Browser.IE)
      new Effect.Fade(overlay, {
        duration: 1
      });
    else overlay.hide();
  }
};

Gucci.Video = Class.create();
Gucci.Video.prototype = {
  initialize: function(item){
    
    this.imgElement = item.down('img');
    //var id = img.identify();
    var poster = this.imgElement.readAttribute('src');
    var video = this.imgElement.readAttribute('rel');
    
    this.videoWrapper = new Element('div');
    this.videoID = this.videoWrapper.identify();
    
    this.imgElement.insert({'before': this.videoWrapper});

    if(!video){       
      alert("No video source in attribute 'rel' found");
      return;
    }

    var params = {
      menu: "false",
      quality: "high",
      wmode: "opaque",
      allowfullscreen:"false"
    };

    var flashvars = {
     stretching:  "fill",
     displayclick: "none",
     autostart: true,
     controlbar: 'none',
     image: poster,
     file: video
    };

    var attributes = {};

    swfobject.embedSWF("./javascripts/player.swf", this.videoID, "100%", "100%", "9.0.115", false, flashvars, params, attributes);
  },
  
  show: function(){
    $(this.videoID).setStyle('visibility: visible');
    this.imgElement.setStyle('visibility: hidden');
  },
  
  hide: function(){
    $(this.videoID).setStyle('visibility: hidden');
    this.imgElement.setStyle('visibility: visible');
  }
};


document.observe('dom:loaded', function(){
  // Event listeners for numerous layout fixes
  (function(){
    var events = [
      [window, 'scroll'], 
      [window, 'resize'],
      [document, 'dom:loaded'], 
      [document, 'layout:changed']
    ];
    var container = $('container');
    var header = $('header-content');

    // Flicker removing for IE6
    if(Prototype.Browser.IE6)
      try {
        document.execCommand('BackgroundImageCache', false, true);
      } catch(e) {}

    events.each(function(event){
      Event.observe(event[0], event[1], function(e){
          if ((document.viewport.getHeight() <= container.getHeight()) || (document.viewport.getWidth() <= container.getWidth())) {
            
            if ((document.viewport.getHeight() <= container.getHeight()) && (!container.hasClassName('absolute'))) {
              container.addClassName('absolute');
            }
            var docWidth = document.viewport.getWidth();
            var containerWidth = container.getWidth();
            if (document.viewport.getWidth() <= container.getWidth()) {
              container.setStyle({
                left: '0px',
                marginLeft: '0px'
              });
              header.setStyle({
                //  marginLeft: (docScrollLeft) + 'px',
                width: (docWidth) < containerWidth ? (docWidth) + 'px' : '100%'
              });
            }
          } else {
            if(container.hasClassName('absolute')) {
              container.removeClassName('absolute');
            }
            container.setStyle({
                left: '',
                marginLeft: ''
            });
            header.setStyle({
                width: '1001px'
            });
          }
        });

        if(Prototype.Browser.IE6 || container.hasClassName('absolute')) {
          // Emulating position: fixed and max-width for IE6
          var docWidth = document.viewport.getWidth();
          var docScrollLeft = document.viewport.getScrollOffsets()[0];
          var containerWidth = container.getWidth();
          header.setStyle({
          //  marginLeft: (docScrollLeft) + 'px',
            width: (docWidth) < containerWidth ? (docWidth) + 'px' : '100%'
          });
        } else {
          // Setting max-width for modern browsers
          header.setStyle('max-width: ' + (container.getWidth() + 65) + 'px');
        }
      });
    })();
  
  Homepage.initialize();
  document.fire('layout:changed');
});