$(function() {
    window.drawer = new DrawerJs.Drawer(null, {
        debug: false,
        align: 'center',
        activeColor: '#000000',
        exitOnOutsideClick: false,
        contentConfig: {
            saveInHtml: false
        },
        defaultImageUrl: 'assets/transparent.png',
        defaultActivePlugin : {
            name : 'Text',
            mode : 'lastUsed'
        },
        texts: {
            'Add Drawer': 'Add Drawer',
            'Insert Drawer': 'Insert Drawer',
            'Insert': 'Insert',
            'Free drawing mode': 'Free drawing mode',
            'SimpleWhiteEraser': 'SimpleWhiteEraser',
            'Eraser': 'Eraser',
            'Delete this canvas': 'Delete this canvas',
            'Are you sure want to delete this canvas?': 'Are you sure want to delete this canvas?',
            // Vanvas properties popup
            'Size (px)': 'Size (px)',
            'Position': 'Position',
            'Inline': 'Inline',
            'Left': 'Left',
            'Center': 'Center',
            'Right': 'Right',
            'Floating': 'Floating',
            'Canvas properties': 'Canvas properties',
            'Background': 'Background',
            'transparent': 'transparent',
            'Cancel': 'Cancel',
            'Save': 'Save',
            // Fullscreen plugin
            'Enter fullscreen mode': 'Enter fullscreen mode',
            'Exit fullscreen mode': 'Exit fullscreen mode',
            // Shape context menu plugin
            'Bring forward': 'Bring forward',
            'Send backwards': 'Send backwards',
            'Bring to front': 'Bring to front',
            'Send to back': 'Send to back',
            'Duplicate': 'Duplicate',
            'Remove': 'Remove',
            // Brush size plugin
            'Size:': 'Size:',
            // Color plugin
            'Fill:': 'Fill:',
            'Transparent': 'Transparent',
            // Shape border plugin
            'Border:': 'Border:',
            'None': 'None',
            // Arrow plugin
            'Draw an arrow': 'Draw an arrow',
            'Draw a two-sided arrow': 'Draw a two-sided arrow',
            'Lines and arrows': 'Lines and arrows',
            // Circle plugin
            'Draw a circle': 'Draw a circle',
            // Line plugin
            'Draw a line': 'Draw a line',
            // Rectangle plugin
            'Draw a rectangle': 'Draw a rectangle',
            // Triangle plugin
            'Draw a triangle': 'Draw a triangle',
            // Polygon plugin
            'Draw a Polygon': 'Draw a Polygon',
            'Stop drawing a polygon': 'Stop drawing a polygon (esc)',
            'Click to start a new line': 'Click to start a new line',
            // Text plugin
            'Draw a text': 'Draw a text',
            'Click to place a text': 'Click to place a text',
            'Font:': 'Font:',
            // Movable floating mode plugin
            'Move canvas': 'Move canvas',
            // Base shape
            'Click to start drawing a ': 'Click to start drawing a ',
            //Image
            'Insert an image': 'Insert an image',
            'No file was selected!': 'No file was selected!',
            'Incorrect file type': 'Incorrect file type',
            'File is to big!. Maximum file size is ': 'File is to big!. Maximum file size is ',
            'Image failed to create!': 'Image failed to create!',
            //Image Background
            'Insert a background image': 'Insert a background image'
        },
        plugins: [
            // Drawing tools
            'Text',
            'Image',
            'Line',
            'Rectangle',
            'Eraser',

            // Drawing options
            'Color',
            'ShapeBorder',
            'BrushSize',
            'OpacityOption',
            'LineWidth',
            'StrokeWidth',

            'ShapeContextMenu',

            'OvercanvasPopup',
            'OpenPopupButton',

            'Zoom',
            'TextLineHeight',
            'TextAlign',
            'TextFontFamily',
            'TextFontSize',
            'TextFontWeight',
            'TextFontStyle',
            'TextDecoration',
            'TextColor',
            'TextBackgroundColor'
        ],
        pluginsConfig: {
            Eraser: {
                cursorUrl: 'default',
                brushSize: 50
            },
            Text: {
                fonts: {
                    'Georgia': 'Georgia, serif',
                    'Palatino': "'Palatino Linotype', 'Book Antiqua', Palatino, serif",
                    'Times New Roman': "'Times New Roman', Times, serif",
                    'Arial': 'Arial, Helvetica, sans-serif',
                    'Arial Black': "'Arial Black', Gadget, sans-serif",
                    'Comic Sans MS': "'Comic Sans MS', cursive, sans-serif",
                    'Impact': 'Impact, Charcoal, sans-serif',
                    'Lucida Grande': "'Lucida Sans Unicode', 'Lucida Grande', sans-serif",
                    'Tahoma': 'Tahoma, Geneva, sans-serif',
                    'Trebuchet MS': "'Trebuchet MS', Helvetica, sans-serif",
                    'Verdana': 'Verdana, Geneva, sans-serif',
                    'Courier New': "'Courier New', Courier, monospace",
                    'Lucida Console': "'Lucida Console', Monaco, monospace"
                },
                defaultFont: 'Palatino',
                editIconMode : true,
                editIconSize : 'medium',
                defaultValues: {
                    fontSize: 72,
                    lineHeight: 2,
                    textFontWeight: 'bold'
                },
                predefined: {
                    fontSize: [8, 12, 14, 16, 32, 40, 72],
                    lineHeight: [1, 2, 3, 4, 6]
                }
            },
            Image: {
                scaleDownLargeImage: true,
                maxImageSizeKb: 10240, //1MB
                acceptedMIMETypes: ['image/jpeg', 'image/png'],
            },
            Zoom: {
                enabled: true,
                showZoomTooltip: true,
                useWheelEvents: true,
                zoomStep: 1.05,
                defaultZoom: 1,
                maxZoom: 32,
                minZoom: 1,
                smoothnessOfWheel: 0,
                //Moving:
                enableMove: true,
                enableWhenNoActiveTool: true,
                enableButton: true
            }
        },
        toolbars: {
            drawingTools: {
                position: 'top',
                positionType: 'outside',
                compactType: 'scrollable'
            },
            toolOptions: {
                position: 'bottom',
                positionType: 'outside',
                compactType: 'scrollable'
            },
            settings : {
                position : 'right',
                positionType: 'outside',
                compactType : 'scrollable'
            }
        }
    }, 1014, 639);

    $('#drawerjs-canvas').append(window.drawer.getHtml());
    window.drawer.onInsert();
});

function onStartEditing() {
    window.drawer.api.startEditing();
}

function onStopEditing() {
    window.drawer.api.stopEditing();
}
