$('#features ul.showcase li.browsers .list .browser').each(function()
{
   $(this).qtip(
   { 
      content: $(this).find('img').attr('alt'),
      position: {
         corner: {
            target: 'bottomMiddle',
            tooltip: 'topMiddle'
         }
      },
      style: { 
         border: {
            width: 3,
            radius: 3
         },
         tip: {
            corner: 'topMiddle'
         },
         name: 'dark'
      }
   })
   .attr('title', '');
   
   // Remove alt attribute (IE bug)
   $(this).find('img').attr('alt', '');
})

$('#features ul.features li a').each(function(i)
{
   $(this).click(function()
   {
      var showcase = $('#features ul.showcase').css({ height: 'auto' });
      var features = $(this).parents('ul')
   
      // Toggle active class on all elements
      features.find('a').removeClass('active');
      $(this).addClass('active');
      
      // Show showcase section
      showcase.find('li').removeClass('active').eq(i).addClass('active');
      
      // Setup examples
      switch(i)
      {
         case 2: sectionRound(); break;
         case 3: sectionTips(); break;
         case 5: sectionStyles(); break;
         case 6: sectionStacking(); break;
         case 7: sectionEffects(); break;
         case 8: sectionAJAX(); break;
      }
      
      
      // Change height if content doesn't span low enough
      if(i !== 8)
      {
         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 });
      }
   })
})


function sectionRound()
{
   var elem = $('#features ul.showcase li.round .examples');

   if(typeof elem.qtip("api") == 'object') return;
   
   var examples = [
      ['Card...', 'light'], ['Big fish...', 'cream'],
      ['...board...', 'dark'], ['Little fish...', 'green'], 
      ['Box!', 'red']
   ]

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

function sectionTips()
{
   var elem = $('#features ul.showcase li.tips .cartoon');
   
   if(typeof elem.qtip("api") == 'object') 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', 40, 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(typeof elem.qtip("api") == 'object') 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: 40 },
         container: $('#features ul.showcase li.styles')
      },
      show: { ready: true },
      hide: false,
      style: {
         tip: 'leftMiddle',
         border: { width: 10, radius: 6, color: 'black' },
         background: 'white',
         color: 'red',
         width: 280
      }
   })
}

function sectionStacking()
{
   var styles = ['cream', 'green', 'light', 'red', 'dark', 'cream'];

   $('#features ul.showcase li.stacking .example span').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 .examples-preset');
   if(typeof elem.qtip("api") == 'object') return;
}

function sectionAJAX()
{
   var elem = $('#features ul.showcase li.ajax .example');
   
   // Define example titles and urls
   var url1 = '/projects/qtip/js/democontent.html';
   var url2 = '/projects/qtip/js/democontent2.html';
   var url3 = '/projects/qtip/js/democontent3.html';
   
   if(typeof elem.qtip("api") == 'object') return;
   
   elem.attr('rel', url1).qtip(
   {
      content: {
         prerender: true,
         text: 'Loading content...',
         url: url1,
         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',
         width: 600
      },
      api: {
         onContentLoad: function()
         {
            var self = this;
            self.elements.content.css({ height: 'auto' })
               .unbind('click').bind('click', function()
               {
                  if($(this).attr('rel') == url2)
                     $(this).attr('rel', url3);
                  else if($(this).attr('rel') == url3)
                     $(this).attr('rel', url1);
                  else
                     $(this).attr('rel', url2);
                     
                  self.loadContent($(this).attr('rel'));
               })
         }
      }
   })
   

}