var Spinner = new Class({
	options: 
	{
	    images:'images/'
	},		
	initialize: function(options)
	{
	    
		this.setOptions(options); 				       	    		    	                                                                          
             
        if(!$('spinnerBox'))
        {
            this.spinPreload = new Asset.images([this.options.images+'spin1.png',this.options.images+'spin2.png',this.options.images+'spin3.png',this.options.images+'spin4.png',this.options.images+'spin5.png',this.options.images+'spin6.png',this.options.images+'spin7.png',this.options.images+'spin8.png',this.options.images+'spin9.png',this.options.images+'spin10.png',this.options.images+'spin11.png',this.options.images+'spin12.png'],{
                onComplete: function()
                {
                    this.init = true;                
                }.bind(this)
            });        
            this.spinnerBox = new Element('div', {'id': 'spinnerBox', 'styles': {'position':'absolute','left': 10, 'top': 10, 'visibility':'hidden','z-index':999999}}).injectInside(document.body);
            this.spinnerImage = new Element('img', {'id': 'spinnerImage','src':this.options.images+'spin1.png'}).injectInside(this.spinnerBox);                                        
        }
        else
        {            
            this.spinnerBox = $('spinnerBox');   
            this.spinnerImage =  $('spinnerImage'); 
            this.init = true;
        }
              
		if (this.options.initialize) 
		{
		    this.options.initialize.call(this);
		}
	},
    start:function(parent,position,offsetX,offsetY)
    {
        this.loadingFrame = 1;                                        
        var coords = parent.getCoordinates(); 
        var size = this.spinnerBox.getSize().size;
        var top = coords.top + coords.height/2 - size.y/2 + offsetY;
        var left = coords.left + coords.width/2 - size.x/2 + offsetX;
        this.spinnerBox.setStyles({'top':top,'left':left,'visibility':'visible'});        
        this.isAnimating = this.animate.periodical(75,this);	    
    },
    animate:function()
    {            
        this.spinnerImage.src = this.options.images+'spin'+this.loadingFrame+'.png';    
        this.loadingFrame++;
        if (this.loadingFrame > 12)
        {
            this.loadingFrame = 1;
        }    
    },
    stop:function()
    {
        $clear(this.isAnimating);
        this.isAnimating = 0;
        this.spinnerBox.setStyle('visibility','hidden');
    }       	
});

Spinner.implement(new Options);