//Pre Cache the images on the browser.
var imgArrayOff = new Array();
var imgArrayOn = new Array();
for (var i=0; i<9; i++) {
  imgArrayOff[i] = new Image();
  imgArrayOn[i] = new Image();
  
  imgArrayOff[i].src = '/ConnexControls/Button/images/button_off_0' + (i+1) + '.png';
  imgArrayOn[i].src = '/ConnexControls/Button/images/button_on_0' + (i+1) + '.png';
}
//Main button visible changes on hover and mouse exit.
function ctlButtonOn(o, sid) {
  o.style.color='#ffffff';
  o.style.cursor = 'pointer';
  self.document.getElementById(sid+'TD1').className = 'buttonTopLeftOn';
  self.document.getElementById(sid+'TD2').className = 'buttonTopOn';
  self.document.getElementById(sid+'TD3').className = 'buttonTopRightOn';
  self.document.getElementById(sid+'TD4').className = 'buttonMiddleLeftOn';
  self.document.getElementById(sid+'TD5').className = 'buttonMiddleOn';
  self.document.getElementById(sid+'TD6').className = 'buttonMiddleRightOn';
  self.document.getElementById(sid+'TD7').className = 'buttonBottomLeftOn';
  self.document.getElementById(sid+'TD8').className = 'buttonBottomOn';
  self.document.getElementById(sid+'TD9').className = 'buttonBottomRightOn';
}
function ctlButtonOff(o, sid) {
  o.style.color='#000000';
  self.document.getElementById(sid+'TD1').className = 'buttonTopLeft';
  self.document.getElementById(sid+'TD2').className = 'buttonTop';
  self.document.getElementById(sid+'TD3').className = 'buttonTopRight';
  self.document.getElementById(sid+'TD4').className = 'buttonMiddleLeft';
  self.document.getElementById(sid+'TD5').className = 'buttonMiddle';
  self.document.getElementById(sid+'TD6').className = 'buttonMiddleRight';
  self.document.getElementById(sid+'TD7').className = 'buttonBottomLeft';
  self.document.getElementById(sid+'TD8').className = 'buttonBottom';
  self.document.getElementById(sid+'TD9').className = 'buttonBottomRight';
}