/* A spin edit control 
   Properties:
   id = name of the object - required for onclick events
   div = id of the <DIV> tag in which the control will be placed
   readonly = if true text entry will not be allowed
   min = minimum value
   max = maximum value
   step = increment
   STEP = big increment (if non-zero - hold ctrl key to invoke)
   value = current value
   width = text width in pixels (30 - 300)
   height = text height in pixels (12 - 240)
   align = text alignment - right, left, center, notext
   position = position of arrows - right, leftright, bottom
   color = normal background color
   rocolor = readonly background color

   Methods:
   spinup = onclick event handler for up button 
   spindn = onclick event handler for down button
   spinchange = onchange event handler for text if not readonly
   draw = redraw the control

   Events:
   onchange = if assigned, is fired on a change  
   onspinup = if assigned, is fired when up button is pressed
   onspindown = if assigned, is fired when down button is pressed

   Notes: since the + operator is used a lot, I force values to be numeric by multiplying
          by 1, hence all the *1 's  

*/
var ctrldown = false;
window.onload = onloadH;    // onload handler to trap key press - for Ctrl key

function spin(id, div, readonly, min, max, step, STEP, value, width, height, align, position, color, rocolor)
{
var undefined;
  /* Properties */  
    this.id = id;
    this.div = (div == undefined) ? this.id + 'div' : div;
    this.readonly = (readonly == undefined) ? false : readonly;
    this.min = (min == undefined) ? 0 : min;
    this.max = (max == undefined) ? 100 : max;
    this.inc = (step == undefined) ? 1 : step;
    this.INC = (STEP == undefined) ? 5 : STEP;
    this.value = (value == undefined) ? 50 : value;
    this.width = (width == undefined) ? 50 : width;
    this.height = (height == undefined) ? 18 : height;
    this.align = (align == undefined) ? 'right' : align;
    this.position = (position == undefined) ? 'right' : position;
    this.color = (color == undefined) ? 'FFFFFF' : color;
    this.rocolor = (rocolor == undefined) ? 'E0E0E0' : rocolor;
    
  /* Methods */
    this.spinup = spinup;
    this.spindn = spindn;
    this.spinchange = spinchange;
    this.draw = spindraw;
    this.show = spinshow;
    this.normalize = spinnormalize;
    this.button = buttondraw;
  /* Events */
    this.onchange = null;
    this.onspinup = null;
    this.onspindown = null;
  /* Create it */
    this.normalize();
    this.draw();
}

function buttondraw(pos) {

  var bc = "spindn()";
  var bv = '&#9650;'
  if ((pos == 0) || (pos == 3) || (pos == 5)) {
    bc = "spinup()";
  }
  if ((pos == 1) || (pos == 3)) bv = '&#9660;';
  if (pos == 4) bv = '&#9664;';
  if (pos == 5) bv = '&#9654;';
  var bw = Math.floor(this.width / 4);
  var bh = Math.floor(this.height / 2);
  if ((pos == 2) || (pos == 3)) {
    bh = this.height;
  } else if ((pos == 4) || (pos == 5)) {
    bw = Math.floor(this.width / 2);
  }
  if (this.align == 'notext') bw = this.width;
  var fs = Math.min(bw, bh) - 2;
  var bt = '<input type="button"';
  bt += '" style="border-width:0px;text-align:center;vertical-align:center;width:' + bw + 'px;';
  bt += 'height:' + bh + 'px;font-size:' + fs + 'px;"';
  bt += ' onmouseover="this.style.backgroundColor=' + "'#00ffff'" + ';"';
  bt += ' onmouseout ="this.style.backgroundColor=' + "'#e0e0e0'" + ';" onclick="';
  bt += this.id + '.' + bc + ';" value ="' + bv + '" />';
  return(bt);

}

