/* 
 * EXAMPLES:
 * $("body);$("div:first").before and $("#changeFontSize").css("position", "absolute").css("top", "0").css("right", "0")
 *    creates [-a a a+] box at the top right corner with no changes in the page design.
 * $("#menu");$("li:first").before and $("#changeFontSize").css("position", "relative")
 *    creates [-a a a+] box at the top of a vertical menu.
 * $("#menu);$("li:last").after y $("#changeFontSize").css("position", "relative")
 *    creates [-a a a+] box at the bottom of a vertical menu.
 * OPTIONS:
 * Edit first variable values and IDENTIFIERS, change, add and/or delete css("...","...") format tags to change 
 *    the design of the [-a a a+] box and a links. Save and reload page to see changes.
 * INSTALATION:
 * Needs jQuery and jquery.cookie.js (Klaus Hartl http://plugins.jquery.com/project/Cookie)
 * Before </head> place this lines:
 * <script src="jquery-1.2.6.js" type="text/javascript"></script>
 * <script src="jquery.cookie.html" type="text/javascript"></script>
 * <script src="fontReSizer.html" type="text/javascript"></script>
 *
*/
$(function(){
	var initialFontSize = 14; // initial font-size in px
    var minFontSize = 12; // minimum font-size in px
    var maxFontSize = 30; // maximum font-size in px
    var siteName = "SITE_NAME"; // site name for the cookie
    var eParent = "#menu"; // FATHER IDENTIFIER inside I want the [-a a a+] box (body,div:first,etc.)
    var eSon = "li:first";// SON IDENTIFIER (sibling) to place [-a a a+] box use :first o :last
    $(eSon,(eParent))
	// -a a a+ box will be placed 
	// before or after of the SON
    	.before(/*not change this=>*/"<div id='changeFontSize'><p><a href='#' id='initialFontSize'></a><a href='#' id='decreaseFont'>-a&nbsp;</a><a href='#' id='resetFont'>&nbsp;a&nbsp;</a><a href='#' id='increaseFont'>&nbsp;a+</a></p></div>");
	// [-a a a+] box 
    	$("#changeFontSize")
    		.css("position", "relative")
			.css("top", 0)
			.css("z-index",999)
		// format the [-a a a+] box container
			.css("width","620px")
			.css("height","50px")
			.css("background-color", "#fff")
			.css("text-align","center")
			.css("border", 1)
			.css("border-style", "solid")
			.css("border-color", "#fff");
    // format the a links
    	$("#changeFontSize a")
			.css("display", "inline-block")
			.css("padding", 2)
			.css("margin", "1%")
			.css("width", "30px")
			.css("text-decoration","none")
			.css("text-align","center")
			.css("color","black")
			.css("background-color", "#000")
			.css("color", "#fff")
			.css("border", 1)
			.css("border-style", "solid")
			.css("border-color", "#fff");
    
/* Change the divisor number of the CalcQuotient only if necessary (maybe in IE cases)==================== */
    var screenWidth = screen.availWidth;
	var CalcQuotient = screenWidth / initialFontSize;

    if (screenWidth < 1100) {
        fontHeight = screenWidth / CalcQuotient;//font-size for standard browsers with =< 1024px width screen resolution
    }
    else {
        fontHeight = screenWidth / (CalcQuotient/1.2);//font-size for standard browsers with >= 1024px width screen resolution
    }
    if ($.browser.msie) {
        if (screenWidth < 1100) {
            fontHeight = screenWidth / CalcQuotient;//font-size for ie browsers with =< 1024px width screen resolution
        }
	    else {
    	    fontHeight = screenWidth / (CalcQuotient/1.2);//font-size for ie browsers with >= 1024px width screen resolution
    	}
    }
/* Not change nothing from here down ====================================================================================================================================================================================================== */
    $("body").css("font-size", "62.5%");// stands font-size 10px=1em
    // show text resizing links
	$("a:last",("#changeFontSize")).after("<div></div>").css("clear","both");
    $("#changeFontSize").show();
    var $cookieName = siteName + "-changeFontSize";
    // if exists load saved value, otherwise store it
    	if ($.cookie($cookieName)) {
        	var $getSize = $.cookie($cookieName);
        	$("html").css({
            fontSize: $getSize + ($getSize.indexOf("px") != -1 ? "" : "px")// IE fix for double "pxpx" error
        	}); 
    	}
    	else {
        	$.cookie($cookieName, fontHeight, { expires: 30 });
    	}
    // reset link 
    $("#resetFont").bind("click", function(){
        $("html").css("font-size", fontHeight);
        $.cookie($cookieName, fontHeight, { expires: 30 });
    });
    // increase link
    $("#increaseFont").bind("click", function(){
        var actualFontHeight = $("html").css("font-size");
        var actualFontHeightNum = parseFloat(actualFontHeight, 10);
        var newFontHeight = actualFontHeightNum * 1.1;
        if (newFontHeight < maxFontSize) {
            $("html").css("font-size", newFontHeight);
            $.cookie($cookieName, newFontHeight, { expires: 30 });
        }
        return false;
    });
    // decrease link
    $("#decreaseFont").bind("click", function(){
        var actualFontHeight = $("html").css("font-size");
        var actualFontHeightNum = parseFloat(actualFontHeight, 10);
        var newFontHeight = actualFontHeightNum * 0.9;
        if (newFontHeight > minFontSize) {
            $("html").css("font-size", newFontHeight);
            $.cookie($cookieName, newFontHeight, { expires: 30 });
        }
        return false;
    });
    // invisible link for calculated font-size
    $("#initialFontSize").css("visibility", "hidden").css("font-size", 0).css("padding", 0).css("margin", 0).css("width",0);
    $("#initialFontSize").bind("click", function(){
        var $getSize = $.cookie($cookieName);
        var prevFontHeight = $getSize + ($getSize.indexOf("px") != -1 ? "" : "px");// IE fix for double "pxpx" error
        $("html").css("font-size", prevFontHeight);
        $.cookie($cookieName, prevFontHeight, { expires: 30 });
    });
    if ($.cookie($cookieName)) {
        $("#initialFontSize").click();// get cookie font-size
    }
    else {
        $("#resetFont").click();// reset font-size to resolution width calculated size 
    }
});