//id_index.jsp
//index_cloud.jsp
//index_cloud.js
//UserCloudServlet.java
jQuery.fn.left = function()
{
    return parseInt($(this).css('left'));
}
jQuery.fn.top = function()
{
    return parseInt($(this).css('top'));
}
function _genLink(name, subname, value)
{
    return $('<a href="javascript:void(0);">{0}</a>'.format(value)).click(function()
    {
        // search(name, subname, value);
        });
}

function renderHandler(handler, metaData)
{
    handler.html('');
    switch (metaData.name)
    {
        case 'SchoolName':
        {
            var lable = metaData.lable;
            for ( var i = 0; i < data.data.length; i += 1)
            {
                if (data.data[i].name == 'SchoolType')
                {
                    if (data.data[i].value)
                    {
                        lable = data.data[i].value;
                    }
                    break;
                }
            }
            handler.html(lable);
            break;
        }
        default:
        {
            handler.html(metaData.lable);
        }
    }
}
function renderBody(body, metaData)
{
    body.html('');
    switch (metaData.name)
    {
        case 'Gender':
        {
            body.append(_genLink(metaData.name, metaData.name, metaData.value));
            break;
        }
        case 'Birthday':
        {
            var year = metaData.value.substr(0, 4);
            var monthday = metaData.value.substr(5, metaData.value.length);
            body.append(_genLink(metaData.name, 'Year', year)).append(' ').append(_genLink(metaData.name, 'MonthAndDay', monthday));
            break;
        }
        case 'Hometown':
        case 'Address':
        {
            var name = metaData.name;
            var province = metaData.value.split(',')[0].trim();
            var city = metaData.value.split(',')[1].trim();
            body.append(_genLink(metaData.name, 'Province', province)).append(' ').append(_genLink(metaData.name, 'City', city));
            break;
        }
        case 'FavoriteSports':
        {
            var sports = metaData.value.split(',');
            for ( var i = 0; i < sports.length; i += 1)
            {
                body.append(_genLink(metaData.name, metaData.name, sports[i])).append(' ');
            }
            break;
        }
        case 'BlogName':
        {
            var name = metaData.name;
            var href = 'javascript:void(0);';
            for ( var i = 0; i < data.data.length; i += 1)
            {
                if (data.data[i].name == 'Blog')
                {
                    if (data.data[i].value)
                    {
                        href = data.data[i].value;
                    }
                    break;
                }
            }
            $('<a href="{0}" target="_blank">{1}</a>'.format(href, metaData.value)).appendTo(body);
            break;
        }
        case 'FavoriteSiteName':
        {
            var name = metaData.name;
            var href = 'javascript:void(0);';
            for ( var i = 0; i < data.data.length; i += 1)
            {
                if (data.data[i].name == 'FavoriteSite')
                {
                    if (data.data[i].value)
                    {
                        href = data.data[i].value;
                    }
                    break;
                }
            }
            $('<a href="{0}" target="_blank">{1}</a>'.format(href, metaData.value)).appendTo(body);
            break;
        }
        default:
            var name = metaData.name;
            $('<a href="javascript:void(0);">{0}</a>'.format(metaData.value)).appendTo(body).click(function()
            {
                // search(name, name, $(this).html());
                });
    }
    body.find('a').css(
        {
            'color' : '#FFF',
            'background-color' : '#F30'
        }).hover(function()
    {
        $(this).css(
            {
                'color' : '#F30',
                'background-color' : '#FFF'
            });
    }, function()
    {
        $(this).css(
            {
                'color' : '#FFF',
                'background-color' : '#F30'
            });
    });
}

