var Tape = new Class( {
	Implements: [Chain, Options, Events, Log],

	options: {
		'direction'       : 'toLeft',
		'speed'           : 100, //pixels per second
		'streamsCSSPath'  : 'div.stream',
		'commentsCSSPath' : 'div.comment',
		'linksCSSPath'    : 'div.comment div.attribute-image a',
		'imageCSSPath'    : 'nxcgallery-content-image'
		//'linksCSSPath'    : 'a.alink'
	},

	initialize: function( tapeBlock, tapeViewer, nxcBox, options ) {
		this.nxcBox     = nxcBox;
		this.contentImage = document.id( this.options.imageCSSPath );
        this.tapeBlock  = document.id( tapeBlock );
		this.tapeViewer = document.id( tapeViewer );
		this.setOptions( options );

		this.setTapeWidth();
		this.tapeBlock.setStyle( 'margin-left', this.getStartOffset( this.options.direction ) );
		
		this.installCommentsHover();
		this.installCommentsClick();
	},
	
	setTapeWidth: function() {
		var tapeWidth   = 0;
		var streamWidth = 0;
		this.tapeBlock.getElements( this.options.streamsCSSPath ).each( function( stream ) {
			streamWidth = this.getStreamWidth( stream );
			if( streamWidth > tapeWidth ) {
				tapeWidth = streamWidth;
			}
		}.bind( this ) );
		this.tapeBlock.setStyle( 'width', tapeWidth + 4 );
	},
	
	getStreamWidth: function( stream ) {
		var width = 0;
		stream.getElements( this.options.commentsCSSPath ).each( function( comment ) {
			width += comment.getStyle( 'margin-left' ).toInt() + comment.getStyle( 'width' ).toInt() + comment.getStyle( 'margin-right' ).toInt();
		}.bind( this ) );
		return width + 4;
	},
	
	getStartOffset: function( direction ) {
		if( direction == 'toLeft' ) {
			return 0;
		} else {
			return -1 * ( this.tapeBlock.getSize().x - this.tapeViewer.getSize().x );
		}
	},
	
	installCommentsHover: function() {
		this.tapeBlock.getElements( this.options.commentsCSSPath ).each( function( comment ) {
			comment.addEvent( 'mouseover', this.stopMoving.bind( this ) );
			comment.addEvent( 'mouseleave', function() {
				this.startMove( this.direction ) 
			}.bind( this ) );
		}.bind( this ) );
	},

	installCommentsClick: function() {
		this.tapeBlock.getElements( this.options.linksCSSPath ).each( function( link ) {
			link.addEvent( 'click', function( e ) {
        		var href=link.href;
        		this.contentImage.set( 'src', href );
                if( this.nxcBox.opened == false ) {
        			this.nxcBox.show();
        		};
        		e.stop()
			}.bind( this ) );
		}.bind( this ) );
	},

	startMove: function( direction ) {
		if( this.moveFx ) {
			this.moveFx.cancel();
		}

		this.direction = direction;

		var viewerWidth = this.tapeViewer.getSize().x;
		var tapeWidth   = this.tapeBlock.getSize().x;
		var offsetLeft  = this.tapeBlock.getStyle( 'margin-left' ).toInt();
		
		if( ( viewerWidth > tapeWidth ) || ( offsetLeft > 0 ) ) {
			return false;
		}
		
		offsetLeft       = Math.abs( offsetLeft );				
		var moveDistance = ( this.direction == 'toLeft' ) ? tapeWidth - viewerWidth - offsetLeft : offsetLeft;

		this.moveFx = new Fx.Tween( this.tapeBlock, {
			'duration'  : ( moveDistance / this.options.speed ).toInt() * 1000,
			'property'  : 'margin-left',
			'transition': Fx.Transitions.linear
		} );
		
		var endOffset = ( this.direction == 'toLeft' ) ? ( offsetLeft + moveDistance ) * -1 : 0;
		
		var startPositionOffset = this.getStartOffset( this.direction );
		this.moveFx.start( endOffset ).chain( function() {
			this.options.duration = 500;
			this.start( startPositionOffset )
		} ).chain( function() {
			this.startMove( this.direction );
		}.bind( this ) )
	},

	stopMoving: function() {
		this.moveFx.cancel();
	},

	run: function() {
		this.startMove( this.options.direction );	
	}
} );