function spindraw() {
var cols;
// draw the spin edit in this.div
// I tried to use DOM, but it is not as cross-browser friendly as innerHTML
// its slower too,
  if (this.readonly) {
    h += 'class="readonly"';
    cols = "background-color:#" + this.rocolor + ";";
  } else {
    cols = "background-color:#" + this.color + ";";
  }
  var h = '<table class="sptab">';
  if (this.position == 'right') {
    h += '<tr>';
    if (this.align != 'notext') {
      h += '<td rowspan="2" style="' + cols + '"><input '; 
      if (this.readonly) h += ' class="readonly" readonly'; 
      h += ' id = "' + this.id + '" value="' + this.value + '" type="text" style="border:0;width:' + this.width + 'px;'
      h += 'font-size:' + (Math.min(this.width, this.height) - 4) + 'px;' + cols + 'text-align:' + this.align +';" onchange="' + this.id + '.spinchange()"';
      h += '></input></td>';
    }
    h += '<td class="updown">' + this.button(0) + '</td></tr>';
    h += '<tr><td class="updown">' + this.button(1) + '</td></tr>';
  } else if (this.position == 'leftright') {
    h += '<td';
    h += ' class="updown">' + this.button(3) + '</td>';
    if (this.align != 'notext') {
    h += '<td style="' + cols + '"><input style="border:0;'; 
    if (this.readonly) h += ' readonly" readonly'; 
    h += '" id = "' + this.id;
    h += '" value="' + this.value + '" type="text" style="width:' + this.width + 'px;'
    h += 'font-size:' + (Math.min(this.width, this.height) - 4) + 'px;' + cols + 'text-align:' + this.align +';" onchange="' + this.id + '.spinchange()"';
    h += '></input></td>';
    }
    h += '<td class="updown">' + this.button(2) + '</td>';
  } else if (this.position = 'bottom') {  
    if (this.align != 'notext') {
    h += '<td colspan="2" style="' + cols + '"';
    h += '><input style="border:0;'; 
    if (this.readonly) h += ' readonly" readonly'; 
    h += '" id = "' + this.id;
    h += '" value="' + this.value + '" type="text" style="width:' + this.width + 'px;font-size:' + (Math.min(this.width, this.height) - 4) + 'px;' + cols + 'text-align:' + this.align +';" onchange="' + this.id + '.spinchange()"';
    h += '></input></td></tr>';
    }
    h += '<tr><td class="updown">' + this.button(4) + '</td>';
    h += '<td class="updown">' + this.button(5) + '</td></tr></table>';
  }
 // alert(h);
  document.getElementById(this.div).innerHTML = h;
}

function spinchange()
{
    if (!this.readonly) {
        this.value = document.getElementById(this.id).value*1;
    }
}

function spinup()
{
    if ((ctrldown) && (this.INC > 0)) {
        if ((this.value*1 + this.INC*1) <= this.max) this.value += this.INC*1; else this.value = this.max;
    } else {
        if ((this.value*1 + this.inc*1) <= this.max) this.value += this.inc*1; else this.value = this.max;
    }
    this.normalize();
    if (this.onspinup != null) this.onspinup(this.id); 
}

function spindn()
{
    if ((ctrldown) && (this.INC > 0)) {
        if ((this.value*1 - this.INC*1) >= this.min) this.value -= this.INC; else this.value = this.min;
    } else {
        if ((this.value*1 - this.inc*1) >= this.min) this.value -= this.inc; else this.value = this.min;
    }
    this.normalize();
    if (this.onspindown != null) this.onspindown(this.id);
}

function spinnormalize()
{
    this.value = this.value*1;
    if (this.value*1 < this.min) this.value = this.min;
    if (this.value*1 > this.max) this.value = this.max;
    if (this.align != 'notext') {
        if (this.width < 30) this.width = 30;
        if (this.width > 300) this.width = 300;
    }
    if (this.height < 12) this.height = 12;
    if (this.height > 240) this.height = 240;
    this.draw();
    this.show();
    if (this.onchange != null) this.onchange(this.id);
}

