/* 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 - fast buttons will display)
   value = current value
   width = text width in pixels
   height = text font size in pixels

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

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

*/
function spin_basket(id, productid, div, readonly, min, max, step, STEP, value, width, height)
{
    this.id = id;
    this.productid = productid;
    this.div = div;
    this.readonly = readonly;
    this.min = min;
    this.max = max;
    this.inc = step;
    this.INC = STEP;
    this.value = value;
    this.width = width;
    this.height = height;
    this.spinup = basket_spinup;
    this.spindn = basket_spindn;
    this.spinUP = basket_spinUP;
    this.spinDN = basket_spinDN;
    this.spinchange = basket_spinchange;
    this.create = basket_create;
    this.show = basket_show;
    this.normalize = basket_normalize;
    this.create();
}

function basket_create() {

// create the spin edit in this.div
// I tried to use DOM, but it is not as cross-browser friendly as innerHTML
// its slower too,

  var h = '<table class="sptab" cellspacing="0"><tr><td rowspan="2"';
  if (this.readonly) h += 'class="readonly"';
  h += '><input class="spintext';
  if (this.readonly) h += ' readonly" readonly '; else h += '"';
  h += ' id = "' + this.id;
  h += '" value="' + this.value + '" type="text" style="width:' + this.width + 'px;font-size:' + this.height + 'px;" onchange="' + this.id + '.spinchange()"';
  if (this.readonly) h += ' readonly';
  h += '></input></td>';
  if (this.INC != 0) h += '<td rowspan="2" class="updown"><a id="abdn" style="font-size:' + Math.floor((this.height*1 - 4) / 2) + 'px;"onclick="' + this.id + '.' + 'spinDN();">&lt;&lt;</a></td>';
  h += '<td class="updown"><a id="aup" style="font-size:' + Math.floor((this.height*1 - 4) / 2) + 'px;"onclick="' + this.id + '.' + 'spinup();">&nbsp;&#9650;&nbsp;</a></td>';
  if (this.INC != 0) h += '<td rowspan="2" class="updown"><a id="abup" style="font-size:' + Math.floor((this.height*1 - 4) / 2) + 'px;"onclick="' + this.id + '.' + 'spinUP();">&gt;&gt;</a></td></tr>';
  h += '<tr><td class="updown"><a id="adn" style="font-size:' + Math.floor((this.height*1 - 4) / 2) + 'px;"onclick="' + this.id + '.' + 'spindn();">&nbsp;&#9660;&nbsp;</a></td></tr></table>';
  document.getElementById(this.div).innerHTML = h;
}

function basket_spinchange()
{
    if (!this.readonly) {
        this.value = document.getElementById(this.id).value*1;
        if (this.value > this.max) this.value = this.max*1;
        if (this.value < this.min) this.value = this.min*1;
    }
    document.getElementById(this.id).value = this.value; 

    // Update prijs via AJAX request
    UpdateBasketPrice(this.productid);
}

function basket_spinup()
{
    if ((this.value*1 + this.inc*1) <= this.max) this.value += this.inc*1;
    document.getElementById(this.id).value = this.value;

    // Update prijs via AJAX request
    UpdateBasketPrice(this.productid);
}

function basket_spindn()
{
    if ((this.value*1 - this.inc*1) >= this.min) this.value -= this.inc;
    document.getElementById(this.id).value = this.value;

    // Update prijs via AJAX request
    UpdateBasketPrice(this.productid);
}

function basket_spinUP()
{
    if ((this.value*1 + this.INC*1) <= this.max) this.value += this.INC*1;
    document.getElementById(this.id).value = this.value; 

    // Update prijs via AJAX request
    UpdateBasketPrice(this.productid);
}

function basket_spinDN()
{
    if ((this.value*1 - this.INC*1) >= this.min) this.value -= this.INC;
    document.getElementById(this.id).value = this.value;

    // Update prijs via AJAX request
    UpdateBasketPrice(this.productid);
}

function basket_normalize()
{

    if (this.value*1 < this.min) this.value = this.min;
    if (this.value*1 > this.max) this.value = this.max;
    this.create();
    this.show();
}

function basket_show()
{

    if (document.getElementById('speditdiv') != 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></tr>';
        h += '<tr><td>min</td><td>';
        h += '<input type="text" onchange="' + this.id;
        h += '.min=this.value;' + this.id + '.normalize()"; value="' + this.min + '"</td></tr>';
        h += '<tr><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></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></tr>';
        h += '<tr><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></tr>';
        h += '<tr><td>height</td><td>'
        h += '<input type="text" onchange="' + this.id;
        h += '.height=this.value;' + this.id + '.normalize()"; value="' + this.height + '"</td></tr></table>';
        document.getElementById('speditdiv').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;
        sa += 'width=' + this.width;
        sa += 'height=' + this.height;
        alert(sa);
    }
}

function SpinBasket()
{
    sp = new spin_basket('sp', 'spindiv', true, 0, 100, 1, 5, 50, 100, 40);
}