
<script type="text/javascript" src="<?php echo THEME_PATH ?>plugins/chartTree/jspdf-ggorgchart.js" ></script>
<script type="text/javascript" src="<?php echo THEME_PATH ?>plugins/chartTree/rgbcolor.js"></script> 
<script type="text/javascript" src="<?php echo THEME_PATH ?>plugins/chartTree/StackBlur.js"></script>
<script type="text/javascript" src="<?php echo THEME_PATH ?>plugins/chartTree/canvg.js"></script> 
<script type="text/javascript" src="<?php echo THEME_PATH ?>plugins/chartTree/raphael-ggorgchart.js"></script>  
<script type="text/javascript" src="<?php echo THEME_PATH ?>plugins/chartTree/lib_gg_orgchart_v100b1.js"></script>
<script type="text/javascript" src="<?php echo THEME_PATH ?>plugins/chartTree/jsrender.js"></script>

<script type="text/javascript">
    var oc_options_4 = {
//        data_id: 2, // identifies the ID of the "data" JSON object that is paired with these options
        container: 'oc_container_4', // name of the DIV where the chart will be drawn
        max_text_width: 20, // max width (in chars) of each line of text ('0' for no limit)
        use_zoom_print: true, // wheter to use zoom and print or not (only one graph per web page can do so)
        container_supra: 'oc_supracontainer_4', // container of the container (DIV); needed for zoom and print
        initial_zoom: 1, //0.75, // initial zoom
        export_canvas: 'oc_print_canvas_4', // name of the invisible HTML5 canvas needed for print
        export_filename: 'orgChart.pdf'           // default filename for PDF printing
    };
    var merged_options = false;
    function ggOrgChart_render(dep_id)
    {
        var result;
        $('#oc_container_4').empty();
        result = ggOrgChart.render(oc_options_4, ('HRMAjax/BuildImageTree?dep_id=' + (dep_id !== undefined ? dep_id : "")), true);
        if (result === false) {
            alert("INFO: render() #4 failed (bad 'options' or 'data' definition)");
            return;
        } else {
            merged_options = result;
        }
    }
    window.onload = function () {
        ggOrgChart_render();
        $("#oc_btnZommIn").click(function () {
            ggOrgChart.zoom_in(merged_options);
        });
        $("#oc_btnZommOut").click(function () {
            ggOrgChart.zoom_out(merged_options);
        });
        $("#oc_btnPrintPDF, #oc_btnPrintPNG").click(function () {
            var ext = $(this).attr('id') == 'oc_btnPrintPNG' ? 'png' : 'pdf';
            var tmp_export_name = merged_options.export_filename;
            tmp_export_name = tmp_export_name.substr(0, tmp_export_name.length - 4) + '.' + ext;
            merged_options.export_filename = tmp_export_name;
            ggOrgChart.print(merged_options);
        });

    };
</script>
<style>
    .node              { padding-top: 4px; text-align: center; font-size: 13px; }
    .node:first-letter { font-weight: bold; }
    .body            { margin: 10px; padding: 0; }
    .text            { font-family: sans-serif; color: blue; text-align: left; }
    .chart_container {letter-spacing: normal; direction:ltr; margin-left: auto; margin-right: auto; position: relative; width: 100%; }
    #oc_supracontainer_4 {
        position : absolute;
        width    : 100%;
        height   : 500px;
        border   : solid 1px #333333;
        overflow : auto;
    }
    #oc_content_dragonfly {
        margin-left : 8px;
    }
</style>
<div class="container-fluid container-fixed-lg bg-white">
    <div class="panel panel-transparent">
        <div class="panel-heading">
            <div class="panel-title"><?php print CommonLanguage::getMessage('view_department'); ?></div>

        </div>
        <div class="panel-body">
            <div class="col-md-12">
                <div class="row">`
                    <div class="col-md-3">
                        <label><?php print CommonLanguage::getMessage('departments') ?></label>
                        <input type="hidden" class="full-width department_id" id="department_id" />
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<div class="chart_container">
    <div>
        <button id="oc_btnZommIn">Zoom in</button>
        <button id="oc_btnZommOut">Zoom out</button>
        <button id="oc_btnPrintPDF">PDF</button>
        <button id="oc_btnPrintPNG">PNG</button>
    </div>
    <div id="oc_supracontainer_4">
        <div id="oc_content_dragonfly" class="dragon">
            <div id="oc_container_4"></div>
        </div>
    </div>
    <canvas id="oc_print_canvas_4"></canvas>
</div>

<script type="text/javascript">
    $(function () {
        build_select2($('#department_id'), 'HRMAjax/searchDepartment');
        $('#department_id').on("change", function () {
            var dep_id = $(this).val();
            ggOrgChart_render(dep_id);
        });
    });
</script>