<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="timeline-element.html">
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout-classes.html">

<dom-module id="timeline-grid" current-count="{{currentCount}}">
    // Template
    <template>
        <style include="iron-flex"></style>
        <style>
            timeline-element:nth-of-type(n+2) {
                margin-left: 20px;
            }

            .timeline-grid {
                position: relative;
                --top-movement: 102px;
            }

            #scrolling-box {
                background: red;
                width: 100%;
                height: 3px;
                position: absolute;
                top: 62px;
                z-index: 2;
            }
        </style>
        <iron-ajax
                auto
                url="/timeline/timeline-data"
                handle-as="json"
                on-response="handleResponse"
                id="ajax-timeline-data"></iron-ajax>

        <div class="layout horizontal">
            <span id="scrolling-box"></span>
            <template is="dom-repeat" items="{{timeline_data.cameraTimelines}}">
                <timeline-element timeline_data="{{item}}" class="flex"></timeline-element>
            </template>
        </div>

    </template>

    // Scripts
    <script src="../bower_components/velocity/velocity.js"></script>
    <script src="timeline-grid.js"></script>
</dom-module>

<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="timeline-element.html">
<link rel="import" href="../bower_components/iron-flex-layout/iron-flex-layout-classes.html">

<dom-module id="timeline-grid">
    // Template
    <template>
        <style include="iron-flex"></style>
        <style>
            timeline-element:nth-of-type(n+2) {
                margin-left: 20px;
            }

            .timeline-grid {
                position: relative;
                --top-movement: 102px;
            }

            #scrolling-box {
                background: red;
                width: 100%;
                height: 3px;
                position: absolute;
                top: 62px;
                z-index: 2;
            }
        </style>
        <iron-ajax
                auto
                url="/timeline/timeline-data"
                handle-as="json"
                on-response="handleResponse"
                id="ajax-timeline-data"></iron-ajax>

        <div class="layout horizontal">
            <span id="scrolling-box"></span>
            <template is="dom-repeat" items="{{timeline_data.cameraTimelines}}">
                <timeline-element timeline_data="{{item}}" class="flex"></timeline-element>
            </template>
        </div>

    </template>

    // Scripts
    <script src="../bower_components/velocity/velocity.js"></script>
    <script src="timeline-grid.js"></script>
</dom-module>

Remove Unnecessary Data Property Binding
Remove Unnecessary Data Property Binding
