require('./bootstrap');

$(document).ready(function(){

    drawContentBox( 100 , 100 , 'Data');
    drawLine( 250 , 0 , 250 , 100);
    drawLine( 250 , 400 , 250 , 1200);
    drawLine( 0 , 250 , 100 , 250);
    drawLine( 400 , 250 , 1400 , 250);

    function drawContentBox( x , y , htmlData){

    var cbox = '';
    var cboxStyle = '';

    cboxStyle += 'position: absolute;';
    cboxStyle += 'top: ' + y + 'px;';
    cboxStyle += 'left: ' + x + 'px;';
    cboxStyle += 'width: 300px;';
    cboxStyle += 'height: 300px';

    cbox += '<div class="cbox" style="' + cboxStyle + '">' + htmlData + '</div>';

    var node = $(cbox).appendTo('#app');

    }

    function drawLine(ax, ay, bx, by) {

        if (ax > bx) {
            bx = ax + bx;
            ax = bx - ax;
            bx = bx - ax;
            by = ay + by;
            ay = by - ay;
            by = by - ay;
        }


        var angle = Math.atan((ay - by) / (bx - ax));

        angle = (angle * 180 / Math.PI);
        angle = -angle;

        var length = Math.sqrt((ax - bx) * (ax - bx) + (ay - by) * (ay - by));

        var style = '';
        style += 'left: ' + (ax) + 'px;'
        style += 'top: ' + (ay) + 'px;'
        style += 'width: ' + length + 'px;'
        style += 'height: 1px;'
        style += 'background-color: #f60f60;'
        style += 'position: absolute;'
        style += 'transform: rotate(' + angle + 'deg);'
        style += '-ms-transform: rotate(' + angle + 'deg);'
        style += 'transform-origin: 0% 0%;'
        style += '-moz-transform: rotate(' + angle + 'deg);'
        style += '-moz-transform-origin: 0% 0%;'
        style += '-webkit-transform: rotate(' + angle + 'deg);'
        style += '-webkit-transform-origin: 0% 0%;'
        style += '-o-transform: rotate(' + angle + 'deg);'
        style += '-o-transform-origin: 0% 0%;'
        style += 'z-index: 99;'
        $('<div style="' + style + '"></div>').appendTo('#app');
    }

});