/**********
Begin Valerio's Mootools Scrollbar Plugin
[http://mootools.net/uploads/scrollbar/]
**********/
var ScrollBar = new Class({

	Implements: [Events, Options],

	options: {
		maxThumbSize: 10,
		wheel: 8
	},

	initialize: function(content, track, thumb, options){
		this.setOptions(options);

		this.content = $(content);
		this.track = $(track);
		this.thumb = $(thumb);

		this.bound = {
			'start': this.start.bind(this),
			'end': this.end.bind(this),
			'drag': this.drag.bind(this),
			'wheel': this.wheel.bind(this),
			'page': this.page.bind(this)
		};

		this.position = {};
		this.mouse = {};
		this.update();
		this.attach();
	},

	update: function(){

		this.contentSize = this.content.offsetHeight;
		this.contentScrollSize = this.content.scrollHeight;
		
		if (this.contentSize + 3 >= this.contentScrollSize) this.track.getParent().setStyle('display', 'none');
		
		this.trackSize = this.track.offsetHeight;

		this.contentRatio = this.contentSize / this.contentScrollSize;

		this.thumbSize = (this.trackSize * this.contentRatio).limit(this.options.maxThumbSize, this.trackSize);

		this.scrollRatio = this.contentScrollSize / this.trackSize;

		this.thumb.setStyle('height', this.thumbSize);

		this.updateThumbFromContentScroll();
		this.updateContentFromThumbPosition();
	},

	updateContentFromThumbPosition: function(){
		this.content.scrollTop = this.position.now * this.scrollRatio;
	},

	updateThumbFromContentScroll: function(){
		this.position.now = (this.content.scrollTop / this.scrollRatio).limit(0, (this.trackSize - this.thumbSize));
		this.thumb.setStyle('top', this.position.now);
	},

	attach: function(){
		this.thumb.addEvent('mousedown', this.bound.start);
		if (this.options.wheel) this.content.addEvent('mousewheel', this.bound.wheel);
		this.track.addEvent('mouseup', this.bound.page);
	},

	wheel: function(event){
		this.content.scrollTop -= event.wheel * this.options.wheel;
		this.updateThumbFromContentScroll();
		event.stop();
	},

	page: function(event){
		if (event.page.y > this.thumb.getPosition().y) this.content.scrollTop += this.content.offsetHeight;
		else this.content.scrollTop -= this.content.offsetHeight;
		this.updateThumbFromContentScroll();
		event.stop();
	},

	start: function(event){
		this.mouse.start = event.page.y;
		this.position.start = this.thumb.getStyle('top').toInt();
		document.addEvent('mousemove', this.bound.drag);
		document.addEvent('mouseup', this.bound.end);
		this.thumb.addEvent('mouseup', this.bound.end);
		event.stop();
	},

	end: function(event){
		document.removeEvent('mousemove', this.bound.drag);
		document.removeEvent('mouseup', this.bound.end);
		this.thumb.removeEvent('mouseup', this.bound.end);
		event.stop();
	},

	drag: function(event){
		this.mouse.now = event.page.y;
		this.position.now = (this.position.start + (this.mouse.now - this.mouse.start)).limit(0, (this.trackSize - this.thumbSize));
		this.updateContentFromThumbPosition();
		this.updateThumbFromContentScroll();
		event.stop();
	}

});
/* End Valerio's Mootools Scrollbar Plugin */

function news_pagination() {
	if ($$('.older').length == 0) return;
	$$('.older a').each(function(el) {
		el.addEvent('click', function() {
			var req = new Request.HTML({ url:this.href,
				onSuccess: function(tree, elems, html, js) {
					var lastpage = true;
					for (var i = 0; i < elems.length; i++) {
						var node = elems[i];
						if (node.hasClass('entry')) node.injectBefore($('content').getElement('.page-navigation'));
						if (node.hasClass('older')) {
							$('content').getElement('.older a').setAttribute('href', node.getElement('a').getAttribute('href'));
							lastpage = false;
						}
					}
					lastpage ? $$('.older').setStyle('display', 'none') : $$('.older').setStyle('display', 'block');
				},
				
				onFailure: function() {
					location.href = this.href;
				}
			}).get();
			return false;
		});
	});
}

