Element.implement({
	tween_width: function(options) {
		var preset = {property:'width', duration:325, transition: 'cubic:out'}
		return this.get('tween', $merge(preset,options) );
	},
	bg_shift: function(options) {
		var preset = {property:'background-position', duration:300, transition: 'cubic:out'}
		return this.get('tween', $merge(preset,options) );
	},
	new_morph: function(duration, callback) {
		if (callback) {
			var fx = new Fx.Morph(this, {duration:duration, transition: 'cubic:out', onComplete:function(){ 
				theianimator.front.toggleClass("top"); theianimator.back.toggleClass("top") 
				}
			});	
		} else {
			var fx = new Fx.Morph(this, {duration:duration, transition: 'cubic:out'});	
		}
		return fx
	}
});

var TheIAnimator = new Class({
	Implements: Events,
	initialize: function(hero) {
		// el's
		this.hero = hero;
		if (pass = hero.getElement(".front_bg"))  	 this.front = pass;
		if (pass = hero.getElement(".back"))  		 this.back = pass;
		if (pass = hero.getElement(".cover"))  		 this.cover = pass;
		if (pass = hero.getElement(".the_i"))  		 this.the_i = pass;
		if (pass = hero.getElement(".i_reveal"))  	 this.more_i = pass;
		if (pass = hero.getElement(".border")) 		 this.border = pass;
		if (pass = hero.getElement(".panel_wrap"))	 this.panel_wrap = pass;
		if (pass = hero.getElement(".panel_shadow")) this.panel_shadow = pass;
		
		//optional
		if (pass = hero.getElement(".banner")) 		 this.banner = pass;
		if (pass = hero.getElement(".richmedia"))  	 this.richmedia = pass;
		if (pass = hero.getElement(".coming-soon"))  this.comingsoon = pass;
		
		//sanity check
		if (!this.front || !this.back || !this.the_i ||
			!this.more_i || !this.border || !this.panel_wrap || 
			!this.panel_shadow || !this.cover) alert("one or more key componets to the hero banner are missing. please check your markup");
		
		//stuff
		this.state = 0;
		this.animating = false;
		this.metrics = new Hash(this.hero.getStyles("width", "height"));
		this.animation = [];
		this.timings = [];
		this.opts = [];
					

	},
	
	setup: function() {
		this.the_i.addEvent('mouseenter', this.i_over.bindWithEvent(this));
		this.the_i.addEvent('mouseleave', this.i_out.bindWithEvent(this));
		[this.the_i, this.more_i].each(function(hit,i){ 
			hit.getElement('a').addEvent('click', this.i_click.bindWithEvent(this));
		}.bind(this));
		this.determineAnimation();
//		if (Browser.Engine.trident4) {
			this.more_i.getElement('a').setStyle('background-position','0px 0px');
//		}
	},
	
	reveal_the_i: function() {
		this.the_i.setStyles({"display": "block", "bottom": "-55px", "opacity": 0});
		new Fx.Morph(this.the_i, {duration:400, transition: 'cubic:out', onComplete:function(){this.the_i.setStyle("z-index", 100)}.bind(this)}).start({
			"bottom": [-55, 10],
			"opacity": [0,1]
		});
		
		this.i_over.delay(600,this);
		this.i_out.delay(1400,this);
		this.blink_i.delay(1700,this);
		if (Browser.Engine.trident4) { // GPK - Nasty IE6 hack to redraw the page for the i to appear.
			window.resizeBy(-10,0);
			window.resizeBy(10,0);
		}
	},
	
	blink_i: function(times) {
		of=function(){this.the_i.setStyle("opacity",0)};
		on=function(){this.the_i.setStyle("opacity",1)};
		of.delay(0,this);
		on.delay(50,this);
		of.delay(100,this);
		on.delay(150,this);
	},
	
	animation_metrics_for: function(ele, initopac) {
		var code = ele.get("rel");
		var inopt = [];
		var ouopt = [];
		var inobj = new Object();
		var ouobj = new Object();
		
		var t = ele.getStyle("top").toInt();
		var b = ele.getStyle("bottom").toInt();
		var l = ele.getStyle("left").toInt();
		var r = ele.getStyle("right").toInt();
		var w = ele.getStyle("width").toInt();
		var h = ele.getStyle("height").toInt();
		
		$A(code).each(function(id, i) {
			switch(id) {
				case "t":
					inopt.push({"top": [t, (0 - h)]});
					ouopt.push({"top": [(0 - h), t]});
				break;
				case "l":
					inopt.push({"left": [l, (0 - w)]});
					ouopt.push({"left": [(0 - w), l]});
				break;
				case "b":
					inopt.push({"bottom": [b, (0 - h)]});
					ouopt.push({"bottom": [(0 - h), b]});
				break;
				case "r":
					inopt.push({"right": [r, (0 - w)]});
					ouopt.push({"right": [(0 - w), r]});
				break;
				case "f":
					if (!initopac) initopac = 1;
					inopt.push({"opacity": [initopac, 0]});
					ouopt.push({"opacity": [0, initopac]});
				break;
			};
		}.bind(this))
		
		inopt.each(function(obj) { inobj = $merge(inobj,obj); })
		ouopt.each(function(obj) { ouobj = $merge(ouobj,obj); })
		return [inobj, ouobj]
	},
	
	i_over: function(e) { if (this.state == 0){ this.more_i.tween_width().start(100) }; },
	i_out: function(e) { if (this.state == 0){ this.more_i.tween_width().start(0) }; },
	
	i_click: function(e) {
		e.stop();
		if (!this.animating) {
			if (this.state == 0) {
				this.state = 1;
				this.reveal_i_close();
				this.animate_in.call(this);
				this.the_i.addClass('homeClose');
				if ($('i-back-1')) {
					if ($('i-back-1').getStyle('visibility') == 'visible' || $('i-back-1').getStyle('visibility') == 'inherit') {
						$$('form .nutriton-selectors select').each(function(selects){
							selects.setStyle('visibility', 'visible');
						});
						$$('.nutrition-group-table thead th select').each(function(selects){
							selects.setStyle('visibility', 'visible');
						});
					};
				};
			} else {
				this.hide_i_close();
				this.animate_out.call(this);
				this.the_i.removeClass('homeClose');
				$$('form .nutriton-selectors select').each(function(selects){
					selects.setStyle('visibility', 'hidden');
				});
				$$('.nutrition-group-table thead th select').each(function(selects){
					selects.setStyle('visibility', 'hidden');
				});
			}
		}
	},
	
	reveal_i_close: function() {
		f=function(){this.more_i.tween_width().start(55)}.delay(100,this);
		this.more_i.getElement('a').bg_shift().start("0px -22px");
		
		[this.the_i, this.more_i].each(function(hit,i){
			hit.getElement('a').setProperty('title', 'Click to go back');
		}.bind(this));
	},
	
	hide_i_close: function() {
		this.more_i.tween_width().start(100);
		
		f=function(){this.more_i.getElement('a').bg_shift({onComplete:function(){
			this.state =0; this.i_out();
		}.bind(this)}).start("0px 0px")}.delay(100,this);
		
		[this.the_i, this.more_i].each(function(hit,i){
			hit.getElement('a').setProperty('title', 'click to find out more')
		}.bind(this));
	},
	
	determineAnimation: function() {
		var animation = this.animation;
		var timings = this.timings;
		var options = this.opts;
		
		if (this.banner) 	
			{ animation.push(this.banner.new_morph(900)); 		timings.push(800); 	options.push(this.animation_metrics_for(this.banner)); };
		
		if (this.panel_shadow) { 
			var s = this.panel_shadow.new_morph(600);
			animation.push(s); 
			timings.push(800);
			options.push(this.animation_metrics_for(this.panel_shadow, .5)); 
		};
		
		if (this.panel_wrap) 	
			{ animation.push(this.panel_wrap.new_morph(1100));  timings.push(800); 	options.push(this.animation_metrics_for(this.panel_wrap)); };
			
		if (this.comingsoon) 	
			{ animation.push(this.comingsoon.new_morph(1100));  timings.push(800); 	options.push(this.animation_metrics_for(this.comingsoon)); };
		
		if (this.richmedia) 		
			{ animation.push(this.richmedia.new_morph(1100)); 	timings.push(800); 	options.push(this.animation_metrics_for(this.richmedia)); };
		
		if (this.border) 			
			{ animation.push(this.border.new_morph(1200)); 		timings.push(1200);  options.push(this.animation_metrics_for(this.border)); };
		
		if (this.cover) 			
			{ animation.push(this.cover.new_morph(1200)); 		timings.push(1200);  options.push(this.animation_metrics_for(this.cover)); };
		
		if (this.front) 			
			{ animation.push(this.front.new_morph(1200)); 		 timings.push(0);  options.push([
				{ 'background-position': ["-100px 0px", "0px 0px"], 'opacity':[1,0] },
				{ 'background-position': ["0px 0px", "-100px 0px"], 'opacity':[0,1] },
				]); };
	},
	
	animate_in: function() {
		this.animating = true;
		this.animation.each(function(morph, i){
			morph.start.delay(this.timings[i], morph, this.opts[i][0]);
		}.bind(this));
		f=function(){ this.back.toggleClass("top"); this.animating = false; }
		f.delay(2000,this);
	},
	
	animate_out: function() {
		this.animating = true;
		this.back.toggleClass("top"); 
		f=function(){ this.animating = false; }
		f.delay(1800,this);
		this.animation.each(function(morph, i){
			morph.start(this.opts[i][1]);
		}.bind(this));
	}
});

if (!Array.prototype.push) Array.prototype.push = function() {
    var n = this.length >>> 0;
    for (var i = 0; i < arguments.length; i++) {
	this[n] = arguments[i];
	n = n + 1 >>> 0;
    }
    this.length = n;
    return n;
};

if (!Array.prototype.pop) Array.prototype.pop = function() {
    var n = this.length >>> 0, value;
    if (n) {
	value = this[--n];
	delete this[n];
    }
    this.length = n;
    return value;
};

window.addEvent('load', function(){
	if (window.theianimator) {
		window.theianimator.reveal_the_i.delay(600, theianimator);
	}
});