Graphical Checkbox - adding a toggle function.

Have the following javascript that enhances all the text boxes on a page to graphical ones. (enhanceCheckboxes).
This works a treat.  Now want to be able to toggle the checkboxes to 'Check all' or 'Uncheck all' or have a certain ones checked or unchecked.  Have been able to do this without the enhanced checkboxes (checkAll, CheckDefault) but am having trouble combining the 'checkAll' and 'CheckDefault' with 'enhanceCheckboxes'.  Any ideas?

Thanks
D

_______________________________________
function enhanceCheckboxes() {

// finds every checkbox on the page
// and converts it to a graphical version
 
  // find all input controls:
  var els=document.getElementsByTagName("input");
 
  // for each input element...
  for(var i=0; i < els.length; i++) {

    if (els[i].type=='checkbox') { // its a checkbox
 
      // hide the original checkbox control:  
      els[i].style.display='none';
     
      // create the graphical alternative:
      var img = document.createElement("img");
     
      // initial state of graphical checkbox
      // is the same as the original checkbox:
       
      if (els[i].checked) {
        img.src="images/checked.gif";
        img.title="Checked";
      }
      else {
        img.src="images/unchecked.gif";
        img.title="Unchecked";
      }
     
      // assign our onclick event
      img.onclick= toggleCheckbox;
     
      // insert the new, clickable image into the DOM
      // infront of the original checkbox:
     
      els[i].parentNode.insertBefore(img, els[i]);
     
    }  
  }
}

function toggleCheckbox() {

// graphical checkbox onclick event handler
 
  // toggle the checkbox state:
 
  if (this.title == "Checked") {

    // toggle the image and title:  
    this.src="images/unchecked.gif";
    this.title="Unchecked";
   
    // update the hidden real checkbox to match the state of the graphical
    // version:
    this.nextSibling.checked=false;
   
  }
  else {
 
    // toggle the image and title:  
    this.src="images/checked.gif";
    this.title="Checked";

    // update the hidden real checkbox to match the state of the graphical
    // version:
    this.nextSibling.checked=true;
   
  }
}
____________________________________________________
function checkAll(f,check){

for(i=0;i<f.elements.length;i++)
 if (f.elements[i].type=='checkbox')
  if (f.elements[i].checked!=check) f.elements[i].checked=check
}

Used with two buttons:
<input type="button" value="Check All" onClick="checkAll(this.form,true)">
<input type="button" value="Uncheck All" onClick="checkAll(this.form,false)">
_____________________________________________________
function CheckDefault(){
document.Form1.box1.checked = true;
document.Form1.box2.checked = false;
document.Form1.box3.checked = false;
document.Form1.box4.checked = true;

Used with:
<input type="button" value="Default" onClick="CheckDefault();">