/*
 *  ******************************************************************************
 *  *
 *  *
 *  * This program and the accompanying materials are made available under the
 *  * terms of the Apache License, Version 2.0 which is available at
 *  * https://www.apache.org/licenses/LICENSE-2.0.
 *  *
 *  *  See the NOTICE file distributed with this work for additional
 *  *  information regarding copyright ownership.
 *  * Unless required by applicable law or agreed to in writing, software
 *  * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 *  * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 *  * License for the specific language governing permissions and limitations
 *  * under the License.
 *  *
 *  * SPDX-License-Identifier: Apache-2.0
 *  *****************************************************************************
 */

$(function () { // on dom ready

    $('#layers').cytoscape({
        layout: {
            name: 'dagre',
            padding: 10
        },

        style: cytoscape.stylesheet()
            .selector('node')
            .css({
                'shape': 'data(faveShape)',
                'width': 'mapData(weight, 40, 80, 20, 60)',
                'content': 'data(name)',
                'text-valign': 'center',
                'text-outline-width': 2,
                'text-outline-color': 'data(faveColor)',
                'background-color': 'data(faveColor)',
                'color': '#fff'
            })
            .selector(':selected')
            .css({
                'border-width': 3,
                'border-color': '#333'
            })
            .selector('edge')
            .css({
                'curve-style': 'bezier',
                'opacity': 0.666,
                'width': 'mapData(strength, 70, 100, 2, 6)',
                'target-arrow-shape': 'triangle',
                'source-arrow-shape': 'circle',
                'line-color': 'data(faveColor)',
                'source-arrow-color': 'data(faveColor)',
                'target-arrow-color': 'data(faveColor)'
            })
            .selector('edge.questionable')
            .css({
                'line-style': 'dotted',
                'target-arrow-shape': 'diamond'
            })
            .selector('.faded')
            .css({
                'opacity': 0.25,
                'text-opacity': 0
            }),

        elements: {
            nodes: [
                {
                    data: {
                        id: '0',
                        name: 'Input',
                        weight: 100,
                        faveColor: '#6FB1FC',
                        faveShape: 'triangle'
                        // , href: '?layer=0'
                    }
                },
                {
                    data: {
                        id: '1',
                        name: 'Dense',
                        weight: 100,
                        faveColor: '#EDA1ED',
                        faveShape: 'rectangle',
                        // href: '?layer=1'
                    }
                },
                {
                    data: {
                        id: '2',
                        name: 'Convolution',
                        weight: 100,
                        faveColor: '#86B342',
                        faveShape: 'rectangle',
                        href: '#'
                    }
                },
                {data: {id: '3', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
                {data: {id: '4', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
                {data: {id: '5', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
                {data: {id: '6', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
                {data: {id: '7', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
                {data: {id: '8', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
                {data: {id: '9', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
                {data: {id: '10', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
                {data: {id: '11', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
                {data: {id: '12', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
                {data: {id: '13', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
                {data: {id: '14', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
                {data: {id: '15', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
                {data: {id: '16', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
                {data: {id: '17', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
                {data: {id: '18', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
                {data: {id: '19', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
                {data: {id: '20', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
                {data: {id: '21', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
                {data: {id: '22', name: 'Layer', weight: 100, faveColor: '#F5A45D', faveShape: 'rectangle', href: '#'}},
                {data: {id: '23', name: 'Output', weight: 100, faveColor: '#FF0000', faveShape: 'ellipse', href: '#'}}
            ],
            edges: [
                {data: {source: '0', target: '1', faveColor: '#A9A9A9', strength: 100}},
                {data: {source: '1', target: '2', faveColor: '#A9A9A9', strength: 100}},
                {data: {source: '2', target: '3', faveColor: '#A9A9A9', strength: 100}},
                {data: {source: '3', target: '4', faveColor: '#A9A9A9', strength: 100}},
                {data: {source: '4', target: '5', faveColor: '#A9A9A9', strength: 100}},
                {data: {source: '5', target: '6', faveColor: '#A9A9A9', strength: 100}},
                {data: {source: '6', target: '7', faveColor: '#A9A9A9', strength: 100}},
                {data: {source: '7', target: '8', faveColor: '#A9A9A9', strength: 100}},
                {data: {source: '8', target: '9', faveColor: '#A9A9A9', strength: 100}},
                {data: {source: '9', target: '10', faveColor: '#A9A9A9', strength: 100}},
                {data: {source: '10', target: '11', faveColor: '#A9A9A9', strength: 100}},
                {data: {source: '11', target: '12', faveColor: '#A9A9A9', strength: 100}},
                {data: {source: '12', target: '13', faveColor: '#A9A9A9', strength: 100}},
                {data: {source: '13', target: '14', faveColor: '#A9A9A9', strength: 100}},
                {data: {source: '14', target: '15', faveColor: '#A9A9A9', strength: 100}},
                {data: {source: '15', target: '16', faveColor: '#A9A9A9', strength: 100}},
                {data: {source: '16', target: '17', faveColor: '#A9A9A9', strength: 100}},
                {data: {source: '17', target: '18', faveColor: '#A9A9A9', strength: 100}},
                {data: {source: '18', target: '19', faveColor: '#A9A9A9', strength: 100}},
                {data: {source: '19', target: '20', faveColor: '#A9A9A9', strength: 100}},
                {data: {source: '20', target: '21', faveColor: '#A9A9A9', strength: 100}},
                {data: {source: '21', target: '22', faveColor: '#A9A9A9', strength: 100}},
                {data: {source: '22', target: '23', faveColor: '#A9A9A9', strength: 100}},
                {data: {source: '23', target: '24', faveColor: '#A9A9A9', strength: 100}}
            ]
        },

        ready: function () {
            window.cy = this;
            cy.panningEnabled(true);
            cy.autoungrabify(true);
            cy.maxZoom(5);
            cy.minZoom(1);
            // cy.wheelSensitivity(0);
        }
    });

    // cy.on('tap', 'node', function () {
    //     window.location.href = this.data('href');
    // });

    cy.on('click', 'node', function (evt) {
        console.log('CLICKED: id=' + this.id() + ", name=" + this.data.name);
        console.log('CLICKED: id=' + this.id() + ", name=" + this.name);
    });

}); // on dom ready