/* jquery FLX Boxes v1.20
 * transform containers into rounded boxes
 *
 * TODO:
 *  - fazer modulos por padrão funcionar se tiver um height no .module
 * 		- e.g. no main-container.
 *	- possibilidades:
 *		- mudar o box-model
 *		- checar a altura do elemento inicial e aplicar no inner-6 (altura util)
 *	- remover borda do elemento inicial (conforme configuração).
 *	- problema no h3 que podem existir
 */

/* ATENçÂO: Deve-se começar a tratar pelas divs internas e depois as externas.
 * Isso é importante para quando se trata com boxes com tamanho absoluto e para o IE6 corrigir alturas e larguras
 */


/* FIXME: pensar em 2 casos:
 * O 1o é quando as informações de borda vem de um box pronto css.
 * nesse caso tira-se dele as informações.
 * No segundo caso, esse box não existe.  Então definir de onde tirar a informação.
 * Sugestão para esse segundo caso é que esteja no offset já se precisar, da vai outra opção de corrigir offset ou não.
 * Uma terceira opção é umsar um 2o offset para bordas para poder escolher se quer apenas compensar o offset por transparencia ou borda
 */


/* FIXME:
 *	Dois casos para  a altura:
 *      1- altura setada a partir do height fixo no módulo
 *         nesse caso aprender a lidar com min/max height tb.
 *	2- altura a partir do conteudo.
 *	   conteúdo seta a altura e o resto segue. 
 */

/* FIXME:
 *	Dois casos para o width:
 *	1 - fixo a partir de um width no css ou equivalente.
 *	2 - fixo a partir de uma div pai limitadora.
 *		Nesse caso não da para transferir borda.
 *		E provavelmente nao da para transferir overflow
 */

