
(function($) {
    $.fn.drags = function(opt) {
      
      opt = $.extend({handle:"",cursor:"col-resize", min: 0, max:50, onDragEnd :""}, opt);
      
      var isChrome = !!window.chrome && !!window.chrome.webstore;
      var isFirefox = typeof InstallTrigger !== 'undefined';

      if(opt.handle === "") {
          var $el = this;
      } else {
          var $el = this.find(opt.handle);
      }
     
      var priorCursor = $('body').css('cursor');

/*       return $el.css('cursor', opt.cursor).on("mousedown", function(e) { */
        return $el.on("mousedown", function(e) {
          
            priorCursor = $('body').css('cursor');
            $('body').css('cursor', opt.cursor);

            if(opt.handle === "") {
                var $drag = $(this).addClass('draggable');
            } else {
                var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
            }
           
            var z_idx = $drag.css('z-index'),
                drg_h = $drag.outerHeight(),
                drg_w = $drag.outerWidth(),
                pos_y = $drag.offset().top + drg_h - e.pageY,
                pos_x = $drag.offset().left + drg_w - e.pageX;
                
            $drag.css('z-index', 1000).parents().on("mousemove", function(e) {
              
              var prev = $('.draggable').prev();
              var next = $('.draggable').next(); 
              var parent = $('.draggable').parent(); 
                            
              var total = prev.outerWidth() + next.outerWidth();
              
              if($drag.hasClass('draggable')){
                var leftPercentage = (((e.pageX - prev.offset().left) + (pos_x - drg_w / 2)) / total); 
                var rightPercentage = (1 - leftPercentage); 
                
                if(leftPercentage *100  > opt.max || rightPercentage *100  < opt.min)
                {
                  return; 
                }else if (leftPercentage*100 < 10){
                  leftPercentage = 0;
                  rightPercentage = 1;
                }
                                
                //prev.css('flex-basis', leftPercentage*100+'%') ;
                //next.css('flex-basis', rightPercentage*100+'%');
                
                var handleSize =  $('.draggable').width()/parent.width();
                var ToolBarSize = $('#am-barre-outils').width() /  $('body').width();  

                console.log(handleSize);
                
                if(isChrome || isFirefox) {
                  
                  if (leftPercentage*100 < 10){
                    leftPercentage = 0;
                    rightPercentage = 1 - handleSize - ToolBarSize;
                  }else {
                    leftPercentage   = leftPercentage -  (handleSize/2) - ToolBarSize/2;
                    rightPercentage  = rightPercentage - (handleSize/2) - ToolBarSize/2;
                  }

                  
                  prev.css('flex-basis', (leftPercentage*100) +'vw');
                  next.css('flex-basis', (rightPercentage*100)+'vw');

                  
                }else {
                  prev.css('flex', leftPercentage.toString());
                  next.css('flex', rightPercentage.toString());
                }
                
              } 
                
            });
            
            $(document).on("mouseup", function() {
              $('body').css('cursor', priorCursor);
              $('.draggable').removeClass('draggable').css('z-index', z_idx);
              console.log('end drag');
              
              
              // TO DO Dispatch an event.
              //document.dispatchEvent(opt.onDragEnd);
              
              window.setBreakpointClass();
              
              
            });            
            e.preventDefault(); // disable selection
        });

/*     }) */
 }       
})(jQuery);

$('#draghandle').drags();
