// Predefined Variables //

  // Location of the file to call via Ajax
  var actionPage = '/shopping.php';

  // Class to be used on the product box
  var productBoxClass = 'productBox';

  // CSS Class to be used on the product total box
  var productTotalClass = 'productTotal';

  // CSS Class to be used on the product total box
  var productListClass = 'productList';

// End Predefined Variables //

// HTML Templates //

  /*
   *  [:QUANTITY:] = Number of quantity for the products
   *  [:ADDFUNCTION:] = Output the javascript function call to add a product
   *  [:MINUSFUNCTION:] = Output the javascript function call to remove one quantity of a product
   *  [:COST:] = Outputs the total cost (only can be used in totalHTML)
   */

  // Add Basket HTML code for product box (e.g 0 quantity so far)
  //var addBasketHTML = '<a href="#" onclick="[:ADDFUNCTION:] return false;">Add To Basket</a>';
  var addBasketHTML = '<button onclick="[:ADDFUNCTION:] return false;" type="submit">Add To Basket</button>';

  // In Basket HTML code for product box (e.g greater than 0)
  var inBasketHTML = '<img src="/images/tick.gif" alt="Tick" />In Basket [[:QUANTITY:]] <a href="#" onclick="[:ADDFUNCTION:] return false;">+</a> <a href="#" onclick="[:MINUSFUNCTION:] return false;">-</a> <button class="removeBut" onclick="[:REMOVEFUNCTION:] return false;" type="submit">Remove</button>';

  // The total box HTML code
  var totalHTML = '<dl id="basket"><dt><span>Shopping Basket</span></dt><dd><a href="/basket.html" title="View your shopping basket" rel="nofollow">Items: <span class="number">[:QUANTITY:]</span></a></dd><dd><a href="/basket.html" title="View your shopping basket" rel="nofollow">Total: <span class="number"><abbr title="GBP">&pound;</abbr>[:COST:]</span></a></dd><dd class="viewtrolley"><a href="/basket.html" title="View your shopping basket" rel="nofollow"><span>View Basket</span></a></dd></dl>';
  
// End HTML Templates //

// Reset Variables - DO NOT EDIT //

  var totalDisplay = false;

// End Reset Variables

function doAjaxRequest()
{
  var ajaxRequest;
  try { ajaxRequest = new XMLHttpRequest(); }
  catch (e) { 
    try { ajaxRequest = new ActiveXObject('Msxml2.XMLHTTP'); }
  catch (e) {
    try { ajaxRequest = new ActiveXObject('Microsoft.XMLHTTP'); }
  catch (e) { return false; }
  } }
  return ajaxRequest;
}

function addRemoveProducts(productId, productQuantity, isCheckout) {
  var ajaxRequest = doAjaxRequest();
  if(ajaxRequest)
  {
    ajaxRequest.onreadystatechange = function()
    {
      if(ajaxRequest.readyState == 4)
      {
		if(isCheckout != true)
		{
		  changeProductBox(productId, ajaxRequest.responseText);
	    }
		else
		{
	      populateProductListBox();
	    }
        if(totalDisplay)
        {
          updateTotalsBox();
        }
      }
    }
	var rand = Math.random();
    ajaxRequest.open('GET', actionPage+'?rand='+rand+'&doAjax=1&productId='+productId+'&quantity='+productQuantity, true);
    ajaxRequest.send(null);
  }
}

function populateProductBox(productId)
{
  var ajaxRequest = doAjaxRequest();
  if(ajaxRequest)
  {
    ajaxRequest.onreadystatechange = function()
    {
      if(ajaxRequest.readyState == 4)
      {
        if(ajaxRequest.responseText == '')
        {
          changeProductBox(productId, 0);
        }
        else
        {
          changeProductBox(productId, ajaxRequest.responseText);
        }
      }
    }
	var rand = Math.random();
    ajaxRequest.open('GET', actionPage+'?rand='+rand+'&doAjax=1&productId='+productId, true);
    ajaxRequest.send(null);
  }
}

function changeProductBox(productId, productQuantity)
{
  var displayHTML = '';
  if(parseFloat(productQuantity) > 0)
  {
    displayHTML = inBasketHTML;
  }
  else
  {
    displayHTML = addBasketHTML;
  }
  displayHTML = displayHTML.replace("[:QUANTITY:]", productQuantity);
  displayHTML = displayHTML.replace("[:ADDFUNCTION:]", 'javascript:addRemoveProducts('+productId+', '+(parseFloat(productQuantity)+1)+');');
  displayHTML = displayHTML.replace("[:MINUSFUNCTION:]", 'javascript:addRemoveProducts('+productId+', '+(parseFloat(productQuantity)-1)+');');
  displayHTML = displayHTML.replace("[:REMOVEFUNCTION:]", 'javascript:addRemoveProducts('+productId+', 0);');
  document.getElementById('productBox_'+productId).innerHTML = displayHTML;
}

function insertProductBox(productId)
{
  document.write('<div id="productBox_'+productId+'" class="'+productBoxClass+'"></div>');
  changeProductBox(productId, 0);
  populateProductBox(productId);
}

function insertTotalsBox()
{
  document.write('<div id="productBoxTotals" class="'+productTotalClass+'"></div>');
  var displayHTML = totalHTML;
  displayHTML = displayHTML.replace("[:QUANTITY:]", 0);
  displayHTML = displayHTML.replace("[:COST:]", '0.00');
  document.getElementById('productBoxTotals').innerHTML = displayHTML;
  totalDisplay = true;
  updateTotalsBox();
}

function updateTotalsBox()
{
  var displayHTML = totalHTML;
  var ajaxRequest = doAjaxRequest();
  if(ajaxRequest)
  {
    ajaxRequest.onreadystatechange = function()
    {
      if(ajaxRequest.readyState == 4)
      {
        var response = ajaxRequest.responseText;
        var responseArray = response.split("||");
        displayHTML = displayHTML.replace("[:QUANTITY:]", responseArray[0]);
        displayHTML = displayHTML.replace("[:COST:]", responseArray[1]);
        document.getElementById('productBoxTotals').innerHTML = displayHTML;
      }
    }
	var rand = Math.random();
    ajaxRequest.open('GET', actionPage+'?rand='+rand+'&doAjax=1&getTotals=1', true);
    ajaxRequest.send(null);
  }
}

function insertProductListBox()
{
  document.write('<div id="productListBox" class="'+productListClass+'"></div>');
  populateProductListBox();
}

function populateProductListBox()
{
  var ajaxRequest = doAjaxRequest();
  if(ajaxRequest)
  {
    ajaxRequest.onreadystatechange = function()
    {
      if(ajaxRequest.readyState == 4)
      {
        document.getElementById('productListBox').innerHTML = ajaxRequest.responseText;
      }
    }
	var rand = Math.random();
    ajaxRequest.open('GET', actionPage+'?rand='+rand+'&doAjax=1&getProductList=1', true);
    ajaxRequest.send(null);
  }
}

var preloadImages = new Array(); 
preloadImages[0] = '/images/basket-icon.gif'; 
preloadImages[1] = '/images/tick.gif'; 

var loadImage = new Array(); 
for (var i = 0; i < preloadImages.length; i++) 
{ 
  loadImage[i] = new Image; 
  loadImage[i].src = preloadImages[i]; 
}