function team_navigation() {
	var container = $('team-row'); 
	if (!container) return;
	
	var team = container.getElements('li');
	var locations = new Array();
	
	team.each(function(el) {
		locations.combine(el.className.split(' '));
	});
	locations.sort();
	
	var ul = new Element('ul', {
		'id': 'team-nav'
	})
	var li = new Element('li');
	var a = new Element('a', {
		'href': '#all',
		'html': 'All',
		'class': 'selected'
	})
	a.addEvent('click', function(event) {
		this.each(function(el) {
			el.setStyle('display', 'block');
		});
		$('team-nav').getElements('a').removeClass('selected');
		$(event.target).addClass('selected');
		event.stop();
	}.bind(team));
	a.injectInside(li.injectInside(ul));
	
	locations.each(function(el) {
		li = new Element('li');
		a = new Element('a', {
			'href': '#' + el,
			'html': el.replace('-', ' ').capitalize()
		});
		a.addEvent('click', function(event) {
			var cn = event.target.hash.replace('#', '');
			this.each(function(el) {
				if (el.hasClass(cn)) {
					el.setStyle('display', 'block');
				}
				else {
					el.setStyle('display', 'none');
				}
			});
			$('team-nav').getElements('a').removeClass('selected');
			$(event.target).addClass('selected');
			event.stop();
		}.bind(team));
		
		a.injectInside(li.injectInside(ul));
	});
	
	ul.injectBefore(container);
}

var TabSet = new Class({
	tabs: [],
	tabLinks: [],
	active: null,
	
	initialize: function(navParent, tabClass, delay) {
		this.tabs = $$(tabClass);
		if (this.tabs.length <=1) return;
		var ul = new Element('ul', { 'class': 'tab-nav' });
		
		for(var i = 0; i < this.tabs.length; i++) {
			var li = new Element('li');
			var a = new Element('a', {
				'href': '#',
				'html': '*'
			});
			this.tabLinks.push(a);
			if (this.tabs[i].hasClass('initial')) {
				a.addClass('selected');
				this.active = this.tabs[i];
			} else {
				this.tabs[i].setStyle('display', 'none');
			}
			a.injectInside(li.injectInside(ul));
		}
		
		this.tabLinks.each(function(el, ndx) {
			el.addEvent('click', function(event) {
				$clear(this.pclear);
				this.tabLinks.each(function(lin) { lin.removeClass('selected'); });
				this.tabLinks[ndx].addClass('selected');
				if (this.tabs[ndx] != this.active) {
					var fadeOut = new Fx.Tween(this.active, {
						link: 'cancel',
						transition: 'quad:in',
						duration: '400',
						property: 'opacity'
					});
					
					fadeOut.addEvent('onComplete', function() {
						this.active.setStyle('display', 'none');
						this.tabs[ndx].set('opacity', '0');
						this.tabs[ndx].setStyle('display', 'block');
						var fadeIn = new Fx.Tween(this.tabs[ndx], {
							link: 'cancel',
							transition: 'quad:out',
							duration: '400',
							property: 'opacity'
						}).start(0, 1);
						this.active = this.tabs[ndx];
					}.bind(this));
					
					fadeOut.start(0);
				}
				return false;
			}.bind(this));
		}, this);
		
		ul.injectInside(navParent);
		if (delay) this.startPeriodical.delay(5000, this);
		else this.pclear = this.cycle.periodical(10000, this);
	},
	
	startPeriodical: function() {
		this.pclear = this.cycle.periodical(10000, this);
	},
	
	cycle: function() {
		var i;
		for (i = 0; this.tabs[i] != this.active; i++);
		if (i == this.tabs.length - 1) i = 0; else i++;
		
		this.tabLinks.each(function(lin) { lin.removeClass('selected'); });
		this.tabLinks[i].addClass('selected');
		var fadeOut = new Fx.Tween(this.active, {
			link: 'cancel',
			transition: 'quad:in',
			duration: '400',
			property: 'opacity'
		});
		
		fadeOut.addEvent('onComplete', function() {
			this.active.setStyle('display', 'none');
			this.tabs[i].set('opacity', '0');
			this.tabs[i].setStyle('display', 'block');
			var fadeIn = new Fx.Tween(this.tabs[i], {
				link: 'cancel',
				transition: 'quad:out',
				duration: '400',
				property: 'opacity'
			}).start(0, 1);
			this.active = this.tabs[i];
		}.bind(this));
		
		fadeOut.start(0);
	}
});


