// JavaScript Document




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



	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.sineInOut,

			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(), 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.Styles(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);