var commentMapSpan = null;
var commentMapTable = null;
var tableArray = new Array();

var rowHeight = "12px";

var rightBuffer = 30;
function getCommentMapTableWidth() 
{
    var temp=0;
    if(tagFilter.length >= 6)
    {
        temp=25;
    }
    var width = (parseFloat(commentMapTable.offsetWidth) + ( 0 - rightBuffer) - temp);
    if(width < 0)
    {
        width = 0;
    }
    return width;
}

function mapTimeToRelative(t) 
{
    if (t == NaN) 
    { 
        return 0; 
    }
    if (t < 0) 
    { 
        return 0; 
    }
    var toRet = (t / parseFloat(VideoGetDuration())) * getCommentMapTableWidth();
    if (toRet == NaN) 
    { 
        return 0; 
    }
    return toRet;
}

function mapRelativeToTime(x) 
{
    x = x - 30;
    if (x == NaN) { return 0; }
    if (x < 0)    { return 0; }
    return (x / getCommentMapTableWidth()) * parseFloat(VideoGetDuration());
}

var stringColors = new Array();
stringColors.push("green");
stringColors.push("red");
stringColors.push("brown");
stringColors.push("purple");
stringColors.push("blue");
stringColors.push("pink");
stringColors.push("orange");
stringColors.push("teal");
stringColors.push("navy");
stringColors.push("gray");
stringColors.push("maroon");

function getStringColor(w) 
{
    var sum = 0;
    for (var i=0;i<w.length;i++) 
    {
        sum += w.charCodeAt(i);
    }
    return stringColors[sum % stringColors.length];
}

//var ticker = document.createElement("image");
//getTabObjectFactory().appendChild(ticker);
var ticker = null;

// given an absolute location on the screen, get corresponding time
function commentMapClickPosition(x) 
{
    VideoPause();
    var t = mapRelativeToTime(parseFloat(x) - commentMapTable.offsetLeft + document.body.scrollLeft);
    ShowComments();
    VideoSetPosition(t);
    if(tagFilter.length!=0)
    {
        updateTickerPosition(t);
    }
    //syncSwitch = (syncSwitch + 1) % 2
    //startSync(syncSwitch);
}

function commentMapClick(event) 
{
    commentMapClickPosition(event.clientX);
}

function InsertTicker()
{
        ticker = document.createElement("table");
        ticker.cellPadding = 0;
        ticker.cellSpacing = 0;
        var tickerCell = ticker.insertRow().insertCell();
        tickerCell.bgColor = "red";
        tickerCell.style.filter = "Alpha(opacity=50)";
        ticker.style.zIndex = 100;
        document.getElementById("FilterList").appendChild(ticker);
        ticker.style.position = "absolute";
        ticker.width = 2;
        ticker.height = 141;
        ticker.style.left = 30;
        ticker.style.top = 0;
        ticker.style.cursor = "pointer";
        ticker.onmousedown = new Function("StarDragTicker()");
        ticker.onmouseup = new Function("StopDragTicker()");
        ticker.onmouseout = new Function("DragTicker()");
}

function updateTickerPosition(t) 
{
    // if we don't have a ticker, make one
    if (ticker == null) 
    {
        InsertTicker();
    }
    //ticker.rows[0].cells[0].innerHTML = t;
    var baseX = 0;
    var baseY = 0;
    try
    {
        var left = Math.round(baseX + mapTimeToRelative(t) - (ticker.width)/2) + 24;
        ticker.style.left = left;
        ticker.style.top = baseY; 
    }
    catch(e)
    {
        alert("Click Player First!");
    }
}

function AddFilter(tag)
{
            if(!commentMapTable)
            {
                buildCommentMapTable();
            }
            var filterItem = document.createElement("table");
            filterItem.id = "Filter"+tag;
                tagRow = filterItem.insertRow();
                var removeCell = tagRow.insertCell();
                var removeIcon = document.createElement("image");
                removeIcon.src = "images/close.gif";
                removeCell.appendChild(removeIcon);
                removeCell.onclick = new Function ("removeTag('" + tag + "');");
                removeCell.width = "15px";
                removeCell.height = "8px";
                removeCell.bgColor = "#FFFFFF";
                removeCell.style.zIndex = 60;
                var tagCell = tagRow.insertCell();
                
                AddBookMark(tagCell,tag);
                
                tagCell.height = rowHeight;
                tagCell.width = "100%";
                tagCell.bgColor = "white";
            filterItem.style.zIndex = 60;
            commentMapTable.appendChild(filterItem);
}

