var Items = function(){
  var i = this;
  this.initialize = function(){
    i.bindHandlers();
    i.itemQuantity();
    i.bindEditAddPageHandlers();
     $(".sortable").delegate(".brand, .delete", clickEvent, function(e){
      if($(this).hasClass('delete')) {
        $target = $(this);
        $('#dialog').modal('show');
      } else {
        if($(this).closest('li').children('ol').length > 0){
          $(this).closest('li').toggleClass('collapsed');
        }
      }
      e.preventDefault();
    });
  }

  this.bindHandlers = function(){
    $('.sortable').nestedSortable({
      handle: '.brand',
      items: 'li',
      maxLevels: 3,
      opacity: .6,
      disableNesting: 'no-nest',
      toleranceElement: '> div',
      placeholder: 'placeholder',
      startCollapsed: true,
      update: function(event, ui) {
        var parent = (ui.item.parent().closest('li').length ? ui.item.parent().closest('li') : ui.item.parent().closest('ol')),
            children = (parent.hasClass("root") ? parent.find(">li") : parent.find(">ol li")),
            children_ids = [];
        children.each(function(){
          children_ids.push($(this).attr("id"));
        })
        $.ajax({
          url : "<%=  Rails.application.routes.url_helpers.pages_update_item_position_path %>",
          data : {"parent_id" : parent.attr("id"), "id" : ui.item.attr("id"),"children_ids" : children_ids},
          dataType : "json",
          type : "post"
        })
      }
    });

  }

  this.itemQuantity = function(){

    var $sortable = $('.sortable'),
        $host = $sortable.children('.navbar').eq(0),
        $navbar = $('.sortable li').children('.navbar'),
        $quantity = $sortable.find('li').length; 
    $host.find('.badge').text($quantity);
    $navbar.each(function(i) {
      if($navbar.eq(i).next('ol').length>0) {
        var $amount = $navbar.eq(i).next('ol').find('li').length;
        $navbar.eq(i).find('.badge').text($amount);
      }else{
        $navbar.eq(i).find('.badge').text('0');
      }
      $navbar.eq(i).find('.badge').text()>0 ? $navbar.eq(i).find('.badge').addClass('badge-info'):$navbar.eq(i).find('.badge').removeClass('badge-info');
    })

  }

  this.reBindHandlers = function(){
    console.log("binded")
    $.pageslide.close();
    window.openSlide();
    i.itemQuantity();
    i.bindHandlers();
    i.bindEditAddPageHandlers();
  }

  this.bindEditAddPageHandlers = function(){
    var sidePanel = $(".view-page .content");

    sidePanel.on("click","#categories_list input[type=checkbox]",function(){
      if($(this).is(":checked") && $(this).hasClass("checkbox-all")){
        $(".view-page .content #categories_list input[type=checkbox]").not($(this)).removeAttr("checked");
      }else{
        $(".view-page .content #categories_list input[type=checkbox].checkbox-all").removeAttr("checked");
      }
    })

    sidePanel.on("click","#tags_list input[type=checkbox]",function(){
      if($(this).is(":checked") && $(this).hasClass("checkbox-all")){
        $(".view-page .content #tags_list input[type=checkbox]").not($(this)).removeAttr("checked");
      }else{
        $(".view-page .content #tags_list input[type=checkbox].checkbox-all").removeAttr("checked");
      }
    })

    sidePanel.on("click","#role_list input[type=checkbox]",function(){
      if($(this).is(":checked") && $(this).hasClass("checkbox-all")){
        $(".view-page .content #role_list input[type=checkbox]").not($(this)).removeAttr("checked");
      }else{
        $(".view-page .content #role_list input[type=checkbox].checkbox-all").removeAttr("checked");
        $("#status-list-"+$(this).val()+" input[type=checkbox]").removeAttr("checked");
      }
    })

    sidePanel.on("click",".status-checkbox",function(){
      if($(this).is(":checked")){
        $(this).parent().parent().parent().parent().find(".role-checkbox").removeAttr("checked");
      }
    })

    sidePanel.on("click","#enable-menu .main-enable-parent",function(e){
      if(!$(this).is(":checked")){
        var parent = $(this).parent().parent();
        parent.find(".main-enable-child,.main-enable-child-child").removeAttr("checked");

      }
    })

     sidePanel.on("click","#enable-menu .main-enable-child",function(e){
      if(!$("input[for=checkbox_for_"+ $(this).val() +"]").is(":checked")){
        $(this).removeAttr("checked");
      }
      if(!$(this).is(":checked")){
        $(this).parent().parent().parent().find(".main-enable-child-child").removeAttr("checked");
      }
    })

     sidePanel.on("click","#enable-menu .main-enable-child-child",function(e){
      if(!$("input[for=checkbox_for_child_"+ $(this).val() +"]").is(":checked")){
        $(this).removeAttr("checked");
      }
    })

    sidePanel.on("change","select.module_select", function(){
      var this_value = $(this).val(),
        categories_list = $("#categories_list")
        tags_list = $("#tags_list"),
        role_list = $("#role_list"),
        layouts_list = $("#layouts_list"),
        data_count_area = $("#data_count_area");
        
      categories_list.html("");
      tags_list.html("");
      role_list.html("");
      if(this_value){
        $.ajax({
          url : "<%= Rails.application.routes.url_helpers.pages_get_categories_path %>",
          data : {"module" : this_value},
          type : "get",
          dataType : "json"
        }).done(function(data){
          var controlDiv = $("<div class='controls'></div>");
          if(data.categories.length){
            categories_list.parent().find("label.control-label").text("<%= I18n.t(:category) %> :");
            var checkbox = $("<label class='checkbox'><input type='checkbox' value='all' name='page[categories][]' class='checkbox-all' /> <%= I18n.t(:all) %> </label>");
            controlDiv.append(checkbox);
            $.each(data.categories,function(i,category){
              var checkbox = $("<label class='checkbox'><input type='checkbox' value='"+ category.id +"' name='page[categories][]' /> " + category.title + " </label>");
              controlDiv.append(checkbox);
            })
            categories_list.html(controlDiv);
          }else{
            categories_list.parent().find("label.control-label").text("");
          }

          var controlDiv = $("<div class='controls'></div>");
          if(data.tags.length){
            tags_list.parent().find("label.control-label").text("<%= I18n.t(:tags) %> :");
            var checkbox = $("<label class='checkbox'><input type='checkbox' value='all' name='page[tags][]' class='checkbox-all' /> <%= I18n.t(:all) %> </label>");
            controlDiv.append(checkbox);
            $.each(data.tags,function(i,tag){
              var checkbox = $("<label class='checkbox'><input type='checkbox' value='"+ tag.id +"' name='page[tags][]' /> " + tag.name + " </label>");
              controlDiv.append(checkbox);
            })
            tags_list.html(controlDiv);
          }else{
            tags_list.parent().find("label.control-label").text("");
          }

          var controlDiv = $("<div class='controls'></div>");
          if(data.roles.length){
            role_list.parent().find("label.control-label").text("<%= I18n.t(:role) %> :");
            var checkbox = $("<label class='checkbox'><input type='checkbox' value='all' name='page[categories][]' class='checkbox-all' /> <%= I18n.t(:all) %> </label>");
            controlDiv.append(checkbox);
            $.each(data.roles,function(i,role){
              var status_list = '<ul id="status-list-'+role.id+'">';
              $.each(role.status,function(i,status){
                status_list+='<li><label class="checkbox"><input type="checkbox" value="'+status['id']+'" class="status-checkbox" name="page[role_status][]" >'+status['title']+'</label></li>';
              });

              status_list += '</ul>';

              var checkbox = $("<label class='checkbox'><input type='checkbox' class='role-checkbox' value='"+ role.id +"' name='page[categories][]' /> " + role.title + status_list + " </label>");
              controlDiv.append(checkbox);
            })
            role_list.html(controlDiv);
          }else{
            role_list.parent().find("label.control-label").text("");
          }

          if(data.layouts.length){
             layouts_list.parent().find("label.control-label").text("Layout type:");
            var controlDiv = $("<div class='controls'></div>"),
                select = $("<select name='page[layout]' class='select2' id='page_layout'></select>"),
                do_select = false;
            $.each(data.layouts,function(i,layout){
              if(typeof layout.length == "number"){
                select.append("<option value='" + layout + "'>" + layout + "</option>");
              }else if(typeof layout.length == "undefined"){
                do_select = true;
                select.append("<option value='" + layout.filename + "' data-image='" + layout.thumbnail + "'>" + layout.name + "</option>");
              }
            })
            controlDiv.html(select);
            layouts_list.html(controlDiv);
            if(do_select){
              select.select2({
                 formatResult: function(el){
                  var $element = $(el.element),
                    image = $element.data("image");
                  return "<img class='flag' src='" + image + "'/>" + el.text;
                 },
                 minimumResultsForSearch: -1,
                 width : 250
              });
            }
          }else{
             layouts_list.parent().find("label.control-label").text("");
            layouts_list.empty();
          }
          if(data.data_count.present){
            data_count_area.parent().find("label.control-label").text("Data Count :");
            var controlDiv = $("<div class='controls'></div>"),
                select = $("<select name='page[data_count]'></select>");
              for(i=data.data_count.start;i <= data.data_count.end; i++){
                select.append("<option value='" + i + "'>" + i + "</option>");
              }
            controlDiv.html(select);
            data_count_area.html(controlDiv);
          }else{
             data_count_area.parent().find("label.control-label").text("");
             data_count_area.empty();
          }
        })
      }
    })
  }
  i.initialize();
}

