<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="cluster.aspx.cs" Inherits="EHEC_Server.cluster" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head runat="server">
    <title>CS-EHEC-II</title>
    <%--<script src="https://d3js.org/d3.v4.min.js"></script>--%>
    <%--<script src="http://cdn.graphalchemist.com/alchemy.min.js"></script>--%>
    <link rel="stylesheet" type="text/css" href="cluster_dependencies/alchemy/alchemy.css" />
    <link rel="stylesheet" type="text/css" href="cluster_dependencies/alchemy/styles/vendor.css" />
    <link rel="stylesheet" type="text/css" href="cluster_dependencies/bootstrap/css/bootstrap.css" />
    <script type="text/javascript" src="cluster_dependencies/jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery-1.10.2.intellisense.js"></script>  
    <script type="text/javascript" src="cluster_dependencies/lodash/lodash.js"></script>
    <script type="text/javascript" src="cluster_dependencies/bootstrap/js/bootstrap.bundle.js"></script>
    <%--<script type="text/javascript" src="cluster_dependencies/d3/d3.min.js"></script>--%>
    <script type="text/javascript" src="cluster_dependencies/d3/d3.js"></script>
    <script type="text/javascript" src="cluster_dependencies/alchemy/alchemy.js"></script>
    <%--<script type="text/javascript" src="cluster_dependencies/alchemy/alchemy.min.js"></script>--%>
    <script type="text/javascript" src="cluster_dependencies/alchemy/scripts/vendor.js"></script>



    <%--diese habe ich versucht nachzustellen:--%>
    <%--https://codereview.stackexchange.com/questions/3208/making-a-simple-call-to-a-server--%>
    <%--https://stackoverflow.com/questions/8703317/troubleshooting-jquery-ajax-call-using-generic-handler-in-asp-net--%>
    <%--https://codepedia.info/jquery-ajax-json-example-asp-net-sql-database/--%>

<%--    <script type="text/javascript"> 
        $(function () {
            $("#myButton").on("click", function (e) {
                console.log("inside_myButton_onClick");
                e.preventDefault();
                var aData= [];
                aData[0] = $("#ddlSelectYear").val(); 
                $("#contentHolder").empty();
                var jsonData = JSON.stringify({ aData:aData});
                $.ajax({
                    type: "POST",
                    //getListOfCars is my webmethod   
                    url: "ClusterService.asmx.cs",
                    data: jsonData,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json", // dataType is json format
                    success: OnSuccess,
                    error: OnErrorCall
                });
                function OnSuccess(response) {
                    console.log("inside_myButton_onSuccess");
                    console.log(response.d);
                }
                function OnErrorCall(response) {
                    console.log("inside_myButton_onErrorCall");
                    console.log(error);
                }
            });
        });
    </script>--%>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h1>EHEC Clusteranalysis</h1>
        </div>
        <%--<select id="ddlSelectYear">
            <option>2014</option>
            <option>2015</option>
        </select> 
        <button id="myButton" style="color:DodgerBlue;font-weight:bold;height:45px;width:150px;">Get Cluster Data</button>
        <div id="contentHolder"></div>--%>
        <asp:Button 
            ID="Button1" 
            runat="server" 
            Text="First Button" 
            OnClick="Button1_Click"
            Font-Bold="true"
            ForeColor="DodgerBlue"
            Height="45"
            Width="150"
            />
    </form> 
    <div class="alchemy" id="alchemy"></div>

    <script type="text/javascript">
        //$url = "@C:\Users\Public\Documents\cluster.json"";
        //$json = file_get_contents($url);
        //$data = json_decode($json);
        var config = {
            dataSource: "<%=Clusterdata%>",
            forceLocked: true,
            graphHeight: function(){ return 800; },
            graphWidth: function(){ return 800; },      
            linkDistance: function(){ return 50; },
            nodeTypes: {
                "Nodetype": [
                    "Patient",
                    "Result",
                    "Origin"
                ]
            },
            nodeMouseOver: 'fun_fact',
            //nodeCaption: function(node){ 
            //    return node.caption + " _ " + node.fun_fact;
            //}
            
        };

        alchemy = new Alchemy(config)
    </script>
    
</body>
</html>