var Fader = new Class({
	Implements: Options,
	/* Defaults for animation duration, amount of time between transitions, and transition function.  Can be specified by user at instantiation. */
	options: {
		duration: 1000,
		frameTime: 7500,
		transition: 'linear'
	},
	slides: [],
	sClear: -1,
	active: 0,
	
	initialize: function(slideParent, slideClass, options) {
		this.slides = $(slideParent).getElements(slideClass);
		if (this.slides.length < 2) return;
		this.setOptions(options);
						
		for (var i = 1; i < this.slides.length; i++) {
			this.slides[i].setStyle('opacity', 0);
			this.slides[i].dispose();
		}
		
		this.sClear = this.cycle.periodical(this.options.frameTime, this);
	},
	
	cycle: function() {
		var anchor = this.slides[this.active];
		
		this.active = this.active == this.slides.length - 1 ? 0 : this.active + 1;
		var caboose = this.slides[this.active].injectAfter(anchor);
		
		var anchorFx = new Fx.Tween(anchor, {
			transition: this.options.transition,
			duration: this.options.duration,
			property: 'opacity'
		});
		anchorFx.addEvent('onComplete', function() {
			this.dispose();
		}.bind(anchor));
		
		var cabooseFx = new Fx.Tween(caboose, {
			transition: this.options.transition,
			duration: this.options.duration,
			property: 'opacity'
		});
		
		cabooseFx.start(0, 1);
		anchorFx.start(1, 0);
	}
});

function country_state() {
	var c = $('Country');
	if (!c) return;
	
	c.addEvent('change', function(event) {
		if (this.value == 'US') {
			$('State').setStyle('display', 'block');
		}
		else {
			$('State').setStyle('display', 'none');
		}
	});
}

function dominit() {
	drfired = true;
	JSHTML.parse();

	news_pagination();
	
	if ($('vgf-bucket')) new TabSet($('vgf-bucket'), '.vgf-tab');
	if ($('spotlight')) new TabSet($('spotlight'), '.spotlight-tab', true);
	
	team_navigation();
	country_state();
	
	/* Example of how to change timing and transition defaults.  You can change any number of these defaults or none if you wish. */
	if ($('feature')) new Fader($('feature'), '.slider', {
		duration:1000,
		frameTime:4000,
		transition:'quad:in'
	});
	/* This one uses all defaults */
	if ($('slideContainer')) new Fader($('slideContainer'), '.slider', {
		duration:1000,
		frameTime:4000,
		transition:'quad:in'
	});
}

window.addEvent('domready', function() {
	if (typeof(loadfired) == "undefined") dominit();
});

window.addEvent('load', function() {
	if (typeof(drfired) == "undefined") {
		dominit();
		loadfired = true;
	}
	var qfScroll = $('quick-facts');
	var clScroll = $('container').getElement('.team-list');
	var rnScroll = $('related-news');
	
	if (qfScroll) new ScrollBar(qfScroll.getElement('.mod-content'), qfScroll.getElement('.track'), qfScroll.getElement('.thumb'));
	if (clScroll) new ScrollBar(clScroll.getElement('.mod-content'), clScroll.getElement('.track'), clScroll.getElement('.thumb'));
	if (rnScroll) new ScrollBar(rnScroll.getElement('.mod-content'), rnScroll.getElement('.track'), rnScroll.getElement('.thumb'));
});

