jQuery(document).ready(function($) {
    $("#a2widget").html('<div style="text-align: center; padding: 20px 0 20px 0; font-weight: bold;"><div style="margin-bottom: 5px;text-align: center;">Loading AlternativeTo Widget</div><img src="http://alternativeto.net/resources/gfx/ajax-loader.gif"></div>');

    var a2options = $("#a2options").val().split(",");

    $.ajax({ type: "GET",
        dataType: "json",
        url: "http://api.alternativeto.net/api/apps/alternatives/?app=" + a2options[1] + "&count=" + a2options[0] + "&category=" + a2options[2] + "&jsoncallback=?",
        success: function(data) {
            var sHtml = "<div class='a2header'><div class='a2header-left'><div class='a2icon'><img src=" + data.IconUrl + " />";
            sHtml += "<div class='a2likes a2likes-top'>" + data.Votes + "<span>likes</span></div></div><h2>";
            sHtml += "<a href='" + data.Url + "'>" + data.Name + "</a></h2>";
            sHtml += "<p class='a2desc'>" + data.ShortDescription + "</p></div>";
            sHtml += "<div class='a2header-right'><h2>Platforms</h2><span>" + data.Platforms.join(", ").replace("Windows", "Win") + "</span><hr>";
            sHtml += "<h2>License</h2><span>" + data.License.replace('Free with limited functionality', 'Free (Limited)') + "</span></div>";
            sHtml += "<br style='clear: both;' />";
            sHtml += "</div><div class='a2list-content'>";
            sHtml += "<h2>The best alternatives to " + data.Name + " from <a href='http://alternativeto.net'>AlternativeTo</a></h2>";
            sHtml += "<ul id='alt2-list'>";

            $.each(data.Items, function(i, item) {
                var platforms = item.Platforms.join(", ").replace("Windows", "Win"); //.replace("Windows", "Win");
                var name;
                if (item.Name.length > 24) {
                    name = item.Name.substring(0, 24) + "...";
                } else {
                    name = item.Name;
                }

                sHtml += '<li><div class="a2likes">' + item.Votes + '<span>likes</span></div><a href="' + item.Url + '">' + name + '</a> <em>' + item.License.replace('Free with limited functionality', 'Free (Limited)') + ' | ' + platforms + '</em></li>';
            });

            sHtml += "</ul><br style='clear: both' /></div>";
               
            $("#a2widget").html(sHtml);
        }
    });
});