var customBracelets = new Array()
var iMaxCBs = 0;
var iSelCB = 1;
var iSpacerWidth = 0;
var iSpacerHeight = 0;
var cbItems = new Array();
var cbImages = new Array();
var cbImage = null;

var imageDir = '';

function addCustomBraceltItem(type, preview, id)
{
  if (iSelCB > iMaxCBs)
    alert("You can't add any more items")
  else
  {
    var iKey = 1;
    var oCB = null;
    var imgObj = $('.cbImg' + iSelCB);

    var index = getItemIndex(id);

    imgObj.attr('src', cbImages[index]);
    imgObj.css('cursor', 'pointer');
    // do this from js using a reference to iSelCB
    var item = iSelCB;

    imgObj.click(function () { removeCustomBraceltItem(item) });

    // find the last key filled
    for (var i = 1; i <= iMaxCBs; i++)
    {

      oCB = $('.cbImg' + i);

      if (oCB != null)
      {
        if (Right(oCB.attr('src'), 13) != 'spacer1x1.gif')
          iKey = i;
      }
    }

    customBracelets[iSelCB] = id;
    iKey = iKey + 1;
    iSelCB = iKey;
  }
}

function getItemIndex(id)
{
  for (var i = 0; i <= cbItems.length - 1; i++)
  {
    if (cbItems[i] == id)
    {
      return i;
    }

  }

  return -1;
}

function removeCustomBraceltItem(iKey)
{
  var imgObj = $('.cbImg' + iKey);
  imgObj.attr('src', imageDir + '/custom/spacer1x1.gif');
  imgObj.attr('width' ,iSpacerWidth);
  imgObj.attr('height', iSpacerHeight);

  // do this from js using a reference to iKey
  var item = iKey;
  imgObj.click(function () { selectCustomBraceltItem(item) });

  customBracelets[iKey] = null;

  selectCustomBraceltItem(iKey)
}

function selectCustomBraceltItem(key)
{
  deselectCustomBraceltItems()

  iSelCB = key

  var oCB = $('.cbImg' + key);

  if (oCB != null)
  {
    oCB.css('border', '1px solid #000');
    oCB.attr('src', imageDir + 'spacer1x1.gif');
  }
}

function deselectCustomBraceltItems()
{
  var oCB;

  for (var i = 1; i <= iMaxCBs; i++)
  {
    oCB = $('.cbImg' + i);

    if (oCB != null)
    {
      oCB.css('border', 'none');
    }
  }
}

function syncCB()
{
  $('#CBHiddenField').val(getCBItems());
}

function getCBItems()
{
  var ret = '';

  for (var i = 0; i <= customBracelets.length; i++)
  {
    if (ret != '')
      ret = ret + ',';

    if (customBracelets[i] != null)
      ret = ret + customBracelets[i];
  }

  return ret;
}

// ######################## VALIDATION ##############################
function customBraceletPageValid(sender, args)
{
  var nextBtn = findElement('NextStepButton');
  if (nextBtn != null)
    nextBtn.disabled = true;

  var finishBtn = findElement('FinishButton');
  if (finishBtn != null)
    finishBtn.disabled = true;

  var valid = true;

  var items = getCBItems();

  if (items == '')
  {
    valid = false;
    alert('You must select at least 1 bead');
  }

  if (nextBtn != null)
    nextBtn.disabled = false;
  if (finishBtn != null)
    finishBtn.disabled = false;

  if (valid)
    syncCB();

  return valid;
}