function spinshow()
{
    
    if (document.getElementById(this.id + 'show') != null) {
        var h = '<table class="spptab"><tr><td>readonly</td><td>';
        h += '<a id="rodum" onclick="' + this.id + '.readonly=!'+ this.id + '.readonly;' + this.id + '.normalize()">' + this.readonly + '</a></td>';
        h += '<td>min</td><td>';
        h += '<input type="text" onchange="' + this.id;
        h += '.min=this.value;' + this.id + '.normalize()"; value="' + this.min + '"</td>';
        h += '<td>max</td><td>'
        h += '<input type="text" onchange="' + this.id;
        h += '.max=this.value;' + this.id + '.normalize()"; value="' + this.max + '"</td></tr>';
        h += '<tr><td>inc</td><td>'
        h += '<input type="text" onchange="' + this.id;
        h += '.inc=this.value;' + this.id + '.normalize()"; value="' + this.inc + '"</td>';
        h += '<td>INC</td><td>'
        h += '<input type="text" onchange="' + this.id;
        h += '.INC=this.value;' + this.id + '.normalize()"; value="' + this.INC + '"</td>';
        h += '<td>value</td><td>'
        h += '<input type="text" onchange="' + this.id;
        h += '.value=this.value;' + this.id + '.normalize()"; value="' + this.value + '"</td></tr>';
        h += '<tr><td>width</td><td>'
        h += '<input type="text" onchange="' + this.id;
        h += '.width=this.value;' + this.id + '.normalize()"; value="' + this.width + '"</td>';
        h += '<td>height</td><td>'
        h += '<input type="text" onchange="' + this.id;
        h += '.height=this.value;' + this.id + '.normalize()"; value="' + this.height + '"</td>';
        h += '<td>align</td><td>'
        h += '<select onchange="' + this.id;
        h += '.align=this.value;' + this.id + '.normalize()";>'
        h += '<option '; 
        if (this.align == 'right') h += 'selected="yes"';
        h += 'value="right">right</option><option ';
        if (this.align == 'left') h += 'selected="yes"';
        h += 'value="left">left</option><option ';
        if (this.align == 'center') h += 'selected="yes"';
        h += 'value="center">center</option><option ';
        if (this.align == 'notext') h += 'selected="yes"';
        h += 'value="notext">notext</option>';
        h += '</select></td></tr>';
        h += '<tr><td>position</td><td>'
        h += '<select onchange="' + this.id;
        h += '.position=this.value;' + this.id + '.normalize()";>'
        h += '<option ';
        if (this.position == 'right') h += 'selected="yes"';
        h += 'value="right">right</option><option ';
        if (this.position == 'leftright') h += 'selected="yes"';
        h += 'value="leftright">leftright</option><option ';
        if (this.position == 'bottom') h += 'selected="yes"';
        h += 'value="bottom">bottom</option>';
        h += '</select></td>';
        if (this.align != 'notext') {
            h += '<td>color</td><td>'
            h += '<input type="text" onchange="' + this.id;
            h += '.color=this.value;' + this.id + '.normalize()"; value="' + this.color + '"</td>';
            h += '<td>rocolor</td><td>'
            h += '<input type="text" onchange="' + this.id;
            h += '.rocolor=this.value;' + this.id + '.normalize()"; value="' + this.rocolor + '"</td>';
        }
        h += '</tr></table>';
        document.getElementById(this.id + 'show').innerHTML = h;
    }/* else {
        var sa = 'id=' + this.id + '\n';
        sa += 'div=' + this.div + '\n';
        sa += 'readonly=' + this.readonly + '\n';
        sa += 'min=' + this.min + '\n';
        sa += 'max=' + this.max + '\n';
        sa += 'inc=' + this.inc + '\n';
        sa += 'INC=' + this.INC + '\n';
        sa += 'value=' + this.value + '\n';
        sa += 'width=' + this.width + '\n';
        sa += 'height=' + this.height + '\n';
        sa += 'position=' + this.position + '\n';
        sa += 'color=' + this.color + '\n';
        sa += 'rocolor=' + this.rocolor;
        alert(sa);
    }  */
}

function kd(e) {
var keynum

if(window.event) keynum = e.keyCode; else if(e.which) keynum = e.which;
if (keynum == 17) ctrldown = true;
}

function ku(e) {
var keynum

if(window.event) keynum = e.keyCode; else if(e.which) keynum = e.which;
if (keynum == 17) ctrldown = false;
}

function onloadH(e)
{
 var emod = (e) ? (e.eventPhase) ? "W3C" : "NN4" : (window.event) ? "IE4+" : "unknown";
   if (emod == "NN4") {
      document.captureEvents(Event.KEYDOWN); 
      document.captureEvents(Event.KEYUP);
      }

   document.onkeydown = kd;
   document.onkeyup = ku;
   return true;
}