Button Example 1

<div role="application">
<script type="text/javascript">

  var larger1 = new Button("larger1");
  widgets.add(larger1);
  
  var smaller1 = new Button("smaller1");
  widgets.add(smaller1);
  
  var italic1 = new ButtonToggle("italic1");
  widgets.add(italic1);
  
  var bold1 = new ButtonToggle("bold1");
  widgets.add(bold1);
  
  var stext1 = new StyledText("text1");
  widgets.add(stext1);


  var larger2 = new Button("larger2");
  widgets.add(larger2);
  
  var smaller2 = new Button("smaller2");
  widgets.add(smaller2);
  
  var italic2 = new ButtonToggle("italic2");
  widgets.add(italic2);
  
  var bold2 = new ButtonToggle("bold2");
  widgets.add(bold2);
  
  var stext2 = new StyledText("text2");
  widgets.add(stext2);
  
  
</script>

<h3>Text Sample 1</h3>

<ul class="buttons" title="Text Formating Controls 1">

    <li id="larger1"  
        role="button"
        tabindex="0"
        aria-pressed="false"
        aria-labelledby="larger_label"
        onclick="handleStyledTextFontSizeLarger(stext1)"
    ><span>+</span></li>
            
    <li id="smaller1"  
        role="button"
        tabindex="0"
    aria-pressed="false"
    aria-labelledby="smaller_label"
        onclick="handleStyledTextFontSizeSmaller(stext1)"
    ><span>-</span></li>
          
    <li id="italic1"  
        class="italic"
        role="button"
        tabindex="0"
    aria-pressed="true"
        aria-labelledby="italic_label"
    onclick="handleStyledTextToggleItalic(italic1, stext1 )"
    ><div>i</div></li>
        
    <li id="bold1"  
        role="button"
        tabindex="0"
    aria-pressed="false"
        aria-labelledby="bold_label"
    onclick="handleStyledTextToggleBold(bold1, stext1)"
    ><span>B</span></li>
        
</ul>

<p style="clear: both; height: 1px">&nbsp;</p>

<textarea id="text1" name="text1" class="example">
Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.

Now we are engaged in a great civil war, testing whether that nation, or any nation, so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this.
</textarea>  
<p>&nbsp;</p>

<h3>Text Sample 2</h3>

<ul class="buttons" title="Text Formating Controls 2">

    <li id="larger2"  
        role="button"
        tabindex="0"
    aria-pressed="false"
    aria-labelledby="larger_label"
        onclick="handleStyledTextFontSizeLarger(stext2)"
    ><span>+</span></li>
            
    <li id="smaller2"  
        role="button"
        tabindex="0"
    aria-pressed="false"
    aria-labelledby="smaller_label"
        onclick="handleStyledTextFontSizeSmaller(stext2)"
    ><span>-</span></li>
          
    <li id="italic2"  
        class="italic"
        role="button"
        tabindex="0"
    aria-pressed="true"
        aria-labelledby="italic_label"
    onclick="handleStyledTextToggleItalic(italic2, stext2 )"
    ><div>i</div></li>
        
    <li id="bold2"  
        role="button"
        tabindex="0"
    aria-pressed="false"
        aria-labelledby="bold_label"
    onclick="handleStyledTextToggleBold(bold2, stext2)"
    ><span>B</span></li>
        
</ul>

<p style="clear: both; height: 1px">&nbsp;</p>

<textarea id="text2" name="text2" class="example">
But, in a larger sense, we can not dedicate - we can not consecrate - we can not hallow - this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us - that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion - that we here highly resolve that these dead shall not have died in vain - that this nation, under God, shall have a new birth of freedom - and that government of the people, by the people, for the people, shall not perish from the earth.
</textarea>

<p class="hide" id="bold_label">Bold</p>

<p class="hide" id="italic_label">Italic</p>

<p class="hide" id="larger_label">Font Larger</p>

<p class="hide" id="smaller_label">Font Smaller</p>

</div>

  <script type="text/javascript">
/**
*
* The Globale Variables
*/

if (!window.Node) {
  var Node = {            // If there is no Node object, define one
    ELEMENT_NODE: 1,    // with the following properties and values.
    ATTRIBUTE_NODE: 2,  // Note that these are HTML node types only.
    TEXT_NODE: 3,       // For XML-specific nodes, you need to add
    COMMENT_NODE: 8,    // other constants here.
    DOCUMENT_NODE: 9,
    DOCUMENT_FRAGMENT_NODE: 11
  }
}


