/**************************************************************

	Script		: Background Slider
	Version		: 1.1
	Authors		: Samuel Birch
	Desc		: Slides a layer to a given elements position and dimensions.
	Licence		: Open Source MIT Licence

**************************************************************/

var BackgroundSlider = new Class({

    getOptions: function() {
        return {
            duration: 300,
            wait: 500,
            transition: Fx.Transitions.Sine,
            className: false,
            fixHeight: false,
            fixWidth: false,
            id: false,
            padding: { top: 0, right: 0, bottom: 0, left: 0 },
            onClick: this.setStart,
            mouseOver: true
        };
    },

    initialize: function(elements, options) {
        this.setOptions(this.getOptions());
        this.setOptions(options);
        this.elements = $$(elements);
        this.timer = 0;

        if (this.options.id) {
            this.bg = $(this.options.id);
        } else {
            this.bg = new Element('div').setProperty('id', 'BgSlider_' + new Date().getTime()).injectInside(document.body);
            if (this.options.className) {
                this.bg.addClass(this.options.className);
            }
        }

        this.effects = new Fx.Morph(this.bg, { duration: this.options.duration, transition: this.options.transition });

        this.elements.each(function(el, i) {
            if (this.options.mouseOver) {
                el.addEvent('mouseover', this.move.bind(this, el));
                el.addEvent('mouseout', this.reset.bind(this));
            }
            el.addEvent('click', this.options.onClick.bind(this, el))
            if (el.hasClass('bgStart')) {
                this.set(el);
            }
        }, this);

        window.addEvent('resize', function() {
            this.move(this.startElement);
        } .bind(this));

    },

    setStart: function(el) {
        this.startElement = el;
    },

    set: function(el) {
        this.setStart(el);
        var pos = el.getCoordinates();

        if (this.options.id) {
            this.options.padding.top = this.bg.getStyle('paddingTop').toInt();
            this.options.padding.right = this.bg.getStyle('paddingRight').toInt();
            this.options.padding.bottom = this.bg.getStyle('paddingBottom').toInt();
            this.options.padding.left = this.bg.getStyle('paddingLeft').toInt();
            this.bg.setStyle('padding', '0px');
        }

        var obj = {};
        obj.top = (pos.top - this.options.padding.top) + 'px';
        obj.left = (pos.left - this.options.padding.left) + 'px';
        if (!this.options.fixHeight) { obj.height = (pos.height + this.options.padding.top + this.options.padding.bottom) + 'px' };
        if (!this.options.fixWidth) { obj.width = (pos.width + this.options.padding.left + this.options.padding.right) + 'px' };

        this.bg.setStyles(obj);
    },

    reset: function() {
        if (this.options.wait) {
            this.timer = this.move.delay(this.options.wait, this, this.startElement);
        }
    },

    move: function(el) {
        $clear(this.timer);
        var pos = el.getCoordinates();

        //this.effects.stop();

        var obj = {};
        obj.top = pos.top - this.options.padding.top;
        obj.left = pos.left - this.options.padding.left;
        if (!this.options.fixHeight) { obj.height = pos.height + this.options.padding.top + this.options.padding.bottom };
        if (!this.options.fixWidth) { obj.width = pos.width + this.options.padding.left + this.options.padding.right };

        this.effects.start(obj);

    }

});
BackgroundSlider.implement(new Options);
BackgroundSlider.implement(new Events);

/*************************************************************/