function buildCommentMapTable() 
{
    //return;
    commentMapTable = document.getElementById("FilterList");
    if (commentMapTable == null) 
        { return; }
    commentMapTable.onclick = function() 
    { 
        commentMapClick(event); 
    };
    // we'll build a table based on our objectData array
    // build timeline for each tag
    var mapSpan;
    
    var tagTitleCell;
}

function AddText(container,tag)
{
                mapSpan = document.createElement('span');
                mapSpan.style.position = "relative";
                mapSpan.innerHTML = "<span class='desc'>&nbsp;</span>";
                container.appendChild(mapSpan);
                
                var titleSpan = document.createElement('span');
                titleSpan.className = "desc";
                titleSpan.style.color = getStringColor(tag);
                if(tag.length > 15)
                {
                    var tag = tag.substring(0,12) + "...";
                }
                
                titleSpan.innerHTML = tag;
                titleSpan.valign = "top";
                titleSpan.style.zIndex = 12;
                container.appendChild(titleSpan);
}

function AddBookMark(container,tag)
{
    container.innerHTML = "";
    AddText(container,tag);
    for(var i = 0; i < MyComments.length; i ++)
    {
        var myComment = MyComments[i];
        var index = myComment.comment.toLowerCase().indexOf(tag);
        if(index != -1)
        {
            var tags = myComment.GetTags();
            var isTag = false;
            for(var index = 0; index < tags.length ; index ++)
            {
                if(tags[index].toLowerCase() == tag)
                {
                    isTag = true;
                }
            }
            if(isTag)
            {
                var bookmark = document.createElement("a");
                bookmark.style.position = "absolute";
                bookmark.style.height = "100%";
                bookmark.style.posLeft = mapTimeToRelative(myComment.time)+24;
                bookmark.style.width = mapTimeToRelative(myComment.durTime);
                bookmark.style.filter = "Alpha(opacity=10)";
                bookmark.style.backgroundColor = getStringColor(tag);
                bookmark.style.zIndex = 10;
                container.appendChild(bookmark);
            }
        }
    }
}

function UpdataBookMark()
{
    for(var key in tagFilter)
    {
        var tableId =  "Filter" + tagFilter[key];
        var container = document.getElementById(tableId);
        container = container.childNodes[0].childNodes[0].childNodes[1];
        AddBookMark(container,tagFilter[key]);
    }
}

function removeTag(tag)
{
    var tagTable = document.getElementById("Filter"+tag);
    document.getElementById("FilterList").removeChild(tagTable);
    delete tagFilter[tag];
    tagFilter.length --;
    if(tagFilter.length>=5)
    {
        var height = document.getElementById("FilterList").scrollHeight - 25;
        if(height >= 141)
        {
            ticker.style.height = height;
        }
        else
        {
            ticker.style.height = 141;
        }
    }
    if(tagFilter.length==0)
    {
        document.getElementById("FilterList").removeChild(ticker);
        ticker = null;
    }
}

var TickerDrag = false;
var dragTime = 0;
document.onmousemove = new Function("DragTicker()");

function StarDragTicker()
{
    VideoPause();
    TickerDrag = true;
    commentMapTable.onmouseup = new Function("StopDragTicker()");
}

function DragTicker()
{
    if(TickerDrag)
    {
        document.selection.empty();
        var eventX = event.clientX;
        if(eventX >= 30 && eventX <= 350)
        {
            ticker.style.posLeft = eventX;
            dragTime = mapRelativeToTime(eventX);
        }
        else
        {
            StopDragTicker();
        }
    }
}

function StopDragTicker()
{
    if(TickerDrag)
    {
        VideoSetPosition(dragTime);
    }
    TickerDrag = false;
}