var Carrousel = new Class({

  requestTimeout: null,

  initialize: function ()
  {
    $$('div[id^=navigator-]').each( function( navigator ) {
      navigator.addEvent( 'click', function( event ) {
        event.stop();

        if( navigator.get('id').replace('navigator-','') == 'left' ) {
          this.left();
        } else {
          this.right();
        }
      }.bind(this));
    }.bind(this));
  },

  getFlexApp: function ()
  {
    return (navigator.appName.indexOf ("Microsoft") !=-1) ? $('flexCarrouselIE') : $('flexCarrousel');
  },

  right: function ()
  {
    var app = this.getFlexApp();
    app.previous();
  },

  left: function ()
  {
    var app = this.getFlexApp();
    app.next();
  },

  getPortfolio: function ( portfolio_id )
  {
    var thumbnail = $('portfolio-thumbnail');
    var description = $('portfolio-description');

    if ( this.requestTimeout !== null ) clearTimeout( this.requestTimeout );

    if( description.get('class').replace('portfolio-id','') != portfolio_id ) {
      thumbnail.set('html', '<div style="margin-top: 180px; color: #888; text-align: center;"><img style="vertical-align: middle;" src="/modules/Portfolio/templates/default/icons/ajax-loader.gif" /> Afbeelding wordt geladen...</div>');
      description.set('html', '<div style="margin-top: 180px; color: #888; text-align: center;"><img style="vertical-align: middle;" src="/modules/Portfolio/templates/default/icons/ajax-loader.gif" /> Informatie wordt geladen...</div>');

      var request = new Request.JSON({
        url: '/service/Portfolio/service-portfolio-view/' + portfolio_id,
        onSuccess: function( response ) {
          if( response.success ) {
            if( response.data ) {
              if( response.data.thumbnail ) {
                setTimeout( function () {
                  thumbnail.set('html', response.data.thumbnail );

                  portfolioview.reset();
                }, 500 );
              } else {
                thumbnail.empty();
              }

              description.set('class', 'thumbnail-id' + portfolio_id );
              description.setStyle('opacity', 0);
              description.set('html', response.data.description );
              description.tween('opacity', 1);
            }
          }
        }
      });

      this.requestTimeout = setTimeout( request.get.bind(request), 800 );
    }
  }
});
var carrousel;
window.addEvent('domready', function() { carrousel = new Carrousel() });