var KEY_PAGEUP   = 33;
var KEY_PAGEDOWN = 34;
var KEY_END      = 35;
var KEY_HOME     = 36;

var KEY_LEFT     = 37;
var KEY_UP       = 38;
var KEY_RIGHT    = 39;
var KEY_DOWN     = 40;

var KEY_SPACE    = 32;
var KEY_TAB      = 9;

var KEY_BACKSPACE = 8;
var KEY_DELETE    = 46;
var KEY_ENTER     = 13;
var KEY_INSERT    = 45;
var KEY_ESCAPE    = 27;

var KEY_F1        = 112;
var KEY_F2        = 113;
var KEY_F3        = 114;
var KEY_F4        = 115;
var KEY_F5        = 116;
var KEY_F6        = 117;
var KEY_F7        = 118;
var KEY_F8        = 119;
var KEY_F9        = 120;
var KEY_F10       = 121;

var KEY_M         = 77;

var NS_XHTML = "http://www.w3.org/1999/xhtml"
var NS_STATE = "http://www.w3.org/2005/07/aaa";

// **********************************************
// *
// * Commonly used helper functions
// *
// **********************************************

/**
*
* nextSiblingElement
*
* @contructor
*/

function nextSiblingElement( node ) {

  var next_node = node.nextSibling;

  while( next_node
    && (next_node.nodeType != Node.ELEMENT_NODE) ) {
    next_node = next_node.nextSibling;
  }  // endwhile

  return next_node;
  
}

/**
*
* previousSiblingElement
*
* @param ( node ) node object for which you are looking for the next sibling element node
*
* @return ( node) next sibling or "null"
*/

function previousSiblingElement( node ) {

  var next_node = node.previousSibling;

  while( next_node
    && (next_node.nodeType != Node.ELEMENT_NODE) ) {
    next_node = next_node.previousSibling;
  }  // endwhile

  return next_node;
  
}

/**
*
* firstChildElement
*
* @param ( node ) node object for which you are looking for the first child element node
*
* @return ( node) next sibling or "null"
*/

function firstChildElement( node ) {

  var next_node = node.firstChild;

  while( next_node
    && (next_node.nodeType != Node.ELEMENT_NODE) ) {
    next_node = next_node.nextSibling;
  }  // endwhile


  return next_node;
  
}

/**
*
* getTextContentOfNode
*
* @contructor
*/

function getTextContentOfNode( node ) {

  var next_node = node.firstChild;
  var str = "";

  while( next_node ) {
    
    if( (next_node.nodeType == Node.TEXT_NODE ) &&
      (next_node.length > 0 )
     )
      str += next_node.data;
    
    
    next_node = next_node.nextSibling;
    
  }  // endwhile

  return str;
  
}

/**
*
* setTextContentOfNode
*
* @contructor
*/

function setTextContentOfNode( node, text ) {

   // Generate a new text node with the text value
    var text_node = document.createTextNode(text);
  
    // Remove child nodes to remove text
    while (node.firstChild) {
      node.removeChild(node.firstChild);
    } // while

    // Append new text to the container element
    node.appendChild( text_node );

}
  </script>

  <script type="text/javascript">
// JavaScript Document
// Widgets is a way to initialize widgets in the ARIA examples


function Widgets() {
  this.widgets = new Array();
}

/**
* add is member of the Widgets Object
* and used add a widget ot the list of widgets to be intitialized
* as part of the onload event
* The controls array is the list of controls to initialize
* @member Enable
* @return none
*/

Widgets.prototype.add = function(obj) {
  this.widgets[this.widgets.length] = obj;
}

/**
* init is member of the Widgets Object
* and is called by the onload event to initialize widgets in the web resource
* The controls array is the list of controls to initialize
* @member Enable
* @return none
*/

Widgets.prototype.init = function() {
     
   for(var i = 0; i < this.widgets.length; i++ )
     this.widgets[i].init();
}

var widgets = new Widgets();

function initApp() {
  widgets.init();
}

  </script>

  <script type="text/javascript">
// JavaScript Document
// This module is to abstract browser dependencies
// This makes the widget code cleaner and earier to read by making most browser specfic coding
// in one place rather han scatered throghot documents
var ARIA_STATE = "aria-";

