// 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.

var Rules = {

// Home Page Project Fader

	'#projects:loaded' : function() {
		
		if ($('project-link-1') != null)
		window.setTimeout("new Effect.Fade('project-link-0')", 0);
		window.setTimeout("new Effect.Appear('project-link-1')", 1);

		if ($('project-link-2') != null)
		window.setTimeout("new Effect.Fade('project-link-1')", 5000);
		window.setTimeout("new Effect.Appear('project-link-2')", 6000);

		if ($('project-link-3') != null)
		window.setTimeout("new Effect.Fade('project-link-2')", 9000);
		window.setTimeout("new Effect.Appear('project-link-3')", 10000);

		if ($('project-link-4') != null)
		window.setTimeout("new Effect.Fade('project-link-3')", 13000);
		window.setTimeout("new Effect.Appear('project-link-4')", 14000);

		if ($('project-link-5') != null)
		window.setTimeout("new Effect.Fade('project-link-4')", 17000);
		window.setTimeout("new Effect.Appear('project-link-5')", 18000);

		if ($('project-link-6') != null)
		window.setTimeout("new Effect.Fade('project-link-5')", 21000);
		window.setTimeout("new Effect.Appear('project-link-6')", 22000);

		if ($('project-link-7') != null)
		window.setTimeout("new Effect.Fade('project-link-6')", 25000);
		window.setTimeout("new Effect.Appear('project-link-7')", 26000);

		if ($('project-link-2') != null)
		window.setTimeout("new Effect.Fade('project-link-7')", 29000);
		window.setTimeout("new Effect.Appear('project-link-2')", 30000);

		if ($('project-link-3') != null)
		window.setTimeout("new Effect.Fade('project-link-2')", 33000);
		window.setTimeout("new Effect.Appear('project-link-3')", 34000);

		if ($('project-link-4') != null)
		window.setTimeout("new Effect.Fade('project-link-3')", 37000);
		window.setTimeout("new Effect.Appear('project-link-4')", 38000);

		if ($('project-link-5') != null)
		window.setTimeout("new Effect.Fade('project-link-4')", 41000);
		window.setTimeout("new Effect.Appear('project-link-5')", 42000);

		if ($('project-link-6') != null)
		window.setTimeout("new Effect.Fade('project-link-5')", 45000);
		window.setTimeout("new Effect.Appear('project-link-6')", 46000);

		if ($('project-link-7') != null)
		window.setTimeout("new Effect.Fade('project-link-6')", 49000);
		window.setTimeout("new Effect.Appear('project-link-7')", 50000);

		if ($('contactus-link') != null)
		window.setTimeout("new Effect.Fade('project-link-7')", 53000);
		window.setTimeout("new Effect.Appear('contactus-link')", 54000);
	},
	
// Project Clip Navigation
  
  '#clip-nav li:mouseover' : function(element) {
		element.style.color = '#f00';
  },

	'#clip-nav li:mouseout' : function(element) {
		if (element.className != 'active') {
			element.style.color = '#999';
		}
	},
	
	  '#sub-nav li:mouseover' : function(element) {
		element.style.color = '#f00';
  },

	'#sub-nav li:mouseout' : function(element) {
		if (element.className != 'active') {
			element.style.color = '#999';
		}
	},
	
	'#back:click' : function(element) {
	  var elems = document.getElementsByTagName("*");
	  for (var cls, i = 0; ( elem = elems[i] ); i++) {
	    if (elem.className == 'active') {
	      var projectPage = elem;
	    }
	  }
		var clip = parseFloat(projectPage.id.split("-")[2]);
		var currentClip = "clip-" + clip;
		var currentClipNav = "clip-nav-" + clip;
		var nextClip = "clip-" + (clip - 1);
		var nextClipNav = "clip-nav-" + (clip - 1);
		if ($(nextClipNav) != null) {
			$(currentClipNav).className = '';
			$(currentClipNav).style.color = '#999';
			new Effect.Fade(currentClip, {duration:.25});
			$(nextClipNav).className = 'active';
			$(nextClipNav).style.color = '#f00';
			new Effect.Appear(nextClip, {duration:1});
		}
	},
	
	'#forward:click' : function(element) {
	  var elems = document.getElementsByTagName("*");
	  for (var cls, i = 0; ( elem = elems[i] ); i++) {
	    if (elem.className == 'active') {
	      var projectPage = elem;
	    }
	  }
		var clip = parseFloat(projectPage.id.split("-")[2]);
		var currentClip = "clip-" + clip;
		var currentClipNav = "clip-nav-" + clip;
		var nextClip = "clip-" + (clip + 1);
		var nextClipNav = "clip-nav-" + (clip + 1);
		if ($(nextClipNav) != null) {
			$(currentClipNav).className = '';
			$(currentClipNav).style.color = '#999';
			new Effect.Fade(currentClip, {duration:.25});
			$(nextClipNav).className = 'active';
			$(nextClipNav).style.color = '#f00';
			new Effect.Appear(nextClip, {duration:1});
		}
	},
	
	'#clip-nav-1:click' : function() {
		if ($('clip-2').style.display != 'none') {
			new Effect.Fade('clip-2', {duration:.25});
			$('clip-nav-2').className = '';
			$('clip-nav-2').style.color = '#999';
		}
		if ($('clip-3').style.display != 'none') {
			new Effect.Fade('clip-3', {duration:.25});
			$('clip-nav-3').className = '';
			$('clip-nav-3').style.color = '#999';
		}
		new Effect.Appear('clip-1', {duration:1});
		$('clip-nav-1').className = 'active';
	},
	
	'#clip-nav-2:click' : function() {
		if ($('clip-1').style.display != 'none') {
			new Effect.Fade('clip-1', {duration:.25});
			$('clip-nav-1').className = '';
			$('clip-nav-1').style.color = '#999';
		}
		if ($('clip-3').style.display != 'none') {
			new Effect.Fade('clip-3', {duration:.25});
			$('clip-nav-3').className = '';
			$('clip-nav-3').style.color = '#999';
		}
		new Effect.Appear('clip-2', {duration:1});
		$('clip-nav-2').className = 'active';
	},

	'#clip-nav-3:click' : function() {
		if ($('clip-1').style.display != 'none') {
			new Effect.Fade('clip-1', {duration:.25});
			$('clip-nav-1').className = '';
			$('clip-nav-1').style.color = '#999';
		}
		if ($('clip-2').style.display != 'none') {
			new Effect.Fade('clip-2', {duration:.25});
			$('clip-nav-2').className = '';
			$('clip-nav-2').style.color = '#999';
		}
		new Effect.Appear('clip-3', {duration:1});
		$('clip-nav-3').className = 'active';
	}
	
}

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);}
})