var dragging = false;
function initHover(canvas)
{
    var hover = canvas.find('#cloud_hover').hide();
    hover.hover(function()
    {
    }, function()
    {
        if (!dragging)
        {
            var hover = $(this).hide();
            var canvas = hover.parent();
            canvas.find(hover.attr('__cloud')).show();
        }
    });

    hover.draggable(
        {
            handle : canvas.find('#cloud_hover_handler'), // handler
            containment : 'parent',
            cursor : 'move',
            drag : function(event, ui)
            {
                $(this).parent().find($(this).attr('__cloud')).css(
                    {
                        'left' : ui.position.left,
                        'top' : ui.position.top
                    });
                dragging = true;
            },
            stop : function(event, ui)
            {
                $(this).parent().find($(this).attr('__cloud')).css(
                    {
                        'left' : ui.position.left,
                        'top' : ui.position.top
                    });
                dragging = false;
            }
        });
}
function render(canvas, data)
{
    var hover = canvas.find('#cloud_hover').hide();

    var nickname = canvas.find('#Nickname');
    var bigPictureURL = canvas.find('#BigPictureURL');

    nickname.html('<a href="ta.html?uid={0}" target="_blank">{1}</a>'.format(data.UserId, data.Nickname));
    bigPictureURL.attr('src', data.BigPictureURL);

    for ( var i = 0; i < SHOW_IDS.length; i += 1)
    {
        canvas.find(SHOW_IDS[i]).hide();
    }

    // adapt
    var adaptCloudData = [];
    for ( var i = 0; i < data.data.length; i += 1)
    {
        var _lable = data.data[i].lable;
        var _name = data.data[i].name;
        var _value = data.data[i].value;
        switch (_name)
        {
            case 'FavoriteSports':
            {
                var sports = _value.split(',');
                if (sports.length > 0)
                {
                    data.data[i].value = sports[0];
                }
                if (sports.length > 1)
                {
                    var tmp = {};
                    for ( var key in data.data[i])
                    {
                        tmp[key] = data.data[i][key];
                    }
                    if (sports[1])
                    {
                        tmp.value = sports[1].trim();
                        tmp.name = 'FavoriteSports2';
                        adaptCloudData.push(tmp);
                    }
                }
                if (sports.length > 2)
                {
                    var tmp = {};
                    for ( var key in data.data[i])
                    {
                        tmp[key] = data.data[i][key];
                    }
                    if (sports[2])
                    {
                        tmp.value = sports[2].trim();
                        tmp.name = 'FavoriteSports3';
                        adaptCloudData.push(tmp);
                    }
                }
                break;
            }
            case 'FavoriteLeague':
            {
                var leagues = _value.split(',');
                if (leagues.length > 0)
                {
                    data.data[i].value = leagues[0];
                }
                if (sports.length > 1)
                {
                    var tmp = {};
                    for ( var key in data.data[i])
                    {
                        tmp[key] = data.data[i][key];
                    }
                    if (leagues[1])
                    {
                        tmp.value = leagues[1].trim();
                        tmp.name = 'FavoriteLeague2';
                        adaptCloudData.push(tmp);
                    }
                }
                if (leagues.length > 2)
                {
                    var tmp = {};
                    for ( var key in data.data[i])
                    {
                        tmp[key] = data.data[i][key];
                    }
                    if (leagues[2])
                    {
                        tmp.value = leagues[2].trim();
                        tmp.name = 'FavoriteLeague3';
                        adaptCloudData.push(tmp);
                    }
                }
                break;
            }
            case 'FavoriteTeam':
            {
                var teams = _value.split(',');
                if (teams.length > 0)
                {
                    data.data[i].value = teams[0];
                }
                if (sports.length > 1)
                {
                    var tmp = {};
                    for ( var key in data.data[i])
                    {
                        tmp[key] = data.data[i][key];
                    }
                    if (teams[1])
                    {
                        tmp.value = teams[1].trim();
                        tmp.name = 'FavoriteTeam2';
                        adaptCloudData.push(tmp);
                    }
                }
                if (teams.length > 2)
                {
                    var tmp = {};
                    for ( var key in data.data[i])
                    {
                        tmp[key] = data.data[i][key];
                    }
                    if (teams[2])
                    {
                        tmp.value = teams[2].trim();
                        tmp.name = 'FavoriteTeam3';
                        adaptCloudData.push(tmp);
                    }
                }
                break;
            }
            case 'FavoriteStar':
            {
                var stars = _value.split(',');
                if (stars.length > 0)
                {
                    data.data[i].value = stars[0];
                }
                if (stars.length > 1)
                {
                    var tmp = {};
                    for ( var key in data.data[i])
                    {
                        tmp[key] = data.data[i][key];
                    }
                    if (stars[1])
                    {
                        tmp.value = stars[1].trim();
                        tmp.name = 'FavoriteStar2';
                        adaptCloudData.push(tmp);
                    }
                }
                if (stars.length > 2)
                {
                    var tmp = {};
                    for ( var key in data.data[i])
                    {
                        tmp[key] = data.data[i][key];
                    }
                    if (stars[2])
                    {
                        tmp.value = stars[2].trim();
                        tmp.name = 'FavoriteStar3';
                        adaptCloudData.push(tmp);
                    }
                }
                break;
            }
        }
    }
    data.data = data.data.concat(adaptCloudData);
    for ( var i = 0; i < data.data.length; i += 1)
    {
        var _lable = data.data[i].lable;
        var _name = data.data[i].name;
        var _value = data.data[i].value;
        _value = _value ? _value : '';
        var _value_adapt = '';
        var _length = 0;
        for ( var j = 0; j < _value.length; j += 1)
        {
            if (_length >= 6 * 2)
            {
                break;
            }

            _value_adapt += _value.charAt(j);
            if (encodeURI(_value.charAt(j)).length >= 9)
            {
                _length += 2;
            }
            else
            {
                _length += 1
            }
        }
        _value = _value_adapt;

        var _logo = data.data[i].logo;

        var cloud = canvas.find('#{0}'.format(_name));

        if (cloud.size() == 0) continue;

        cloud.html(_value).show();

        cloud.attr('__index', i);
        cloud.attr('__canvas', '#' + canvas.attr('id'));
        cloud.attr('__name', _name);
        cloud.attr('__lable', _lable);
        cloud.attr('_value', _value);

        // hover
        cloud.hover(function()
        {
            if (dragging) { return; }

            var cloud = $(this);
            var canvas = $(cloud.attr('__canvas'));
            var hover = canvas.find('#cloud_hover').hide();
            if (hover.attr('__cloud'))
            {
                canvas.find(hover.attr('__cloud')).show();
            }
            hover.attr('__cloud', '#' + $(this).attr('id'));

            renderHandler(hover.find('#cloud_hover_handler'), data.data[parseInt(cloud.attr('__index'))], data.data);
            renderBody(hover.find('#cloud_hover_body'), data.data[cloud.attr('__index')], data.data);

            cloud.hide();
            hover.css(
                {
                    'left' : cloud.left(),
                    'top' : cloud.top()
                }).show();
        }, function()
        {
        });

    }
    canvas.show();
}
var data;
var canvas_index = 0;
$(function()
{

    $
            .getJSON(
                    "http://id.nba.tom.com/id_api_4.0.3/profile.do?method=recommended",
                    function(data)
                    {
                        $
                                .each(
                                        data.Data,
                                        function(i, item)
                                        {
                                            if (i > 95) { return; }
                                            var __t = "<li style='list-style-type:none;list-style-image:none;float: left;width: 32px;height:32px;'><img onclick='javascript:renderWithAjax({0});' title='{1}' id='pic_{2}' src='{3}' width='30' height='30' style='cursor: pointer;margin: 1px 1px 1px 1px;' /></li>";
                                            // 0 uid
                                            // 1 name
                                            // 2 uid
                                            // 3 pic
                                            $(__t.format(item.UserId, item.Nickname, item.UserId, item.SmallPictureURL)).appendTo("#userPhotoWall");
                                        });
                    });

    for ( var i = 0; i < CANVAS.length; i++)
    {
        initHover($(CANVAS[i]));
    }
    //
    $.post("cloud.do?m=info",
        {
            userId : 2000074,
            systemType : 2
        }, function(json, statusText)
    {
        if (json.result == 'success')
        {
            data = json;
            render($(CANVAS[canvas_index]), data);
            $(CANVAS[canvas_index]).show();
        }
    }, 'json');
    //
});

