U.Helper

/*
      tabSlideOUt v1.1
        
      By William Paoli: http://wpaoli.building58.com

      To use you must have an image ready to go as your tab
      Make sure to pass in at minimum the path to the image and its dimensions:
        
      example:
        
          $('.slide-out-div').tabSlideOut({
                  tabHandle: '.handle',                         //class of the element that will be your tab -doesnt have to be an anchor
                  pathToTabImage: 'images/contact_tab.gif',     //relative path to the image for the tab *required*
                  imageHeight: '10px',                         //height of tab image *required*
                  imageWidth: '100%',                           //width of tab image *required*      
          });

        
*/

$(function(){
   $('.panel').tabSlideOut({       //Класс панели
    tabHandle: '.handle',      //Класс кнопки
    pathToTabImage: '',    //Путь к изображению кнопки
    imageHeight: '15px',      //Высота кнопки
    imageWidth: '100%',      //Ширина кнопки
    tabLocation: 'top',      //Расположение панели top - выдвигается сверху, right - выдвигается справа, bottom - выдвигается снизу, left - выдвигается слева
    speed: 300,        //Скорость анимации
    action: 'hover',        //Метод показа click - выдвигается по клику на кнопку, hover - выдвигается при наведении курсора
    topPos: '200px',       //Отступ сверху
    fixedPosition: true      //Позиционирование блока false - position: absolute, true - position: fixed
   });
});

(function($){
      $.fn.tabSlideOut = function(callerSettings) {
          var settings = $.extend({
              tabHandle: '.handle',
              speed: 300,   
              action: 'hover',
              tabLocation: 'top',
              topPos: '200px',
              leftPos: '0',
              fixedPosition: false,
              positioning: 'absolute',
              pathToTabImage: null,
              imageHeight: null,
              imageWidth: null                         
          }, callerSettings||{});

          settings.tabHandle = $(settings.tabHandle);
          var obj = this;
          if (settings.fixedPosition === true) {
              settings.positioning = 'fixed';
          } else {
              settings.positioning = 'absolute';
          }
            
          //ie6 doesn't do well with the fixed option
          if (document.all && !window.opera && !window.XMLHttpRequest) {
              settings.positioning = 'absolute';
          }
            
          //set initial tabHandle css
          settings.tabHandle.css({   
              'display': 'block',
              'width' : settings.imageWidth,
              'height': settings.imageHeight,
              'textIndent' : '-99999px',
              'background' : 'url('+settings.pathToTabImage+') no-repeat',
              'outline' : 'none',
              'position' : 'absolute'
          });
            
          obj.css({
              'line-height' : '1',
              'position' : settings.positioning
          });

            
          var properties = {
                      containerWidth: parseInt(obj.outerWidth(), 10) + 'px',
                      containerHeight: parseInt(obj.outerHeight(), 10) + 'px',
                      tabWidth: parseInt(settings.tabHandle.outerWidth(), 10) + 'px',
                      tabHeight: parseInt(settings.tabHandle.outerHeight(), 10) + 'px'
                  };

          //set calculated css
          if(settings.tabLocation === 'top' || settings.tabLocation === 'bottom') {
              obj.css({'left' : settings.leftPos});
              settings.tabHandle.css({'right' : 0});
          }
            
          if(settings.tabLocation === 'top') {
              obj.css({'top' : '-' + properties.containerHeight});
              settings.tabHandle.css({'bottom' : '-' + properties.tabHeight});
          }

          if(settings.tabLocation === 'bottom') {
              obj.css({'bottom' : '-' + properties.containerHeight, 'position' : 'fixed'});
              settings.tabHandle.css({'top' : '-' + properties.tabHeight});
                
          }
            
          if(settings.tabLocation === 'left' || settings.tabLocation === 'right') {
              obj.css({
                  'height' : properties.containerHeight,
                  'top' : settings.topPos
              });
                
              settings.tabHandle.css({'top' : 0});
          }
            
          if(settings.tabLocation === 'left') {
              obj.css({ 'left': '-' + properties.containerWidth});
              settings.tabHandle.css({'right' : '-' + properties.tabWidth});
          }

          if(settings.tabLocation === 'right') {
              obj.css({ 'right': '-' + properties.containerWidth});
              settings.tabHandle.css({'left' : '-' + properties.tabWidth});
                
              $('html').css('overflow-x', 'hidden');
          }

          //functions for animation events
            
          settings.tabHandle.click(function(event){
              event.preventDefault();
          });
            
          var slideIn = function() {
                
              if (settings.tabLocation === 'top') {
                  obj.animate({top:'-' + properties.containerHeight}, settings.speed).removeClass('open');
              } else if (settings.tabLocation === 'left') {
                  obj.animate({left: '-' + properties.containerWidth}, settings.speed).removeClass('open');
              } else if (settings.tabLocation === 'right') {
                  obj.animate({right: '-' + properties.containerWidth}, settings.speed).removeClass('open');
              } else if (settings.tabLocation === 'bottom') {
                  obj.animate({bottom: '-' + properties.containerHeight}, settings.speed).removeClass('open');
              }      
                
          };
            
          var slideOut = function() {
                
              if (settings.tabLocation == 'top') {
                  obj.animate({top:'-3px'},  settings.speed).addClass('open');
              } else if (settings.tabLocation == 'left') {
                  obj.animate({left:'-3px'},  settings.speed).addClass('open');
              } else if (settings.tabLocation == 'right') {
                  obj.animate({right:'-3px'},  settings.speed).addClass('open');
              } else if (settings.tabLocation == 'bottom') {
                  obj.animate({bottom:'-3px'},  settings.speed).addClass('open');
              }
          };

          var clickScreenToClose = function() {
              obj.click(function(event){
                  event.stopPropagation();
              });
                
              $(document).click(function(){
                  slideIn();
              });
          };
            
          var clickAction = function(){
              settings.tabHandle.click(function(event){
                  if (obj.hasClass('open')) {
                      slideIn();
                  } else {
                      slideOut();
                  }
              });
                
              clickScreenToClose();
          };
            
          var hoverAction = function(){
              obj.hover(
                  function(){
                      slideOut();
                  },
                    
                  function(){
                      slideIn();
                  });
                    
                  settings.tabHandle.click(function(event){
                      if (obj.hasClass('open')) {
                          slideIn();
                      }
                  });
                  clickScreenToClose();
                    
          };
            
          //choose which type of action to bind
          if (settings.action === 'click') {
              clickAction();
          }
            
          if (settings.action === 'hover') {
              hoverAction();
          }
      };
})(jQuery);