var HEIGHT_FACTOR = 80;
$(document).ready(function ()
{
    $('map area').each(function ()
    {
        var href=$(this).attr('href');
        var coords = $(this).attr('coords').split(',');
        var id=/\d{3,}/i.exec(href);
        var name=$('#'+id).html();
        var div = document.createElement('div');
        var anchor = document.createElement('a');
        var inner = document.createElement('span');
        var left_pos=coords[0], top_pos=coords[1];
        var chart_height=$('#chart').height(),
            chart_width=$('#chart').width();
        
        if (href!=null)
        {
            $(anchor).html('Click to View Profile')
                .attr('href', href)
                .addClass('follow');
            
            $(inner).html(name)
                .addClass('inner')
                .append('<a class="close" href="javascript:void(0);" onclick="ToggleId('+id+');">x</a>')
                .append(anchor);
            $(div).attr('id','tip_'+id)
                .addClass('tip')
                .append(inner)
                .hover(function ()
                {
                    $(this).addClass('hovering');
                }, function ()
                {
                    $(this).removeClass('hovering');
                });
            
            if (left_pos>chart_width-150 && top_pos>chart_height-HEIGHT_FACTOR)
            {
                left_pos=left_pos-150;
                $(div).addClass('bottom_right')
                    .css({left: left_pos+'px',
                        bottom: chart_height-top_pos+'px'});
            }
            else if (left_pos>chart_width-150)
            {
                left_pos=left_pos-150;
                $(div).addClass('top_right')
                    .css({left: left_pos+'px',
                        top: top_pos+'px'});
            }
            else if (top_pos>chart_height-HEIGHT_FACTOR)
            {
                $(div).addClass('bottom_left')
                    .css({left: left_pos+'px',
                        bottom: chart_height-top_pos+'px'});
            }
            else
                $(div).css({left: left_pos+'px',
                    top: top_pos+'px'});
            
            $('#chart').append(div);
            
            $(this)//.attr('href', 'javascript:void(0);')
                .click(function (ev)
                {
                    var tip = $('#tip_'+id);
                    ToggleId(id);
                    ev.preventDefault();
                });
            //$('.products').append(id+'{x:'+coords[0]+',y:'+coords[1]+'}<br />');
            //alert (coords);
        }
    });
    
    $('table.products tr').click(function ()
    {
        var id=$('a.product', this).attr('id');
        ToggleId(id);
    });
    $('table.products a')//.attr('href', 'javascript:void(0);');
        .click(function (ev)
            {
                ev.preventDefault();
            });
});

function ToggleId(id)
{
    var tip = $('#tip_'+id);
    var link = $('#'+id);
    if ($(tip).is(':visible'))
    {
        $(tip).hide();
        $(link).parent().parent().removeClass('highlighted');
    }
    else
    {
        $(tip).show();
        $(link).parent().parent().addClass('highlighted');
    }
}