Team:Queens-Canada/js/event-selectors

// EventSelectors 
// Copyright (c) 2005-2006 Justin Palmer (http://encytemedia.com)
// Examples and documentation (http://encytemedia.com/event-selectors)
// 
// EventSelectors allow you access to Javascript events using a CSS style syntax.
// It goes one step beyond Javascript events to also give you :loaded, which allows 
// you to wait until an item is loaded in the document before you begin to interact
// with it.
//
// Inspired by the work of Ben Nolan's Behaviour (http://bennolan.com/behaviour)
//
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
// 
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
//

/*
**Making it work:**
|You need to start the event:Selectors before they will do anything:

 EventSelectors.start(Rules);

|This should either go an an onload event in the head of your document or right 
|before the closing body tag.
*/



var EventSelectors = {
  version: '1.0_pre',
  cache: [],
  
  start: function(rules) {
    this.rules = rules || {};
    this.timer = new Array();
    this._extendRules();
    this.assign(this.rules);
  },
  
  assign: function(rules) {
    var observer = null;
    this._unloadCache();
    rules._each(function(rule) {
      var selectors = $A(rule.key.split(','));
      selectors.each(function(selector) {        
        var pair = selector.split(':');
        var event = pair[1];
        $$(pair[0]).each(function(element) {
          if(pair[1] == '' || pair.length == 1) return rule.value(element);
          if(event.toLowerCase() == 'loaded') {
            this.timer[pair[0]] = setInterval(this._checkLoaded.bind(this, element, pair[0], rule), 15);
          } else {
            observer = function(event) {
              var element = Event.element(event);
              if (element.nodeType == 3) // Safari Bug (Fixed in Webkit)
            		element = element.parentNode;
              rule.value($(element), event);
            }
            this.cache.push([element, event, observer]);
            Event.observe(element, event, observer);
          }
        }.bind(this));
      }.bind(this));
    }.bind(this));
  },
  
  // Scoped caches would rock.
  _unloadCache: function() {
    if (!this.cache) return;
    for (var i = 0; i < this.cache.length; i++) {
      Event.stopObserving.apply(this, this.cache[i]);
      this.cache[i][0] = null;
    }
    this.cache = [];
  },
  
  _checkLoaded: function(element, timer, rule) {
    var node = $(element);
    if(element.tagName != 'undefined') {
      clearInterval(this.timer[timer]);
      rule.value(node);
    }
  },
  
  _extendRules: function() {
    Object.extend(this.rules, {
     _each: function(iterator) {
       for (key in this) {
         if(key == '_each') continue;         
         var value = this[key];
         var pair = [key, value];
         pair.key = key;
         pair.value = value;
         iterator(pair);
       }
     }  
    });
  }
}

// Remove/Comment this if you do not wish to reapply Rules automatically
// on Ajax request.
/*
Ajax.Responders.register({
  onComplete: function() { EventSelectors.assign(Rules);}
})
*/
/***************************************************************************************************************************************/

function hide(elements) {
    elements.each(function(a){a.hide();});
}
function setupStyles() {
  $("logo").hide();
  $("central_top_back").hide();
  hide(  $$('#main_menu').concat( $$('h1') ).concat( $$('h4') ).concat( $$('h5') ).concat( $$('.section') )  );
  Element.setStyle("footer", {color:"#C9CACC"});
  new Effect.Morph("footer",{
    style:'color:#777777',
    duration: 4
  });
}








function chainAppear(elements){
  //alert(a);
  //elements.each(function(a){a.hide(); });
  new Effect.DelayedChain('Appear', elements, { duration: 0.5 }, 200);
}
function sectionSelector( callingElement, options ){
  options = options || {};
  prefix = options.withoutPrefix ? "" : "#";
  if (callingElement)
    return prefix+callingElement.getAttribute('href').split('#')[1];
  else
    return prefix+( window.location.href.split('#')[1] || "main" );
}




// Probably want to remove these and create your own.
var Rules = {
  '#foobar': function(element, event) {
    elements = $$('#main_menu').concat( $$('h1') ).concat( $$('h4') ).concat( $$('h5') )
    section = $(sectionSelector(null, {withoutPrefix:true}))
    if ( section && section.hasClassName('section') ){
      elements = elements.concat( section );
      $$('h4 a').each(function(link){if (section.id == link.href.split('#')[1]) link.addClassName('active');})
    } else {
      elements = elements.concat( $("main") );
    }
    elements = [$('top'), $('central'), $('footer')].concat(elements);
    
    chainAppear( elements );
    /safari/.test(navigator.userAgent.toLowerCase()) ? new Effect.SlideDown("logo" , { duration: 2 } ) : $('logo').show();
    new Effect.Appear("central_top_back" , { duration: 4 } );
    /*new Effect.Morph("central_top_back",{
      style:'background-position:-150px 0',
      duration: 9, queue:{scope:'subtitle' }
    });*/
  },
  
  'h4 a:click': function(element, event) {
    //new Effect.ScrollTo('top');
    $$(".section").each(function(section){
      if ( Element.visible(section) && section.id != sectionSelector(element, {withoutPrefix:true}) )
        //new Effect.SlideUp( section.id.toString() );
        new Effect.Fade( section.id.toString(), { queue:{scope:'sections_queue', position:'end'} });
        //section.id.hide();
    });
    section = $( sectionSelector(element, {withoutPrefix:true}) )
    if ( !Element.visible(section) ){
      new Effect.Appear( section , { duration: 1.5, queue:{scope:'sections_queue', position:'end'} } );
    }
    $$('h4 a').each(function(link){link.removeClassName('active');})
    element.addClassName('active');
    /*Event.stop(event);*/
  }
}