var ContentSlider = new Class( { 

    Implements: [ Events, Options ],
    
    options: {

    },
    
    initialize: function( element, options ) {

        this.element = $( element );
//        this.setOptions( options );
        
        // Get the height of the first element inside the main element
        var size = this.element.getFirst( ).getSize( );
        
        // Create containing div
        this.container = new Element( 'div', { 
        	'styles': {
        		'height': size.y,
        		'overflow': 'hidden',
        		'position': 'relative'
        	}        	
        } );
        
        this.container.inject( this.element.getParent( ) );
        this.element.inject( this.container );

        // Work out the new width the child element should be. We're assuming
        // that all the children are the same width
        var newWidth = size.x * this.element.getChildren( ).length;
        this.element.setStyle( 'width', newWidth );
        
        // Create previous link
        this.previous = new Element( 'a', {
        	'events': {
        		'click': this.previous.bindWithEvent( this )
        	},
        	'href': '#',
        	'styles': {
        		'display': 'block',
        		'left': 0,
        		'padding': '5px 5px 5px 0px',
        		'position': 'absolute',
        		'top': '50%'
        	}
        } );
        
        // Previous Icon
        new Element( 'img', {
        	'alt': 'Previous',
        	'src': '/images/left_arrow.png'        	
        } ).inject( this.previous );
        
        // Add it into the element
        this.previous.inject( this.element );
        
        // Now that it's added, move the link up so it appears in the middle
        var prevSize = this.previous.getSize( );
        this.previous.setStyles( { 
        	'margin-top': '-' + ( prevSize.y / 2  ) + 'px' 
    	} );
        
        // Create next link
        this.next = new Element( 'a', {
        	'events': {
	    		'click': this.next.bindWithEvent( this )
	    	},
        	'href': '#',
        	'styles': {
        		'display': 'block',
        		'padding': '5px 0px 5px 5px',
        		'position': 'absolute',
        		'right': 0,
        		'top': '50%'
        	}
        } );
        
        // Next Icon
        new Element( 'img', {
        	'alt': 'Next',
        	'src': '/images/right_arrow.png'        	
        } ).inject( this.next );
        
        // Add it into the element
        this.next.inject( this.element );
        
        // Now that it's added, move the link up so it appears in the middle
        var nextSize = this.next.getSize( );
        this.next.setStyles( {
        	'margin-top': '-' + ( nextSize.y / 2  ) + 'px',
        } );
        
        this.updateControlDisplay( );        

    },
    
    next: function( e ) {
    
    	// Will move the contents to the left, so we want to apply a negative
    	// multiplier to decrease the left margin
    	this.move( e, -1 );
    	
    },
    
    previous: function( e ) {
    	
    	// Will move the contents to the right, so we want to apply a positive
    	// multiplier to increase the left margin
    	this.move( e, 1 );
    	
    },
    
    move: function( e, multiplier ) {
    	
    	e = new Event( e );
    	e.stop( );
    	
    	var currentMargin = this.element.getStyle( 'margin-left' ).toInt( );
    	var containerWidth = this.container.getStyle( 'width' ).toInt( );
    	var newValue = currentMargin + containerWidth * multiplier;
    	
    	if ( ( newValue <= 0 ) &&
    		 ( newValue >= ( containerWidth * -1 ) ) )
    	{
    	
    		var marginChange = new Fx.Style( this.element, 'margin-left', { 
    			duration: 1000,
    			onComplete: function( ) {
    				
    				this.updateControlDisplay( );
    			
    			}.bind( this )
			} );
    		marginChange.start( newValue );
    		
    	}
    	
    },
    
    updateControlDisplay: function( ) {
    
		var currentMargin = this.element.getStyle( 'margin-left' ).toInt( );
		var containerWidth = this.container.getStyle( 'width' ).toInt( );
		
		if ( currentMargin == 0 )
		{
		
			this.previous.setStyle( 'display', 'none' );
			this.next.setStyle( 'display', 'block' );
			
		}
		else if ( currentMargin == ( containerWidth * - 1 ) )
		{
		
			this.previous.setStyle( 'display', 'block' );
			this.next.setStyle( 'display', 'none' );
			
		}
		else
		{
		
			this.previous.setStyle( 'display', 'block' );
			this.next.setStyle( 'display', 'block' );
			
		}
    	
    }

} );