<style type="text/css">
    .result {
        width: 500px;
        padding: 10px;
    }

    .selector,
    .selector > input {
        font-size: 20px;
        font-weight: bold;
    }

    .pathname,
    .pathname > input {
        color: grey;
        font-size: 0.8em;
    }

    .mediatypes {
        color: grey;
        float: right;
    }

    .mediatypes input {
        text-align: right;
    }

    .results-list {
        list-style-type: none;
        padding: 0;
        float: left;
    }

    .results-list > li:hover {
        background-color: lightgrey;
    }

    .results-list > li {
        border-bottom: #C0C0C0 1px solid;
    }

    .filter {
        border-right: black solid 1px;
        float: left;
    }

    .filter input,
    #rule-name {
        border: none;
        background-color: none;
        color: black;
        border-bottom-width: 1px;
        border-bottom-style: dashed;
        border-bottom-color: grey;
    }

    .rule-filter {
        float: left;
    }

    .pathname > input {
        width: 350px;
    }

    .selector > input {
        width: 300px;
    }

    .top-header {
        position: fixed;
        top:0;
        width: 100%;
        border-bottom: black 1px solid;
        background-color: white;;
    }

    .content {
        margin-top: 70px;
    }

    .code-preview {
        position: absolute;
        bottom: 0;
        top: 69px;
        left:501px;
        right:0;
    }

    .results-list-container {
        overflow: auto;
        width: 500px;
        position: absolute;
        bottom:0;
        top:69px;
        left:0;
    }

    pre {
        padding: 0;
        border: 0;
        height: 100%
    }

    pre code {
        height: 100%
    }

    #rule-name {
        margin: 15px;
        width: 300px;
    }

</style>

<div class="top-header">
  <div class="result filter">
    <div class="mediatypes">
      <input type="text" id='mediatype' value='' placeholder='media type'>
    </div>
    <div class="selector">
      <input type="text" id='selector' value='' placeholder='css selector'>
    </div>
    <div class="pathname">
      <input type="text" id='pathname' placeholder='css file path'>
    </div>
  </div>

  <div class="rule-filter">
    <input type="text" id='rule-name' placeholder='css rule'>
  </div>
</div>

<div class="content">
    <div class="results-list-container">
        <ul class="results-list">
        </ul>
    </div>
    <div class="code-preview">

    </div>
</div>

<div class="template-result" style="display:none;">
  <li class="result">
    <div class="mediatypes"></div>
    <div class="selector"></div>
    <div class="pathname"></div>
  </li>
</div>

<script type="text/javascript">
    $(function () {
        var data = <%= @css_selectors.to_json.html_safe %>;

        window.gg = data;

        function debounce(fn, delay) {
            var timer = null;
            return function () {
                var context = this, args = arguments;
                clearTimeout(timer);
                timer = setTimeout(function () {
                    fn.apply(context, args);
                }, delay);
            };
        }

        var filterData = function () {
            var filter_selector = $("#selector").val();
            var filter_pathname = $("#pathname").val();
            var filter_mediatype = $("#mediatype").val();
            var filter_css = $("#rule-name").val();
            var max_results = 200;

            var result = [];

            for (var i = 0; i < data.length; i++) {
                if (result.length >= max_results) {
                    break;
                }
                var item = data[i];
                if (item.selector.indexOf(filter_selector) != -1 &&
                        item.pathname.indexOf(filter_pathname) != -1 &&
                        item.declarations.indexOf(filter_css) != -1 ) {

                    var media_match = false;
                    for (var b = 0; b < item.media_types.length; b++) {
                        if (item.media_types[b].indexOf(filter_mediatype) != -1) {
                            media_match = true;
                        }
                    }

                    if (media_match || (item.media_types.length == 0 && filter_mediatype.length == 0)) {
                        item.index_id = i;
                        result.push(item);
                    }
                }
            }

            return result;
        }

        var render = function (list) {
            var results_list = $('.results-list');
            var template = $('.template-result');
            template = $(template.html());

            results_list.html('');
            for (var i = 0; i < list.length; i++) {
                var item = list[i];

                var html = template.clone();
                html.data('index-id', item.index_id)
                html.find('.selector').text(item.selector);
                html.find('.pathname').text(item.pathname);
                html.find('.mediatypes').text(item.media_types.join(','));

                results_list.append(html);
            }

        }

        var update = debounce(function () {
            var filteredData = filterData();
            render(filteredData);
        }, 500);

        $('.filter').on('keyup', 'input', update);
        $('#rule-name').on('keyup', update);

        $('.results-list').on('mouseenter', 'li', function (e) {

            var elem = $(this);
            var item = data[elem.data('index-id')];

            var html = '<pre><code class="css">';
            html += item.selector + ' {\n ';
            html += item.declarations;
            html += '};';
            html += '</code></pre>';

            $('.code-preview').html(html);

            $('pre code').each(function (i, e) {
                hljs.highlightBlock(e)
            });

        });
    });

</script>