/**
 * GLOBE StarBox jQuery plugin
 * 
 * Takes a div with specified markup and
 * renders it as a tab-enabled widget.
 */
jQuery.fn.starBox = function() {
  
  return this.each(function(){
    
    var starBox = this;
    
    // create the navigation
    var nav = jQuery('<ul class="star-nav">').appendTo(this);
    
    // create links for each star
    jQuery('.star', starBox).each(function(index, star) {
      // construct the link and li dynamically, append to nav
      var link = jQuery('<a href="#star-'+ (index+1) +'"><span>'+ (index+1) +'</span></a>');
      var li = jQuery('<li class="star-tab">').append(link);
      nav.append(li);
      
      // link click handler
      link.click(function(){
        
/*-----------------------------------------------------------------
 * Currently no animations, transitions are immediate. 
 * If transitions are required then they can go here-abouts
 */
         // basically push all images to z-index: 1 ...
         jQuery('.star', starBox).each(function(){ 
           jQuery(this).css('z-index', '1'); 
         });
         
        // and pull the "clicked" star to z-index: 10
        jQuery(star).css('z-index', '10');
        
/*-----------------------------------------------------------------*/
        
        // remove active classes, they're reset below
        jQuery('li.active', starBox).removeClass('active'); 
        jQuery('li.before-active', starBox).removeClass('before-active'); 
        jQuery('li.after-active', starBox).removeClass('after-active'); 
        
        // make the clicked link's parent li "active"
        jQuery(this).parent('li').addClass('active');
        
        // make the clicked link's parent li "active"
        jQuery(this).parent('li').prev('li').addClass('before-active');
        
        // make the clicked link's parent li "active"
        jQuery(this).parent('li').next('li').addClass('after-active');
        
        // remove focus (gets rid of browser specific "active" outline)
        jQuery(this).blur(); 
        return false; // don't follow the link
      });
    });
    
    // Would prefer :first-child and :last-child 
    // but IE does not work with them
    jQuery('li:first-child', nav).addClass('first');
    jQuery('li:last-child', nav).addClass('last');
    
    // initialize - "click" the first link
    jQuery('li:first-child a', nav).click();
  });
  
};