itemsLibrary = new Items();

$(function(){
  $(".open-slide").click(function(){
    $("#pageslide .content").css("padding","0");
  });
  
  $(".mobile-view-btn").click(function(){
    $(".nano").nanoScroller();
    $("#pageslide .content").css( "background-image", "url('/assets/grey_wash_wall.png')");
    $("#pageslide_iframe").css("width","400px");
    $("#pageslide_iframe").css("left","28%");
    $("#pageslide_iframe").css("box-shadow","0px 0px 40px #333");
  });
});

function customOpenSlide() {
  var $openSlide = $('.open-slide'),
      $pageslideW;

  $(window).width() > 1440 ? $pageslideW = 1024 : $pageslideW = 954;
  $(window).resize(function() {
      $(this).width() > 1440 ? $pageslideW = 1024 : $pageslideW = 954;
  });
  $noiFrame = $openSlide.not('.view-page');
  $iFrame = $openSlide.filter('.view-page.open-slide');
  $noiFrame.pageslide({
    W: 314,
    openFn: function(pageslide, element) {},
    closeFn: function(pageslide, element) {},
    loadComplete: function(pageslide, element) {}
  });
  $iFrame.pageslide({
    W: $pageslideW,
    iframe: true,
    openFn: function(pageslide, element) {},
    closeFn: function(pageslide, element) {},
    loadComplete: function(pageslide, element) {}
  });
}