// Renders the magnifier tool
function renderMagTool() {

	magnifierTool = document.getElementById("magnifier-tool");
	
	// Because of the way the templates are built, duplication of the 'maginfier-tool' div 
	// can occur. To get around this, we check that the 'magtool-small' li doesn't already exist.
	magToolExists = document.getElementById("magtool-small")!=null;
	
	//alert(magToolExists)
	
	// create the magnifier tool if there's a div for it
	if (magnifierTool && !magToolExists) {
		magToolList = document.createElement("ul");
		magToolList.setAttribute("title", "Change the size of the font on the page");
		
		btnSmall = document.createElement("li");
		btnSmall.setAttribute("id", "magtool-small");
		
		btnMedium = document.createElement("li");
		btnMedium.setAttribute("id", "magtool-medium");
		
		btnLarge = document.createElement("li");
		btnLarge.setAttribute("id", "magtool-large");
		
		// check for a cookie and set the magnifier tool accordingly
	    var x = readCookie('magtoolCookie');
		if (x) {
		    
		    btnSmall.innerHTML = '<img src="/library/images/magnifier-tool/btn-magtool-small-off.gif" alt="Font size small" title="Font size small"" />';
		    btnMedium.innerHTML = '<img src="/library/images/magnifier-tool/btn-magtool-medium-off.gif" alt="Font size medium" title="Font size medium" />';
		    btnLarge.innerHTML = '<img src="/library/images/magnifier-tool/btn-magtool-large-off.gif" alt="Font size large" title="Font size large" />';
		    
		    if ( x=='small' ) {
		        btnSmall.childNodes[0].src = '/library/images/magnifier-tool/btn-magtool-small-on.gif';
		        document.body.style.fontSize = "70%";
		    }
		    if ( x=='medium' ) {
		        btnMedium.childNodes[0].src = '/library/images/magnifier-tool/btn-magtool-medium-on.gif';
		        document.body.style.fontSize = "80%";
		    }
		    if ( x=='large' ) {
		        btnLarge.childNodes[0].src = '/library/images/magnifier-tool/btn-magtool-large-on.gif';
		        document.body.style.fontSize = "90%";
		    }
		} else {
		    // default value for magnifier tool
		    btnSmall.innerHTML = '<img src="/library/images/magnifier-tool/btn-magtool-small-off.gif" alt="small" />';
		    btnMedium.innerHTML = '<img src="/library/images/magnifier-tool/btn-magtool-medium-off.gif" alt="medium" />';
		    btnLarge.innerHTML = '<img src="/library/images/magnifier-tool/btn-magtool-large-off.gif" alt="large" />';
	    }	        

		btnSmall.onclick = function(){
		    toggle("small");
        }
		btnMedium.onclick = function(){
		    toggle("medium");
        }
		btnLarge.onclick = function(){
		    toggle("large");
        }
		
		magToolList.appendChild(btnSmall);
		magToolList.appendChild(btnMedium);
		magToolList.appendChild(btnLarge);
		
		var magToolInstruct = document.createElement("p");
		magToolInstruct.innerHTML = 'Change text size:';
		magnifierTool.appendChild(magToolList);
		magnifierTool.appendChild(magToolInstruct);		
	}
}

//toggles magnifier tool between font sizes and sets cookie
function toggle(btn) {

	btnSmall.childNodes[0].src = '/library/images/magnifier-tool/btn-magtool-small-off.gif';
	btnMedium.childNodes[0].src = '/library/images/magnifier-tool/btn-magtool-medium-off.gif';
	btnLarge.childNodes[0].src = '/library/images/magnifier-tool/btn-magtool-large-off.gif';
	
	var btnLive = document.getElementById("magtool-"+btn);
		
	btnLive.childNodes[0].src = '/library/images/magnifier-tool/btn-magtool-'+btn+'-on.gif';
	btnLive.childNodes[0].alt = btn;
		
	if (btn == "large") {
		document.body.style.fontSize = "90%";
	} else if (btn == "medium") {
		document.body.style.fontSize = "80%";
	} else {
		document.body.style.fontSize = "70%";
	}
	
	document.cookie = 'magtoolCookie='+btn+'; expires=Fri, 31 Dec 2010 00:00:00 UTC; path=/';
}
	
// reads the cookie
function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
	    var c = ca[i];
	    while (c.charAt(0)==' ') c = c.substring(1,c.length);
	    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

renderMagTool();