{% extends "layout.html" %}
{% set active_page = "enthusiast" %}
{% block title %}enthusiast{% endblock %}
{% block head %}
  {{ super() }}
    <!-- Load d3.js and c3.js -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqcloud/1.0.4/jqcloud.css">
    <script src='http://d3js.org/d3.v3.min.js' charset='utf-8'></script>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js'></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="static/node_modules/chosen-js/chosen.css">
    <script src="static/node_modules/chosen-js/chosen.jquery.js"></script>
    <script src='static/node_modules/jqcloud2/src/jqcloud.js'></script>
    <script src='static/node_modules/chroma-js/chroma.js'></script>
    <link rel='stylesheet' type='text/css' href='static/css/custom.css'>
    

{% endblock %}

{% block body %}
    <div id="bottom-image">
    <div id="top-image">
    {{ super ()}}
    {{ body | safe }}
    <div class="container center" style='background-color:#42637C'>
        <div class='row'>
        <div class='col-sm-12'>
            <h2>Sentiment Analysis</h2>
            See how your favorite genre stacks up.  When were the best movies released?  When did they gross the most money?  Then hover over the line chart to find see how the plots have changed over the years.  I believe that it is a bit difficult to come up with a solid trend since we are only utilizing 0.1% of the total movies from the IMDB database.  Regardless it is still a fun tool to browse for funny word clouds, or highly subjective years and see the top grossing movies that may have swayed those metrics.
        </div>
        </div>
        <hr>
    <div style='margin-top:50px'>
    {{ form | safe }}
    </div>
    <hr>
        <div class='row kpi-row' style='margin-top:50px auto; float:center; background-color:#0C243B;'>
            <div class='col-sm-4'></div>
            <div class='col-sm-1 kpi'>
                Year: <div class='kpi-value' id='year'>
                </div>
            </div>
            <div class='col-sm-1 kpi'>
                Score: <div class='kpi-value' id='score'>
                </div>
            </div>
            <div class='col-sm-1 kpi'>
                Gross: <div class='kpi-value' id='gross'>
                </div>
            {# <div class='col-sm-3'></div> #}
            </div>
        </div>

        <div class="row" min-height:150px>
            <div class='col-sm-12'>
                <div id='timeseries-chart'></div>
                <div id='note' class='note'>
                <em>
                Hover/tap over the line plot to slice the proceeding analysis by a 3 year slice centered around the hover year.
                </em>
                </div>
            </div>
        </div>

        <div class="row" min-height:150px>
            <div class='col-sm-6'>
                <div id='sentiment-chart-title' class='sentiment-chart-title'>
                <h2>Sentiment</h2>
                The following chart shows polarity/subjectivity of the plot keywords scaled to match the dataset.  Polarity defines how positive or negative the plot is, while subjectivity shows how objective or subjective the plot is.  Action movies tend to contain more negativity with words like Murder, Terrorist, and assassin, while romance movies tend to show more positivity with words like Love, Wedding, and Friend.
                </div>
                <div id='sentiment-chart' class='sentiment-chart'></div>
            </div>

            <div class='col-sm-6'>
                <div id='word-cloud-title'>
                <h2>Common Keywords</h2>
                This word cloud shows the most common plot keywords by their frequency.  The size of the font dictates how each word ranks to other words.  Word clouds typically do not convey data very well since longer words tend to carry more weight, and their position is random.  It is fitting to use here for a fun way to see the keywords.
                </div>
                <div id='word_cloud'></div>
            </div>
        </div> 

        <div class="row" min-height:150px>
            <div class='col-sm-6 centered'>
                <div id='top_movies'></div>
            </div>
        </div> 

        <div class='row' padding:50px>
            <div class='col-sm-3'></div>
            <div class='col-sm-6' style='text-align:center'>
            <h2>Top Movies</h2>
                <div id='note' class='note'>
                <em>
                by gross $
                </em>
                </div>
            <em>
            </div>
            <div class='col-sm-3'></div>
        </div>

        {% for i in range(0, 6, 3) %}
        <div class="row" min-height:150px>
        {% for j in range(3) %}
            <div class='col-sm-4'>
                <div id='title-{{i+j}}' class='title'></div>
                <div id='poster-{{ i + j }}' class='poster'></div>
            </div>
        {% endfor %}
        </div>
        {% endfor %}
    </div>
    <script src='static/js/enthusiast.js'></script>
    </div>
    </div>
{% endblock %}