//
// WebBrowser object to abstract accessibility API differences between web standards supporting browsers and Internet Explorer 7.0
//
// The state variable keeps track of current state of checkbox
function WebBrowser() {

}


//
// keyCode is a function to get the keycode from a keypress event
//
// @param ( event object) event is an event object
//
// @return ( keycode )

WebBrowser.prototype.keyCode = function( event ) {
  var e = event || window.event;
  
  return e.keyCode;
}  

/**
* OnClick Event Simulator
*
* @param ( node ) DOM node object
* @return nothing
*/

if( document.createEvent ) {

  // If a web standards based browser implement this function

  WebBrowser.prototype.simulateOnClickEvent = function( node ) {
    // W3C DOM Events way to trigger a "click" event
    var e = document.createEvent('MouseEvents');
    e.initEvent( 'click', true, true );

    node.dispatchEvent( e );

  }

} else {

  // If a Microsoft IE based browser implement this function
  
  WebBrowser.prototype.simulateOnClickEvent = function( node ) {

    var e = document.createEventObject();
    node.fireEvent( "onclick", e );

  } // endif

}

if ( document.addEventListener ) {

  // If a web standards based browser implement this function

  WebBrowser.prototype.setMouseCapture = function( node, clickHandler, downHandler, moveHandler, upHandler ) {

    if( clickHandler )
      document.addEventListener( "click",     clickHandler, true );
    
    if( downHandler )
      document.addEventListener( "mousedown", downHandler,  true );

    if( moveHandler )
      document.addEventListener( "mousemove", moveHandler,  true );
    
    if( upHandler)
      document.addEventListener( "mouseup",   upHandler,    true );

  }

  WebBrowser.prototype.releaseMouseCapture = function( node, clickHandler, downHandler, moveHandler, upHandler ) {

  if( upHandler)
      document.removeEventListener( "mouseup",   upHandler,    true );
      
    if( moveHandler )
      document.removeEventListener( "mousemove", moveHandler,  true );
    
    if( downHandler )
      document.removeEventListener( "mousedown", downHandler,  true );
      
    if( clickHandler )
      document.removeEventListener( "click",     clickHandler, true );

  }

} else {

  // If a Microsoft IE based browser implement this function

  WebBrowser.prototype.setMouseCapture = function( node, clickHandler, downHandler, moveHandler, upHandler ) {

   node.setCapture();
   if( clickHandler)
     node.attachEvent( "onclick", clickHandler );
    
   if( downHandler)
     node.attachEvent( "onmousedown", downHandler );
    
   if( moveHandler )
     node.attachEvent( "onmousemove", moveHandler );
    
   if( upHandler )
     node.attachEvent( "onmouseup", upHandler );

  } // endif

  WebBrowser.prototype.releaseMouseCapture = function( node, clickHandler, downHandler, moveHandler, upHandler ) {

   if( upHandler )
     node.detachEvent( "onmouseup", upHandler );
    
   if( moveHandler )
     node.detachEvent( "onmousemove", moveHandler );
    
   if( downHandler)
     node.detachEvent( "onmousedown", downHandler );
    
   if( clickHandler)
     node.detachEvent( "onclick", clickHandler );
    
     node.releaseCapture();

  } // endif


}




