var portfolio = null;

var Portfolio = Class.create();
Portfolio.prototype = {
  visibilityLimit: 0,
  navIncrement: 1,
  currentBeginIndex: 0,
  itemCount: 0,

  initialize: function(aVisibilityLimit, aNavIncrement) {
    Element.hide('image');

    this.visibilityLimit = aVisibilityLimit || 0;
    this.navIncrement = aNavIncrement || aVisibilityLimit;

    var i = 0;
    var item = null;
    while((item = $('portfolio-item-' + i)) != null) {
      item.onmouseout = function() { Element.removeClassName(this, 'hover'); };
      item.onmouseover = function() { Element.addClassName(this, 'hover'); };
      i++;
    }
    this.itemCount = i;

    this._refreshDisplay();
  },

  next: function() {
    if (this.visibilityLimit > 0 && this.currentBeginIndex < this.itemCount) {
      this.currentBeginIndex = this.currentBeginIndex + this.navIncrement;
      this._refreshDisplay();
    }
  },

  prev: function() {
    if (this.visibilityLimit > 0 && this.currentBeginIndex - this.navIncrement >= 0) {
      this.currentBeginIndex = this.currentBeginIndex - this.navIncrement;
      this._refreshDisplay();
      this.showItem(this.currentBeginIndex);
    }
  },

  showItem: function(aId, aPageId) {
    if (!aPageId) {
      aPageId = 0;
    }
    
    // Remove selected border
    var i = 0;
    var item = null;
    while((item = $('portfolio-item-' + i)) != null) {
      Element.removeClassName(item, 'selected');
      i++;
    }

    var item = $('portfolio-item-' + aId);
    if (item != null) {
      Element.hide('image');
      Element.hide('image-info');

      Element.addClassName(item, 'selected');
      Element.addClassName(item, 'visited');
      //var itemImage = $('portfolio-item-' + aId + '-image');
      var itemTitle = $('portfolio-item-' + aId + '-title-' + aPageId);
      var itemDescription = $('portfolio-item-' + aId + '-description-' + aPageId);
      var itemLink = $('portfolio-item-' + aId + '-link-' + aPageId);

      var image = $('image');

      var imgPreloader = new Image();
      imgPreloader.onload = function(){
        image.src = itemLink.href;

        if (/Mozilla.*Linux x86_64/.test(navigator.userAgent)) {
          Element.show('image');
          Element.show('image-info');
        }
        else {
          new Effect.Appear('image', {duration: 0.5});
          new Effect.Appear('image-info', {duration: 0.5});
        }
      }
      image.src = '';
      imgPreloader.src = itemLink.href;

      var title = $('image-info-title');
      var description = $('image-info-description');

      title.innerHTML = itemTitle.innerHTML;
      description.innerHTML = itemDescription.innerHTML;

      var nav = $('image-info-navigator');
      nav.innerHTML = '';
      var pageCount = (item.childNodes.length - 1) / 2;
      if (pageCount > 1) {

        for (var i = 0; i < pageCount; i++) {
          if (i == aPageId) {
            nav.innerHTML += '<span class="nav-page-selected">' + (i + 1) + '</span> ';
          }
          else {
            nav.innerHTML += '<a class="nav-page" href="#" onclick="portfolio.showItem(' + aId + ', ' + i + '); return false;">' + (i + 1) + '</a> ';
          }
        }
      }
    }
  },

  _refreshDisplay: function() {
    var i = 0;
    var item = null;
    while((item = $('portfolio-item-' + i)) != null) {
      if (this.visibilityLimit == 0) {
        Element.show('portfolio-item-' + i);
      }
      else {
        if (i >= this.currentBeginIndex && i < this.currentBeginIndex + this.visibilityLimit) {
          Element.show('portfolio-item-' + i);
        }
        else {
          Element.hide('portfolio-item-' + i);
        }
      }
      i++;
    }

    if (this.visibilityLimit <= 0 || this.currentBeginIndex <= 0) {
      Element.hide('portfolio-nav-prev');
    }
    else {
      Element.show('portfolio-nav-prev');
    }

    if (this.visibilityLimit <= 0 || this.currentBeginIndex + this.visibilityLimit >= this.itemCount) {
      Element.hide('portfolio-nav-next');
    }
    else {
      Element.show('portfolio-nav-next');
    }

    this.showItem(this.currentBeginIndex);
  }
}

function initPortfolio() {
  portfolio = new Portfolio(15);
}

function addLoadEvent(aFunc) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
      window.onload = aFunc;
  }
  else {
    window.onload = function(){
      oldonload();
      aFunc();
    }
  }
}

addLoadEvent(function() { initPortfolio() });