Untitled

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>My music</title>
        <link rel="stylesheet" href="style.css" type="text/css" />
        <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
        <script type="text/javascript" src="jquery.tablesorter.js"></script>
        <script type="text/javascript" src="jquery.editinplace.js"></script>
        <script type='text/javascript'>


        getEntries();

                function getEntries(){

                    $.ajax({
                        //url: "http://gdata.youtube.com/feeds/api/playlists/PL48A83AD3506C9D36?v=2&alt=json",
                        url: "https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=50&playlistId=PL48A83AD3506C9D36&key=AIzaSyAyvig5VkfPt_lBR4sFl-ajsULtgUHmTwA",
                        dataType: "jsonp",

                        success: function (data) {
                            var video_id="";
                            $.each(data.items, function (i,item) {
                                video_id = video_id + item.snippet.resourceId.videoId + ',';
                            });
                            video_id = video_id.substring(0, video_id.length - 1);
                            console.log(video_id);
                            $.ajax({
                                url: "https://www.googleapis.com/youtube/v3/videos?part=contentDetails%2Cstatistics%2Csnippet%2Cplayer&id=" + video_id + "&key=AIzaSyAyvig5VkfPt_lBR4sFl-ajsULtgUHmTwA",
                                dataType: "jsonp",

                                success: function (data) {
                                    $.each(data.items, function (i,item) {
                                        var title = item.snippet.title;
                                        var thumb = item.snippet.thumbnails.default.url;
                                        var numLikes = item.statistics.likeCount;
                                        var numDislikes = item.statistics.dislikeCount;
                                        var viewCount = item.statistics.viewCount;

                                        $('#entries tbody').append("<tr><td id='editinplace'>" + title + "</td> <td><img alt='"+ title+ "' src='"+ thumb +"'></img></td><td>" + numLikes + "</td><td>" + numDislikes + "</td><td>" + viewCount + "</td>" + "<td style='display: none' id='delete'><input type='button' class='del' value='Избриши'/></td>" +"</tr>");
                                    });
                                    $("table").trigger("update");
                                    setEditInPlace();
                                }
                            });

                            $("table").trigger("update");
                            setEditInPlace();
                        }
                    });

                 }


                 setEditInPlace();
                 function setEditInPlace()
                    {
                        $("td").each(function() {
                            var id = $(this).attr("id");
                            if (id == 'editinplace'){
                                $(this).editInPlace({
                                    callback: function(unused, enteredText) { return enteredText; },
                                    show_buttons: true
                                });
                            }
                        });
                    }
            $(document).ready(function(){


                $("#entries").tablesorter();

                $("#edit").click(function() {
                    var text = $("#edit").val();
                    if (text == 'Измени')
                    {
                        $("#edit").val('Затвори');
                        $("td").each(function() {
                            var id = $(this).attr("id");
                            if (id == 'delete') $(this).show('slow');
                        });
                    }
                    else
                    {
                        $("#edit").val('Измени');
                        $("td").each(function() {
                            var id = $(this).attr("id");
                            if (id == 'delete') $(this).hide('slow');
                        });
                    }
                });
                $('.del').live('click',function(){
                        $(this).parent().parent().remove();
                        $("#entries").trigger("update");
                });
            });
        </script>
    </head>

    <body>
    <h1>My music</h1>

    <table id="entries" class="tablesorter" border="0" cellpadding="5" cellspacing="10">
        <thead>
            <tr>
                <th>Title</th>
                <th>Image</th>
                <th>No. of likes</th>
                <th>No. of dislikes</th>
                <th>View count</th>
                <th><input type="button" id="edit" value="Измени" /></th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

    </body>