if (typeof document.documentElement.setAttributeNS != 'undefined') {

  WebBrowser.prototype.stopPropagation = function( event ) {
    if( event.stopPropagation )
      event.stopPropagation();
    if( event.preventDefault )
      event.preventDefault();
    return false;
  }

  WebBrowser.prototype.target = function( event ) {
  return event.target;
  }
  
  WebBrowser.prototype.attrName = function( event ) {
  return event.attrName;
  }

  WebBrowser.prototype.testAttrName = function( event , attrName) {
  return event.attrName == attrName;
  }

  WebBrowser.prototype.charCode = function(event) {
     return event.charCode;
  }

  WebBrowser.prototype.calculateOffsetLeft = function( node ) {
  return node.offsetLeft;    
  }
  
  WebBrowser.prototype.calculateOffsetTop = function( node ) {
  return node.offsetTop;    
  }
  
  WebBrowser.prototype.pageX = function( e ) {
    return e.pageX;    
  }
  
  WebBrowser.prototype.pageY = function( e ) {
    return e.pageY;    
  }
  
  WebBrowser.prototype.setNodePosition = function(node,left,top) {
    node.style.left = left+"px";
    node.style.top = top+"px";
  }


} else {

  WebBrowser.prototype.stopPropagation = function( event ) {
    event.cancelBubble = true;
    event.returnValue = false;
    return false;
  }

  WebBrowser.prototype.charCode = function(event) {
    return window.browser.keyCode( event );
  }

  WebBrowser.prototype.target = function( event ) {
    return event.srcElement;
  }

  WebBrowser.prototype.attrName = function( event ) {
  return event.propertyName;
  }
    
  WebBrowser.prototype.testAttrName = function( event , attrName) {
        
        var str = attrName;
        
        if( attrName.indexOf("aria-") >=0 ) {
            str = attrName.replace(/aria-/,"");
            var node = document.getElementById('test1');
            if( node )
               node.innerHTML = str.substr(0,1).toUpperCase();
            var len  = str.length;
            str = "aria" + str.substr(0,1).toUpperCase() + str.substr(1, len);
            var node = document.getElementById('test2');
//            if( node )
//               node.innerHTML = node.innerHTML + "<li>" + str + "</li>";
        }
        
        return event.propertyName == str;
  }
    
  WebBrowser.prototype.calculateOffsetLeft = function(node) {
  var offset = 0;
  
  while( node ) {
    offset += node.offsetLeft;
    node = node.offsetParent;
  }
  
  return offset;    
  }
  
  WebBrowser.prototype.calculateOffsetTop = function(node) {
  var offset = 0;
  
  while( node ) {
    offset = offset + node.offsetTop;
    node = node.offsetParent;
  }
  
  return offset;    
  }
  
  WebBrowser.prototype.pageX = function( e ) {
    return e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft);    
  }
  
  WebBrowser.prototype.pageY = function( e ) {
    return e.clientY + (document.documentElement.scrollTop || document.body.scrollTop);    
  }
  
  WebBrowser.prototype.setNodePosition = function(node,left,top) {
    offsetx = 0;
    offsety = 0;
    nnode = node.offsetParent
    while( nnode ) {
      offsetx = offsetx + nnode.offsetLeft;
      offsety = offsety + nnode.offsetTop;
      nnode = nnode.offsetParent;
    }
    node.style.left = left-offsetx+"px";
    node.style.top = top-offsety+"px";
  }
  
};


if (document.addEventListener) {

     // Functions for W3C Standards compliant implementation of adding event handlers

     WebBrowser.prototype.addEvent = function(elmTarget, sEventName, fCallback) {
       elmTarget.addEventListener(sEventName, fCallback, false);
       returnValue = true;
     };

     WebBrowser.prototype.removeEvent = function(elmTarget, sEventName, fCallback) {
       elmTarget.removeEventListener(sEventName, fCallback, false);
       returnValue = true;
     };

     WebBrowser.prototype.addChangeEvent =  function(elmTarget, fCallback) {
      elmTarget.addEventListener("DOMAttrModified", fCallback, false);
      returnValue = true;
    };

} else {

  if(document.attachEvent) {

     // IE Specific Event handler functions
     WebBrowser.prototype.addEvent = function(elmTarget, sEventName, fCallback) {
       returnValue = elmTarget.attachEvent('on' + sEventName, fCallback);
     };

     WebBrowser.prototype.removeEvent = function(elmTarget, sEventName, fCallback) {
       returnValue = elmTarget.detachEvent('on' + sEventName, fCallback);
     };

    WebBrowser.prototype.addChangeEvent =  function(elmTarget, fCallback) {
      returnValue = elmTarget.attachEvent("onpropertychange", fCallback);
    };

  } else {

     // For browsers that do not support W3C or IE event functions
     WebBrowser.prototype.addEvent = function(elmTarget, sEventName, fCallback) {
       return false;
     };

     WebBrowser.prototype.removeEvent = function(elmTarget, sEventName, fCallback) {
       return false;
     };

     WebBrowser.prototype.addChangeEvent =  function(elmTarget, fCallback) {
       return false;
     };

  }

}

var browser = new WebBrowser();

  </script>

  <script type="text/javascript">
/**
* Button Object
*
* @param ( id ) id of text to style
*
* @return none
*/

function Button( id ) {

   this.id = id;
  
} // end Button

/**
* Button Object
*
* @param ( id ) id of text to style
*
* @return none
*/

