var RESOURCES_LIST_TABLE_TEMPLATE = '<table class="resources_list" cellpadding="0" cellspacing="0">{resourcesList}</table>';

var RESOURCE_CARD_TEMPLATE =
    '<td class="resource_item">' +
        '<table class="presentation_card_small" cellpadding="0" cellspacing="0">' +
            '<tr>' +
                '<td>' +
                    '<a href="{view_url}" title="{title}"><img src="{resource_thumbnail}" class="small_thumbnail" alt="{title}" id="resourceThumbnail{id_media_resource}" /></a>' +
                '</td>' +
            '</tr>' +
            '<tr>' +
                '<td style="padding-top: 5px;"><a href="{view_url}" title="{title}" class="title">{truncate_title}</a></td>' +
            '</tr>' +
        '</table>' +
    '</td>' + "\n";

var RESOURCE_CARD_SPACE = '<td class="space" style="width: {resource_card_space}px;"></td>' + "\n";

var RESOURCE_CARD_EMPTY = '' +
    '<td>' +
        '<table class="presentation_card" style="width: 100px;" cellpadding="0" cellspacing="0">' +
            '<tr><td>&nbsp;</td></tr>' +
        '</table>' +
    '</td>' + "\n";

function BuildResourcesList(idContainer, queryResult, countColumns, columnsSpace)
{
    var resources      = ConvertResourcesQueryString(queryResult);
    var countResources = resources.length;

    columnsSpace   = columnsSpace || 14;

    var resourcesList = "";
    var resourcesRow  = "";
    var rowLength     = 0;
    for (var i = 0; i < countResources; ++i)
    {
        var resource = resources[i];
        var resourceCard = ParseTemplate(RESOURCE_CARD_TEMPLATE, resource);
        resourcesRow += resourceCard;
        if (rowLength < countColumns - 1)
        {
            resourcesRow += ParseTemplate(RESOURCE_CARD_SPACE, {"resource_card_space" : columnsSpace});
            ++rowLength;
        }
        else
        {
            resourcesList += "<tr>" + resourcesRow + "</tr>";
            resourcesRow  = "";
            rowLength = 0;
        }
    }
    if (rowLength > 0)
    {
        for (i = rowLength; i < countColumns; ++i)
        {
            resourcesRow += RESOURCE_CARD_EMPTY;
            if (i < countColumns - 1)
                resourcesRow += RESOURCE_CARD_SPACE;
        }
        resourcesList += "<tr>" + resourcesRow + "</tr>";
    }
    GetElement(idContainer).innerHTML = ParseTemplate(RESOURCES_LIST_TABLE_TEMPLATE, {resourcesList:resourcesList});

    for (i = 0; i < countResources; ++i)
    {
        var resource = resources[i];
        AddResourceTooltip(resource.id_media_resource, resource);
    }
}

/**
 * Converts query string with resources to array of resources.
 */
function ConvertResourcesQueryString(queryResult)
{
    var resources = new Array();

    var countResources = parseInt(GetQueryStringParam(queryResult, "count_resources"));
    for (var i = 0; i < countResources; ++i)
    {
        var resource = new Object();
        resource["id_media_resource"]  = GetQueryStringParam(queryResult, "id_media_resource" + i);
        resource["view_url"]           = GetQueryStringParam(queryResult, "url" + i);
        resource["title"]              = GetQueryStringParam(queryResult, "title" + i);
        resource["tooltip_title"]      = GetQueryStringParam(queryResult, "tooltip_title" + i);
        resource["truncate_title"]     = GetQueryStringParam(queryResult, "truncate_title" + i);
        resource["resource_thumbnail"] = GetQueryStringParam(queryResult, "resource_thumbnail" + i);
        resource["user_url"]           = GetQueryStringParam(queryResult, "user_url" + i);
        resource["user_login"]              = GetQueryStringParam(queryResult, "login" + i);
        resource["count_rates"]        = GetQueryStringParam(queryResult, "count_rates" + i);
        resource["count_views"]        = GetQueryStringParam(queryResult, "count_views" + i);
        resource["count_embeds"]       = GetQueryStringParam(queryResult, "count_embeds" + i);
        resource["category_url"]       = GetQueryStringParam(queryResult, "category_url" + i);
        resource["category_name"]           = GetQueryStringParam(queryResult, "category" + i);
        resource["time_ago"]           = GetQueryStringParam(queryResult, "time_ago" + i);
        resource["time_units"]         = GetQueryStringParam(queryResult, "time_units" + i);
        resource["rate"]               = GetQueryStringParam(queryResult, "rate" + i);
        resource["description"]        = GetQueryStringParam(queryResult, "description" + i);
        resource["language_name"]           = GetQueryStringParam(queryResult, "language" + i);
        resource["is_pro_account"]     = GetQueryStringParam(queryResult, "is_pro_account" + i);
        resource["user_slidelog_url"]  = GetQueryStringParam(queryResult, "user_slidelog_url" + i);

        resources.push(resource);
    }
    return resources;
}

function InitResourcesTooltips()
{
    $("input[id^='resourceTooltipVars']").each(function(){
        var id = $(this).attr("id");
        var tooltipId = GetSuffixNumericId( id );
        if (tooltipId == 0)
        {
            return;
        }

        var tooltipVars = JsonDecode($(this).val());

        tooltipVars["title"] = $("#resourceTitle" + tooltipId).val();
        tooltipVars["tooltip_title"] = $("#resourceTooltipTitle" + tooltipId).val();
        tooltipVars["count_views"] = $("#resourceCountViews" + tooltipId).val();
        tooltipVars["description"] = $("#resourceDescription" + tooltipId).val();

        AddResourceTooltip(tooltipId, tooltipVars);

        var isUpdate = $("#resourceNeedUpdate" + tooltipId).val();
        if ( isUpdate == "true" )
        {
            AddUpdateResource(tooltipId, tooltipVars.THUMBNAIL_SMALL_SCRIPT);
        }
    });
}

$(function(){
    InitResourcesTooltips();
});