/* jquery FLX Boxes v0.27
 * 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
 */

;(function($) {

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

var db = 0;
if (suffix == "-shades_of_grey") db = 1;

	return this.each(function() {
		var $this = $(this);
		var originalHeight = $this.innerHeight();
		var $firstChild = $this.children();

		$this.children("h3:first").addClass('module-title' + suffix).addClass('module-title-flxBox' + suffix);
		var $kids = $this.children().clone(true);

		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
		    };

		$this.empty();
		$this.addClass('module' + suffix)
			.append('<div class="module-float-0' + suffix + '"></div>')
			.append('<div class="module-float-1' + suffix + '"></div>')
			.append('<div class="module-float-2' + suffix + '"></div>')
			.append('<div class="module-float-3' + suffix + '"></div>')
			.append('<div class="module-float-4' + suffix + '"></div>')
			.append('<div class="module-inner-1' + suffix + '"></div>').children(".module-inner-1" + suffix)
			.append('<div class="module-inner-2' + suffix + '"></div>').children(".module-inner-2" + suffix)
			.append('<div class="module-inner-3' + suffix + '"></div>').children(".module-inner-3" + suffix)
			.append('<div class="module-inner-4' + suffix + '"></div>').children(".module-inner-4" + suffix)
			.append('<div class="module-inner-5' + suffix + '"></div>').children(".module-inner-5" + suffix)
			.append('<div class="module-inner-6' + suffix + '"></div>').children(".module-inner-6" + suffix)
			.append('<div class="module-inner-content' + suffix + '"></div>').children(".module-inner-content" + suffix)
			.append($kids)
			;
//		$this.addClass('module' + suffix)
//			.prepend('<div class="module-float-0' + suffix + '"></div><div class="module-float-1' + suffix + '"></div><div class="module-float-2' + suffix + '"></div><div class="module-float-3' + suffix + '"></div><div class="module-float-4' + suffix + '"></div><div class="module-inner-1' + suffix + '"><div class="module-inner-2' + suffix + '"><div class="module-inner-3' + suffix + '"><div class="module-inner-4' + suffix + '"><div class="module-inner-5' + suffix + '"><div class="module-inner-6' + suffix + '"><div class="module-inner-content' + suffix + '">');
		//$this.append('oi</div></div></div></div></div></div></div>');




		if ($this.css("position") == "static")
			$this.css("position", "relative");
    
		if (opts.fixIe6Overflow && $.browser.msie && parseInt($.browser.version) <= 6)
			$this.find(".module-inner-6" + suffix).css("overflow",  "hidden");

		var topPadding    = parseInt($this.find(".module-" + opts.topHeightElement + suffix).css("height")) || 0;
		var bottomPadding = parseInt($this.find(".module-" + opts.bottomHeightElement + suffix).css("height")) || 0;
		var leftPadding   = parseInt($this.find(".module-" + opts.leftWidthElement + suffix).css("width")) || 0;
		var rightPadding  = parseInt($this.find(".module-" + opts.rightWidthElement + suffix).css("width")) || 0;

		var topBorder, leftBorder, rightBorder, bottomBorder;
		if (opts.removeBorder)
		{
			topBorder    = parseInt($this.css("border-top-width"))    || 0;
			bottomBorder = parseInt($this.css("border-bottom-width")) || 0;
			leftBorder   = parseInt($this.css("border-left-width"))   || 0;
			rightBorder  = parseInt($this.css("border-right-width"))  || 0;
			topPadding    -= topBorder;
			bottomPadding -= bottomBorder;
			leftPadding   -= leftBorder;
			rightPadding  -= rightBorder;
			$this.css("border", "0");
		}

		if (opts.fixHeight)
			$this.height( originalHeight );

		//Arruma o o deslocamento imposto pela imagem a esquerda e topo
		//O elemento original deve impor seu proprio padding
		//tem de levar em consideração width e height tb para compensar, mas ainda nao é muito importante
		if (opts.fixContentPosition)
		{
			$this.find(".module-inner-content" + suffix).css("top",  "-" + topPadding  + "px");
			$this.find(".module-inner-content" + suffix).css("height",  "100%");
			$this.find(".module-inner-content" + suffix).css("margin-left", "-" + leftPadding + "px");
			$this.find(".module-inner-content" + suffix).css("margin-right",  "-" + rightPadding + "px");
			//$this.find(".module-inner-content" + suffix).css("margin-bottom",  "-" + (bottomPadding + topPadding) + "px");
$this.find(".module-inner-content" + suffix).css("margin-bottom",  "-" + bottomPadding + "px");

			$this.find(".module-inner-content" + suffix).css("position",  "relative");
		}
		
		//transfer padding if it is greater than needed
		if (opts.transferPadding)
		{
			var pt = parseInt( $this.css("padding-top") );
			var pb = parseInt( $this.css("padding-bottom") );
			var pr = parseInt( $this.css("padding-right") );
			var pl = parseInt( $this.css("padding-left") );
//if (db) alert ("padding bottom original: " + pb + "\n padding por causa da imagem: " + bottomPadding);
			if ( pt > topPadding)
				pt -= topPadding;

			// A lógica é, se o padding original for maior, que a largura da borda,
			// diminuimos a largura da borda pra compensar.
			// e o contratio?
			if ( pb > bottomPadding)
				pb -= bottomPadding;

			if ( pr > rightPadding)
				pr -= rightPadding;
			if ( pl > leftPadding)
				pl -= leftPadding;

			$this.find(".module-inner-content" + suffix).css("padding-top", pt + "px");
			$this.find(".module-inner-content" + suffix).css("padding-bottom", pb + "px");
			$this.find(".module-inner-content" + suffix).css("padding-right", pr + "px");
			$this.find(".module-inner-content" + suffix).css("padding-left", pl + "px");

			$this.css("padding", 0);
		}

		if (opts.transferBackgroundColor)
		{
			$this.find(".module-inner-6" + suffix).css("background-color", $this.css("background-color"));
			$this.css("background-color", "transparent");
		}

		if (opts.transferBackgroundImage)
		{
			$this.find(".module-inner-content" + suffix).css("background-repeat", $this.css("background-repeat"));
			$this.find(".module-inner-content" + suffix).css("background-position", $this.css("background-position"));
			$this.find(".module-inner-content" + suffix).css("background-image", $this.css("background-image"));
			$this.css("background-image", "none");
		}

		$this.flxBox.positionFix($this, opts);
	});
};

