var productScroller = {
  myConn:       false, // the XMLHttpRequest
  body:         false, // the body element
  h3:           false, // the target container
  aImg:         false,
  para:         false, // the target container
  aPrev:        false, // the target container
  aNext:        false, // the target container
  init:         function(){
    // test for methods & elements
    if(!document.getElementById || !document.getElementsByTagName) return;
    // set and test XHConn, quitting silently if it fails
    productScroller.myConn = new XHConn();
    if(!productScroller.myConn) return;
    // get the body
    productScroller.body = document.getElementsByTagName('body')[0];
  },
  getNext:  function(prodNo, dir, catNo, prodOpt){ // the Ajax call
    productScroller.h3 = document.getElementById('h3'+prodNo);
    productScroller.prodid = document.getElementById('prodid'+prodNo);
    productScroller.aImg = document.getElementById('aImg'+prodNo);
    productScroller.para = document.getElementById('para'+prodNo);
    productScroller.aNext = document.getElementById('aNext'+prodNo);
    productScroller.aPrev = document.getElementById('aPrev'+prodNo);
    productScroller.para.innerHTML = 'Loading...'
    /* this is the function that is run
       once the Ajax call completes */
    var fnWhenDone = function(oXML) {
      xml = oXML.responseXML;
      if(xml.getElementsByTagName('ProductId')[0].firstChild.nodeValue != 0) {
        if (dir == "prev") productScroller.aNext.innerHTML = ' >> ';
        else productScroller.aPrev.innerHTML = ' << ';
         
        var productId             = productScroller.getNodeValue(xml, 'ProductId');       
        var catalogueNumber       = productScroller.getNodeValue(xml, 'CatalogueNumber')+productScroller.getNodeValue(xml, 'ProductOptions');
        var imageFileName         = productScroller.getNodeValue(xml, 'ImageFileName');
        var productDescription    = productScroller.getNodeValue(xml, 'ProductDescription');
        var productOptions        = productScroller.getNodeValue(xml, 'ProductOptions');
        var hasNext               = productScroller.getNodeValue(xml, 'HasNext');
        productScroller.h3.innerHTML = catalogueNumber;
        productScroller.prodid.value = productId;
        productScroller.aImg.href = '/ProductDetail.aspx?ProductId='+productId;
        productScroller.aImg.style.backgroundImage = 'url(\'images/catalogue/thumbs/'+imageFileName+'\')';
        productScroller.para.innerHTML = productDescription;
        //productScroller.para.innerHTML = productDescription + 'Quantity: <form action="#" method="post"><input type="text" size="2" name="quantity" class="productquant" /><input type="hidden" value="' + productId + '" /><input type="submit" value="Add" /></form>';
        if(dir == "next") 
			{
            if(hasNext == "true") 
				{
                productScroller.aNext.href = "javascript:productScroller.getNext('"+prodNo+"', 'next', '"+catNo+"', '"+productOptions+"')";
                }
            else 
				{
                productScroller.aNext.innerHTML = '';
                }
            productScroller.aPrev.href = "javascript:productScroller.getNext('"+prodNo+"', 'prev', '"+catNo+"', '"+productOptions+"')";
            }
        else 
			{
            if(hasNext == "true") 
				{
                productScroller.aPrev.href = "javascript:productScroller.getNext('"+prodNo+"', 'prev', '"+catNo+"', '"+productOptions+"')";
                }
            else 
				{
                productScroller.aPrev.innerHTML = '';
                }
            productScroller.aNext.href = "javascript:productScroller.getNext('"+prodNo+"', 'next', '"+catNo+"', '"+productOptions+"')";
            }
         }  
      else {
        if (dir == "next") {
            productScroller.aNext.innerHTML = '';
            productScroller.para.innerHTML = 'No more options';
        }
        else {
            productScroller.aPrev.innerHTML = '';
            productScroller.para.innerHTML = 'No more options';
        }
      }
    };
    // use XHConn's connect method
    if (dir == "next") {
      productScroller.myConn.connect('ProductOptions.asmx/GetNext', 'GET', 
                                    'CatalogueNumber='+catNo+'&ProductOptions='+prodOpt, fnWhenDone);
    }
    else {
      productScroller.myConn.connect('ProductOptions.asmx/GetPrev', 'GET', 
                                    'CatalogueNumber='+catNo+'&ProductOptions='+prodOpt, fnWhenDone);
    }
  },
  getNodeValue: function(tree, el){
    return tree.getElementsByTagName(el)[0].firstChild.nodeValue;
  },   
  addEvent: function(obj, type, fn){  // the add event function
    if (obj.addEventListener) obj.addEventListener(type, fn, false);
    else if (obj.attachEvent) {
      obj["e"+type+fn] = fn;
      obj[type+fn] = function() {
        obj["e"+type+fn](window.event);
      };
      obj.attachEvent("on"+type, obj[type+fn]);
    }
  }
};
productScroller.addEvent(window, 'load',
                     function(){
                       productScroller.init();
                     });