Button.prototype.init = function() {

  this.node = document.getElementById(this.id);
  
  var obj = this;

  // Add event handlers for pressing a button
  browser.addEvent(this.node, "keydown", function(event) {handleButtonKeyDownEvent(event, obj);}, false);
  browser.addEvent(this.node, "keyup",   function(event) {handleButtonKeyUpEvent(event, obj); },  false);
  
  browser.addEvent(this.node, "mousedown", function(event) {handleButtonMouseDownEvent(event, obj);}, false);
  browser.addEvent(this.node, "mouseup",   function(event) {handleButtonMouseUpEvent(event, obj); },  false);  

  // Add event handlers for a button geeting and losing focus
  browser.addEvent(this.node, "focus", function(event) {handleButtonFocusEvent(event, obj);}, false);
  browser.addEvent(this.node, "blur",  function(event) {handleButtonBlurEvent(event, obj); }, false);
  
} //end Button.prototype.init

/**
* handleButtonKeyDownEvent processes keys associated with a button
*
* @param ( event ) event is the event handler for the event
* @param ( Button object ) button is the Button object that is the target of the keyboard event
*
* @return false if keyboard event was used by button, else true
*/

handleButtonKeyDownEvent = function(event, button) {
  // If IE get the IE event object
  var e = event || window.event;

  switch( browser.keyCode(e) ) {

    case KEY_SPACE:
       // Tell assistive technologies that the button is currently pressed
       button.node.setAttribute("aria-pressed", "true");
         // Kick IE 7 to update styling based on ARIA attribute
         button.node.className += "";
     // Tell browser we handled this event and not to process any other actions
         return browser.stopPropagation(e);
         break;

  }  // end switch

  return true;

} // end handleButtonKeyDownEvent

/**
* handleButtonFocusEvent processes keys associated with a button
*
* @param ( event ) event is the event handler for the event
* @param ( Button object ) button is the Button object that is the target of the keyboard event
*
* @return false if keyboard event was used by button, else true
*/

handleButtonFocusEvent = function(event, button) {

  // kick IE 7
  button.node.className += "";

  return true;

} // end handleButtonFocusEvent

/**
* handleButtonBlurEvent processes keys associated with a button
*
* @param ( event ) event is the event handler for the event
* @param ( Button object ) button is the Button object that is the target of the keyboard event
*
* @return false if keyboard event was used by button, else true
*/

handleButtonBlurEvent = function(event, button) {
  //kick IE 7
  button.node.className += "";

  return true;

} // end handleButtonBlurEvent

/**
* handleButtonKeyUpEvent processes keys associated with a button
*
* @param ( event ) event is the event handler for the event
* @param ( Button object ) button is the button object that is the target of the keyboard event
*
* @return false if keyboard event was used by button, else true
*/

handleButtonKeyUpEvent = function(event, button) {
  // If IE get the IE event object
  var e = event || window.event;

  switch( browser.keyCode(e) ) {

    case KEY_SPACE:
       // Tell assistive technologies that the button is not currently pressed
       button.node.setAttribute("aria-pressed", "false");
         // Kick IE 7 to update styling based on ARIA attribute
         button.node.className += "";
         browser.simulateOnClickEvent( button.node );
     // Tell browser we handled this event and not to process any other actions
         return browser.stopPropagation(e);
         break;

  }  // end switch

  return true;

} // end handleButtonKeyUpEvent

/**
* handleButtonMouseDownEvent processes keys associated with a button
*
* @param ( event ) event is the event handler for the event
* @param ( Button object ) button is the Button object that is the target of the keyboard event
*
* @return false if keyboard event was used by button, else true
*/

handleButtonMouseDownEvent = function(event, button) {
  // If IE get the IE event object
  var e = event || window.event;

  if( browser.target(e) == button.node ) {
   //set focus
   button.node.focus();
   // Tell assistive technologies that the button is currently pressed  
   button.node.setAttribute("aria-pressed", "true");
     // Kick IE 7 to update styling based on ARIA attribute
     button.node.className += "";
   // Tell browser we handled this event and not to process any other actions
     return browser.stopPropagation(e);

  }  // end if

  return true;

} // end handleButtonMouseDownEvent

/**
* handleButtonMouseUpEvent processes keys associated with a button
*
* @param ( event ) event is the event handler for the event
* @param ( Button object ) button is the button object that is the target of the keyboard event
*
* @return false if keyboard event was used by button, else true
*/

