function PortfolioShowItem(portfolio, item) {
  var mainimagefigure  = portfolio.select('section.mainimagewrapper > figure')[0];
  var mainimage        = portfolio.select('section.mainimagewrapper > figure > .imageframe > .imagewrapper > img.mainimage')[0];
  var mainimagecaption = portfolio.select('section.mainimagewrapper > figure > figcaption')[0];
  
  
  var preloadingImage = new Image();
  preloadingImage.src = item.image;
  
  
  mainimage.fade('out',
    {
      duration: 300,
      
      onFinish: function() {
        mainimage.src = item.image;
        mainimage.alt = item.description;
        adjustImageMargin(mainimage);
        
        this.element.fade('in', { duration: 300 });
      }
    }
  );
  
  mainimagecaption.fade('out',
    {
      duration: 300,
      
      onFinish: function() {
        mainimagecaption.update(item.description);
        
        this.element.fade('in', { duration: 300 });
      }
    }
  );
}

function PortfolioThumbnailbrowserMove(portfolio, next) {
  var thumbnailslist   = portfolio.select('section.thumbnailbrowser > div.thumbnailviewport > ol.thumbnails')[0];
  var buttonnext       = portfolio.select('section.thumbnailbrowser > a.button.next')[0];
  var buttonprevious   = portfolio.select('section.thumbnailbrowser > a.button.prev')[0];
    
    
  if(next) {
    if(Math.abs(parseInt(thumbnailslist.getStyle('margin-left'))) + (4 * 126 + 3 * 22) == parseInt(thumbnailslist.getStyle('width'))) return;
   
    var newMarginLeft = parseInt(thumbnailslist.getStyle('margin-left')) - (126 + 22);
  }
  else {
    if(parseInt(thumbnailslist.getStyle('margin-left')) == 0) return;
    
    var newMarginLeft = parseInt(thumbnailslist.getStyle('margin-left')) + (126 + 22);
  }
  
  thumbnailslist.setStyle('margin-left', newMarginLeft + 'px');
  
  
  buttonnext.removeClass('disabled');
  buttonprevious.removeClass('disabled');
  if(Math.abs(parseInt(thumbnailslist.getStyle('margin-left'))) + (4 * 126 + 3 * 22) == parseInt(thumbnailslist.getStyle('width'))) {
    buttonnext.addClass('disabled');
  }  
  if(parseInt(thumbnailslist.getStyle('margin-left')) == 0) {
    buttonprevious.addClass('disabled');
  }
}

function registerPortfolio(portfolio, items) {
  var mainimage        = portfolio.select('section.mainimagewrapper > figure > .imageframe > .imagewrapper > img.mainimage')[0];
  
  var buttonprevious   = portfolio.select('section.thumbnailbrowser > a.button.prev')[0];
  var buttonnext       = portfolio.select('section.thumbnailbrowser > a.button.next')[0];
  
  var thumbnailslist   = portfolio.select('section.thumbnailbrowser > div.thumbnailviewport > ol.thumbnails')[0];
        
        
  thumbnailslist.setStyle('width', Math.max(((items.length * 126) + ((items.length - 1) * 22)), (4 * 126 + 3 * 22)) + 'px');
  
  buttonnext.removeClass('disabled');
  buttonprevious.removeClass('disabled');
  if(Math.abs(parseInt(thumbnailslist.getStyle('margin-left'))) + (4 * 126 + 3 * 22) == parseInt(thumbnailslist.getStyle('width'))) {
    buttonnext.addClass('disabled');
  }  
  if(parseInt(thumbnailslist.getStyle('margin-left')) == 0) {
    buttonprevious.addClass('disabled');
  }
  
  
  var preloadingImage = new Image();
  items.each(
    function(item) {
      preloadingImage.src = item.thumbnail;
    
      var itemli = $E('li');
      
        var imageframediv = $E('div', { 'class': 'imageframe' }).insertTo(itemli);
        
          var itemlink = $E('a', { href: '#' })
            .on('click', 
              function(e) { 
                e.stop(); 
                PortfolioShowItem(portfolio, item); 
              }
            )
            .insertTo(imageframediv);
            
            var itemimage = $E('img', { src: item.thumbnail }).insertTo(itemlink);
            
            var imagemask = $E('div', { 'class': 'imagemask' }).insertTo(itemlink);
              
        var imageshadowdiv = $E('div', { 'class': 'imageshadow' }).insertTo(itemli);
      
      itemli.insertTo(thumbnailslist);
    }
  );
  
  
  buttonprevious.on('click',
    function(e) {
      e.stop(); 
      PortfolioThumbnailbrowserMove(portfolio, false);
    }
  );
  
  buttonnext.on('click',
    function(e) {
      e.stop(); 
      PortfolioThumbnailbrowserMove(portfolio, true);
    }
  );
  
  thumbnailslist.on('mousewheel',
    function(e) {
      e.stop(); 
      PortfolioThumbnailbrowserMove(portfolio, (e.wheelDelta < 0));
    }
  );
  
  PortfolioShowItem(portfolio, items[0]);
}