var ouweDoosBlockClass = new Class
({
  thumbContaner: null,
  paginationContainer: null,
  currentPage: 0,

  initialize: function ( thumbContainerId, paginationContainerId )
  {
    if ( !$('flashVideo') ) return;
    this.thumbContaner       = $(thumbContainerId);
    this.paginationContainer = $(paginationContainerId);
    this.loadData();
  },

  loadData: function ( page )
  {
    if ( !page ) page = 1;
    this.currentPage = page;
    if ($('ouwedoos')) page = 'all';
    var jSonRequest = new Json.Remote(
      "/index.php/video/jsonLoadVideos/" + page,
      { onComplete:this.onLoadData.bind( this ) } ).send();
  },

  onLoadData: function ( data )
  {
    if ( !data || data.videos.length <= 0 ) return;
    if ( $('ouwedoos') )  $('ouwedoos').setStyle( 'display', 'block' );
    if ( $('ouwedoos2') ) $('ouwedoos2').setStyle( 'display', 'block' );
    this.thumbContaner.empty();
    data.videos.each( function ( item ) { this.addThumbnail( item ) }, this );
    if ($('ouwedoos2')) this.drawPagination( data.pagination );
    if ($('ouwedoos')) ouwe_shit();
  },

  addThumbnail: function ( data )
  {
    var thumb = new Element( 'div', {'class':'ouwefoto'} );
    var link  = new Element( 'a', {'href':'#'} );
    link.data = data;
    link.addEvent( 'click', this.onThumbClick.bind( data ) );
    link.appendChild( new Element( 'img', {'src': '/var/videocover/' + data.cover_thumb} ) );
    thumb.appendChild( link );
    this.thumbContaner.appendChild( thumb );
  },

  onThumbClick: function ( event )
  {
    videoManager.showVideo( this.id );
  },

  drawPagination: function ( data )
  {
    if ( data.pageCount <= 1 ) return;
    this.paginationContainer.empty();
    var arrow, pageLink;
    if ( data.currentPage > 1 ) {
      arrow = new Element( 'img', {'src':'/skins/default/images/pijl_links.gif', 'id':'ouwe_links'} );
      arrow.addEvent( 'click', this.onPreviousPageClick.bind( this ) );
      this.paginationContainer.appendChild( arrow );
    }
    if ( data.currentPage < data.pageCount ) {
      arrow = new Element( 'img', {'src':'/skins/default/images/pijl_rechts.gif', 'id':'ouwe_rechts'} );
      arrow.addEvent( 'click', this.onNextPageClick.bind( this ) );
      this.paginationContainer.appendChild( arrow );
    }

    var pages = new Element( 'div', {'class':'paginas'} );
    for ( var i = 0 ; i < data.pageCount ; i++ ) {
      pageLink = new Element( 'a', { 'href' : '#' } ).setText( i+1 );
      if ( i+1 == data.currentPage ) pageLink.addClass( 'active' );
      pageLink.addEvent( 'click', this.onPageClick.bindWithEvent( this, pageLink ) );
      pages.appendChild( pageLink );
    }
    this.paginationContainer.appendChild( pages );
  },

  onPageClick: function ( event, pageLink  )
  {
    event = new Event( event );
    event.preventDefault();
    this.loadData( parseInt( pageLink.getText() ) );
  },

  onNextPageClick: function ( event )
  {
    event = new Event( event );
    event.preventDefault();
    this.loadData( this.currentPage + 1 );
  },

  onPreviousPageClick: function ( event )
  {
    event = new Event( event );
    event.preventDefault();
    this.loadData( this.currentPage - 1 );
  }
});