window.onload=prepareIncreaseArea;

function prepareIncreaseArea() {
	//starting with checks to make sure this degrades gracefully and doesnt go nuts if javascript is not enabled or something
	if(!document.getElementById) return false;
	if(!document.getElementsByTagName) return false;
	if(!document.getElementById('container')) return false;
	if(!document.getElementById('wholePage')) return false;
	
	//gets pre-established left border and creates div we will be putting buttons into
	var container = document.getElementById('container');
	var content = document.getElementById('wholePage');
	var new_div = document.createElement('div');
		container.insertBefore(new_div, content);
		new_div.id = "txt_buttons";
	
	//creates list (ul) that buttons will be in, appends to previously created div
	var button_list = document.createElement('ul');
		new_div.appendChild(button_list);
	
	//creates li elements and appends to ul
	var increase_li = document.createElement('li');
		increase_li.id = "increase";
		button_list.appendChild(increase_li);
	
	var decrease_li = document.createElement('li');
		decrease_li.id = "decrease";
		insertAfter(decrease_li, increase_li);
	
	//creates anchors and appends to li elements
	var increase_a = document.createElement('a');
		increase_a.href = "javascript: increaseFontSize();";
		increase_li.appendChild(increase_a);
	
	var decrease_a = document.createElement('a');
		decrease_a.href = "javascript: decreaseFontSize();";
		decrease_li.appendChild(decrease_a);
	
	//creates img that will actually be the buttons and appends to a's
	var increase_img = document.createElement('img');
		increase_img.src = "images/increase_text.gif";
		increase_a.appendChild(increase_img);
		
	var decrease_img = document.createElement('img');
		decrease_img.src = "images/decrease_text.gif";
		decrease_a.appendChild(decrease_img);
			
	/* this is the html we are trying to create in js so that this information does not appear if js is not enabled
	<div id="txt_buttons">
		<ul>
			<li><a href="javascript: increaseFontSize();"><img src="images/increase_text.gif"/></a></li>
			<li><a href="javascript: decreaseFontSize();"><img src="images/decrease_text.gif"/></a></li>
		</ul>
	</div>
	
	*/
}

var min=8;
var max=18;

function increaseFontSize() {
   var p = document.getElementsByTagName('p');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 12;
      }
      if(s!=max) {
         s += 1;
      }
      p[i].style.fontSize = s+"px"
   }
}

function decreaseFontSize() {
   var p = document.getElementsByTagName('p');
   for(i=0;i<p.length;i++) {
      if(p[i].style.fontSize) {
         var s = parseInt(p[i].style.fontSize.replace("px",""));
      } else {
         var s = 12;
      }
      if(s!=min) {
         s -= 1;
      }
      p[i].style.fontSize = s+"px"
   }   
}



 //create function, it expects 2 values.
 function insertAfter(newElement,targetElement) {
	//target is what you want it to go after. Look for this elements parent.
	var parent = targetElement.parentNode;
	//if the parents lastchild is the targetElement...
	if(parent.lastchild == targetElement) {
		//add the newElement after the target element.
		parent.appendChild(newElement);
    } else {
		// else the target has siblings, insert the new element between the target and it's next sibling.
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}