var ByParallax = new Class({

    Implements: Options,
    
    options: {
        container: 'byparallax',
        selector: 'img',
        remote: null,
        onMove: $lambda(true),
        startPosition: [0.5, 0.5],
        devMode: false,
        fxOptions: {
            duration: 500,
            transition: 'linear'
        }
    },

    progress: null,
    container: null,
    layers: null,
    coords_container: null,

    initialize: function(options) {
        
        this.setOptions(options);

        var container = $(this.options.container);
        this.container = container;
        
        var remote = this.options.remote ? $(this.options.remote) : container;
            

        this.layers = container.getElements(this.options.selector);
        this.move(this.options.startPosition, true);
        
        if(this.options.devMode)
        {
            remote.addEvent('click', function(){
                this.addCoords();
            }.bind(this));
        }

        remote.addEvent('mousemove', function(evt) {

            var mouse = {
                x: evt.page.x - remote.getLeft(),
                y: evt.page.y - remote.getTop()
            };

            if (mouse.x < 0 || mouse.x > remote.getWidth() || mouse.y < 0 || mouse.y > remote.getHeight()) return;

            this.progress = {
                x: mouse.x / remote.getWidth(),
                y: mouse.y / remote.getHeight()
            };
            
            if (this.options.onMove(this.progress, mouse)) {
                this.move([this.progress.x, this.progress.y], true);
            }

        }.bind(this));
    },

    move: function(progress, no_anim) {

        this.layers.each(function(layer) {
            var styles = {
                left: progress[0] * (this.container.getWidth() - layer.getWidth()),
                top: progress[1] * (this.container.getHeight() - layer.getHeight())
            };
			
			var morph = layer.get('morph', this.options.fxOptions);
            
			if (!no_anim)
				morph.start(styles);
            else
				morph.set(styles);
        }, this);
    },

    center: function(no_anim) {
        this.move([0.5, 0.5], no_anim);
    },
    
    addCoords: function() {
        
        if(!this.coords_container)
        {
            this.coords_container = new Element('div', {
                styles: {
                    fontFamily: 'monospace',
                    whiteSpace: 'pre',
                    color: '#000000',
                    backgroundColor: '#ffffff',
                    border: '1px solid black'
                }
            });
            
            this.coords_container.inject(this.container, 'after');
        }

        this.coords_container.appendText('[' + Math.round(this.progress.x * 1000) / 1000 + ', ' + Math.round(this.progress.y * 1000) / 1000 + ']\n');
    }
});