var CONVOWIDTH = 400;
var CONVOHEIGHT = 291;

var link_ids = new Array(0);

function addItem(id, img, title)
{   
    link_ids.length++;
    link_ids[link_ids.length - 1] = id;
   
    updateSequence();
}

function removeItem(index)
{
    var i = 0;
    for (i = index; i < link_ids.length - 1; i++)
        link_ids[i] = link_ids[i + 1];
    
    link_ids.length--;

    updateSequence();
}

function moveItem(index, dir)
{
    var temp = link_ids[index + dir];
    link_ids[index + dir] = link_ids[index];
    link_ids[index] = temp;

    updateSequence();
}

function getSequence()
{
    return getObject("_ctl0_bodyContent_hfSequence");
}

function getSequenceHtml()
{
    return getObject("divSequence");
}

function loadSequence()
{
    var seq = getSequence().value.split(";");
    
    var itemNum = 0;

    var i = 0;
    for (i = 0; i < seq.length; i++)
    {
        if (seq[i] != "")
        {
            link_ids.length++;
            link_ids[itemNum] = Number(seq[i]);
            itemNum++;
        }
    }
    
    updateSequence();

    try
    {
        initializeConvo(false);
    }
    catch(err) {}
}

function updateSequence()
{
    var numCols = 5;
    var seq = ";";
    
    var itemNum = 0;
    var html = '<table width="980" border="0" cellpadding="0" cellspacing="0">';
    var save = getObject("divSave");
    var share = getObject("shareShown") != null;

    if (link_ids.length == 0)
    {
        html += '<tr><td align="center">Add your YouStars to this conversation by clicking on a ' +
                'thumbnail from the selection below</td>';
        if (save != null) save.style.display = "none";
    }
    else
    {
        if (save != null) save.style.display = "block";
    
        var i = 0;
        for (i = 0; i < link_ids.length; i++)
        {
            seq += link_ids[i] + ";";
            
            var img = getObject("img" + link_ids[i]).value;
            var title = getObject("title" + link_ids[i]).value;

            if (itemNum % numCols == 0)
            {
                if (itemNum > 0)
                    html += '</tr>';
                
                html += '<tr>';
            }
            
            html += '<td align="center" valign="bottom" style="width: ' + Math.floor(100/numCols) + '%">' +
                    '<strong>' + (i + 1) + ':</strong> ' + title + '<br />' +
                    '<img src="' + img + '" style="border: solid 1px #000000" />';
            
            if (!share)
            {
                html += '<br />';
                if (i > 0)
                    html += '<a href="javascript:void(moveItem(' + i + ',-1));">&lt;&lt;</a> &nbsp;';
                html += '<a href="javascript:void(removeItem(' + i + '));">X</a>';
                if (i < link_ids.length - 1)
                    html += '&nbsp; <a href="javascript:void(moveItem(' + i + ',1));">&gt;&gt;</a>';
            }
            
            html += '<br />&nbsp;</td>';
            
            itemNum++;
        }
        
        for (i = 0; i < numCols - ((itemNum) % numCols); i++)
            html += '<td style="width: ' + Math.floor(100/numCols) + '%">&nbsp;</td>';
    }

    html += '</tr></table>';
    
    getSequence().value = seq;
    getSequenceHtml().innerHTML = html;
}

function setShareTab(tab)
{
    getObject("tabShareEmail").className = "CustomTabBack";
    getObject("tabShareFacebook").className = "CustomTabBack";
    getObject("tabShareLink").className = "CustomTabBack";
    
    getObject("divShareEmail").style.display = "none";
    getObject("divShareFacebook").style.display = "none";
    getObject("divShareLink").style.display = "none";
    
    getObject(tab).className = "CustomTabFront";
    
    switch (tab)
    {
        case "tabShareEmail":
            getObject("divShareEmail").style.display = "block";
            break;

        case "tabShareFacebook":
            getObject("divShareFacebook").style.display = "block";
            break;

        case "tabShareLink":
            getObject("divShareLink").style.display = "block";
            break;          
    }
}