function SpinControl(spinId, picStyle)
{
	function getPicPath()
  {
    var allScripts = document.getElementsByTagName("script");
    for(var i = 0; i < allScripts.length; i++)
    {
      if(allScripts[i].src && allScripts[i].src.lastIndexOf("spin.js") > -1)
      {
        return allScripts[i].src.replace("spin.js", "../pics/");
      }
    }
    return false;
  }

  this.picturePath       = getPicPath();
  if(this.picturePath.lastIndexOf('/') != this.picturePath.length - 1) { this.picturePath += '/'; }

  this.downPic = picStyle == 'pm' ? 'spin-minus.gif' : 'spin-down.gif';
  this.upPic   = picStyle == 'pm' ? 'spin-plus.gif' : 'spin-up.gif';

  this.upButton    = new Image(12, 6);
  this.downButton  = new Image(12, 6);

  this.ctrlWidth         = 35;
  this.ctrlBorderWidth   = 0;

  this.baseColor         = 'buttonface';
  this.borderLightShadow = this.baseColor;
  this.borderHighlight   = '#E3DEE0';
  this.borderDarkShadow  = '#404040';
  this.borderShadow      = 'threedshadow';

  this.upState           = this.borderHighlight + ' ' + this.borderDarkShadow + ' '
                         + this.borderDarkShadow + ' ' + this.borderHighlight;
  this.downState         = this.borderDarkShadow + ' ' + this.borderHighlight + ' '
                         + this.borderHighlight + ' ' + this.borderDarkShadow;
  this.flatState         = this.baseColor + ' ' + this.baseColor + ' '
                         + this.baseColor + ' ' + this.baseColor;

  var spinSelf = this;

  this.build = function()
  {
    if(document.layers) { return false;  }

    this.oldTextField = document.getElementById(spinId);
    if(isNaN(this.oldTextField.value)) { return false; };

    this.fieldParent  = this.oldTextField.parentNode
    this.newTextField = this.fieldParent.removeChild(this.oldTextField);
    this.newTextField.style.width          = (this.ctrlWidth - 10 - (2 * this.ctrlBorderWidth)) + 'px';

    this.spinCtrl                          = document.createElement('span');
    this.spinCtrl.style.display            = 'block';
    this.spinCtrl.style.className          = 'spin-outer';
    this.spinCtrl.style.width              = this.ctrlWidth + 'px';
    this.spinCtrl.style.position           = 'static';
    this.spinCtrl.id                       = spinId + 'Box';
    this.spinCtrl.name                     = spinId + 'Box';
    this.spinCtrl.style.position           = 'relative';

    this.spElementBox                      = document.createElement('span');
    this.spElementBox.style.display        = 'block';
    this.spElementBox.style.className      = 'spin-inner';
    this.spElementBox.style.position       = 'relative';
    this.spElementBox.style.width          = '100%';
    this.spElementBox.style.height         = '22px';
    this.spinCtrl.appendChild(this.spElementBox);
    this.spElementBox.appendChild(this.newTextField);


    this.upButton.src = this.picturePath + this.upPic;
    this.upButton.id  = spinId + 'UpButton';
    this.upButton.style.position        = 'absolute';
    this.upButton.style.right           = '0px';
    this.upButton.style.top             = '0px';
    this.upButton.onmousedown = function()
    {
    	this.style.borderColor = spinSelf.downState;
    	if(!isNaN(spinSelf.newTextField.value))
    	{
        spinSelf.newTextField.value++;
      }
    	spinSelf.valueAdd = window.setInterval("var fld=document.getElementById('" +  this.id.replace('UpButton','') + "');"
    	                  + "if(!isNaN(fld.value)) { fld.value++; }", 100);
    }

    this.upButton.onmouseup = this.upButton.onmousemove = function()
    {
    	take_a_break = false;
      this.style.borderColor = spinSelf.upState;
    	window.clearInterval(spinSelf.valueAdd);
    }
    this.finalizeButton(this.upButton);



    this.downButton.src = this.picturePath + this.downPic;
    this.downButton.id  = spinId + 'DownButton';
    this.downButton.style.position        = 'absolute';
    this.downButton.style.right           = '0px';
    this.downButton.style.top             = '11px';
    this.downButton.onmousedown = function()
    {
    	this.style.borderColor = spinSelf.downState;
    	if(!isNaN(spinSelf.newTextField.value))
	{
		spinSelf.newTextField.value > 1 ? spinSelf.newTextField.value-- : spinSelf.newTextField.value = 1;
	}
    	spinSelf.valueSubtract = window.setInterval("var fld=document.getElementById('" +  this.id.replace('DownButton','') + "');"
     	                  + "if(!isNaN(fld.value)) { fld.value > 1 ? fld.value-- : fld.value = 1; }", 100);
    }

    this.downButton.onmouseup = this.downButton.onmousemove = function()
    {
      this.style.borderColor = spinSelf.upState;
    	window.clearInterval(spinSelf.valueSubtract);
    }
    this.finalizeButton(this.downButton);



    this.fieldParent.appendChild(this.spinCtrl);
    return true;
  }

  // button style
  this.finalizeButton = function(buttonObj)
  {
    buttonObj.style.margin          = '0'
    buttonObj.style.borderWidth     = '1px';
    buttonObj.style.padding         = '1px';
    buttonObj.style.borderStyle     = 'solid';
    buttonObj.style.backgroundColor = this.baseColor;
    buttonObj.style.cursor          = 'pointer';
    if (document.all) buttonObj.style.cursor = 'hand';

    buttonObj.style.borderColor = spinSelf.upState;
    buttonObj.onmouseout  = function () {this.style.borderColor = spinSelf.upState; } ;

    this.spElementBox.appendChild(buttonObj);
  }




  // setters for all kinds of styles
  this.setWidth         = function (newWidth)     { this.ctrlWidth    = newWidth; }
  this.setHeight        = function (newHeight)    { this.ctrlHeight   = newHeight; }

}