;(function($) {

$.fn.flxBox = function(options)
{
	var opts = $.extend({}, $.fn.flxBox.defaults, options);
	var suffix = "";
	if (opts.name.length > 0)
		suffix = "-" + opts.name;

	return this.each(function() 
	{
		var $this = $(this);
		//no double boxing		
 		if ($this.data("flxBox")) return;
		originalHeight = $this.innerHeight();
		$this.data("originalHeight", originalHeight);

		/* Not using it anymore, but keeping it around */		
		var orig =
		    { tp: parseInt($this.css("padding-top")        ) || 0
		    , rp: parseInt($this.css("padding-right")      ) || 0
		    , bp: parseInt($this.css("padding-bottom")     ) || 0
		    , lp: parseInt($this.css("padding-left")       ) || 0
		    , tb: parseInt($this.css("border-top-width")   ) || 0
		    , rb: parseInt($this.css("border-right-width") ) || 0
		    , bb: parseInt($this.css("border-bottom-width")) || 0
		    , lb: parseInt($this.css("border-left-width")  ) || 0
		    , tm: parseInt($this.css("margin-top")         ) || 0
		    , rm: parseInt($this.css("margin-right")       ) || 0
		    , bm: parseInt($this.css("margin-bottom")      ) || 0
		    , lm: parseInt($this.css("margin-left")        ) || 0
		    };
		    
		//where the content will be
		var $divContent = $("<div/>")
					.data("flxBox", 1)
					.addClass("module-inner-content" + suffix)
					.addClass("clearfix");

		var $divOthers = $("<div/>").data("flxBox", 1).addClass("module-inner-1" + suffix)
				    .append($("<div/>").data("flxBox", 1).addClass("module-inner-2" + suffix)
					.append($("<div/>").data("flxBox", 1).addClass("module-inner-3" + suffix)
					    .append($("<div/>").data("flxBox", 1).addClass("module-inner-4" + suffix)
						.append($("<div/>").data("flxBox", 1).addClass("module-inner-5" + suffix)
						    .append($("<div/>").data("flxBox", 1).addClass("module-inner-6" + suffix)
							.append($("<div/>").data("flxBox", 1).get(0).appendChild( $divContent.get(0) )
				    ))))));
		//Move every children to the content div
		//without use jquery to preserve other information
		//jquery probably has a way to do this, but needs care.
		//TODO: show a situaiton where this wont work
		/* FIXME: This olny moves DOM Elements.
		 * It will not move loose texts
		 */
		$this.children().each(
			function() {
				$divContent.get(0).appendChild(this);
			}
		);

		//if there is a h3, add the title class
		$divContent.children("h3:first").addClass('module-title' + suffix).addClass('module-title-flxBox' + suffix);
		
		/* Transfer min/max height to divContent as soon as possible
		 * min and max content on outter modules div breaks height in %.
		 */
		if (opts.transferMinMaxHight && 0)
		{
			alert("min: " + $this.css("min-height") + ", max: " + $this.css("max-height") );
		}
		
		/* First decision
		 * Should we transform the current element into the module div or create another one inside it?
		 * if the current element is not a div, a new element will be created.
		 */
		var $divModule = $this;
		if ($this.get(0).tagName.toLowerCase() != 'div' || (opts.createNewElement))
		{
			$divModule = $("<div/>");
			$this.append($divModule);

		}
		//flag this so it wont be double boxed
		$divModule.data("flxBox", 1);

		$divModule.addClass('module' + suffix);
		$divModule.get(0).appendChild( $("<div/>").data("flxBox", 1).addClass('module-float-0' + suffix ).get(0)  );
		$divModule.get(0).appendChild( $("<div/>").data("flxBox", 1).addClass('module-float-1' + suffix ).get(0)  );
		$divModule.get(0).appendChild( $("<div/>").data("flxBox", 1).addClass('module-float-2' + suffix ).get(0)  );
		$divModule.get(0).appendChild( $("<div/>").data("flxBox", 1).addClass('module-float-3' + suffix ).get(0)  );
		$divModule.get(0).appendChild( $("<div/>").data("flxBox", 1).addClass('module-float-4' + suffix ).get(0)  );
		$divModule.get(0).appendChild( $divOthers.get(0) );

		//makes sure it is at least relative
		if ($divModule.css("position") == "static")
			$divModule.css("position", "relative");

		//Note that padding is always transfered with innerHeight()
		if (opts.contentPositionAbsolute)
		{
			$divContent.css("position", "absolute");
			$divModule.newHeight(originalHeight );
			$divContent.newHeight(originalHeight);
			$divContent.css("width","100%");
		}
		$divModule.flxBoxCorrectModuleOffset(opts);
 		$divModule.flxBoxCorrectContent(opts);
	
		/* Not here
		 * Rationally: making a borderboxing on IE7/IE6 which does not support box-sizing here
		 * will limit the grow of the box.
		 * This is desired here, to be able to only create the divs without interfering 
		 * with it
		 */
		//$this.makeBorderBox(options);
		if ($this.get(0).tagName.toLowerCase() == 'div' && !opts.createNewElement)
		{
			if (opts.removeBorder)
			{
				$this.css("border", "0");
				$this.css("border-radius", "0");
				$this.css("-moz-border-radius", "0");
				$this.css("-webkit-border-radius", "0");
				$this.css("-khtml-border-radius", "0");
				$this.css("box-shadow", "none");
				$this.css("-moz-box-shadow", "none");
				$this.css("-webkit-box-shadow", "none");
			}
			/* FIXME: probably not here the best place */
			$this.css("padding", 0);
			
			if (opts.transferBackgroundColor)
			{
				$divContent.css("background-color", $this.css("background-color"));
				$this.css("background-color", "transparent");
			}
			if (opts.removeBackgroundColor)
				$divContent.css("background-color", "transparent");
			if (opts.transferBackgroundImage)
			{
				$divContent.css("background-repeat"  , $this.css("background-repeat"));
				$divContent.css("background-position", $this.css("background-position"));
				$divContent.css("background-image"   , $this.css("background-image"));
				$this.css("background-image", "none");
			}
			if (opts.removeBackgroundImage)
				$divContent.css("background-image", "none");
		}

		/* IE6 and nowhere else to correct height bug rounding problem */
		if (!opts.correctModuleOffset && !opts.correctContent)
		{
			$divModule.fixIe6Height(options);
			$divModule.fixIe6Width(options);
		}

		//Some case it helps
		if (opts.fixIe6Overflow && $.browser.msie && parseInt($.browser.version) <= 6)
			$divContent.css("overflow",  "hidden");

		for (var i = 0; i < opts.transferedClasses.length; i++)
			if ($divModule.hasClass( opts.transferedClasses[i] ))
				$divContent.addClass( opts.transferedClasses[i] );

		/* Save the difference between the module height and the 
		 * content heigtht for a possible height change
		 */
		$divModule.data("flxBox-heightDifferece", ( $divModule.newHeight() - $divContent.newHeight() ) );
		//Easier on passing around
		$divModule.data("options", opts);
	});
};



$.fn.flxBoxCorrectContent = function(options)
{
	var opts = $.extend({}, $.fn.flxBox.defaults, options);
	if (!opts.correctContent) return;

	var suffix = "";
	if (!opts.name)
		opts.overflow = false;	
	else if (opts.name.length > 0)
		suffix = "-" + opts.name;

	
	return this.each(function() 
	{
		var $this = $(this);
		//makes sure we dont run it twice
		if ($this.data("correctContent")) return;
		else $this.data("correctContent", 1);

		// thickness of image borders
		var topImageThick    = parseInt($this.find(".module-" + opts.topHeightElement    + suffix).newHeight()) || 0;
		var leftImageThick   = parseInt($this.find(".module-" + opts.leftWidthElement    + suffix).width() )    || 0;
		var rightImageThick  = parseInt($this.find(".module-" + opts.rightWidthElement   + suffix).width() )    || 0;
		var bottomImageThick = parseInt($this.find(".module-" + opts.bottomHeightElement + suffix).newHeight()) || 0;
		var topContentFix    = topImageThick;
		var leftContentFix   = leftImageThick;
		var rightContentFix  = rightImageThick;
		var bottomContentFix = bottomImageThick;
		//make sure they exist and have a value
		if (opts.overflow)
		{
			if (! flx.columns[opts.name].overflow.top   ) flx.columns[opts.name].overflow.top = 0;
			if (! flx.columns[opts.name].overflow.left  ) flx.columns[opts.name].overflow.left = 0;
			if (! flx.columns[opts.name].overflow.right ) flx.columns[opts.name].overflow.right = 0;
			if (! flx.columns[opts.name].overflow.bottom) flx.columns[opts.name].overflow.bottom = 0;
		}

		var $divContent = $this.find(".module-inner-content" + suffix);

		var parentOverflowHidden = 0;
		if ($this.parent().css("overflow") == "hidden")
			parentOverflowHidden = 1;
		
		var top  = parseInt($divContent.css("top")) || 0;
		var left = parseInt($divContent.css("left"))|| 0;
		/* Opera rationale:
		 * For some reason Opera (10 at least), when reseting top,
		 * it acts as the original top was 0, so we need the deslocament
		 */
		if ($.browser.opera && $this.css("position") == "relative")
		{
			top = 0;
			left = 0;
		}
		//Should we recall the space lost due to border image thickness?
		if (! opts.contentRecoverImageWidth)
		{
			topContentFix = 0;
			leftContentFix = 0;
			rightContentFix = 0;
			bottomContentFix = 0;
		}
		if (opts.transferPadding)
		{
			leftContentFix   -= parseInt($this.css("padding-left"))   || 0;
			rightContentFix  -= parseInt($this.css("padding-right"))  || 0;
			topContentFix    -= parseInt($this.css("padding-top"))    || 0;
			bottomContentFix -= parseInt($this.css("padding-bottom")) || 0;
			$this.css("padding",0);
		}
		if (opts.overflow)
		{
			leftContentFix   -= flx.columns[opts.name].overflow.left;
			topContentFix    -= flx.columns[opts.name].overflow.top;
			rightContentFix  -= flx.columns[opts.name].overflow.right;
			bottomContentFix -= flx.columns[opts.name].overflow.bottom;
			//Padding considered
			for (var i = 0; i < opts.paddingVerticalElements.length; i++)
			{
				var element = $this.find(".module-" + opts.paddingVerticalElements[i] + suffix);
				topContentFix += parseInt(element.css("padding-top"))       || 0;
				leftContentFix += parseInt(element.css("padding-left"))     || 0;
				rightContentFix += parseInt(element.css("padding-right"))   || 0;
				bottomContentFix += parseInt(element.css("padding-bottom")) || 0;
			}
			
		}
		if ($this.get(0).tagName.toLowerCase() == 'div' && !opts.createNewElement)
			if (opts.transferBorder && ! parentOverflowHidden)
			{
				leftContentFix   -= parseInt($this.data("border-left-width"))   || 0;
				rightContentFix  -= parseInt($this.data("border-right-width"))  || 0;
				topContentFix    -= parseInt($this.data("border-top-width"))    || 0;
				bottomContentFix -= parseInt($this.data("border-bottom-width")) || 0;
			}

		top -= topContentFix;
		left -= leftContentFix;
		var width = $this.width();
		var height = $this.newHeight();
		//IE6 should get from somewhere else
		if ($.browser.msie && parseInt($.browser.version) <= 6 && $this.get(0).currentStyle.width && $this.get(0).currentStyle.width != "auto")
			width = parseInt($this.get(0).currentStyle.width) || width;
		if (opts.contentPositionAbsolute)
		{
			$divContent.css("position","absolute");
			if (opts.overflow)
			{
// 				if ($.browser.msie && parseInt($.browser.version) <= 6)
// 					$this.flxBox.increaseBoxBottom( 4, $divContent, opts);
				$this.flxBox.increaseBoxRight( rightContentFix + leftContentFix, $divContent, opts);

				var extraWidth = 0;
				if (($.browser.msie && parseInt($.browser.version) <= 7) || $.browser.opera)
					extraWidth = rightImageThick;

				//This is plain wrong
				if ($.browser.opera)
					extraWidth += extraWidth;

				if (opts.transferRightWidth)
					$this.flxBox.increaseBoxRight( rightImageThick + extraWidth, $divContent);
			}
		}
		else
		{
			$divContent.css("position","relative");
			/* Fixing width*/
			//The only way to work on ie7
			// ok = IE8 - Opera - WebKit - FF
			if ( ($.browser.msie && parseInt($.browser.version) == 7) || opts.contentPositionAbsolute )
				$divContent.width( $divContent.width() + rightContentFix + leftContentFix );
			else if ( ($.browser.msie && parseInt($.browser.version) == 6) || !opts.contentPositionAbsolute )
				$divContent.css("margin-right",  "-" + (leftContentFix + rightContentFix )+ "px");
		}
			$divContent.css( "left", left + "px" );
			$divContent.css( "top", top + "px");
			
			
		if (opts.contentPositionAbsolute || opts.makeBorderBox)
		{
			$this.makeBorderBox(options)
			$this.fixIe6Height(options);
			$this.fixIe6Width(options);
		}
	});
}

//This will expand the boxes to correct borders and margins
$.fn.flxBoxCorrectModuleOffset = function (options)
{
	var opts = $.extend({}, $.fn.flxBox.defaults, options);
	if (! opts.correctModuleOffset) return;

	var suffix = "";
	if (opts.name.length > 0)
		suffix = "-" + opts.name;

	return this.each(function()
	{
		var $this = $(this);

		//makes sure we dont run it twice
		if  ($this.data("correctModuleOffset")) return;
		else $this.data("correctModuleOffset", 1);

		//Aqui está certo?
		var $divContent = $this.find(".module-inner-content" + suffix);

		/* Create the overflow if doesnt exist */
		if (! flx.columns[opts.name].overflow.top) flx.columns[opts.name].overflow.top = 0;
		if (! flx.columns[opts.name].overflow.left) flx.columns[opts.name].overflow.left = 0;
		if (! flx.columns[opts.name].overflow.right) flx.columns[opts.name].overflow.right = 0;
		if (! flx.columns[opts.name].overflow.bottom) flx.columns[opts.name].overflow.bottom = 0;

		var parentOverflowHidden = 0;
		if ($this.parent().css("overflow") == "hidden")
			parentOverflowHidden = 1;
		//overflow position
		if (opts.overflow)
			//check if the box resource exists
			if (flx && flx.columns && flx.columns[opts.name] && flx.columns[opts.name].overflow)
			{
				if( !parentOverflowHidden )
				{
					$this.flxBox.increaseBoxLeft  ( flx.columns[opts.name].overflow.left  , $this, opts );
					$this.flxBox.increaseBoxRight ( flx.columns[opts.name].overflow.right , $this, opts );
				}
				
				$this.flxBox.increaseBoxTop   ( flx.columns[opts.name].overflow.top   , $this, opts );
				$this.flxBox.increaseBoxBottom( flx.columns[opts.name].overflow.bottom, $this, opts );
			}
		//Fix borders
		if ($this.get(0).tagName.toLowerCase() == 'div' && !opts.createNewElement)
		{
			if (opts.transferBorder)
			{
				/* here we go again (thanks IE6)
				 * if the width increase if odd, we need to make it even
				 */
				var bl = parseInt($this.css("border-left-width" )) || 0;
				var br = parseInt($this.css("border-right-width")) || 0;
				var bt = parseInt($this.css("border-top-width"))   || 0;
				var bb = parseInt($this.css("border-bottom-width"))|| 0;
				$this.flxBox.increaseBoxTop   ( bt, $this, opts);
				$this.flxBox.increaseBoxBottom( bb, $this, opts);
				if (!parentOverflowHidden)
				{
					$this.flxBox.increaseBoxLeft  ( bl, $this, opts);
					$this.flxBox.increaseBoxRight ( br, $this, opts);
					
				}
				//Save border information before losing it
				$this.data("border-top-width",    bt);
				$this.data("border-left-width",   bl);
				$this.data("border-bottom-width", bb);
				$this.data("border-right-width",  br);

				$this.css("border", "0");
				$this.css("border-radius", "0");
				$this.css("-moz-border-radius", "0");
				$this.css("-webkit-border-radius", "0");
				$this.css("-khtml-border-radius", "0");
				$this.css("box-shadow", "none");
				$this.css("-moz-box-shadow", "none");
				$this.css("-webkit-box-shadow", "none");
			}
			else
				if (opts.removeBorder)
				{
					$this.css("border", "0");
					$this.css("border-radius", "0");
					$this.css("-moz-border-radius", "0");
					$this.css("-webkit-border-radius", "0");
					$this.css("-khtml-border-radius", "0");
					$this.css("box-shadow", "none");
					$this.css("-moz-box-shadow", "none");
					$this.css("-webkit-box-shadow", "none");
				}
		}

		/* Esse cara aumenta ou abaixa o height se for impar.
		 * outra possibilidade para se testar é posicionar o bottom-left e bottom right a partir do top
		 */
		$this.fixIe6Height(options);
		$this.fixIe6Width(options);

		//Only onposition absolute
		if ( 0 && (opts.contentPositionAbsolute || opts.makeBorderBox))
			$this.makeBorderBox(options);

	});
}


//increases the element size to the top
$.fn.flxBox.increaseBoxTop = function(toUp, $this, options)
{
	if (!toUp) return;
	var opts = $.extend({}, $.fn.flxBox.defaults, options);
	var oTop = 0;
	var top = 0;
	/* we need to decide which one to take top or bottom */
	var rule = opts.absolutedVerticalRule;
	
	if (rule == 'auto')
	{
		if ( ($this.css("top") == "auto") && ($this.css("bottom") != "auto") )
			rule = 'bottom';
		else
			rule = 'top';
	}

	oTop = parseInt($this.css(rule)) || 0;
	
	if (rule == 'top')
		top = oTop - toUp;
	else
		top = oTop + toUp;
	
	/* Opera rationale:
	 * For some reason Opera (10 at least), when reseting top,
	 * it acts as the original top was 0, so we need the deslocament
	 */
	if ($.browser.opera)
		top -= oTop;

	$this.css(rule, top + "px");
	$this.flxBox.increaseBoxBottom(toUp, $this, options);
}

//increases the element site to the left
$.fn.flxBox.increaseBoxLeft = function (toLeft, $this, options)
{
	if (!toLeft) return;
	var opts = $.extend({}, $.fn.flxBox.defaults, options);
	var oLeft = 0;
	var left = 0;
	/* we need to decide which one to take top or bottom */
	var rule = opts.absolutedHorizontalRule;
	
	if (rule == 'auto')
	{
		if  ( ($this.css("left") == "auto") && ($this.css("right") != "auto") )
			rule = 'right';
		else
			rule = 'left';
	}

	oLeft = parseInt($this.css(rule)) || 0;
	
	if (rule == 'left')
		left = oLeft - toLeft;
	else
		left = oLeft + toLeft;
	/* Opera rationale:
	 * For some reason Opera (10 at least), when reseting top,
	 * it acts as the original top was 0, so we need the deslocament
	 */
	if ($.browser.opera)
		left -= oLeft;
	$this.css(rule, left + "px");
	$this.flxBox.increaseBoxRight(toLeft, $this, options);
}

$.fn.flxBox.increaseBoxBottom = function ( toBottom, $this, options )
{
	if (!toBottom) return;
	var opts = $.extend({}, $.fn.flxBox.defaults, options);
	var height = $this.newHeight();
	height += toBottom;
	
	if (opts.contentPositionAbsolute)
		$this.newHeight(height);
	else
		$this.flxBox.increaseInner6PaddingBottom(toBottom, $this, opts);
}

$.fn.flxBox.increaseBoxRight = function ( toRight, $this, options )
{
	var opts = $.extend({}, $.fn.flxBox.defaults, options);
	if (!toRight) return;
	var width = $this.width();
	//IE6 should get from somewhere else unless it is NaN
	if ($.browser.msie && parseInt($.browser.version) <= 6)
	{
		csWidth = $this.get(0).currentStyle.width;
		unit = csWidth.substring(csWidth.length-2, csWidth.length);
		if (unit == 'px')
			width = parseInt(csWidth);
	}
	width += toRight;
	if (opts.widthIsSet || opts.contentPositionAbsolute)
		$this.width(width);
	else
	{
		$this.flxBox.increaseInner6PaddingRight(toRight, $this, opts);
	}
}

/* Note that increasint the padding will not help at all if the width is set.
 * it only helps when the width is set by an inner content
 */
$.fn.flxBox.increaseInner6PaddingBottom = function( toBottom, $this, options)
{
	var opts = $.extend({}, $.fn.flxBox.defaults, options);
	var suffix = "";
	if (opts.name.length > 0)
		suffix = "-" + opts.name;
	
	inner6 = $this.find(".module-inner-6" + suffix);
	pad = parseInt(inner6.css("padding-bottom")) || 0;
	pad += toBottom;
	inner6.css("padding-bottom", pad + "px");
}

$.fn.flxBox.increaseInner6PaddingRight = function(toRight, $this, options)
{
	var opts = $.extend({}, $.fn.flxBox.defaults, options);
	var suffix = "";
	if (opts.name.length > 0)
		suffix = "-" + opts.name;
	inner6 = $this.find(".module-inner-6" + suffix);
	pad = parseInt(inner6.css("padding-right")) || 0;
	pad += toRight;
	inner6.css("padding-right", pad + "px");
}


//Only needed for browsers that do not support box-sizing (ie >= 7)
$.fn.flxBox.positionFix = function($this, options)
{
return;
};

/* make an element be CSS box-sizing: border-box
 * for browsers that do not support it
 * e.g. IE6 and IE7
 * TODO: this should be fired whenever its height changes.
 */
$.fn.flxBox.boxSizingBorder = function($this)
{
	if (! $this) return;
	if (! $.browser.msie) return;
	if (parseInt($.browser.version) > 7) return;
	if (! $this.get(0).currentStyle) return; //IE only but we test anyways
	var cssHeight = $this.get(0).currentStyle.height;
	var newHeight = $this.data("newHeight");

// alert("saved Height: " + newHeight + ", css height: " + cssHeight);
	//Come back
	if (newHeight)
	{
		//Deu 2 px de diferença no IE6!!!
		if (newHeight == cssHeight)
		{
			//ok, got a recall without changing parameters
			//reaply the original Css Height (as it could be a % that need to be recalculed
			var origCssHeight = $this.data("cssHeight");
			if (origCssHeight)
				$this.css("height", origCssHeight);	
		}
		else
			$this.data("cssHeight", cssHeight);
	}
	else
		$this.data("cssHeight", cssHeight);
// alert("height: " + $this.newHeight() 
// + ", pd: "	+ ( parseInt($this.css("padding-top"))        || 0 )
// + ", pb: "	+ ( parseInt($this.css("padding-bottom"))     || 0 )
// + ", bp: "	+ ( parseInt($this.css("border-top-width"))   || 0 )
// + ", bb: "	+ ( parseInt($this.css("border-bottom-width"))|| 0 )
// + "\n f:" + ( $this.newHeight() 
// 		- ( parseInt($this.css("padding-top"))        || 0 )
// 		- ( parseInt($this.css("padding-bottom"))     || 0 )
// 		- ( parseInt($this.css("border-top-width"))   || 0 )
// 		- ( parseInt($this.css("border-bottom-width"))|| 0 )
// 		)
// );


	$this.newHeight
		( $this.newHeight() 
		- ( parseInt($this.css("padding-top"))        || 0 )
		- ( parseInt($this.css("padding-bottom"))     || 0 )
		- ( parseInt($this.css("border-top-width"))   || 0 )
		- ( parseInt($this.css("border-bottom-width"))|| 0 )
		);
// alert("height set: " + $this.newHeight());
	$this.data("newHeight", cssHeight);
}


/* IE7 does not understand box-sizing.
 * In box specification, inner-1 usually is height: 100% and border-box model to acomodate it right
 * This seems to not make a difference on IE6, but needs correction on IE7.
 * FIXME:This needs to be flaged right by the config file.
 */
$.fn.makeBorderBox = function(options)
{
	var opts = $.extend({}, $.fn.flxBox.defaults, options);
	var suffix = "";
	if (opts.name.length > 0)
		suffix = "-" + opts.name;

	return this.each(function()
	{
		var $this = $(this);
		for (var i = 0; i < opts.borderBoxElements.length; i++)
		{
// alert("ele: " + ".module-" + opts.borderBoxElements[i] + suffix);
			var element = $this.find(".module-" + opts.borderBoxElements[i] + suffix);
			$this.flxBox.boxSizingBorder(element);
		}
	});
};

//Exported 
$.fn.flxBoxPositionFix = function(options)
{
	return this.each(function() {
		var $this = $(this);
		$this.flxBox.positionFix($this, options);
	});
};

$.fn.newHeight = function(data)
{
	if (data)
	{
// 		alert("newHeight data: " + data);
		return $(this).height(data);
	}

	if ($.browser.msie &&  parseInt($.browser.version) == 6  && $(this).get(0).currentStyle.height)
	{
		cHeight = $(this).get(0).currentStyle.height;
		unit = cHeight.substring(cHeight.length-2, cHeight.length);
		if (unit == 'px')
			return parseInt(cHeight);
	}
	return $(this).height();
};


$.fn.fixIe6Height = function(options)
{
	var opts = $.extend({}, $.fn.flxBox.defaults, options);
	if (! opts.fixIe6HeightRound) return;
	if (! $.browser.msie) return;
	if (parseInt($.browser.version) > 6) return;
	var suffix = "";
	if (opts.name.length > 0)
		suffix = "-" + opts.name;

	return this.each(function() 
	{
		var $this = $(this); //$divModule
		var height = $this.newHeight();

		if (height % 2)
		{
			if (!opts.contentPositionAbsolute)
			{
				/* to avoid fixing a height we add an ie6 correction element 
				 * We do this after the content div, so it is the inner-6 which is growing
				 * not much reasoning around this, but seems right
				 */
				var i6 = $this.find(".module-inner-6" + suffix);
				var pad = parseInt(i6.css("padding-bottom")) || 0;
				if (pad < 2)
				{
					pad ++;
					$this.data("ie6BottomCorrection", 1);
				}
				else
				{
					if ($this.data("ie6BottomCorrection") && $this.data("ie6BottomCorrection") == 0)
					{
						pad++;
						$this.data("ie6BottomCorrection", 1);
					}
					else
					{
						pad--;	
						$this.data("ie6BottomCorrection", 0);
					}
				
				}
				i6.css( "padding-bottom", pad + "px");
			}
			else
			{
				if (opts.ie6HeightFixUp) height++;
				else height --;
				$this.newHeight(height);
				//propagate
				//Only onposition absolute
// 				$this.makeBorderBox(options);
			}
		}
	});
};

$.fn.fixIe6Width = function(options)
{
	var opts = $.extend({}, $.fn.flxBox.defaults, options);

	if (! opts.fixIe6WidthRound) return;
	if (! $.browser.msie) return;
	if (parseInt($.browser.version) > 6) return;

	var suffix = "";
	if (opts.name.length > 0)
		suffix = "-" + opts.name;

	return this.each(function() 
	{
		var $this = $(this); //$divModule
		var csWidth = $this.get(0).currentStyle.width;
		var width = 0;
		var rtWidth = 0;
		if (csWidth.substring(csWidth.length-2, csWidth.length) == 'px')
		{
			width = parseInt(csWidth);
		}
		else
		{
			rtWidth = $this.get(0).runtimeStyle.width;
			if(0)
			alert	( "css: " + $this.css("width")
				+ ", width: " + $this.width()
				+ ", innerWidth: " + $this.innerWidth()
				+ ", outerWidth: " + $this.outerWidth()
				+ ", style: " 	     + $this.get(0).style.width
				+ ", currentStyle: " + csWidth
				+ ", runtimeStyle: " + rtWidth
				+ ", offsetWidth: " + $this.get(0).offsetWidth
				+ ", clientWidth: " + $this.get(0).clientWidth
				+ ", scrollWidth: " + $this.get(0).scrollWidth
				
				);
			//Não da para confiar no width(), innerWidth
			width = parseInt(rtWidth) || $this.width();
		}
		if (width % 2)
		{
			if (!opts.contentPositionAbsolute)
			{
				if (opts.ie6WidthFixType == "auto")
					opts.ie6WidthFixType = "padding";
				if ((opts.ie6WidthFixType == "padding") && (csWidth == "100%" || csWidth == "auto"))					opts.ie6WidthFixType = "margin";
				if (opts.ie6WidthFixType == "padding")
				{
					/* to avoid fixing a width we add an ie6 correction element 
					 * We do this after the content div, so it is the inner-6 which is growing
					 * not much reasoning around this, but seems right
					 * Note that this is no good when width is either 100% or auto.
					 */
					var i6 = $this.find(".module-inner-6" + suffix);
					var pad = parseInt(i6.css("padding-left")) || 0;
	
					if (!pad)
					{
						pad ++;
						$this.data("ie6WidthCorrection", 1);
					}
					else
					{
						if ($this.data("ie6WidthCorrection") && $this.data("ie6WidthCorrection") == 0)
						{
							pad++;
							$this.data("ie6WidthCorrection", 1);
						}
						else
						{
							pad--;	
							$this.data("ie6WidthCorrection", 0);
						}
					}
					i6.css( "padding-left", pad + "px");
				}
				else if (opts.ie6WidthFixType == "margin")
				{
					var margin = parseInt($this.css("margin-left"));
					if ($this.data("ie6WidthCorrection"))
					{
						if ($this.data("ie6WidthCorrection") == 0)
						{
							margin ++;
							$this.data("ie6WidthCorrection", 1)
						}
						else
						{
							if (!margin) 
							{
								margin ++;
							}
							else
							{
								margin --;
								$this.data("ie6WidthCorrection", 0);
							}
						}
					}
					else
					{
						//TODO: add option to choose to wehre to upgrade
						margin++;
						$this.data("ie6WidthCorrection", 1);
					}
					$this.css("margin-left", margin + "px");
				}
			}
			else
			{
				if ($this.data("ie6WidthCorrection"))
				{
					if ($this.data("ie6WidthCorrection") ==  1)
					{
						width --;
						$this.data("ie6WidthCorrection", 0);
					}
					else
					{
						width++;
						$this.data("ie6WidthCorrection", 1);
					}
				}
				else
				{
					if (opts.ie6WidthFixUp)
					{
						width++;
						$this.data("ie6WidthCorrection", 1);
					}
					else
					{
						width --;
						$this.data("ie6WidthCorrection", 0);
					}
				}
				$this.css("width", width + "px");
			}
		}
	});
};

/* this will fail on having module in a child element */
$.fn.flxBoxUpdateHeight = function(height)
{
	return this.each(function() 
	{
		$this = $(this);
		var opts = $this.data("options");
		var suffix = "";
		if (opts.name.length > 0)
			suffix = "-" + opts.name;
		if (!height)
			height = $this.newHeight();
		else
			$this.newHeight(height);
		
		$this.find(".module-inner-content" + suffix).newHeight(height - $this.data("flxBox-heightDifferece"));
	});
}

$.fn.flxBox.defaults =
{ name: ""
, createNewElement: false	//Should create a new element as the module div instead of the current one?
//These are dependent of createNewElement
// createNewElement true
, makeModule100h: true		//make module created div 100% height?
// createNewElement false
, removeBorder: true            //Useful when substituting css stuff like border-radius 
, transferBorder: true		//makes removeBorder true
, transferBackgroundColor: true 	//Transfer background color
, transferBackgroundImage: true
, removeBackgroundColor: true
, removeBackgroundImage: true

, fixHeight: true			//Should apply elements calculated height after transformation?
, overflow: true			//overflow position
, fixIe6Overflow: false			//dont make overflow hidden on IE6
, useWidthInsteadofPadding: false      //This is experimental for right adjustment


//Should we try to fix IE 6 rounding problem?
, fixIe6HeightRound: true
//if we fix IE6 should we add or subtract? true = add
, ie6HeightFixUp: true
//Same fo width
, fixIe6WidthRound: true
, ie6WidthFixUp: true
/* How to fix width in ie6?
 * - padding - Increases padding-left on inner-6
 * - margin  - Increases margin-left on inner-6
 * - auto    - let the plugin choose one
 */
, ie6WidthFixType: "auto"



//shouldnt need this one
, transferRightWidth: false

//For an element already absoluted positioned, which rules should be used to position it?
, absolutedVerticalRule: "auto" //auto, top, bottom
, absolutedHorizontalRule: "auto"//auto, left, right



/* The Content div should be positioned absolute 
 * or relative?
 * 	- absolute is usefull to get pixel by pixel precision 
 * 	  of the css equivalente, but locks up width and height.
 * 	- relative is usefull to let the rendering flow to run loose.
 *	  in this case, everything should be done to preserve height and width: auto
 *	  its also importante to note that under relative, there is a natural padding of the size
 *	  if the rhickness of the border.
 *	FIXME:  When applying Padding to contentRelative, it should count the image too.
 *		So that the real padding should be: 
 *			[Intended Padding] - [image thickness] + offset + simulated border
 *			If the result is <0, it will be 0.
 *			This is the close you can get without changing to absolute.
 *	FIXME: there should be an easier way to detect the css height and width to get this done
 */
, contentPositionAbsolute: false

/* This tells the plugin that the width of the applyed div was set in css */
, widthIsSet: true

//Recover the space lost due to image thickness?
, contentRecoverImageWidth: true

// Whether to processe content correction
, correctContent: true
, correctModuleOffset: true

// Classes that needs to be transfered
, transferedClasses: [ "clearfix", "container" ]

//force ie7/ie6 to make a border box?
, makeBorderBox: false

  //How is the box disposed
, topHeightElement: "float-0"
, leftWidthElement: "float-0"
, bottomHeightElement: "float-3"
, rightWidthElement: "float-3"
, firstContentElement: "inner-1"
, bottomContentElement: "inner-5"
, contentElement: "inner-6"
, topLeftElement: "float-0"
, topRightElement: "float-1"
, bottomLeftElement: "float-2"
, bottomRightElement: "float-3"
, borderBoxElements: ["inner-1" , "inner-6"]	//IE7,6 elements that needs to be conerted to box-sizing: border-box
, paddingVerticalElements: ["inner-6"] 		//Elements that have a vertical paddig that should be considered
};
})(jQuery);