Untitled

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Exam</title>
    <link rel="stylesheet" href="jquery/jquery-ui.css">
    <script src="jquery/jquery.js"></script>
    <script src="jquery/jquery-ui.js"></script>
    <style type="text/css">


          .container {
            display:none;
          }

          #right{
              border: 1px solid black;
              width: 300px;
              height: 200px;
          }

          #list1 {
            list-style-type: none;
              margin-left: -40px;
              width: 200px;
          }


      </style>

    <script type="text/javascript">

    var autoComplete = [ "Kingsman", "Tomorrowland", "Jurassic World", "San Andreas Quake", "Survivor",
                         "Ex Machina", "Focus", "Blackhat", "Chappie", "Fury", "Big Hero 6", "Predestination",
                         "Gone Girl", "Jupiter Ascending", "John Wick", "Seventh Son", "Lucy", "American Sniper"
                        ];


        function getMovies(movie){
            $.ajax({
                url: "http://omdbapi.com/?t="+movie,
                dataType: "json",
                success: function(data){
                    var title = data.Title;
                    var director = data.Director;
                    var actors = data.Actors;
                    var rat = data.imdbRating;
                    var pic = data.Poster;
                    var genre = data.Genre;
                    var split = genre.split(", ");
                    $(".container").show();


                    if (split[0] == "Comedy"){
                        $("#list1").append("<li title1='"+title+"' dir='"+director+"' act='"+actors+"' imdbrat='"+rat+"'>" + "<span style='color: red'>"+title+"</span>" + "<img style='display:none' src='"+pic+"'/>" +"</li>");
                    } else if (split[1] == "Comedy") {
                            $("#list1").append("<li title1='"+title+"' dir='"+director+"' act='"+actors+"' imdbrat='"+rat+"'>" + "<span style='color: red'>"+title+"</span>"+ "<img style='display:none' src='"+pic+"'/>" +"</li>");
                    } else if (split[2] == "Comedy") {
                        $("#list1").append("<li title1='"+title+"' dir='"+director+"' act='"+actors+"' imdbrat='"+rat+"'>" + "<span style='color: red'>"+title+"</span>"+ "<img style='display:none' src='"+pic+"'/>" +"</li>");
                    } else {
                           $("#list1").append("<li title1='"+title+"' dir='"+director+"' act='"+actors+"' imdbrat='"+rat+"'>" + title + "<img style='display:none' src='"+pic+"'/>" +"</li>");
                    }

                }
            });
        }


        $(document).ready(function() {


            $("#search").click(function() {
                var tmp = $("#searchTerm").val();
                getMovies(tmp);

            });


            $("#searchTerm").autocomplete({
                source: autoComplete
            });

            $("#list1").on("click","li",(function() {
                var slika =  $(this).find("img");
                $("#image").html(slika.css("display","block"));
            }));

            $("#list1").sortable({
                connectWith: "#right"
            });

            $("#right").sortable({
                receive: function(event,ui){
                    ui.item.remove();
                }
            });


            $(document).tooltip({
               items: "#list1 li",
                content: function() {
                    var t = $(this).attr("title1");
                    var d= $(this).attr("dir");
                    var a = $(this).attr("act");
                    var rt = parseInt($(this).attr("imdbrat"));
                    var str="";
                    str+= "Title: " + t + "<br/>" + "Director: " + d +"</br>" + "Actors:  " + a + "<br/>" + "Rating: ";
                    for (var i = 0; i < rt ;i++) {
                        str += "<img src='star1.png'/>";
                    }
                    for (var i = rt; i < 10;i++){
                        str += "<img src='star0.png'/>";
                    }
                    return str;
                }
            });
        });


  </script>
</head>
<body>
<div id="main">
    <div >
        <span id="get">
            <h1> IA EXAM </h1>
            <input type="text" id="searchTerm" />
            <button id="search">Get</button>
        </span>
    </div>
    <div class="container">
        <strong>Current movies</strong>
        <br>
        <ul id="list1">

        </ul>
    </div>
    <div id="image">

    </div>

    <div id="right" class="container">
        <strong>Drop a movie here to delete it</strong>
        <br>
    </div>
</div>

</body>
</html>