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 = findItem('cb' + iSelCB);
        var imgObj = findImage('cbImg' + iSelCB);

        var index = getItemIndex(id);

        imgObj.src = cbImages[index];
        imgObj.style.cursor = 'hand';
        // do this from js using a reference to iSelCB
        var item = iSelCB;
        imgObj.onclick = function() { removeCustomBraceltItem(item) };

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

            if (oCB != null)
            {
                if (Right(oCB.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 = findImage('cbImg' + iKey);
    imgObj.src = imageDir + '/custom/spacer1x1.gif';
    imgObj.width = iSpacerWidth;
    imgObj.height = iSpacerHeight;
    
    // do this from js using a reference to iKey
    var item = iKey;
    imgObj.onclick = 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 syncCBParent()
{
    var oParent = findItem('parentCustomBracelets');
    var oCurrent = findItem('cbImagesRow');

    var html = '<table border="0" cellpadding="3" cellspacing="1"><tr>';

    var body = oCurrent.innerHTML.replace(/1px/g, '0px');
    body = body.replace(/CURSOR: hand; /g, '');

    html = html + body + '</tr></table>'

    findElement('CBHiddenField').value = getCBItems();

    oParent.innerHTML = html;
}

function syncCB()
{
    findElement('CBHiddenField').value = 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;
}