var fillup = new Class({
	
	Implements: [Options, Events],
	options: {
		imageWidth: 1280,
		imageHeight: 853,
		bgElement: ''
	},
	
	initialize: function(options){
		this.setOptions(options);

		var initialWidth = this.options.imageWidth;
		var initialHeight = this.options.imageHeight;
		var ratio = initialWidth/initialHeight;
		
		//inital resize
		this.doIt(initialWidth,initialHeight,ratio);
		
		window.addEvent('resize',function(){
			this.doIt(initialWidth,initialHeight,ratio)
		}.bind(this));

	},
	
	doIt: function(initialWidth,initialHeight,ratio) {
		
		//get browser window size
		var browserSize = window.getSize();
		var browserWidth = browserSize.x;
		var browserHeight = browserSize.y;
		
		//browser is smaller than original image width AND height
		if ((browserWidth <= initialWidth)&&(browserHeight <= initialHeight)) {
			$(this.options.bgElement).setStyle('width',initialWidth);
			$(this.options.bgElement).setStyle('height',initialHeight);
		} else {
		//reaches here if at least one dimension is larger than original image

			//calculate largest difference
			var horzDiff = browserWidth-initialWidth;
			var vertDiff = browserHeight-initialHeight;
			
			if (horzDiff > vertDiff) {
				var newWidth = browserWidth;
				var newHeight = newWidth/ratio;
			} else {
				var newHeight = browserHeight;
				var newWidth = newHeight*ratio;
			}
			
			$(this.options.bgElement).setStyle('width',newWidth);
			$(this.options.bgElement).setStyle('height',newHeight);
		
		}		
		
	}
		
		
});