/* TEXT ENLARGEMENT SCRIPT 
//////////////////////////
Written by Stephanie Williams, stephanie.williams@gmx.com
Last Revised October 2009 
*/

/* 
HOW THIS WORKS
//////////////////////////
All of the 'content' text in the CW website is within a table cell (<td></td>) with the id "textmain".  This script works by looking in "textmain" for paragraph tags (<p></p>) and then setting the font-size of the text inside those paragraph tags to stepped percentages above 100%.*

////// The script requires the following HTML block to be placed in the <head> tags of each HTML page: 

    <!-- THIS IS WHERE TEXT ADJUSTER HEAD CONTENT BEGINS -->
    <link rel="stylesheet" type="text/css" href="/css/text_enlarge_styles.css"/>
    
    <noscript>
     <style type="text/css">
     div#textenlarge {
     display: none;
     }
     </style>
    </noscript>
    
    <script type="text/javascript" src="/pages/text_enlarge.js"></script>
    <!-- THIS IS WHERE TEXT ADJUSTER HEAD CONTENT ENDS -->
    
////// The following code must be added to the content area to display the buttons. Please refer to an existing page for placement.

<!-- THIS IS WHERE TEXT ADJUSTER PAGE BUTTONS BEGIN -->

    <div id="textenlarge">
    
    <span class="sizelabel">Enlarge Text</span>
    
    <div id="sizebuttons">
    
    <a id="normal" class="sizelink" onclick="normal();"><img 
    src="/images/button_normal.jpg" alt="normal"/></a><a id="big" class="sizelink" 
    onclick="big();"><img src="/images/button_big.jpg" alt="big"/></a><a 
    id="bigger" class="sizelink" onclick="bigger();"><img 
    src="/images/button_bigger.jpg" alt="bigger"/></a> </div>
    
    </div>
    
    <!-- THIS IS WHERE TEXT ADJUSTER PAGE BUTTONS END -->


TROUBLESHOOTING:
//////////////////////////
If a block of text isn't growing/shrinking with the buttons, the most likely solution will be to put paragraph tags (<p></p>) around that text in your HTML editor. 

IF NO JAVASCRIPT
//////////////////////////
Pages will hide the "Enlarge Text" buttons if the user's browser does not support Javascript or if Javascript has been disabled.

* NOTE
//////////////////////////
There are two exceptions: Two pages in the site are updated very often and have a different layout than the rest. The content areas for these pages contain large amounts of text in tables and lists. These are the Events Calendar page (news/eventscalen.html) and the Job Openings page (careers/openings.html). A special rule has been defined for these pages, since some editors may not automatically insert "p" tags within "li" tags. In the code where the buttons appear on these two pages, the javascript function contains a "td"; i.e., instead of "normal();" or "big();" you'll see "normal('td')" and "big('td');". This means that it's applying the change in font size to table cell tags inside the "textmain" table cell instead of paragraph tags inside the "textmain" table cell.  This will only work for these two pages, since none of the other pages' content is laid out in the same way.

*/


function normal(x) {
var newsize = "100%"; //change this to affect the size this button produces
var x = x;
changesize(newsize,x)
}

function big(x) {
var newsize = "115%"; //change this to affect the size this button produces
var x = x;
changesize(newsize,x)
}

function bigger(x) {
var newsize = "130%"; //change this to affect the size this button produces
var x = x;
changesize(newsize,x);
}

function changesize(newsize,x) {
var textcontainer = document.getElementById("textmain");
var bodytext = textcontainer.getElementsByTagName("p");
var tabletext = textcontainer.getElementsByTagName("td");
if (x == 'td') {
for(var i=0;i<tabletext.length;i++){
tabletext[i].style.fontSize = newsize;
tabletext[i].style.lineHeight = "130%";
}
}
else {
for(var i=0;i<bodytext.length;i++){
bodytext[i].style.fontSize = newsize;
}
}
}

