(function() {
  "use strict";
  window.GOVUK = window.GOVUK || {};
  var $ = window.jQuery;

  function BrowseColumns(options){
    if(options.$el.length === 0) return;

    this.$el = options.$el;
    this.$root = this.$el.find('#root');
    this.$section = this.$el.find('#section');
    this.$subsection = this.$el.find('#subsection');

    if(this.$subsection.length === 0){
      this.$subsection = '<div id="subsection" class="pane" />';
      this.$el.prepend($subsection);
    } else {
      this.$subsection.show();
    }

    this.state = this.$el.data('state');
    this._cache = {};

    this.$el.on('click', 'a', $.proxy(this.navigate, this));

    $(window).on('popstate', $.proxy(this.popState, this));
  }
  BrowseColumns.prototype = {
    popState: function(e){
      var state = e.originalEvent.state;

      if(state.subsection){
        this.showSubsection(state.title, state.data);
        this.highlightSection('section', state.path);
        this.highlightSection('root', '/browse/' + state.section);
      } else {
        this.showSection(state.title, state.data);
        this.highlightSection('root', state.path);
      }
    },
    sectionCache: function(slug, data){
      if(typeof data === 'undefined'){
        return this._cache[slug];
      } else {
        this._cache[slug] = data;
      }
    },
    showSection: function(title, data){
      this.$section.mustache('browse/_section', { title: title, options: data.results});
      if(this.state !== 'section'){
        // animate to the right position and update the data
        this.$subsection.hide();
        this.$section.css('margin-right', '63%');
        this.$section.find('.pane-inner').animate({
          paddingLeft: '96px'
        }, 200);
        this.$section.animate({
          width: '35%',
          marginLeft: '0%',
          marginRight: '40%'
        }, 200, $.proxy(function(){
          this.state = 'section';

          this.$el.removeClass('subsection').addClass('section');
          this.$section.attr('style', '');
          this.$section.find('.pane-inner').attr('style', '');
          this.$section.addClass('with-sort');
        }, this));
      }
      // update the data
    },
    showSubsection: function(title, data){
      this.$subsection.mustache('browse/_section', { title: title, options: data.results});

      if(this.state !== 'subsection'){
        // animate to the right position and update the data
        this.$section.find('.sort-order').hide();
        this.$section.find('.pane-inner').animate({
          paddingLeft: '0'
        }, 200);
        this.$section.animate({
          width: '25%',
          marginLeft: '-13%',
          marginRight: '63%'
        }, 200, $.proxy(function(){
          this.state = 'section';

          this.$el.removeClass('section').addClass('subsection');
          this.$subsection.show();
          this.$section.removeClass('with-sort');
          this.state = 'subsection';

          this.$section.find('.sort-order').attr('style', '');
          this.$section.attr('style', '');
          this.$section.find('.pane-inner').attr('style', '');
        }, this));

      }
      // update the data
    },
    // getSection: returns a promise which will contain the data
    // Returns data from the cache if it is their of puts the data in the cache
    // if it is not.
    getSectionData: function(slug){
      var data = this.sectionCache(slug),
          sectionUrl = "/api/tags.json?type=section&parent_id=",
          subsectionUrl = "/api/with_tag.json?section=",
          url;

      if(slug.indexOf('/') > -1){
        url = subsectionUrl;
      } else {
        url = sectionUrl;
      }

      if(typeof data !== 'undefined'){
        var out = new $.Deferred()
        return out.resolve(data);
      } else {
        return $.ajax({
          url: url + slug
        }).done($.proxy(function(data){
          this.sectionCache(slug, data);
        }, this));
      }
    },
    highlightSection: function(section, slug){
      this.$el.find('#'+section+' .active').removeClass('active')
      this.$el.find('a[href$="'+slug+'"]').parent().addClass('active');
    },
    parsePathname: function(pathname){
      var out = {
        path: pathname,
        slug: pathname.replace('/browse/', '')
      };

      if(out.slug.indexOf('/') > -1){
        out.section = out.slug.split('/')[0];
        out.subsection = out.slug.split('/')[1];
      } else {
        out.section = out.slug;
      }
      return out;
    },
    navigate: function(e){
      if(e.target.pathname.match(/^\/browse/)){
        e.preventDefault();

        var $target = $(e.target);
        var state = this.parsePathname(e.target.pathname);

        state.title = $target.text();

        var dataPromise = this.getSectionData(state.slug);

        dataPromise.done($.proxy(function(data){
          state.data = data;
          history.pushState(state, '', e.target.pathname);

          if(state.slug.indexOf('/') > -1){
            this.showSubsection(state.title, data);
            this.highlightSection('section', state.path);
          } else {
            this.showSection(state.title, data);
            this.highlightSection('root', state.path);
          }
        }, this));
      }
    }
  };


  GOVUK.BrowseColumns = BrowseColumns;

  $(function(){ GOVUK.browseColumns = new BrowseColumns({$el: $('.browse-panes')}); })
}());

@@ -397,16 +397,18 @@
 ction = 
+$(
 '%3Cdiv id
@@ -437,16 +437,24 @@
 ane%22 /%3E'
+).hide()
 ;%0A      
@@ -470,16 +470,21 @@
 prepend(
+this.
 $subsect
@@ -1373,32 +1373,60 @@
 n(title, data)%7B%0A
+      this.setTitle(title);%0A
       this.$sect
@@ -2274,32 +2274,60 @@
 n(title, data)%7B%0A
+      this.setTitle(title);%0A
       this.$subs
@@ -3213,32 +3213,32 @@
 his));%0A%0A      %7D%0A
-
       // update 
@@ -3249,24 +3249,92 @@
 data%0A    %7D,%0A
+    setTitle: function(title)%7B%0A      $('title').text(title);%0A    %7D,%0A
     // getSe

Set page title on new pages