var GalleryFront = new Class({

  initialize: function ( )
  {
    document.getElements( 'ul.gallery-listing-canvas' ).each( function ( el ) {
      var currentWidth = el.getSize().x;
      var extraWidth = el.getFirst().getStyle('marginLeft').toFloat() + el.getFirst().getStyle('marginRight').toFloat();
      var elementCount = el.getChildren().length;
      el.setStyle('width', currentWidth + ( extraWidth * elementCount ) );
    });

    document.getElements( 'div.gallery-listing-canvas-overlay-prev' ).each( function ( el ) {
      el.fade( 'hide' );
    });

    document.getElements( 'div.gallery-listing-canvas-overlay-next' ).each( function ( el ) {
      var canvas = el.getPrevious('ul');
      if ( canvas.getParent().getSize().x > canvas.getSize().x ) {
        el.fade( 'hide' );
      }
    });
  },

  move: function ( direction, element )
  {
    var canvas = element.getPrevious('ul');
    var firstThumb = canvas.getFirst('li');
    var thumbnailWidth = firstThumb.getStyle('width').toInt();
    var thumbnailMargin = firstThumb.getStyle('marginLeft').toFloat() + firstThumb.getStyle('marginRight').toFloat();
    var move = ( ( Math.floor( canvas.getParent().getSize().x ) / ( thumbnailWidth + thumbnailMargin ) ) * ( thumbnailWidth + thumbnailMargin ) );
    var viewPort = canvas.getParent().getSize().x;

    if( direction == 'left' ) {
      if( !canvas.getStyle('left').toFloat() <= 0 ) {
        if( ( canvas.getStyle('left').toFloat() + ( move + thumbnailMargin ) ) >= 0 ) {
          canvas.tween('left', 0 );
          canvas.getParent().getElement('div.gallery-listing-canvas-overlay-prev').fade('out');
        } else {
          canvas.tween('left', canvas.getStyle('left').toFloat() + ( move + thumbnailMargin ) );
        }
      }
    } else {
      if( Math.abs( canvas.getStyle('left').toFloat() ) < ( canvas.getSize().x - viewPort ) ) {
        move = canvas.getStyle('left').toFloat() - ( move + thumbnailMargin );

        if( Math.abs( move ) + viewPort > canvas.getSize().x ) {
          move = -( ( canvas.getSize().x - viewPort ) - thumbnailMargin );
        }

        canvas.getParent().getElement('div.gallery-listing-canvas-overlay-prev').fade('in');
        canvas.tween('left', move );
      }
    }
  }
});