var Agrium = Class.create({        
  main_navigation: function(){
    
    // main_navigation behavior - extended behavior beyond the simple li:hover script
    $$('#main_navigation > .navigation > ul li').each(function(li){
      var navigation = li.down('.navigation')
      var ul = li.down('.navigation ul')
      var navigation_callout = li.down('.navigation .navigation_callout')
    
      // Mouse-enter on li
      li.observe('mouseenter', function(){      
        // li.hover will cause .navigation to appear and have layout for ie6
        li.addClassName('hover')
        // If there's an image in the navigation_callout, set its width to everything floats properly in IE
        if (navigation_callout) {
          navigation_callout.down('a.image').setStyle({ width: navigation_callout.down('a.image img').getWidth() + 'px' })          
        }
        // Set the .navigation to be wide enough to float both ul and .navigation_callout inside
        var navigation_callout_width = (navigation_callout) ? navigation_callout.getWidth() : 0
        var ul_width = (ul) ? ul.getWidth() : 0
        var navigation_width = navigation_callout_width + ul_width + 1
        if (navigation) {
          navigation.setStyle({ width: navigation_width + 'px' })
        }
        // // Do the exact same thing again. When the nav links are wider than the callout, 
        // // the width doesn't get calculated right. Something to with ul width. Weird, but this gets it right.
        var navigation_callout_width = (navigation_callout) ? navigation_callout.getWidth() : 0
        var ul_width = (ul) ? ul.getWidth() : 0
        var navigation_width = navigation_callout_width + ul_width + 1
        if (navigation) {
          navigation.setStyle({ width: navigation_width + 'px' })
        }
        
        // Shift the navigation left if the whole thing is too wide
        var room_available = $('site').getWidth() - li.positionedOffset()[0]
        var margin_offset = room_available - navigation_width
        if (margin_offset < 0) {
          navigation.setStyle({ marginLeft: margin_offset+'px' })
        }
              
      })
    
     // Mouse-leave on li
     li.observe('mouseleave', function(){
       li.removeClassName('hover')
     })       
    })
  },
  
  columns: function(){
    
    $$('.column').each(function(div){      
      var parent = div.up()
       // Elements with tagged parents have already been dealt with -- move on
      if (parent.columns==true) { return }
      // Get all the columns under this parent
      var columns = parent.select('.column')
      // // Find the the column with the biggest height and apply to all
      // var max_height = Math.max.apply(null, columns.invoke('getHeight'))
      // columns.invoke('setStyle',{ height: max_height+'px' })
      // Add a clearing div after the columns
      columns.last().insert({ after: '<div class="clear"></div>' })
      // Tag the parent element (so as not to repeat history)
      parent.columns = true
    })
  },
  mastheads_slideshow: function(){    
    if ($$('#masthead ul li').first()){
      new nGallery({ container:'#masthead', delay:11 })
    }
  },
quick_search_clear: function(){
    $$('#quick_search_clear').each(function(a){
      a.observe('click', function(e){
        $$('#quick_search').invoke('clear')
        $$('#quick_search').invoke('activate')
        e.stop()
      })
    })    
  },

 maps: function(){
    $$('[map_xml]').each(function(map){
    new Map(map.identify(), map.readAttribute('map_xml'))
    })
 }, 
  
  initialize: function(){}
})
// Global DOM onload
document.observe("dom:loaded", function() {
  var a = new Agrium()
  a.main_navigation()
  a.columns()
  a.mastheads_slideshow()
  a.maps()
  var c = new Common()
  c.input_default_value('#search','#quick_search')
  a.quick_search_clear()
  c.first_and_last('.navigation li', '.page_callout', '.section_callout', '.news_callout', '.column')
  //c.hover_behavior('#main_navigation li')
  c.external_links()  
   
})
Event.observe(window, 'load', function(){})