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

	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

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

/*Element.addMethods({
  getPosition: function(element, overflown){
    overflown=overflown?overflown:[];
    var el=element;var left=0;var top=0;
    while (el !== null) {
      left+=el.offsetLeft?el.offsetLeft:0;top+=el.offsetTop?el.offsetTop:0;el=el.offsetParent;
    }
    overflown.each(function(oel){
      left-=oel.scrollLeft?oel.scrollLeft:0;top-=oel.scrollTop?oel.scrollTop:0;
    });
    return{'x':left,'y':top};
  },
  getCoordinates: function(element, overflown){
    var position=Element.getPosition(element, overflown);
    var obj={'width':element.offsetWidth,'height':element.offsetHeight,'left':position.x,'top':position.y};
    obj.right=obj.left+obj.width;
    obj.bottom=obj.top+obj.height;
    return obj;
  }
});*/

var BackgroundSlider = Class.create({
	setOptions: function(){
    this.options = Object.extend(Object.extend({ }, arguments[0]), arguments[1] || { });
  },

	getOptions: function(){
		return {
			duration: 300,
			wait: 500,
			transition: Effect.Transitions.sinoidal,
			className: false,
			fixHeight: false,
			fixWidth: false,
			id: false,
			padding: {top:0,right:0,bottom:0,left:0},
			onClick: this.setStart.bind(this),
			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');
      this.bg.setAttribute('id','BgSlider_'+new Date().getTime());
      document.body.appendChild(this.bg);
			if(this.options.className){
				this.bg.addClassName(this.options.className);	
			}
		}

		//this.effects = Effect.Move(this.bg, { x: 200, y: 0, mode: 'relative', duration: this.options.duration, transition: this.options.transition });
		
		this.elements.each(function(el,i){
			if(this.options.mouseOver){
				Event.observe(el, 'mouseover', this.move.bind(this,el));
				Event.observe(el, 'mouseout', this.reset.bind(this));
			}
			Event.observe(el, 'click', this.options.onClick.bind(this, el))
			if(el.hasClassName('bgStart')){
				this.set(el);
			}
		},this);
		
		Event.observe(window,'resize',function(){
			this.move(this.startElement);
		}.bind(this));
		
	},
	
	setStart: function(el){
		this.startElement = el;
	},
	
	set: function(el){
    el = el[0];
		this.setStart(el);
    var offset = Element.cumulativeOffset(el);
    var pos = Object.extend({ left: offset[0], top: offset[1] }, Element.getDimensions(el));

		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.setStyle(obj);
	},
	
	reset: function(){
		if(this.options.wait){
			this.timer = window.setTimeout(this.move.bind(this, this.startElement), this.options.wait);
		}
	},
	
	move: function(el){
              if ($('backgroundslider_overlay')) $('backgroundslider_overlay').show();

		clearTimeout(this.timer);
    var offset = Element.cumulativeOffset(el);
    var pos = Object.extend({ left: offset[0], top: offset[1] }, Element.getDimensions(el));

		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.effectObj = new Effect.Move(this.bg, { x: obj.left, y: obj.top, mode: 'absolute', duration: this.options.duration/1000, transition: this.options.transition, afterFinish: function() { if ($('backgroundslider_overlay')) $('backgroundslider_overlay').hide() } });
		
	}

});


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