var DigitalMagic = {
	Initialize: function()
	{
		if ($('space'))
		{
			//Event.observe(window, 'resize', function() { DigitalMagic.Resize(); } );
			//DigitalMagic._generateImage('/asset/01.jpg');
			DigitalMagic.LoadImage('/asset/01.jpg');
			DigitalMagic.Resize();
		}
	},
	
	_imageDimensions: null,
	
	_generateImage: function(sImgSrc)
	{
		var img = new Element('img',{'src':sImgSrc}).setStyle({'visibility':'hidden', 'position':'absolute', 'z-index':'-100'});
		document.body.appendChild(img);
		alert(img.getWidth());
		return img;
	},
	
	GetRatio: function(oImg)
	{
		var pImg = $(oImg);
		
		// TODO create a new hidden element with the same image to grab the sizes from.  And then store it in the memory.
		
		var pWidth = pImg.getWidth();
		var pHeight = pImg.getHeight();
		
		pImg.setStyle({'height': '', 'width': ''});
		
		var fWidth = pImg.getWidth();
		var fHeight = pImg.getHeight();
		
		pImg.setStyle({'height': pHeight + 'px', 'width': pWidth + 'px'});
		
		return (fWidth / fHeight);
	},
	
	Resize: function()
	{
		var featureColumnWrapper = $('featureColumnWrapper');
		var space = $('space');
		var backgroundContainer = $('backgroundImage');

		featureColumnWrapper.setStyle({'display':'none'});
		space.setStyle({'display':'none'});
		backgroundContainer.setStyle({'display':'none'});
		
		var viewportDims = document.viewport.getDimensions();

		var headerHeight = $('headWrapper').getHeight();

		backgroundContainer.setStyle({'display': 'block', 'height': viewportDims.height + 'px', 'width': viewportDims.width + 'px'});
		
		var contentHeight = viewportDims.height - headerHeight;
		
		featureColumnWrapper.setStyle({'display': 'block', 'height': contentHeight + 'px'});

		var featureColumnDims = featureColumnWrapper.getDimensions();

		var backgroundImage = $('backgroundImageTag'); // todo better.
		var backgroundRatio = DigitalMagic.GetRatio(backgroundImage);
		var backgroundContainerRatio = viewportDims.width / viewportDims.height;
		
		if (backgroundRatio > backgroundContainerRatio)
		{
			backgroundImage.setStyle({'width': '', 'height': viewportDims.height + 'px'});
		}
		else
		{
			backgroundImage.setStyle({'width': viewportDims.width + 'px', 'height': ''});
		}
		
		var spaceHeight = viewportDims.height - headerHeight - 40;
		var spaceWidth = viewportDims.width - featureColumnDims.width - 40;
		
		space.setStyle({'display': 'block', height: spaceHeight + 'px', width: spaceWidth + 'px'}); // -> HTMLElement

		var ci = DigitalMagic._currentImage;
		if (ci)
		{
			ci.setStyle({'width': '', 'height': ''});
			var imageAspect = ci.getWidth() / ci.getHeight();
			var containerAspect = space.getWidth() / space.getHeight();
			if (imageAspect > containerAspect)
			{
				ci.setStyle({'width': spaceWidth + 'px', 'height': (spaceWidth / imageAspect) + 'px'});
			}
			else
			{
				ci.setStyle({'height': spaceHeight + 'px', 'width': (spaceHeight * imageAspect) + 'px'});
			}
		}
	},
	
	_currentImage: null,
	
	LoadImage: function(imgSrc)
	{
		var space = $('space');
		var img = new Element('img',{'src': imgSrc});
		DigitalMagic._currentImage = img;
		space.appendChild(img);
	}
}



Event.observe(window, 'load', function() { DigitalMagic.Initialize(); } );