handleButtonMouseUpEvent = function(event, button) {
  // If IE get the IE event object
  var e = event || window.event;
  // Tell assistive technologies that the button is not currently pressed
  button.node.setAttribute("aria-pressed", "false");
  // Kick IE 7 to update styling based on ARIA attribute
  button.node.className += "";

  if( browser.target(e) == button.node ) {
    
    browser.simulateOnClickEvent( button.node );
  // Tell browser we handled this event and not to process any other actions
    return browser.stopPropagation(e);
    
  }  // end if

  return true;

} // end handleButtonMouseUpEvent


/**
* ButtonToggle Object
*
* @param ( id ) id of text to style
*
* @return none
*/

function ButtonToggle( id ) {

   this.id = id;
  
} // end ButtonToggle

/**
* ButtonToggle Object
*
* @param ( id ) id of text to style
*
* @return none
*/

ButtonToggle.prototype.init = function() {

  this.node = document.getElementById(this.id);
  
  var obj = this;

  // Add event handlers for toggling a button
  browser.addEvent(this.node, "keydown",   function(event) {handleButtonToggleKeyDownEvent(event, obj); },   false);
  browser.addEvent(this.node, "mousedown", function(event) {handleButtonToggleMouseDownEvent(event, obj); }, false);

  // Add event handlers for a button geeting and losing focus
  browser.addEvent(this.node, "focus", function(event) {handleButtonFocusEvent(event, obj);}, false);
  browser.addEvent(this.node, "blur",  function(event) {handleButtonBlurEvent(event, obj); }, false);
  
} // end ButtonToggle.prototype.init

/**
* toggleButton is called by event handlers to toggle the state of the button
*
* @param ( Button object ) button  Button to toggle state
*
* @return none
*/

toggleButton = function( button ) {

  if (button.node.getAttribute("aria-pressed") == "true") {

    // If the button is currently pressed set the state to not pressed  

    button.node.setAttribute("aria-pressed", "false");
    // Kick IE 7 to update styling based on ARIA attribute
    button.node.className += "";

  } else {

    // If the button is not currently pressed set the state to pressed  

    button.node.setAttribute("aria-pressed", "true");
    // Kick IE 7 to update styling based on ARIA attribute
    button.node.className += "";

  }  // endif
  
} // end toggleButton

/**
* handleButtonToggleKeyDownEvent processes keys associated with a button
*
* @param ( event ) event is the event handler for the event
* @param ( Button object ) button is the Button object that is the target of the keyboard event
*
* @return false if keyboard event was used by radio group, else true
*/

handleButtonToggleKeyDownEvent = function(event, button) {
  // If IE get the IE event object
  var e = event || window.event;

  switch( browser.keyCode(e)  ) {

    case KEY_SPACE:
       // Toggle the button
         toggleButton( button );
   browser.simulateOnClickEvent( button.node );
       // Tell browser we handled this event and not to process any other actions
         return browser.stopPropagation(e);
         break;

  }  // end switch

  return true;

} // end handleButtonToggleKeyDownEvent

/**
* handleButtonToggleMouseDownEvent processes keys associated with a button
*
* @param ( event ) event is the event handler for the event
* @param ( Button object ) button is the button object that is the target of the keyboard event
*
* @return false if keyboard event was used by button, else true
*/

handleButtonToggleMouseDownEvent = function(event, button) {
  // If IE get the IE event object
  var e = event || window.event;

  if( browser.target(e) == button.node ) {
   // Toggle button
     toggleButton( button );
   //set focus on mouse press
   button.node.focus();
   // Tell browser we handled this event and not to process any other actions
     return browser.stopPropagation(e);
    
  }  // end if

  return true;

} // end handleButtonToggleMouseDownEvent



/**
* StyledText Object
*
* @param ( id ) id of text to style
*
* @return none
*/

function StyledText( id ) {

   this.id = id;
  
   this.fontSize = 3;
   this.fontSizes = ['85%', '90%', '95%', '100%', '105%', '110%', '120%', '140%', '180%'];
  
} // end StyledText

/**
* init is a subclass of StyledText
* tabs in a menu bar.
*
* @member StyleText
*
* @return none
*/

StyledText.prototype.init = function() {

  this.node = document.getElementById(this.id);
  
} // end StyledText.prototype.init

/**
* handleStyledTextFontSize
*
* @param ( StyledText object) styled text to have its font changed
* @param ( integer ) size index of font desired size
*
* @return none
*/

