'use strict';
var util = require('../util');
var ApertureHandler = require('./ApertureHandler');
var ButtonMenu = require('./ButtonMenu');
var DragbarHandler = require('./DragbarHandler');
var Viewport = require('./Viewport');

var Canvas = fabric.util.createClass(fabric.Canvas, {
    initialize: function (id) {
        this.callSuper('initialize', id, {
            enableRetinaScaling: true,
            renderOnAddRemove: false,
            stateful: false,
            backgroundColor: '#d4d4d4',
            preserveObjectStacking: true,
            selection: false,
        });

        this.on('mouse:up', function () {
            if (this.getImage().__moved) {
                this.getApertures().setTransparent(false);
            }
            $(this.upperCanvasEl).css('cursor', 'default');
            this.renderAll();
        });
    },

    getApertures: function () {
        return this.__aperturehandler ||
            (this.__aperturehandler = new ApertureHandler(this));
    },

    /**
     *
     * @returns {DragbarHandler}
     */
    getDragbars: function () {
        return this.__dragbars ||
            (this.__dragbars = new DragbarHandler(this));
    },

    /**
     * @return {fabric.Image}
     */
    getImage: function () {
        return this.__image;
    },

    /**
     * @return {Viewport}
     */
    getViewport: function () {
        return this.__viewport ||
            (this.__viewport = new Viewport(this));
    },

    /**
     * Gets the menu for this instance
     * @returns {ButtonMenu}
     */
    getButtonMenu: function () {
        if (!this.__buttonMenu) {
            this.__buttonMenu = new ButtonMenu(this);
        }
        return this.__buttonMenu;
    },

    /**
     * @return {Canvas}
     */
    removeImage: function () {
        if (!this.__image) {
            return this;
        }
        return this.remove(this.__image);
    },

    /**
     * @param  {fabric.Image} img
     * @return {Canvas}
     */
    setImage: function (img) {
        this.removeImage();
        this.__image = img;
        this.__image.addTo(this).center().on('mousedown', function () {
            img.canvas.getApertures().setTransparent(true);
        }).setCoords();
        this.getViewport().reset();
        return this;
    }
});

module.exports = Canvas;