angular.element(document).ready(function () {
    angular.bootstrap(document, ['qusion.cms.layout.edit']);
});

angular.module('qusion.cms.layout.edit', [
    //'qusion.cms.toolbox',
    'qusion.cms.layout.services'
])
    .config([
        function () {
            angular.element(document.body)
                .attr('ng:controller', "CmsLayoutManage")
                .prepend('<div id="cms-page-toolbox" />');
        }
    ])
    .controller('CmsLayoutManage', [
        "$scope",
        "$timeout",
        "PageLayoutService",
        function ($scope, $timeout, PageLayoutService) {
            var toolboxId = "#cms-page-toolbox";

            PageLayoutService.getToolboxWidgets()
                .then(function (data) {
                    $scope.items = data;
                    $scope.init();
                });


            /**
            * @method init
            * @description Initializes page edit init values and setup UI
            */
            $scope.init = function () {
                $scope.layout = angular.element("body");
                // creating toolbox manager
                $scope.toolbox = angular.element(toolboxId).toolbox({
                    selected: 'widgets',
                    pinned: true,
                    panels: [
                        {
                            key: 'widgets',
                            title: 'Widgets',
                            iconClass: 'icon-magic',
                            items: $scope.items
                        },
                        { key: 'layout', title: 'Layout', iconClass: 'icon-adjust' },
                        { key: 'resources', title: 'Resources', iconClass: 'icon-cog' }
                    ],
                    onPin: function (e, pinned) {
                        pinned === true
                            ? $scope.layout.addClass("qusion-toolbox-on")
                            : $scope.layout.removeClass("qusion-toolbox-on");
                    },
                    onClose: function () {
                        //alert("close");
                    }
                });

                // creating layout manager
                $scope.layout = $scope.layout.layout({
                    toolbox: $scope.toolbox
                });
            };

            //$timeout(function () {
            //    $scope.init();
            //}, 20);
        }
    ]);