function IncResize()

{

	this.content;

	this.top;

	this.middle;

	this.middleContainer;

	this.bottom;

	this.footer;

	this.minTopBottomHeight;

	this.ratio;

	this.preMiddleSizeFunc;

	this.postMiddleSizeFunc;

	this.init = function(contantId, topId, middleId, bottomId, footerId, minTopBottomHeight, ratio, preMiddleSizeFunc, postMiddleSizeFunc)

	{

		this.content = $('#' + contantId);

		if (topId != null) {

			this.top = $('#' + topId); 			

		}

		this.middle = $('#' + middleId); 

		this.middleContainer = $(this.middle).parent();

		if (bottomId != null) {

			this.bottom = $('#' + bottomId);

		}

		this.footer =  $('#' + footerId);

		this.minTopBottomHeight = minTopBottomHeight;

		this.ratio = ratio;

		this.preMiddleSizeFunc = preMiddleSizeFunc;

		this.postMiddleSizeFunc = postMiddleSizeFunc;

		$(window).resize(this.resizeElements);

		window.onorientationchange = function() {

			incResize.resizeElements();

		}

	};

	this.resizeElements = function()

	{

		var self = incResize;

		// Compute maximun middle element height

		var heightForTopMiddleBotom = $(self.content).height() - $(self.footer).height() - 70;

		var maxMiddleHeight = heightForTopMiddleBotom - self.minTopBottomHeight * 2;

		// Get the middle element parent width nad test if it is not to big (to let place for top and bottom without adding scroll bars)

		var middleRatio = 1 / self.ratio;

		var newMiddleWidth = $(self.middleContainer).width();

		var newMiddleHeight = newMiddleWidth * middleRatio;

		/*

		if (newMiddleHeight > maxMiddleHeight) {

			newMiddleHeight = maxMiddleHeight;

			newMiddleWidth = newMiddleHeight * 1 / middleRatio;

		}

		*/

		// Pre register the middle element size change

		if (self.preMiddleSizeFunc !== undefined && self.preMiddleSizeFunc !== null) {

			self.preMiddleSizeFunc(newMiddleWidth, newMiddleHeight);

		}

		// Change middle element size and the height of its parent

		$(self.middle).attr('width', newMiddleWidth);

		$(self.middle).attr('height', newMiddleHeight);

		$(self.middleContainer).attr('width', newMiddleWidth);

		$(self.middleContainer).attr('height', newMiddleHeight);

		// Change children size of the middle element

		var children = $(self.middle).children();

		if (children.length > 0) {

			children.attr('width', newMiddleWidth);

			children.attr('height', newMiddleHeight);

		}

		// Post register the middle element size change

		if (self.postMiddleSizeFunc !== undefined && self.postMiddleSizeFunc !== null) {

			self.postMiddleSizeFunc(newMiddleWidth, newMiddleHeight);

		}

		// Change top and bottom heights

		if (this.top != undefined && this.bottom != undefined) {

			// Get the full height and compute heigth for top and bottom

			var remainingHeight = $(self.content).height() - $(self.footer).height() - newMiddleHeight - 70;

			var newOtherHeight = remainingHeight / 2.0;

			if (newOtherHeight < self.minTopBottomHeight) {

				newOtherHeight = self.minTopBottomHeight;

			}

			$(self.top).css({"height" : +newOtherHeight+'px', "lineHeight" : +newOtherHeight+'px'});

			$(self.bottom).css({"height" : +newOtherHeight+'px', "lineHeight" : +newOtherHeight+'px'});					

		}

	}

}

var incResize = new IncResize();