﻿function createGradientTransparentBG() {
	var content = $("#contenu-with-bg");

	if (content != null) {
		// calculate width/height of the box including padding, border and margin
		var bgHeight = content.outerHeight();
		var bgWidth = 780;

		//alert(bgHeight);

		// create absolute background div
		var mainDiv = $("<div id='GradientTransparentBG'>").insertBefore(content);
		mainDiv.css({ position: "absolute", width: bgWidth, height: bgHeight });
		// top bg
		var topBgDiv = $("<div class='topBG'>").appendTo(mainDiv);
		topBgDiv.css({ position: "absolute", top: 0, left: 0, width: bgWidth, height: 52, background: "url(Images/gradient-box-top-bg.png) no-repeat top" });
		// bottom bg
		var bottomBgDiv = $("<div class='botBG'>").appendTo(mainDiv);
		bottomBgDiv.css({ position: "absolute", bottom: 0, left: 0, width: bgWidth, height: 304, background: "url(Images/gradient-box-bottom-bg.png) no-repeat bottom" });
		// middle bg
		var bgDiv = $("<div class='midBG'>").appendTo(mainDiv);
		var bgDivHeight = bgHeight - topBgDiv.height() - bottomBgDiv.height();
		bgDiv.css({ position: "absolute", top: topBgDiv.height(), left: 0, width: bgWidth, height: bgDivHeight, background: "url(Images/gradient-box-bg.png)" });
	}
}
function updateGradientTransparentBG() {
    var bg = $("#GradientTransparentBG");
    var content = $("#contenu-with-bg");

    if (content != null) {
        // calculate width/height of the box including padding, border and margin
        var bgHeight = content.outerHeight();
        var bgWidth = 780;

        //alert(bgHeight);

        // create absolute background div
        var mainDiv = bg;
        mainDiv.css({ position: "absolute", width: bgWidth, height: bgHeight });
        // top bg
        var topBgDiv = bg.find(".topBG");
        topBgDiv.css({ position: "absolute", top: 0, left: 0, width: bgWidth, height: 52, background: "url(Images/gradient-box-top-bg.png) no-repeat top" });
        // bottom bg
        var bottomBgDiv = bg.find(".botBG");
        bottomBgDiv.css({ position: "absolute", bottom: 0, left: 0, width: bgWidth, height: 304, background: "url(Images/gradient-box-bottom-bg.png) no-repeat bottom" });
        // middle bg
        var bgDiv = bg.find(".midBG");
        var bgDivHeight = bgHeight - topBgDiv.height() - bottomBgDiv.height();
        bgDiv.css({ position: "absolute", top: topBgDiv.height(), left: 0, width: bgWidth, height: bgDivHeight, background: "url(Images/gradient-box-bg.png)" });
    }
}
