<?php
if (isset($jsonOut) && !empty($jsonOut)) {
    $data = $jsonOut;
} else {
    $data = array(
        "packageNames" => array("Draco Blackaria", "Draco Bloodwind"),
        "opacity" => array(0.75, 0.5),
        "fillColors" => array("green", "red"),
        "matrix" => array(
            array(5, 7),
            array(2, 3)
        )
    );
    $data = json_encode($data);
}

if (is_null($token)) {
    $png_token = 'all-allies';
} else {
    $png_token = $token . '-allies';
}
?>

<a id="pngdownload" href="" download="<?php echo $png_token ?>.png" style="visibility:hidden;display:none;position:fixed;top:0px;left:0px;width:0px;height:0px;"></a>
<div class="col-lg-12 well" style="padding: 10px 10px">
    <?php
    $formUrl = array(
        'controller' => 'allies',
        'action' => 'matrix'
    );

    echo $this->Form->create('Allies', array('url' => $formUrl, 'class'=>'form-inline'));
    $this->Form->inputDefaults(array(
        'label' => false,
        'class' => 'form-control',
        'div' => array('class' => 'form-group'),
        'style'=>'margin: 0px 10px'
    ));
    echo $this->Form->input('token', array('label'=>'Find by token', 'placeholder'=>'User Token'));

    echo $this->Form->button(__('Find'), array('class' => 'btn btn-info'));
    echo $this->Form->end();
    ?>
</div>
<div class="col-lg-12 well">
    <div id="sidebar pull-right" style="width: 160px; position: absolute; right: 5px;">

        <div id="legend">
            <center><h3>Legend</h3></center>
        </div>
        
            <center><h3>Share</h3></center>
        <button class="copy-button" data-clipboard-action="copy" data-clipboard-text="http://dblaze.valomar.com/m/<?php echo $token ?>">Copy Link to Clipboard</button>

        <button id="pngdownloadwrapper" style="margin-top: 5px; width: 150px;">Save image ⇓</button>
    </div>
    <div id="chart_placeholder">

    </div>

</div>

<script>
    var clipboard = new Clipboard('.copy-button');
    var data = <?php echo $data ?>;
    var chart = d3.chart.dependencyWheel()
            .width(1100)    // also used for height, since the wheel is in a a square
            .margin(180)   // used to display package names
            .padding(.02); // separating groups in the wheel;
    var svg = d3.select('#chart_placeholder')
            .datum(data)
            .call(chart);

    svg.selectAll("svg")
            .append("rect:text")
            .text('Allies for <?php echo $token ?>')
            .attr("font-size", "23px")
            .attr("transform", function (d) {
                return  "translate(40,225)rotate(-45)";
            });

    chart.drawLegend();

    d3.select("#pngdownloadwrapper")
            .on("click", function () {
                seturl();
                setTimeout(function () {
                    d3.select("#pngdownload").node().click();
                }, 500);
            })

    function seturl() {
        exportInlineSVG(d3.select("#chart_placeholder").select("svg").node(), function (data) {
            d3.select("#pngdownload").node().href = data;
        });
    }
</script>