var SfNav = new Class({
  Extends: ShowAndHide,
  initialize: function (element) {    
    this.head = $('logo');
    this.parent(element);
    this.delay_before_hiding = 1000;
    this.document_click = null;
  },
  setTriggers: function () {
    this.head.addEvent('mouseover', this.show.bindWithEvent(this));
    this.container.addEvent('mouseenter', this.show.bindWithEvent(this));
    this.container.addEvent('mouseleave', this.hideSoon.bindWithEvent(this));
  },
  setShownAndHiddenStates: function () {
    this.when_hiding = {width : 250, height: 100, opacity: 0};
    this.when_showing = {width : 510, height: 205, opacity: 1};
  },
  beforeShowing: function () { 
    this.document_click = document.addEvent('click', this.hide.bindWithEvent(this));
    this.visible = true; 
  },
  afterHiding: function () { 
    if (this.document_click) document.removeEvent('click', this.document_click);
    this.visible = false; 
  }
});

var SimpleGallery = new Class({
  initialize: function (element) {
    this.container = element;
    this.displayer = element.getElement('.display');
    this.captioner = element.getElement('.caption');
    this.titler = element.getElement('.title');
    this.items = [];
    this.container.getElements('a.gallery').each(function (a) { this.items.push(new SimpleGalleryItem(a, this)); }, this);
  },
  show: function (item) {
    this.displayer.set('src', item.image.get('src'));
    this.titler.set('text', item.title);
    this.captioner.set('text', item.caption);
  }
});

var SimpleGalleryItem = new Class({
  initialize: function (a, gallery) {
    this.gallery = gallery;
    this.link = a;
    this.thumbnail = this.link.getElement('img');
    this.title = this.thumbnail.get('alt');
    this.caption = this.thumbnail.get('title');
    this.thumbnail.set('title', null);
    this.image = null;
    this.prepare();
  },
  prepare: function () {
    this.thumbnail.fade(0.4);
    this.image = new Asset.image(this.link.get('href'), {onload: this.activate.bind(this)});
  },
  activate: function () {
    this.link.addEvent('mouseover', this.show.bindWithEvent(this));
    this.thumbnail.fade(1);
  },
  show: function () {
    this.gallery.show(this);
  }
});

Element.implement({
  pinDown: function () {
    this.pinlimits = {top : this.getTop()};
    window.addEvent('scroll', this.rePosition.bind(this));
  },
  pinWithin: function () {
    this.pinlimits = {
      top : this.getTop(),
      bottom : this.getParent().getTop() + this.getParent().getHeight() - 10
    };
    window.addEvent('scroll', this.setPinPosition.bind(this));
  },
  setPinPosition: function () {
    var offsets = window.getScroll();
    var height = this.getHeight();
    
    if (!this.retrieve('topped') && offsets.y <= this.pinlimits.top) {
      this.unpin();
      this.setStyle('bottom', 'auto');
      this.setStyle('left', 760);
      this.setStyle('top', 0);
      this.store('topped', true);
      
    } else if (!this.retrieve('bottomed') && offsets.y > this.pinlimits.bottom - height) {
      this.unpin();                                                                    
      this.setStyle('top', 'auto');
      this.setStyle('left', 760);
      this.setStyle('bottom', 0);
      this.store('bottomed', true);
      
    } else if (!this.retrieve('pinned') && offsets.y > this.pinlimits.top && offsets.y < this.pinlimits.bottom - height) {
      this.store('topped', false);
      this.store('bottomed', false);
      this.setStyle('left', 760);
      this.setStyle('top', offsets.y - this.pinlimits.top);
      this.pin();
    }
  }
});

degradeProtocol = function (a) {
  
}

canHandle = function (protocol) {

}

activations.push(function (scope) {
  scope.getElements('#navigation').each(function (div) { new SfNav(div); });
  scope.getElements('div.simplegallery').each(function (div) { new SimpleGallery(div); });
  scope.getElements('a.ics').each(function (a) { checkProtocol(a); });
});