var BGSizer = Class.create({
	element: null,
	options: {
		minWidth: 640,
		minHeight: 480,
		curdiv: 'bgcurrent',
		curimg: 'img_bgcurrent',
		align: 'center',
		valign: 'top',
		bg1div: 'bg1',
		bg1img: 'img_bg1',
		bg2div: 'bg2',
		bg2img: 'img_bg2'
	},
	non_breakable_fx: null,
	
	initialize: function(element, options) {
		this.element = $(element);
		Object.extend(this.options, options);
		Event.observe(window, 'resize', this.resize.bind(this));
		this.resize();
	  },
	  
	resize: function()
	{
		var ratio = (this.options.minHeight/this.options.minWidth).toFixed(2);
		
		var imagedimension = $(this.options.curimg).getDimensions();
		var browserdimension = document.viewport.getDimensions();
		
		var imagewidth = imagedimension.width;
		var imageheight = imagedimension.height;
		var browserwidth = browserdimension.width;
		var browserheight = browserdimension.height;
		
		if ((browserheight/browserwidth) > ratio)
		{
			this.element.setStyle({
							 width: (browserheight / ratio)+"px",
							 height: (browserheight)+"px"
							 });
			
			$(this.options.curimg).width = (browserheight / ratio);
			$(this.options.curimg).height = browserheight;
			
			$(this.options.bg1img).width = (browserheight / ratio);
			$(this.options.bg1img).height = browserheight;
			$(this.options.bg2img).width = (browserheight / ratio);
			$(this.options.bg2img).height = browserheight;
		}
		else
		{
			this.element.setStyle({
								  width: browserwidth+"px",
								  height: (browserwidth * ratio)+"px"
								  });
			
			$(this.options.curimg).width = browserwidth;
			$(this.options.curimg).height = (browserwidth * ratio);
			
			$(this.options.bg1img).width = browserwidth;
			$(this.options.bg1img).height = (browserwidth * ratio);
			$(this.options.bg2img).width = browserwidth;
			$(this.options.bg2img).height = (browserwidth * ratio);
		}
		
		
		if(this.options.align == "center")
		{
			$(this.options.curdiv).setStyle({
											left: (browserwidth - this.element.getWidth())/2+"px"
											});
			
			$(this.options.bg1div).setStyle({
											left: (browserwidth - this.element.getWidth())/2+"px"
											});
			$(this.options.bg2div).setStyle({
											left: (browserwidth - this.element.getWidth())/2+"px"
											});
		}
		else if(this.options.align == "right")
		{
			$(this.options.curdiv).setStyle({
											left: (browserwidth - this.element.getWidth())+"px"
											});
			
			$(this.options.bg1div).setStyle({
											left: (browserwidth - this.element.getWidth())+"px"
											});
			$(this.options.bg2div).setStyle({
											left: (browserwidth - this.element.getWidth())+"px"
											});
		}
		
		
		if (this.options.valign == "middle")
		{
			$(this.options.curdiv).setStyle({
											top: (browserheight - this.element.getHeight())/2+"px"
											});
			
			$(this.options.bg1div).setStyle({
											top: (browserheight - this.element.getHeight())/2+"px"
											});
			$(this.options.bg2div).setStyle({
											top: (browserheight - this.element.getHeight())/2+"px"
											});
		}
		else if(this.options.valign == "bottom")
		{
			$(this.options.curdiv).setStyle({
											top: (browserheight - this.element.getHeight())+"px"
											});
			
			$(this.options.bg1div).setStyle({
											top: (browserheight - this.element.getHeight())+"px"
											});
			$(this.options.bg2div).setStyle({
											top: (browserheight - this.element.getHeight())+"px"
											});
		}
	},
	
	slideLeft: function(options)
	{
		var v = document.viewport.getDimensions();
	
		$(this.options.bg1div).style.marginLeft="0px";
		$(this.options.bg2div).style.marginLeft=v.width+"px";
		
		
		$(this.options.bg1div).style.display='block';
		$(this.options.bg2div).style.display='block';
		
		that = this;
		
		$(that.options.curimg).src=$(that.options.bg2img).src;
		
		this.non_breakable_fx = new Effect.Parallel([
		  new Effect.Morph(that.options.bg1div, { sync: true, style: 'margin-left: -'+v.width+'px;', transition: Effect.Transitions.linear}), 
		  new Effect.Morph(that.options.bg2div, { sync: true, style: 'margin-left: 0px;', transition: Effect.Transitions.linear}) 
		], { 
		  duration: 1,
		  delay: 0,
		  afterFinish: function()
		  {
			  $(that.options.curimg).src=$(that.options.bg2img).src;
			  $(that.options.bg1img).src=$(that.options.curimg).src;
			  
			  $(that.options.bg1div).style.display='none';
			  $(that.options.bg2div).style.display='none';
			  
			  that.non_breakable_fx = null;
			  
			  if(options.afterFinish != undefined)
			  {
				  options.afterFinish();
			  }
		  }
		});
	},
	
	slideRight: function(options)
	{
		var v = document.viewport.getDimensions();
		
		$(this.options.bg1div).style.marginLeft="0px";
		$(this.options.bg2div).style.marginLeft="-"+v.width+"px";
		
		
		$(this.options.bg1div).style.display='block';
		$(this.options.bg2div).style.display='block';
		
		that = this;
		
		$(that.options.curimg).src=$(that.options.bg2img).src;
		
		this.non_breakable_fx = new Effect.Parallel([
		  new Effect.Morph(that.options.bg1div, { sync: true, style: 'margin-left: '+v.width+'px;', transition: Effect.Transitions.linear}), 
		  new Effect.Morph(that.options.bg2div, { sync: true, style: 'margin-left: 0px;', transition: Effect.Transitions.linear}) 
		], { 
		  duration: 1,
		  delay: 0,
		  afterFinish: function()
		  {
			  $(that.options.curimg).src=$(that.options.bg2img).src;
			  $(that.options.bg1img).src=$(that.options.curimg).src;
			  
			  $(that.options.bg1div).style.display='none';
			  $(that.options.bg2div).style.display='none';
			  
			  that.non_breakable_fx = null;
			  
			  if(options.afterFinish != undefined)
			  {
				  options.afterFinish();
			  }
			  
		  }
		});
	},
	
	nextBild: function(bildpfad, options)
	{
		$(this.options.bg2img).src=bildpfad;
		var m = this.slideLeft.bind(this);
		m(options);
	},
	
	prevBild: function(bildpfad, options)
	{
		$(this.options.bg2img).src=bildpfad;
		var m = this.slideRight.bind(this);
		m(options);
	}
	
	
});