jQuery(document).ready( function() {
  jQuery("body").addClass("js");
   
  
  /**
   * Click on '.' in #blog-description to turn the grid on. Click again to turn it off.
   */  
  {  
    // Add span for '.' in #blog-description, so it can be styled
    var gridHandleClass = 'grid-handle';
    var spannedHandle = jQuery("#blog-description").text().replace(".", "<span class='" + gridHandleClass + "'>.</span>");
    jQuery("#blog-description").html(spannedHandle);
    var turnOnGridClass = "turn-on-grid";  

    // [Disabled] Turn on test grid by default
    //jQuery("body").addClass("show-grid-test");
    //jQuery("body").addClass(turnOnGridClass);
    
    jQuery("." + gridHandleClass).click(function(){
      if (gridIsOn()) {
        jQuery("body").removeClass("show-grid-test");
        jQuery("body").removeClass(turnOnGridClass);
      }
      else {
        jQuery("body").addClass("show-grid-test");
        jQuery("body").addClass(turnOnGridClass);
      }
      
    });
    
    function gridIsOn(){
      return (jQuery("body." + turnOnGridClass).length > 0);
    }
  }
});