// Ejemplos de simpletip (el usado es el último de todos)

/* 
   Setup anchor links
*/
$('a[href="#"][rel]').each(function()
{
   var section = '#' + $(this).attr('rel');
   
   $(this).mousedown(function()
   {
      $('html,body').scrollTop( $('html,body').scrollTop() )
      .animate({
         scrollTop: $(section).offset().top
      }
      , 750, 'swing');
      
      return false;
   })
});

/* 
   Setup demonstrations 
*/
// Simple
$('.pad-simple').simpletip('Just a simple tooltip', { parentClass: 'tooltip-simple' });

// Style
$('.pad-style1').simpletip('Simpletip makes styling your tooltips a breeze', { hook: { tooltip: 'topLeft', mouse: true }, offset: [5, 0], stem: false, parentClass: 'tooltip-blue' });
$('.pad-style2').simpletip('You can even style your stem colours to create some neat effects.', { hook: { tooltip: 'leftMiddle', mouse: true }, offset: [15, 0], stem: { corner: 'leftMiddle', color: '#303030' }, parentClass: 'tooltip-black' });

// Stems
$('.pad-stem-lm').simpletip('Stems are a great way to show where your tooltips came from', { hook: { tooltip: 'rightMiddle', target: 'leftMiddle' }, stem: { corner: 'rightMiddle' } });
$('.pad-stem-tm').simpletip('They can be any color or position on your tooltip', { hook: { tooltip: 'bottomMiddle', target: 'topMiddle' }, stem: { corner: 'bottomMiddle', color: '#303030' }, parentClass: 'tooltip-black' });
$('.pad-stem-br').simpletip('They\'re even cross browser compatible! Great ey?', { hook: { tooltip: 'topLeft', target: 'bottomRight' }, stem: { corner: 'topLeft', color: '#448FD8' }, parentClass: 'tooltip-blue' });

// Hooks
$('.pad-hook').simpletip('Hooking makes poisitioning your tooltips a breeze', { hook: { tooltip: 'rightMiddle', target: 'leftMiddle' }, offset: [-10, 0], parentClass: 'tooltip-black' });
$('.pad-hook-stem').simpletip('You can even combine stems and hooking!', { hook: { tooltip: 'bottomMiddle', target: 'topMiddle' }, stem: { corner: 'bottomMiddle', color: '#ccc' }, parentClass: 'tooltip-light' });
$('.pad-hook-mouse').simpletip('This tooltip is hooked to the mouse position with an offset', { hook: { mouse: true }, stem: { corner: 'topLeft' }, offset: [8, 0] });

// Target
$('.pad-target').simpletip('This tooltip is positioned using a different target element', { target: $('.pad-simple') });

// Custom events
$('.pad-events1').simpletip('Choose from the predefined show and hide effects.', { showEffect: 'slide', hideEffect: 'slide', parentClass: 'tooltip-blue' });
$('.pad-events2').simpletip('Or use custom show and hide functions to give your tooltips some funky effects.', { 
   showEffect: function(){
      $(this).css({ 
         width: 0, display: 'block' 
      })
      .animate({ 
         width: 160
      }, 200);
   },
   parentClass: 'tooltip-black'
});

// Click
$('.pad-click').simpletip('Tooltips can be set to show onclick, rather than onmouseover', { hook: { target: 'topMiddle', tooltip: 'bottomMiddle' }, stem: { corner: 'bottomMiddle', color: '#ccc' }, parentClass: 'tooltip-light', showOn: 'click', hideOn: 'click' });

// Delay
$('.pad-delay').simpletip('This tooltip has a delay of 400 milliseconds', { delay: 400, hook: { target: 'bottomMiddle', tooltip: 'topMiddle' }, stem: { corner: 'topMiddle' } });

// HideAfter
$('.pad-hideafter').simpletip('Tooltips can be set to hide after a set period of inactivity. This one will hide after 2 seconds of inactivity.', { hideAfter: 2000, hideOn: false, hook: { tooltip: 'topLeft', target: 'bottomRight' }, stem: { corner: 'topLeft', color: '#303030' }, parentClass: 'tooltip-black' });

// Offset
$('.pad-offset').simpletip('Fine tune your tooltip positions with offsets', { hook: { mouse: true }, offset: [15, 5], parentClass: 'tooltip-blue' });

// Viewport
$('.pad-viewport').simpletip('Keep tooltips inside the viewport at all times. Resize your browser to test it out.', { viewport: true, offset: [20, 0], hook: { tooltip: 'leftMiddle', mouse: true }, stem: { corner: 'leftMiddle', color: '#303030' }, parentClass: 'tooltip-black' });

// Ajax
$('.pad-ajax').simpletip('cargando...', { width: '150px', showOn: 'click', hideOn: {element: 'tip', event: 'mouseout'}, hook: { tooltip: 'bottomLeft', target: 'bottomRight' }, parentClass: 'tooltip-contacto', onShow: function(){ this.load('contenido.html'); } })