<!--
@group ROUTETOPA Polymer Core Elements

The `datatables-datalet` is a porting of Datatables JQuery library in a web component that has built up by using Polymer.
Pass to this component a data url(CKAN api uri) and a string with one or multiple query in JsonPath format(separated by spaces) and it'll show a
table with data and query attributes with all Datatables library features.

### Code

Example

    <datatables-datalet
        dataUrl="http://demo.ckan.org/api/action/datastore_search?resource_id=8324a4c9-66d6-47bf-a898-94237cc39b9f&amp;limit=50"
        query="$.result.records..Supplier $.result.records..Amount">
    </datatables-datalet>

@class datatables-datalet
-->
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../base-datalet/base-datalet.html">

<dom-module id="datatable-datalet">
    <template>
        <link rel="stylesheet" href="../shared_js/bootstrap-3.3.4-dist/css/bootstrap.css">
        <link rel="stylesheet" href="js/DataTables-master/media/css/dataTables.bootstrap.css">

        <table id="datatable" class="table table-striped table-bordered" cellspacing="0" style="height: auto; width: auto;">
        </table>
        <base-datalet data-url="{{dataUrl}}" query="{{query}}"></base-datalet>
    </template>

    <script src="js/DataTables-master/media/js/jquery.dataTables.js"></script>
    <script src="js/DataTables-master/media/js/dataTables.bootstrap.js"></script>

    <script>
        var DatatableBehavior = {
            tempData : null,
            selectData: function(e){
                var queries =  this._component.query.split("###");

                for (i = 0; i < queries.length; i++) {
                    var propName = this.getPropertyName(queries[i]);

                    this.tempData = jsonPath(this.properties.json_results.value, queries[i]);
                    if(!this.tempData || this.tempData == undefined) return;
                    for (j = 0; j < this.tempData.length; j++) {
                        if (i == 0) this.properties.data.value[j] = {};
                        currObj = {};
                        currObj[propName] = this.tempData[j];
                        jQuery.extend(this.properties.data.value[j], currObj);
                    }
                }
            },
            transformData: function(){
                if(!this.tempData || this.tempData == undefined) return;
                html = "";
                html += '<thead>'+
                           '<tr>';
                for(value in this.properties.data.value[0]){
                   html += '<th>' + value + '</th>';
                }
                html +=  '</tr>' +
                         '</thead>' +
                         '<tfoot>' +
                         '<tr>';
                for(value in this.properties.data.value[0]){
                    html += '<th>' + value + '</th>';
                }
                html += '</tr>' +
                        '</tfoot>' +
                        '<tbody>';
                for(key in this.properties.data.value){
                    html += '<tr>';
                    for(value in this.properties.data.value[0]) {
                      html += '<td>' + this.properties.data.value[key][value] + '</td>';
                    }
                    html += '</tr>';
                }
                html += '</tbody>';

                $(this._component.$.datatable).append(html);
                $(this._component.$.datatable).DataTable();
            }
        };

        Polymer({
            is : 'datatable-datalet' ,
            ready: function(){
                var DatatableComponentBehavior =  $.extend(true, {}, BaseDataletBehavior, WorkcycleBehavior,AjaxJsonDataRequestBehavior, DatatableBehavior);
                DatatableComponentBehavior.init(this);
            }

        });
    </script>
</dom-module>