$(document).ready(function() {
  
  /**
   * Hot Opportunities box
  **/
  $("div#purple-box div#one-offs-box").hide();
  
  $("div#purple-box li#hot-opportunities a").click(function() {
    $("div#purple-box div#hot-opportunities-box").show();
    $("div#purple-box div#one-offs-box").hide();
    
    
    $(this).addClass("active-panel");
    $("div#purple-box li#one-offs a").removeClass("active-panel");
    
  });
  
  $("div#purple-box li#one-offs a").click(function() {
    $("div#purple-box div#hot-opportunities-box").hide();
    $("div#purple-box div#one-offs-box").show();
    
    $(this).addClass("active-panel");
    $("div#purple-box li#hot-opportunities a").removeClass("active-panel");
  });
  

  /**
   * Postcode text disappear
  **/
  
  $("div#volunteer-now-search input#txt-postcode").click(function() {
    var sPostcodeValue = $("div#volunteer-now-search input#txt-postcode").val();
    
    if (sPostcodeValue == 'Postcode') {
      $("div#volunteer-now-search input#txt-postcode").val('');
    }
  });
  
  /**
   * Navigation Expander
  **/
  var bNeedToResetCSS = false;
  
  $("div#boxed-nav-arrows-container span.expander").hover(
    function() {
      
      
      var sShortTitle = $(this).html();
      var sTitle = $(this).parent().attr('rel');
      
      if (sTitle.length > 25) {
        
        bNeedToResetCSS = true;
        $(this).css({
          width: '190px',
          backgroundColor: '#FFFFFF',
          padding: '4px 8px 6px 8px',
          'box-shadow': '0 3px 3px #CCCCCC',
          'border': '1px solid #BBBBBB',
          'z-index': '50',
          'line-height': '19px'
        });
        
        $(this).html(sTitle);
        $(this).parent().attr('rel', sShortTitle);
      }
    },
    
    function() {
      var sTitle = $(this).html();
      var sShortTitle = $(this).parent().attr('rel');
      
      if (bNeedToResetCSS == true) {
        $(this).removeAttr('style');
        
        $(this).css({
          width: '170px',
          position: 'absolute'
        });
        
        $(this).parent().attr('rel', sTitle);
        $(this).html(sShortTitle);
      }
    }
  );
});