//Only needed for browsers that do not support box-sizing (ie >= 7)
$.fn.flxBox.positionFix = function($this, options)
{
	//makes sure we dont run it twice
	if ($this.data("flag"))
	    return
	else
	    $this.data("flag", 1);
    	
	var opts = $.extend({}, $.fn.flxBox.defaults, options);
	var suffix = "";
	if (opts.name.length > 0)
		suffix = "-" + opts.name;
	//Note that css(height) and height are not the same thing on ie6
	//probably something to do with position absolute
	//note that this might break if height is not in px
	//but as we define this in the css, make sure it is always px

	var ie6Height = 0;
	var ie6Width = 0;

	//overflow position
	if (opts.overflow)
	{
		//check if the box resource exists
		if (flx && flx.columns && flx.columns[opts.name] && flx.columns[opts.name].overflow)
		{
			var oTop = 0;
			var oLeft = 0;
			var top = 0;
			var left = 0;
			var height = $this.height();
			var width = $this.width();

			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;

			if ($this.css("top") != "auto")
			    oTop = parseInt($this.css("top"));
			if ($this.css("left") != "auto")
			    oLeft = parseInt($this.css("left"));


			width += flx.columns[opts.name].overflow.left + flx.columns[opts.name].overflow.right;
			if (opts.removeBorder)
			{
				width -= parseInt($this.css("border-right-width")) - parseInt($this.css("border-left-width")) -1 ;
				if ($.browser.opera && parseInt($.browser.version) == 10 || $.browser.msie && parseInt($.browser.version) <= 6 )
				    width --;

			}

			top = oTop - flx.columns[opts.name].overflow.top;
			height += flx.columns[opts.name].overflow.top + flx.columns[opts.name].overflow.bottom;
			left = oLeft - flx.columns[opts.name].overflow.left;

			//1px rounding bug avoidance
			if ($.browser.msie && parseInt($.browser.version) <= 6)
			{
			    if (height % 2)
			    {
					height--;
					ie6Height=1;
			    }
			    if (width % 2)
			    {
					width--;
					ieWidth=1;
			    }
			}

			/* 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;
				left -= oLeft;
			}

			if (flx.columns[opts.name].overflow.top != 0)
				$this.css("top", top + "px" );
			if (flx.columns[opts.name].overflow.left != 0)
				$this.css("left", left + "px" );
			if (flx.columns[opts.name].overflow.right != 0)
				$this.width(width);
			if (flx.columns[opts.name].overflow.bottom != 0)
				$this.height(height);
		}
	}

	var topCssHeight    = parseInt($this.find(".module-" + opts.topHeightElement + suffix).css("height"));
	var bottomCssHeight = parseInt($this.find(".module-" + opts.bottomHeightElement + suffix).css("height"));
	var bottomHeight    = $this.find(".module-" + opts.bottomHeightElement + suffix).height();
	var rightWidth      = $this.find(".module-" + opts.rightWidthElement + suffix).width();
	var newHeight       = $this.height() - topCssHeight - bottomCssHeight;

	//Corrige caso 7 (height no .module)
	if ($.browser.msie && parseInt($.browser.version) <= 7)
	{
	    if (parseInt($.browser.version) <= 6 && newHeight % 2) //1px rounding bug avoidance
		if (ie6Height)
		    newHeight++;
		else
		    newHeight--;
	    $this.find(".module-" + opts.firstContentElement + suffix).height( newHeight );
	}

	// arruma erro de arredondamento no ie6
	// aqui não da pra usar height do css
	if ($.browser.msie && parseInt($.browser.version) <= 6)
	{
		if ( $this.children(".module-" + opts.bottomLeftElement + suffix).get(0) )
			$this.children(".module-" + opts.bottomLeftElement + suffix)
				.get(0).style.top = $this.height() - bottomCssHeight;
		if ( $this.children(".module-" + opts.bottomRightElement + suffix).get(0) )
			$this.children(".module-" + opts.bottomRightElement + suffix)
				.get(0).style.top = $this.height() - bottomCssHeight;
		if ( $this.children(".module-" + opts.topRightElement + suffix).get(0) )
			$this.children(".module-" + opts.topRightElement + suffix)
				.get(0).style.left = $this.width() - rightWidth;
		if ( $this.children(".module-" + opts.bottomRightElement + suffix).get(0) )
			$this.children(".module-" + opts.bottomRightElement + suffix)
				.get(0).style.left = $this.width() - rightWidth;

		//Xunxo para compensar a comida de 1px do DD_belatedPNG
		//ajusta o inner-5 na posicao certa
		if ( 
		    (!(flx && flx.columns && flx.columns[opts.name] && ( typeof(flx.columns[opts.name].fixDDerror) != "undefined" )) && (opts.fixDDerror))
		    || (flx && flx.columns && flx.columns[opts.name] && flx.columns[opts.name].fixDDerror)
		   )
		{
		    var b5 = parseInt($this.find(".module-" + opts.bottomContentElement + suffix).css("bottom"));
		    $this.find(".module-" + opts.bottomContentElement + suffix).css("bottom", (b5 + 1) + "px");
		    //e compensa no inner-6
		    var t6 = parseInt($this.find(".module-" + opts.contentElement + suffix).css("top"));
		    $this.find(".module-" + opts.contentElement + suffix).css("top", (t6 + 1) + "px");
		}
	}
};

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


$.fn.flxBox.defaults = 
{  name: ""
, removeBorder: true            	//Useful when substituting css stuff like border-radius
, transferPadding: true         	//Move padding to the inner element
, transferBackgroundColor: true 	//Transfer background color
, transferBackgroundImage: true
, fixHeight: true			//Should apply elements calculated height after transformation?
, fixContentPosition: true		//Should fix the position of the replaced content ?
, fixDDerror: false			//Fix DD_BelatedPNG 1px error
, overflow: true			//overflow position
, fixIe6Overflow: false			//dont make overflow hidden on IE6

  //In case we have a different box
, 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"
};
})(jQuery);