text: angular.module("umbraco")
      .controller("Umbraco.PropertyEditors.GridPrevalueEditorController",
      function ($scope, gridService) {
  
          var emptyModel = {
              styles:[
                  {
                      label: "Set a background image",
                      description: "Set a row background",
                      key: "background-image",
                      view: "imagepicker",
                      modifier: "url({0})"
                  }
              ],
  
              config:[
                  {
                      label: "Class",
                      description: "Set a css class",
                      key: "class",
                      view: "textstring"
                  }
              ],
  
              columns: 12,
              templates:[
                  {
                      name: "1 column layout",
                      sections: [
                          {
                              grid: 12
                          }
                      ]
                  },
                  {
                      name: "2 column layout",
                      sections: [
                          {
                              grid: 4
                          },
                          {
                              grid: 8
                          }
                      ]
                  }
              ],
  
  
              layouts:[
                  {
                      label: "Headline",
                      name: "Headline",
                      areas: [
                          {
                              grid: 12,
                              editors: ["headline"]
                          }
                      ]
                  },
                  {
                      label: "Article",
                      name: "Article",
                      areas: [
                          {
                              grid: 4
                          },
                          {
                              grid: 8
                          }
                      ]
                  }
              ]
          };
  
          /****************
              template
          *****************/
  
          $scope.configureTemplate = function(template) {
  
             var templatesCopy = angular.copy($scope.model.value.templates);
  
             if (template === undefined) {
                template = {
                   name: "",
                   sections: [
  
                   ]
                };
                $scope.model.value.templates.push(template);
             }
  
             $scope.layoutConfigOverlay = {};
             $scope.layoutConfigOverlay.view = "views/propertyEditors/grid/dialogs/layoutconfig.html";
             $scope.layoutConfigOverlay.currentLayout = template;
             $scope.layoutConfigOverlay.rows = $scope.model.value.layouts;
             $scope.layoutConfigOverlay.columns = $scope.model.value.columns;
             $scope.layoutConfigOverlay.show = true;
  
             $scope.layoutConfigOverlay.submit = function(model) {
                $scope.layoutConfigOverlay.show = false;
                $scope.layoutConfigOverlay = null;
             };
  
             $scope.layoutConfigOverlay.close = function(oldModel) {
  
                //reset templates
                $scope.model.value.templates = templatesCopy;
  
                $scope.layoutConfigOverlay.show = false;
                $scope.layoutConfigOverlay = null;
             }
  
          };
  
          $scope.deleteTemplate = function(index){
              $scope.model.value.templates.splice(index, 1);
          };
          
  
          /****************
              Row
          *****************/
  
          $scope.configureLayout = function(layout) {
  
             var layoutsCopy = angular.copy($scope.model.value.layouts);
  
             if(layout === undefined){
                  layout = {
                      name: "",
                      areas:[
  
                      ]
                  };
                  $scope.model.value.layouts.push(layout);
             }
  
             $scope.rowConfigOverlay = {};
             $scope.rowConfigOverlay.view = "views/propertyEditors/grid/dialogs/rowconfig.html";
             $scope.rowConfigOverlay.currentRow = layout;
             $scope.rowConfigOverlay.editors = $scope.editors;
             $scope.rowConfigOverlay.columns = $scope.model.value.columns;
             $scope.rowConfigOverlay.show = true;
  
             $scope.rowConfigOverlay.submit = function(model) {
               $scope.rowConfigOverlay.show = false;
               $scope.rowConfigOverlay = null;
             };
  
             $scope.rowConfigOverlay.close = function(oldModel) {
               $scope.model.value.layouts = layoutsCopy;
               $scope.rowConfigOverlay.show = false;
               $scope.rowConfigOverlay = null;
             };
  
          };
  
          //var rowDeletesPending = false;
          $scope.deleteLayout = function(index) {
  
             $scope.rowDeleteOverlay = {};
             $scope.rowDeleteOverlay.view = "views/propertyEditors/grid/dialogs/rowdeleteconfirm.html";
             $scope.rowDeleteOverlay.dialogData = {
               rowName: $scope.model.value.layouts[index].name
             };
             $scope.rowDeleteOverlay.show = true;
  
             $scope.rowDeleteOverlay.submit = function(model) {
  
               $scope.model.value.layouts.splice(index, 1);
  
               $scope.rowDeleteOverlay.show = false;
               $scope.rowDeleteOverlay = null;
             };
  
             $scope.rowDeleteOverlay.close = function(oldModel) {
               $scope.rowDeleteOverlay.show = false;
               $scope.rowDeleteOverlay = null;
             };
  
          };
  
  
          /****************
              utillities
          *****************/
          $scope.toggleCollection = function(collection, toggle){
              if(toggle){
                  collection = [];
              }else{
                  collection = null;
              }
          };
  
          $scope.percentage = function(spans){
              return ((spans / $scope.model.value.columns) * 100).toFixed(8);
          };
  
          $scope.zeroWidthFilter = function (cell) {
                  return cell.grid > 0;
          };
  
          /****************
              Config
          *****************/
  
          $scope.removeConfigValue = function(collection, index){
              collection.splice(index, 1);
          };
  
          var editConfigCollection = function(configValues, title, callback) {
  
             $scope.editConfigCollectionOverlay = {};
             $scope.editConfigCollectionOverlay.view = "views/propertyeditors/grid/dialogs/editconfig.html";
             $scope.editConfigCollectionOverlay.config = configValues;
             $scope.editConfigCollectionOverlay.title = title;
             $scope.editConfigCollectionOverlay.show = true;
  
             $scope.editConfigCollectionOverlay.submit = function(model) {
  
                callback(model.config)
  
                $scope.editConfigCollectionOverlay.show = false;
                $scope.editConfigCollectionOverlay = null;
             };
  
             $scope.editConfigCollectionOverlay.close = function(oldModel) {
                $scope.editConfigCollectionOverlay.show = false;
                $scope.editConfigCollectionOverlay = null;
             };
  
          };
  
          $scope.editConfig = function() {
             editConfigCollection($scope.model.value.config, "Settings", function(data) {
                $scope.model.value.config = data;
             });
          };
  
          $scope.editStyles = function() {
             editConfigCollection($scope.model.value.styles, "Styling", function(data){
                 $scope.model.value.styles = data;
             });
          };
  
          /****************
              editors
          *****************/
          gridService.getGridEditors().then(function(response){
              $scope.editors = response.data;
          });
  
  
          /* init grid data */
          if (!$scope.model.value || $scope.model.value === "" || !$scope.model.value.templates) {
              $scope.model.value = emptyModel;
          } else {
  
              if (!$scope.model.value.columns) {
                  $scope.model.value.columns = emptyModel.columns;
              }
  
  
              if (!$scope.model.value.config) {
                  $scope.model.value.config = [];
              }
  
              if (!$scope.model.value.styles) {
                  $scope.model.value.styles = [];
              }
          }
  
          /****************
              Clean up
          *****************/
          var unsubscribe = $scope.$on("formSubmitting", function (ev, args) {
              var ts = $scope.model.value.templates;
              var ls = $scope.model.value.layouts;
  
              _.each(ts, function(t){
                  _.each(t.sections, function(section, index){
                     if(section.grid === 0){
                      t.sections.splice(index, 1);
                     }
                 });
              });
  
              _.each(ls, function(l){
                  _.each(l.areas, function(area, index){
                     if(area.grid === 0){
                      l.areas.splice(index, 1);
                     }
                 });
              });
          });
  
          //when the scope is destroyed we need to unsubscribe
          $scope.$on('$destroy', function () {
              unsubscribe();
          });
  
      });
  