var PortfolioSlider = Class.create();

PortfolioSlider.prototype =
{
  current_effect: null,
  
  initialize: function()
  {
    $$('#portfolio .links a').each((function(a, index){
      this.addEvents(a, index);
    }).bind(this));

  },

  addEvents: function(a, index)
  {
    Event.observe(a, 'click',
      (function(event){ this.showProject(index); event.stop();}).bind(this)
    );
    a.hover(
      (function(event) { this.showLinkCaption(a) }).bind(this),
      (function(event) { this.hideLinkCaption(a) }).bind(this)
    );
  },
  showProject: function(index)
  {
    ul = $('projects').down('ul');
    li = $('projects').down('li', index);
    x = this.getOffsetX(ul, li);
    y = this.getOffsetY(ul, li);

    if (this.current_effect) this.current_effect.cancel();
    this.current_effect = new Effect.Move(ul, {x: x, y: y, duration: 1});
  },


  getOffsetX: function(ul, li)
  {
    offset = ul.positionedOffset();
    current_x = offset.left;
    new_x = this.getNewX(li);
    //alert('current: ' + current_x);
    //alert('new: ' + new_x);
    return new_x - current_x;
  },
  getOffsetY: function(ul, li)
  {
    offset = ul.positionedOffset();
    current_y = offset.top;
    new_y = this.getNewY(li);
    return new_y - current_y;
  },
  getNewX: function(li) { return parseInt(li.getStyle('left')) * -1 ; },
  getNewY: function(li) { return parseInt(li.getStyle('top')) * -1 ;  },



  showLinkCaption: function(a)
  {
    p = a.next('p');
    p.show();
  },

  hideLinkCaption: function(a)
  {
    p = a.next('p');
    p.hide();
  }



};


Event.observe(window, 'load', function(){
  new PortfolioSlider;
});