function handleStyledTextFontSize( stext, size ) {

  // Make sure that size is no less than 0
  if( size < 0 )
     size = 0;
  // Make sure we access a valid element
  if( size >= stext.fontSizes.length )
    size = stext.fontSizes.length -1;
  // Set our fontSize to size
  stext.fontSize = size;
  // Use the corresponding fontSize among the fontSizes
  stext.node.style.fontSize = stext.fontSizes[stext.fontSize];


  
} // end handleStyledTextFontSize

/**
* handleStyledTextFontSizeLarger
* handlers changing
*
* @param ( StyledText object) styled text to have its font changed
*
* @return none
*/

function handleStyledTextFontSizeLarger( stext ) {
  // Increment fontSize
  stext.fontSize++;
  // Make sure we access valid elements
  if( stext.fontSize >= stext.fontSizes.length )
    stext.fontSize = stext.fontSizes.length - 1;
  // Use the corresponding fontSize among the fontSizes
  stext.node.style.fontSize = stext.fontSizes[stext.fontSize];


  
} // end handleStyledTextFontSizeLarger

/**
* handleStyledTextFontSizeSmaller
*
* @param ( StyledText object) styled text to have its font changed
*
* @return none
*/

function handleStyledTextFontSizeSmaller( stext ) {
  // Decrement fontSize
  stext.fontSize--;
  // Make sure that it doesn't go below 0
  if( stext.fontSize < 0 )
    stext.fontSize = 0;
  // Use the corresponding fontSize among the fontSizes
  stext.node.style.fontSize = stext.fontSizes[stext.fontSize];


  
} // end handleStyledTextFontSizeSmaller



/**
* handleStyledTextToggleBold
* handlers changing
*
* @param ( MenuBar object) styled text to have its font changed
* @param ( StyledText object) styled text to have its font changed
*
* @return none
*/

function handleStyledTextToggleBold( button, stext ) {

  if( button.node.getAttribute("aria-pressed") == "true" ) {
  // If button is pressed set text to bold
    stext.node.style.fontWeight = "bold";
  } else {
  // If button is not pressed set text to normal
    stext.node.style.fontWeight = "normal";
  } // endif
  
} // end handleStyledTextToggleBold

/**
* handleStyledTextToggleItalic
* handlers changing
*
* @param ( MenuBar object) styled text to hav its font changed
* @param ( StyledText object) styled text to have its font changed
*
* @return none
*/

function handleStyledTextToggleItalic( button, stext ) {

  if( button.node.getAttribute("aria-pressed") == "true" ) {
  // If button is pressed set text to italic
    stext.node.style.fontStyle = "italic";
  } else {
  // If button is not pressed set text to normal
    stext.node.style.fontStyle = "normal";
  } // endif
  
} // end handleStyledTextToggleItalic



  </script>

  <style type="text/css">

ul.buttons {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.buttons li {
  float: left;
  text-align: center;
  margin-right: .25em;
  padding-left: .25em;
  padding-right: .25em;
  width: 1em;
  font-weight: bold;
  height: 100%;
}

ul.buttons li[aria-pressed="true"] {
  border-top: black 3px solid;
  border-left: black 3px solid;
  border-bottom: black 1px solid;
  border-right:  black 1px solid;
  
}

ul.buttons li[aria-pressed="false"] {
  border-top: black 1px solid;
  border-left: black 1px solid;
  border-bottom: black 3px solid;
  border-right: black 3px solid;
  
}

ul.buttons li[aria-pressed="true"]:focus,
ul.buttons li[aria-pressed="true"]:active{
  border-top: #CCCCCC 3px solid;
  border-left: #CCCCCC 3px solid;
  border-bottom: #CCCCCC 1px solid;
  border-right:  #CCCCCC 1px solid;
  color: white;
  background-color: black;
  
}

ul.buttons li[aria-pressed="false"]:focus,
ul.buttons li[aria-pressed="false"]:active{
  border-top: #CCCCCC 1px solid;
  border-left: #CCCCCC 1px solid;
  border-bottom: #CCCCCC 3px solid;
  border-right: #CCCCCC 3px solid;
  color: white;
  background-color: black;
  
}

.italic {
  font-style: italic;
  font-size: 105%;
}

ul.buttons div{

font-style: italic;

}

ul.buttons span{

font-weight: bold;

}

textarea.example {
  clear: both;
  padding: .25em;
  width: 50%;
  height: 200px;
  font-style: italic;
}

.hide {
position: absolute;
top: -20em;
left: -200em;
}
  </style>