/**
 *  index.js
 */
window.onload = function ()  {
  LIGHTBOX1.initialize('consortium-of-uk-universities-lightbox')
  LIGHTBOX2.initialize('northumbria-university-pathway-lightbox')
}
var LIGHTBOX1 = {
  id: ['']
  ,initialize: function(i) {
  	id = i;
    var a = $(id+'-list-item-link')
    a.observe('click', LIGHTBOX1.show)
    a = $(id+'-close')
    a.observe('click', LIGHTBOX1.close)
  }
  , show : function(e) {
    var foo = $(id)
    foo.removeClassName('hide-me')
    foo.addClassName('show-lightbox')
    e.stop()    
  }
  , close : function(e) {
    var foo = $(id)
    foo.removeClassName('show-lightbox')
    foo.addClassName('hide-me')
    e.stop()    
  }
}
var LIGHTBOX2 = {
  id2: ['']
  ,initialize: function(i) {
  	id2 = i;
    var a = $(id2+'-list-item-link')
    a.observe('click', LIGHTBOX2.show)
    a = $(id2+'-close')
    a.observe('click', LIGHTBOX2.close)
  }
  , show : function(e) {
    var foo = $(id2)
    foo.removeClassName('hide-me')
    foo.addClassName('show-lightbox')
    e.stop()    
  }
  , close : function(e) {
    var foo = $(id2)
    foo.removeClassName('show-lightbox')
    foo.addClassName('hide-me')
    e.stop()    
  }
}
var MINITOUR = {
  dt_ids: ['c1', 'c2', 'c3']
  , dd_ids: ['e1', 'e2', 'e3']
  
  , initializeMiniTour: function() {
    //** 1. Add classes to / Remove classes from existing elements.
    var foo = $('main-content')
    foo.addClassName('js-mini-tour')
    foo.removeClassName('hide-me')
    foo.firstDescendant().addClassName('hide-me')
    $('mini-tour').addClassName('js-mini-tour')
    $('why-choose').addClassName('hide-me')
    foo = $('apply-now');
    foo.addClassName('js-mini-tour')
    foo.removeClassName('hide-me')
    foo.firstDescendant().addClassName('hide-me')

    //** 2. Add elements.
    MINITOUR.dt_ids.each(function(id){
      var dt = $(id)
      var label = dt.innerHTML
      dt.update('')
      var a = new Element('a',{'href': 'apply.htm'}).update(label)
      a.observe('click', MINITOUR.updateTour)
      dt.insert(a)
    })
    
/*
    foo = new Element('a', {'href': 'tour.htm'}).insert(new Element('img', {'src': 'img/mini-tour-take-virtual-tour-promo.png', 'alt': 'Take Virtual Tour'}), {'position': 'top'})
*/

    foo = new Element('a', {'href': 'photos_virtual-tour.htm'}).update('Take Virtual Photo Tour')

    
    dt = new Element('dt', {'id': 'launch-photo-tour-dt'}).insert(foo, {'position': 'bottom'})
    dd = new Element('dd', {'id': 'launch-photo-tour-dd'}).update('See more photos in the Photo Tour.'), {'position': 'after'}
    foo = $$('#mini-tour dl')[0]
    foo.insert(dt, {'position': 'bottom'})
    foo.insert(dd, {'position': 'bottom'})

    //** 2b. Wrap text contents of dt in span.
    MINITOUR.dd_ids.each(function(id){
      var dd = $(id)
      var txt = dd.innerHTML
      dd.update('')
      var s = new Element('span').update(txt)
      dd.insert(s)
    })
    //** Create 'start state'.
    $(MINITOUR.dt_ids[0]).addClassName('z3')
    $(MINITOUR.dd_ids[0]).addClassName('z2')
  }

  /**
   *  function updateTour ()
   *
   *  Updates the Mini Tour when a link is clicked.
   *  1. The link's parent dt is brought to the top of the stack
   *  2. The dt's corressponding dd is placed under the dt.
   *  3. All other dt's and dd's are placed below.
   */
  , updateTour: function(e) {
    var t = e.element()
    dt = t.parentNode
    dt.addClassName('z3').removeClassName('z2').removeClassName('z1')
    dd = dt.nextSiblings()[0]
    dd.addClassName('z2').removeClassName('z3').removeClassName('z1')

    var dtid = dt.identify()

      MINITOUR.dt_ids.each(function (item)  {
          if (item != dtid)  {
            dt = $(item)
            dt.removeClassName('z3').removeClassName('z2').addClassName('z1')
            dd = dt.nextSiblings()[0]
            dd.removeClassName('z3').removeClassName('z2').addClassName('z1')
          }
      })
    e.stop()
  }
}