/* Tab functionality */
$(document).ready(function()
{
   // Setup element references
   var menu = $('#features ul.features');
   var showcase = menu.siblings('ul.showcase');
   var tab = document.location.hash || 'browsers';

   // Assign click events to all menu items
   menu.children('li').mouseup(function()
   {
      // Setup section name
      var tab = $(this).children('a').attr('href').match(/[^\#]+/)[0];

      // Toggle active tab
      showcase.find('li').removeClass('active').filter('.'+tab).addClass('active');
      $(this).addClass('active').siblings('li').removeClass('active');

      // Setup examples
      switch(tab)
      {
         case 'browsers': sectionBrowsers(); break;
         case 'round': sectionRound(); break;
         case 'tips': sectionTips(); break;
         case 'styles': sectionStyles(); break;
         case 'stacking': sectionStacking(); break;
         case 'effects': sectionEffects(); break;
         case 'ajax': sectionAJAX(); break;
      }

      // Change height if content doesn't span low enough
      showcase.height('auto');
      if(tab != 'ajax')
      {
         var current = showcase.offset().top + showcase.outerHeight();
         var min = $(this).offset().top + $(this).outerHeight();
         if(current < min) showcase.css({ height: min - showcase.offset().top - 22 });
      }

      return false;
   })

   // If tab name is invalid, use first tab instead
   tab = menu.find('a[href='+tab+']').parent('li');
   if(tab.length < 1) tab = menu.children('li:first')

   // Initiate tab activation
   tab.mouseup();
});

/* Browsers section */
function sectionBrowsers()
{
   var elem = $('#features ul.showcase li.browsers .list .browser');
   if(elem.data('qtip')) return;

   elem.each(function()
   {
      $(this).qtip(
      {
         content: $(this).find('img').attr('alt'),
         position: {
            corner: {
               target: 'topMiddle',
               tooltip: 'bottomRight'
            }
         },
         style: {
			width: 658,
			fontSize: 11,
			fontFamily: 'Georgia',
            border: {
               width: 1,
               radius: 5
            },
            tip: {
               corner: 'bottomRight'
            },
            name: 'dark'
         }
      })
      .attr('title', '').find('img').attr('alt', '');
   });
}

/* Rounded corner section */
function sectionRound()
{
   var elem = $('#features ul.showcase li.round .examples');
   if(elem.data('qtip')) return;

   var examples = [
      ['Big fish...', 'cream'], ['...board...', 'dark'],
      ['Little fish...', 'green'], ['Box!', 'red'], ['Card...', 'light']
   ]

   i = examples.length; while(i--)
   {
      $('#features ul.showcase li.round .examples').qtip(
      {
         content: {
            text: examples[i][0],
            prerender: true
         },
         position: {
            corner: {
               target: (i%2) ? 'bottomLeft' : 'topLeft',
               tooltip: (i%2) ? 'topMiddle' : 'bottomMiddle'
            },
            adjust: { x: ((i+1) * 120) - 20 },
            container: $('#features ul.showcase li.round')
         },
         show: { when: false, ready: true },
         hide: false,
         style: {
            border: {
               radius: 13 - (i+1) * 2
            },
            tip: {
               corner: (i%2) ? 'topMiddle' : 'bottomMiddle'
            },
            textAlign: 'center',
            width: 120,
            name: examples[i][1]
         }
      });
   }
}

function sectionTips()
{
   var elem = $('#features ul.showcase li.tips .cartoon');
   if(elem.data('qtip')) return;

   var examples = [
      ['Tip\'s are great for calling attention to elements.', 'topLeft', 'bottomRight', 'cream', 12, 12],
      ['They can be applied to any tooltip you choose.', 'topMiddle', 'bottomMiddle', 'cream', 12, 12],
      ['You can choose their colour...', 'topRight', 'bottomLeft', 'light', 12, 12],
      ['...any colour you want!', 'rightMiddle', 'leftMiddle', 'dark', 12, 12],
      ['You can even choose their size!', 'bottomRight', 'topLeft', 'cream', 23, 23],
      ['Big width tips like these are cool...', 'bottomMiddle', 'topMiddle', 'cream', 30, 12],
      ['And really tall ones look kind of funky too!', 'bottomLeft', 'topRight', 'cream', 12, 20],
      ['Or combine both size and colour to get some nice effects!', 'leftMiddle', 'rightMiddle', 'green', 30, 6],
   ]

   for(var i in examples)
   {
      elem.qtip(
      {
         content: {
            text: examples[i][0],
            prerender: true
         },
         position: {
            corner: {
               target: examples[i][1],
               tooltip: examples[i][2]
            },
            adjust: {
               x: (examples[i][1].search(/left/i) !== -1) ? -50 : (examples[i][1].search(/right/i) !== -1) ? 50 : 0
            },

            container: $('#features ul.showcase li.tips')
         },
         show: { when: false, ready: true },
         hide: false,
         style: {
            tip: {
               corner: examples[i][2],
               size: {
                  x: examples[i][4],
                  y: examples[i][5]
               }
            },
            border: {
               width: 4,
               radius: 5
            },
            name: examples[i][3],
            width: 190
         }
      });
   }
}

function sectionStyles()
{
   var elem = $('#features ul.showcase li.styles code');
   if(elem.data('qtip')) return;

   elem.qtip(
   {
      content: {
         text: 'See how easy it was to create me? And I only scratch the surface of what\'s possible!',
         prerender: true
      },
      position: {
         corner: {
            target: 'rightMiddle',
            tooltip: 'leftMiddle'
         },
         adjust: { x: -330 },
         container: $('#features ul.showcase li.styles')
      },
      show: { ready: true },
      hide: false,
      style: {
         tip: 'leftMiddle',
         border: { width: 10, radius: 6, color: '#FA6900' },
         background: '#F38630',
         color: '#333',
         width: 280
      }
   })
}

function sectionStacking()
{
   elem = $('#features ul.showcase li.stacking .example span');
   if(elem.data('qtip')) return;

   var styles = ['cream', 'green', 'light', 'red', 'dark', 'cream'];

   elem.each(function(i)
   {
      $(this).css(
      {
         visibility: 'hidden',
         position: 'relative',
         top: (i * 18),
         left: i * 25
      }
      ).qtip(
      {
         content: {
            text: $(this).text(),
            prerender: true
         },
         position: {
            corner: {
               target: 'topRight',
               tooltip: 'bottomLeft'
            },
            container: $('#features ul.showcase li.stacking')
         },
         show: {
            when: false,
            ready: true
         },
         hide: false,
         style: {
            tip: 'bottomLeft',
            border: {
               width: 4,
               radius: 6
            },
            name: styles[i],
            width: 150
         }
      }
      );
   });
}

function sectionEffects()
{
   var elem = $('#features ul.showcase li.effects .preset');
   if(elem.data('qtip')) return;

   var examples = [
      ['Boring old sliding in and out', 'slide', 'slide', 0, 'cream'],
      ['I grow outwards and inwards', 'grow', 'grow', 1, 'green'],
      ['I use the default fade effect', 'fade', 'fade', 2, 'dark'],
      ['Let\'s utilise jQuery UI\'s animation effects',
         function(length){ this.hide("slide", {}, length); }, 'fade', 0, 'light'],
      ['Exploding boxes are the new fad?',
         function(length){ this.hide("explode", {}, length); }, 'slide', 1, 'dark'],
      ['Custom effects on both hide and show events!',
         function(length){ this.hide("clip", {}, length); },
         function(length){ this.show("fold", {}, length); }, 2, 'red'],
   ]

   for(var i in examples)
   {
      if(i > 2) elem = $('#features ul.showcase li.effects .custom');

      elem.qtip(
      {
         content: {
            text: examples[i][0],
            prerender: true
         },
         position: {
            corner: 'topLeft',
            adjust: { x: 230 * examples[i][3] },
            container: $('#features ul.showcase li.effects')
         },
         show: {
            ready: true,
            when: false,
            effect: {
               type: examples[i][2],
               length: 500
            }
         },
         hide: {
            when: false,
            effect: {
               type: examples[i][1],
               length: 500
            }
         },
         style: {
            tip: false,
            border: {
               width: 4,
               radius: 6
            },
            name: examples[i][4],
            width: 200
         },
         api: {
            onRender: function(){ this.elements.tooltip.click(this.hide); },
            onHide: function(){ setTimeout(this.show, 1) }
         }
      });
   }
}

function sectionAJAX()
{
   var elem = $('#features ul.showcase li.ajax .example');
   if(elem.data('qtip')) return;

   // Define example titles and urls
   elem.qtip(
   {
      content: {
         prerender: true,
         text: 'Loading content...',
         title: {
            text: 'Wikipedia - Owls',
            button: false
         }
      },
      position: {
         corner: {
            target: 'topMiddle',
            tooltip: 'topMiddle'
         },
         container: $('#features ul.showcase li.ajax .example'),
         type: 'static'
      },
      show: { when: false, ready: true },
      hide: false,
      style: {
         tip: false,
         border: {
            width: 5,
            radius: 4
         },
         name: 'light',
         padding: 10,
         paddingBottom: 5,
         width: 600
      },
      api: {
         onRender: function()
         {
            var self = this, url, examples;
            examples = [
               '/projects/qtip/js/democontent.html',
               '/projects/qtip/js/democontent2.html',
               '/projects/qtip/js/democontent3.html'
            ];

            self.elements.content.bind('click', function()
            {
               switch(self.options.content.url)
               {
                  case examples[0]: url = examples[1]; break;
                  case examples[1]: url = examples[2]; break;
                  default: case examples[2]: url = examples[0]; break;
               }

               self.options.content.url = url; self.loadContent(url);
            })
            .click();
         }
      }
   })
}