/**
 * slides lateral panel
 */

cdb.admin.SlidesPanel = cdb.core.View.extend({

  className: 'slides_panel',

  template_name: 'table/views/slides/panel',

  initialize: function() {

    this.template = this.getTemplate(this.template_name);

    this.slides = this.options.slides;

    this.model = new cdb.core.Model({
      visible: false
    });

    this.model.bind("change:visible", this._onChangeVisible, this);

    if (!this.slides) {
      throw new Error("slides is undefined");
    }

    this._bindSlides();

  },

  _bindSlides: function() {

    this.add_related_model(this.slides);

    this.slides.bind('reset', function() {
      this.slides.each(this._add.bind(this));
    }, this);

    this.slides.bind('add', this._add, this);
    this.slides.bind('remove', this._remove, this);

  } ,

  _addAddButton: function(slide) {

    var v = new cdb.admin.SlideViewAdd();

    v.bind("click", function() {
      this.slides.create();
    }, this);

    this.addView(v);
    this.$el.find(".scrollpane").append(v.render().el);

  },

  _reInitScrollpane: function() {
    this.$('.scrollpane').data('jsp') &&
      this.$('.scrollpane').data('jsp').reinitialise();
  },

  _add: function(slide) {
    var v = new cdb.admin.SlideView({ model: slide, count: this.slides.length });

    var self = this;

    v.bind("close", function() {
      

      v.hide(function() {
        self._remove(v); 
      });

    }, this);

    this.addView(v);
    this.$el.find(".scrollpane .jspPane").append(v.render().el);
    this._reInitScrollpane();

    v.show();

  },

  _remove: function(slide) {

    var view = _.find(this._subviews, function(v) {
      return v.cid === slide.cid;
    });

    view.clean();

  },

  _onChangeVisible: function() {

    var visible = this.model.get("visible")
    visible ? this._show() : this._hide();

  },

  toggle: function() {
  
    var visible = !this.model.get("visible");
    this.model.set("visible", visible);

    return visible;

  },

  show: function() {

    this.model.set("visible", true);
  
  },

  hide: function() {
  
    this.model.set("visible", false);

  },

  _hide: function() {

    this.$el.removeClass("active");

  },

  _show: function() {

    this.$el.addClass("active");

  },

  render: function() {

    this.$el.append(this.template());

    this._addAddButton();

    var self = this;

    setTimeout(function() {
      self.$el.find(".scrollpane").css("max-height", self.$el.height() - 60);
      self.$el.find(".scrollpane").jScrollPane();
    }, 500)

    return this;

  }

});

/**
 * view for a single slide
 */
cdb.admin.SlideView = cdb.core.View.extend({

  tagName: "a",

  className: 'slide_view',

  template_name: 'table/views/slides/slide',

  events: {
    'click': '_onClick',
    'click .close': '_onClickClose'
  },

  initialize: function () {

    this.model.bind('change:active', this._changeActive, this);

    this.template = this.getTemplate(this.template_name);

  },

  _onClick: function(e) {

    e.preventDefault();
    e.stopPropagation();

    this.model.collection.setActive(this.model);

  },

  _onClickClose : function(e) {

    e.preventDefault();
    e.stopPropagation();

    this.trigger("close", this);

  },

  _changeActive: function() {

    if (this.model.isActive()) {
      this.$el.addClass("active");
    } else {
      this.$el.removeClass("active");
    }

  },

  hide: function(callback) {

    this.$el
    .removeClass('animated bounceIn')
    .addClass('animated bounceOut');

    if (callback) {
      setTimeout(function() {
        callback();
      }, 500)
    }

  },

  show: function() {

    this.$el.addClass('animated bounceIn');

  },

  render: function() {

    this.$el.attr("href", "#");

    var attributes = _.extend(this.model.attributes, this.options);

    this.$el.append(this.template(attributes));

    return this;

  }

});

cdb.admin.SlideViewAdd = cdb.admin.SlideView.extend({

  className: 'slide_view add',

  template_name: 'table/views/slides/add_slide',

  initialize: function () {

    this.template = this.getTemplate(this.template_name);

  },

  _onClick: function(e) {

    e.preventDefault();
    e.stopPropagation();

    this.trigger("click", this);

  },

  render: function() {

    this.$el.attr("href", "#");

    var attributes = this.options;

    this.$el.append(this.template(attributes));

    return this;

  }

});


@@ -746,60 +746,8 @@
 is);
-%0A    this.slides.bind('remove', this._remove, this);
 %0A%0A  
@@ -1262,127 +1262,8 @@
 s;%0A%0A
-    v.bind(%22close%22, function() %7B%0A      %0A%0A      v.hide(function() %7B%0A        self._remove(v); %0A      %7D);%0A%0A    %7D, this);%0A%0A
     
@@ -1400,158 +1400,8 @@
 %7D,%0A%0A
-  _remove: function(slide) %7B%0A%0A    var view = _.find(this._subviews, function(v) %7B%0A      return v.cid === slide.cid;%0A    %7D);%0A%0A    view.clean();%0A%0A  %7D,%0A%0A
   _o
@@ -2574,32 +2574,82 @@
 geActive, this);
+%0A    this.model.bind('destroy', this.clean, this);
 %0A%0A    this.templ
@@ -2868,59 +2868,31 @@
 ) %7B%0A
-%0A
     
-e.preventDefault();%0A    e.stopPropagation(
+this.killEvent(e
 );%0A
-%0A
     
@@ -2900,33 +2900,25 @@
 his.
-trigger(%22close%22, this
+model.destroy(
 );%0A
-%0A
   %7D,

refactor remove on slides panel