var picManager = {

  galleryInjectionPoint: null,
  initialGallery: null,
  currentPhotos: null,
  currentPage: 0,
  totalPageCount: 0,
  currentImage: null,

  init: function ()
  {
    this.galleryInjectionPoint = $('listing');
    if ( this.initialGallery > 0 ) {
      this.showGallery( this.initialGallery );
    }
    $E('div#player div.controls').setStyle( 'opacity', '0.7');
  },

  showGallery: function ( album_id )
  {
    this.drawBrowser();
    this.loadImages( album_id );
  },

  drawBrowser: function ()
  {
    if ( this.currentAlbum ) this.currentAlbum.setStyle( 'display', 'block' );
    if ( $('gallery') ) $('gallery').remove();
    var gallery = new Element( 'div', {'id': 'gallery'} );
    gallery.appendChild( new Element( 'div', {'id': 'photoContainer'} ) );
    gallery.injectTop( this.galleryInjectionPoint );
  },

  loadImages: function ( album_id )
  {
    var jSonRequest = new Json.Remote("/index.php/pics/load/" + album_id,
      { onComplete: this.drawImages.bind( this ) } )
      .send();
  },

  drawImages: function ( photos, page, dirtyFix )
  {
    if ( !photos ) return false;
    if ( dirtyFix ) page = dirtyFix.getText(); // OEI!
    this.currentPhotos = photos;
    if ( $('photoContainer') ) $('photoContainer').empty();
    var container = $('photoContainer');
    var div, img;
    var itemsPerPage = 10000;
    page = ( page > 1 ) ? page : 1;
    var start = itemsPerPage * (page-1);
    var offset = itemsPerPage;
    var i = 0;
    var fade = new Fx.Style( container, 'opacity', {duration: 500}).set(0);
    photos.each( function ( photo ) {
      if ( i < start || i >= start + offset ) return i++;
      div = new Element( 'div', {'class': 'foto'} );
      div.addEvent( 'click', this.showPreview.bindWithEvent( photo ) );
      if ( i == start ) this.showPreview( photo );
      img = new Element( 'img', {'src': '/modules/pics/skins/default/images/blank.gif' } );
      img.setStyle( 'background-image', 'url(/var/pics/' + photo.hash + '_tiny.jpg)');
      div.appendChild( img );
      container.appendChild( div );
      i++;
    }.bind( this ) );
    container.appendChild( new Element( 'div', {'class':'clear'} ) );
    fade.start( 0,1 );
    this.currentPage = page;
    //this.totalPageCount = Math.ceil( photos.length / itemsPerPage );
    //this.drawPagination( this.totalPageCount, page );
  },

  drawPagination: function ( pageCount, currentPage )
  {
    if ( $('pagination') ) $('pagination').remove();
    var pagination = new Element( 'div', { 'id': 'pagination' } );
    var left  = new Element( 'a', {'href':'#', 'events': { 'click': this.previousPage.bind( this ) } } ).setHTML( "&laquo; Vorige" );
    var right = new Element( 'a', {'href':'#', 'events': { 'click': this.nextPage.bind( this ) } } ).setHTML( "Volgende &raquo;" );

    var pageDiv = new Element( 'div', {'class': 'paginas'} );
    var pageLink;
    var t = this;
    for ( var i = 0 ; i < pageCount ; i++ ) {
      pageLink = new Element( 'a', {'href': '#', 'events': { 'click': function () { t.drawImages( t.currentPhotos, i, this ); } } } ).setText( i+1 );
      if ( currentPage == i+1 ) pageLink.addClass( 'active' );
      pageDiv.appendChild( pageLink );
    }
    pagination.appendChild( left );
    pagination.appendChild( pageDiv );
    pagination.appendChild( right );
    $('gallery').appendChild( pagination );
  },

  previousPage: function () {
    var page = Math.max( Math.min( this.totalPageCount, this.currentPage - 1 ), 0 );
    this.drawImages( this.currentPhotos, page );
  },

  nextPage: function () {
    var page = Math.max( Math.min( this.totalPageCount, this.currentPage + 1 ), 0 );
    this.drawImages( this.currentPhotos, page );
  },

  nextImage: function ()
  {
    var getNext = false;
    var next = null;
    picManager.currentPhotos.each( function ( photo ) {
      if ( getNext ) {
        next = photo;
        getNext = false;
      }
      if ( photo == picManager.currentImage ) getNext = true;
    }.bind( this ) );
    if ( next ) this.showPreview( next );
  },

  previousImage: function ()
  {
    var stop = false;
    var previous = null;
    picManager.currentPhotos.each( function ( photo ) {
      if ( photo == picManager.currentImage ) stop = true;
      if ( !stop ) previous = photo;
    }.bind( this ) );
    if ( previous ) this.showPreview( previous );
  },

  showPreview: function ( image )
  {
    // image == event === bad
    if ( image.target ) image = this;
    var div = $('previewContainer');
    var fade = new Fx.Style( div, 'opacity', {duration: 300}).set(0);
    fade.start( 0,1 );
    div.setStyle( 'background-image', 'url(/var/pics/' + image.hash + '_thumb.jpg)' );
    var a = $ES('a.fullscreen');
    a.each( function( link ){
      link.setAttribute( 'href', '/var/pics/' + image.hash + '_large.jpg' );
    }.bind( this ));

    picManager.currentImage = image;
  }
}

window.addEvent( 'domready', picManager.init.bind( picManager ) );