var nav = {
  
  FRAGMENT:           "<li><a href='{url}' id='subnav-{id}'><img src='images/nav-icons/{id}.png' alt='' class='icon' /><div class='caption'><img src='images/rollovers/{id}.gif' alt='{caption}' /></div></a></li>",
  
  OPACITY_DEFAULT:    0.3,
  OPACITY_INACTIVE:   0.1,
  OPACITY_HOVER:      0.6,
  OPACITY_SELECTED:   0.6,

  COLOUR_DEFAULT:     '#B3B3B3',
  COLOUR_INACTIVE:    '#E6E6E6',
  COLOUR_HOVER:       '#666666',
  COLOUR_SELECTED:    '#666666',
  
  WIDTH_CLOSED:       44,
  WIDTH_OPEN:         144,
  FULL_HEIGHT:        450,

  ANIMATION_TIME:     1,
  
  HOME_PAGE:          false,
  
  initialId:          null,
  cancelHide:         {},
  
  isHomePage: function() {
    return nav.HOME_PAGE;
  },
  
  getId: function(ele) {
    return ele.id.replace(/^[a-z]+-/, '');
  },
  
  on: function() {
    if ($(this).hasClass('selected')) return;
    nav.cancelHide[this.id] = true;
    $(this).animate({width: nav.WIDTH_OPEN, color: nav.COLOUR_HOVER}, nav.ANIMATION_TIME);
    $('.icon', this).animate({opacity: nav.OPACITY_HOVER}, nav.ANIMATION_TIME);
  },
  
  off: function() {
    if ($(this).hasClass('selected')) return;
    var me = this;
    nav.cancelHide[me.id] = false;
    window.setTimeout(function() {
      if (!nav.cancelHide[me.id]) {
        nav.tweenItemOff(me);
      }
    }, 10);
  },
  
  tweenItemOff: function(item) {
    var targetColour, targetOpacity;
    if ($(item).hasClass('selected')) {
      targetColour = nav.COLOUR_SELECTED;
      targetOpacity = nav.OPACITY_SELECTED;
    } else if ($(item).parents('#nav-main').length == 0 || nav.isHomePage()) {
      targetColour = nav.COLOUR_DEFAULT;
      targetOpacity = nav.OPACITY_DEFAULT;
    } else {
      targetColour = nav.COLOUR_INACTIVE;
      targetOpacity = nav.OPACITY_INACTIVE;
    }   
    $(item).stop().animate({width: nav.WIDTH_CLOSED, color: targetColour}, nav.ANIMATION_TIME);
    $('.icon', item).stop().animate({opacity: targetOpacity}, nav.ANIMATION_TIME);
  },
  
  createSubnavHTML: function(id) {
    return $.map(subnav[id], function(i) { return nav.createItemHTML(i); }).join('');
  },
  
  createItemHTML: function(i) {
    return nav.FRAGMENT.replace(/\{id\}/g, i.id).replace(/\{url\}/g, i.url).replace(/\{caption\}/g, i.caption);
  }
  
}

$(function() {
  
  // Can't read opacity in IE so set it to a known value
	if ($.browser.msie) {
		$('.nav .icon').css('opacity', nav.OPACITY_DEFAULT);
	}
  
  var selectedMain = $('#nav-main a.selected');
  if (selectedMain.length == 1) {
    
    if (selectedMain[0].id != 'nav-home') {
      nav.HOME_PAGE = false;
      $('#nav-main').addClass('inactive');
      $('#nav-main .icon').css({opacity: nav.OPACITY_INACTIVE});
      $('#nav-main a').css({color: nav.COLOUR_INACTIVE});
    } else {
      nav.HOME_PAGE = true;
    }
    
    selectedMain.css({color: nav.COLOUR_SELECTED});
    $('.icon', selectedMain[0]).css({opacity: nav.OPACITY_SELECTED});
    nav.initialId = nav.getId(selectedMain[0]);
  
  }
  
  var selectedSub = $('#nav-sub a.selected');
  if (selectedSub.length == 1) {
      selectedSub.css({color: nav.COLOUR_SELECTED});
      $('.icon', selectedSub[0]).css({opacity: nav.OPACITY_SELECTED});
  }
  
  setTimeout(function() {
    
    cancelHide = false;
    
    $('#nav-main a').hover(function() {
      
      if ($(this).hasClass('selected')) return;
      
      cancelHide = true;
      
      $('#nav-sub a').animate({color: nav.COLOUR_INACTIVE}, nav.ANIMATION_TIME);
      $('#nav-sub .icon').animate({opacity: nav.OPACITY_INACTIVE}, nav.ANIMATION_TIME);
      
    }, function() {
      
      if ($(this).hasClass('selected')) return;
    
      cancelHide = false;
    
      setTimeout(function() {
        if (!cancelHide) {
          $('#nav-sub a').animate({color: nav.COLOUR_DEFAULT}, nav.ANIMATION_TIME);
          $('#nav-sub .icon').animate({opacity: nav.OPACITY_DEFAULT}, nav.ANIMATION_TIME);
        }
      }, 10);
      
    });
  
    $('.nav a').hover(nav.on, nav.off);
    
  }, 500);
  
});