function renderWithAjax(uid)
{
    $.post("cloud.do?m=info",
        {
            userId : uid,
            systemType : 2
        }, function(json, statusText)
    {
        if (json.result == 'success')
        {
            data = json;

            canvas_index = (canvas_index += 1) % CANVAS.length;
            var canvas = $(CANVAS[canvas_index]);

            $(CANVAS[(canvas_index + CANVAS.length - 1) % CANVAS.length]).hide();
            try
            {
                render(canvas, data);
            }
            catch (e)
            {
                render(canvas, data);
            }
            finally
            {
                $(CANVAS[canvas_index]).show();
            }
        }
    }, 'json');

}

var CANVAS = [
        '#canvas0', '#canvas1', '#canvas2'
];
var IDS = [
        // UserBasic 9
        '#Gender', '#Birthday', '#Constellation', '#Hometown', '#Address', '#Size', '#Marriage', '#Identity',
        '#BlogName'
        // UserSportsLoving 11
        , '#FavoriteSports', '#FavoriteLeague', '#FavoriteTeam', '#FavoriteStar', '#ExcitingRaceMoment', '#OutrangeousRaceMoment', '#FavoriteFoodWatchingRace', '#FavoriteSportsBrand',
        '#FavoriteCommentator', '#FavoriteCoach', '#FavoriteSiteName'
        // UserEducation 5
        , '#SchoolName', '#Faculty', '#Classes', '#Professional', '#SchoolYear'
        // UserWork 5
        , '#CompanyName', '#Department', '#Job', '#Industry', '#EntryTime'
        // UserContact 5
        , '#MSN', '#QQ', '#Tel', '#MailingAddress', '#Zip'
        // UserBBS
        , '#Introduction', '#CustomTitle', '#Signature', '#Title', '#Yahoo', '#AliPay', '#AliWangwang'
];

var SHOW_IDS = [
        // UserBasic 8
        '#Gender', '#Birthday', '#Constellation', '#Hometown', '#Address', '#Size', '#Marriage', '#Identity',
        '#BlogName'
        // UserSportsLoving 11
        , '#FavoriteSports', '#FavoriteLeague', '#FavoriteTeam', '#FavoriteStar', '#ExcitingRaceMoment', '#OutrangeousRaceMoment', '#FavoriteFoodWatchingRace', '#FavoriteSportsBrand',
        '#FavoriteCommentator', '#FavoriteCoach', '#FavoriteSiteName'
        //
        , '#FavoriteSports2', '#FavoriteSports3', '#FavoriteLeague2', '#FavoriteLeague3', '#FavoriteTeam2', '#FavoriteTeam3', '#FavoriteStar2', '#FavoriteStar3'
        // UserEducation 1
        , '#SchoolName'
        // UserWork 0
        // UserContact 0
        // UserBBS 1
        , '#CustomTitle'
        // split
        , '#FavoriteSports2', '#FavoriteSports3', '#FavoriteLeague2', '#FavoriteLeague3', '#FavoriteTeam2', '#FavoriteTeam3'
];