var mooImageChanger = new Class({
	Implements: [Chain],

    initialize: function(grpahDivID, loaderCSSClass, graphID, nodeSelecterID, periodChanger) {
		this.grpahDiv       = $(grpahDivID);
        this.loaderCSSClass = loaderCSSClass;
        this.graphID        = graphID;
		this.nodeSelecterID = nodeSelecterID;        
    	this.periodChanger  = periodChanger;
	},

    changeImage: function() {
    	if(!$(this.graphID)) {
    		return false;
    	}
    	
        this.chain(
            function(){ 
                $(this.graphID).get('tween', {property: 'opacity', duration: 500}).start(0).chain(
                    function() { this.callChain(); }.bind(this) 
                );
			},            
			function(){ 
			    this.removeImage();
		        this.callChain();				 
			},
			function(){ 
		        var fundNodeID = $(this.nodeSelecterID).get('value');
		        var periodID   = $(this.periodChanger).get('value');
		        var graphImage = new Asset.image( '/statistics/getgraph/' + fundNodeID + '/' + periodID, {id: this.graphID, onload: function() {
		        	graphImage.set('opacity', 0);
		            this.addImage( graphImage );
		            this.callChain();
		        }.bind(this) } );				 
			},
            function(){ 
                $(this.graphID).get('tween', {property: 'opacity', duration: 500}).start(1);
			}			
        );
        this.callChain();
    },

    removeImage: function() {
        $(this.graphID).dispose();
        this.grpahDiv.addClass(this.loaderCSSClass);
    },

    addImage: function( graphImage ) {
        this.grpahDiv.removeClass(this.loaderCSSClass);
        graphImage.inject(this.grpahDiv);
        
        var title =  $( this.nodeSelecterID ).getSelected().get('text');
        graphImage.set( 'title', title );
        graphImage.set( 'alt', title );
    }
});