// Browser check ===============================================================
var OP = (navigator.userAgent.indexOf('Opera') != -1);
var IE = (navigator.userAgent.indexOf('MSIE') != -1 && !OP);
var NN4 = document.layers;
var DOM = document.getElementById;

// Variables ===================================================================
var quickTip = mouseX = mouseY = winX = winY = scrX = scrY = 0;

// Create layer ================================================================
if(NN4) {
  document.write('<layer id="QP"></layer>');
  document.captureEvents(Event.MOUSEMOVE);
}
else document.write('<div id="QP" style="position:absolute; z-index:66"></div>');

// Event handler ===============================================================
document.onmousemove = getMouseXY;

// Functions ===================================================================
function quickPick(text) {
  if(text) {
    quickTip = new Tip();
    quickTip.text = text;
    quickTip.width = 36;
    quickTip.height = 36;
    quickTip.createPick();
  }
  else if(quickTip) quickTip.hide();
}

function quickHelp(text,width,height) {
  if(text) {
    quickTip = new Tip();
    quickTip.text = text;
    quickTip.width = width;
    quickTip.height = height;
    quickTip.createHelp();
  }
  else if(quickTip) quickTip.hide();
}

function quickBaloon(text) {
  if(text) {
    quickTip = new Tip();
    quickTip.text = text;
    quickTip.width = 400;
    quickTip.height = 60;
	  quickTip.cursorDistance = 3;
    quickTip.createBaloon();
  }
  else if(quickTip) quickTip.hide();
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ getScrX()
function getScrX() {
  if(window.pageXOffset) scrX = window.pageXOffset;
  else if(document.documentElement && document.documentElement.scrollLeft)
    scrX = document.documentElement.scrollLeft;
  else if(document.body && document.body.scrollLeft)
    scrX = document.body.scrollLeft;
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ getScrY()
function getScrY() {
  if(window.pageYOffset) scrY = window.pageYOffset;
  else if(document.documentElement && document.documentElement.scrollTop)
    scrY = document.documentElement.scrollTop;
  else if(document.body && document.body.scrollTop)
    scrY = document.body.scrollTop;
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ getWinSize()
function getWinSize() {
  if(window.innerWidth) {
    winX = window.innerWidth - 20;
    winY = window.innerHeight - 20;
  }
  else if(document.documentElement && document.documentElement.offsetWidth) {
    winX = document.documentElement.offsetWidth - 20;
    winY = document.documentElement.offsetHeight - 20;
  }
  else if(document.body && document.body.offsetWidth) {
    winX = document.body.offsetWidth - 20;
    winY = document.body.offsetHeight - 20;
  }
  else {
    winX = screen.width - 20;
    winY = screen.height - 20;
  }
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ getMouseXY(e)
function getMouseXY(e) {
  getScrX();
  getScrY();
  getWinSize();

  if(IE) {
    mouseX = event.clientX + scrX;
    mouseY = event.clientY + scrY;
  }
  else {
    mouseX = e.pageX;
    mouseY = e.pageY;
  }
  if(mouseX < 0) mouseX = 0;
  if(mouseY < 0) mouseY = 0;
  if(quickTip && quickTip.active) quickTip.show();
}
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Tip()
function Tip() {
  this.text = 'clear';
  this.cursorDistance = 10;
  this.obj = 0;
  this.sobj = 0;
  this.active = false;

	// Create Methods ------------------------------------------------------------
  this.createPick = function() {
    if(!this.sobj) this.init();
  	var t = '<table width=' + this.width + ' height=' + this.height + ' cellspacing=0 cellpadding=4 border=1 bordercolor=#cccccc><tr bgcolor=#ffffff>' +
						'<td><img src=images/products/options/rollover/' + this.text + ' height=' + (this.height - 2) + '></td>' +
						'</tr></table>';
	  if(NN4) {
      this.sobj.document.write(t);
      this.sobj.document.close();
    }
    else {
      if(document.getElementById) document.getElementById('QP').innerHTML = t;
      else document.all.QP.innerHTML = t;
    }
    if(DOM) this.height = this.obj.offsetHeight;
    else if(IE) this.height = this.sobj.pixelHeight;
    else if(NN4) this.height = this.obj.clip.bottom;
    this.show();
  }
	
  this.createHelp = function() {
    if(!this.sobj) this.init();
  	var t = '<table width=' + this.width + ' height=' + this.height + ' cellspacing=0 cellpadding=2 border=0><tr bgcolor=#ff9900><td>' +
						'<table width=' + (this.width - 4) + ' height=' + (this.height - 4) + ' cellspacing=0 cellpadding=5 border=0><tr bgcolor=#ffffcc>' +
						'<td>' + this.text + '</td>' +
						'</tr></table></td></tr></table>';
	  if(NN4) {
      this.sobj.document.write(t);
      this.sobj.document.close();
    }
    else {
      if(document.getElementById) document.getElementById('QP').innerHTML = t;
      else document.all.QP.innerHTML = t;
    }
    if(DOM) this.height = this.obj.offsetHeight;
    else if(IE) this.height = this.sobj.pixelHeight;
    else if(NN4) this.height = this.obj.clip.bottom;
    this.show();
  }

  this.createBaloon = function() {
    if(!this.sobj) this.init();
  	var t = '<table width=400 cellspacing=0 cellpadding=0 border=0>' +
						'<tr><td colspan=3><img src=/images/baloonu.png width=400 height=10></td></tr>' +
						'<tr><td background=/images/baloonl.png><img src=/images/clear.gif width=10 height=1></td>' +
						'<td width=380 bgcolor=#ffffcc>' + this.text + '</td>' +
						'<td background=/images/baloonr.png><img src=/images/clear.gif width=10 height=1></td></tr>' +
						'<tr><td colspan=3><img src=/images/baloonb.png width=400 height=35></td></tr></table>';
	  if(NN4) {
      this.sobj.document.write(t);
      this.sobj.document.close();
    }
    else {
      if(document.getElementById) document.getElementById('QP').innerHTML = t;
      else document.all.QP.innerHTML = t;
    }
    if(DOM) this.height = this.obj.offsetHeight;
    else if(IE) this.height = this.sobj.pixelHeight;
    else if(NN4) this.height = this.obj.clip.bottom;
    this.show();
  }

	// Init Method ---------------------------------------------------------------
  this.init = function() {
    if(DOM) {
      this.obj = document.getElementById('QP');
      this.sobj = this.obj.style;
    }
    else if(IE) {
      this.obj = document.all.QP;
      this.sobj = this.obj.style;
    }
    else if(NN4) {
      this.obj = document.QP;
      this.sobj = this.obj;
    }
  }
	// Show Method ---------------------------------------------------------------
  this.show = function() {
    var ext = (document.layers ? '' : 'px');
    var left = mouseX;
    var top = mouseY;

		left -= this.width-20 + this.cursorDistance;
		top -= this.height + this.cursorDistance;
    this.sobj.left = left + ext;
    this.sobj.top = top + ext;
    if(!this.active) {
      this.sobj.visibility = 'visible';
      this.active = true;
    }
  }
	// Hide Method ---------------------------------------------------------------
  this.hide = function() {
    if(this.sobj) this.sobj.visibility = 'hidden';
    this.active = false;
  }
}