/* Begin: TragicMedia.com - JQuery Vertical Scroller
/* created 4/10 by Rich Rudzinski
/*------------------------------------------*/
// var vertConstants = {container:"", buttonClass:"", itemClass:"", speed:#};
// var vertScroll = new vertScroll(vertConstants);
// Notes: speed works as a "duration". The smaller the number, the faster it will animate

function vertScroll(initVars) {
	this.container = $('#' + initVars.container);
	this.frame = this.container.parent();
	this.itemClass = initVars.itemClass;
	this.slideItems = $('.' + initVars.itemClass);
	this.slideNumber = 1;
	this.current = 1;
	this.buttons = (initVars.buttonClass) ? $('.' + initVars.buttonClass) : [];
	this.speed = (initVars.speed == undefined) ? this.speed = 300 : this.speed = initVars.speed;
	if(this.slideItems.length%this.slideNumber != 0) this.addNodes(this.slideItems.length%this.slideNumber);
	this.itemWidth = this.slideItems[0].offsetWidth;
	this.itemHeight = 0;
	this.totalHeight = 0;
	for(i=0; i<this.slideItems.length; i++) {
		this.itemHeight = (this.slideItems[i].offsetHeight > this.itemHeight) ? this.slideItems[i].offsetHeight : this.itemHeight;
		this.totalHeight = this.totalHeight + this.slideItems[i].offsetHeight;
	}
	this.totalSlide = this.slideNumber * this.itemHeight;
	this.graph();
	this.createScroll();
}
// add nodes to slideItems when not enough elements for pages
vertScroll.prototype.addNodes = function(number) {
	for(i=0; i<number; i++) {
		var tempNode = this.slideItems[this.slideItems.length-1].cloneNode(false);
		this.container.append(tempNode);
	}
	this.slideItems = $('.' + this.itemClass);
}
// Set start position and adjust css for container and frame
vertScroll.prototype.createScroll =  function() {
	var container_css = {'width': this.itemWidth + 'px',
						'height': this.totalHeight + 'px',
						'position': 'absolute',
						'top': 0,
						'z-index': 1}
	this.container.top = 0;
	this.container.css(container_css);
	var frame_css = {'width': this.itemWidth,
					'height': this.itemHeight + 'px',
					'position': 'relative',
					'overflow': 'hidden'}
	this.frame.css(frame_css);
	var item_css = {'width': this.itemWidth + 'px',
					'height': this.itemHeight + 'px',
					'position': 'relative',
					'display': 'block'}
	this.slideItems.css(item_css);
	this.addArrowEvent();	// add arrow events
}
// add click event
vertScroll.prototype.addArrowEvent = function() {
	var obj = this;
	for(i=0; i<this.buttons.length; i++) {
		$(this.buttons[i]).click(function() {
				// graph animation
				if(!obj.animate) {
				$('.arrow-down-wrapper .arrow-down').css('opacity', 0);
				if(navigator.appName.match('Microsoft Internet Explorer')) {
					for(i=0; i<$('.arrow-down-wrapper .arrow-down').length; i++) {
						$('.arrow-down-wrapper .arrow-down')[i].style.filter = 'alpha(opacity = 0)';
					}
				}
				$('#' + $($(this).parent().parent().parent().parent()).attr('id') + ' .graph-item.active').each(function() {
					$(this).animate({backgroundColor: $(this).attr('rel').split('|')[0], top: $(this).attr('rel').split('|')[1]}, 500);
					$($(this).children()[0]).animate({opacity: 100}, 500, function(){$(this).css('zIndex', 3);});
					$($(this).children()[1]).animate({opacity: 0}, 500, function(){$(this).css('zIndex', 2);});
				});
				$('#' + $($(this).parent().parent().parent().parent()).attr('id') +  ' .graph-item').removeClass('active');
				$(this).addClass('active');
				$(this).animate({top:'420px'}, 500, function(){ $('.arrow-down-wrapper .arrow-down').css('left', $(this).css('left')); $('.arrow-down-wrapper .arrow-down').css('opacity', 100); if(navigator.appName.match('Microsoft Internet Explorer')) { for(i=0; i<$('.arrow-down-wrapper .arrow-down').length; i++) { $('.arrow-down-wrapper .arrow-down')[i].style.filter = 'alpha(opacity = 100)';} }});
				$($(this).children()[0]).css('zIndex', 2);
				$($(this).children()[1]).css('zIndex', 3);
				
				// slide animation
				obj.animate = true;
				var num = Number($(this).attr('href').split('#')[1]);
				if(obj.current != num) {
					obj.slideNumber = num - obj.current;
					if(obj.slideNumber > 0) {
						obj.totalSlide = obj.slideNumber * obj.itemHeight;
						obj.slideUp();
					} else {
						obj.slideNumber = Math.abs(obj.slideNumber);
						obj.totalSlide = obj.slideNumber * obj.itemHeight;
						obj.shiftElementsDown(obj.slideNumber);
						obj.slideDown();
					}
					obj.current = num;
				} else {
					obj.animate = false;
				}
			}
			return false;
		});
	}
}
// moves the elements on the page in preparation for the slide
vertScroll.prototype.shiftElementsDown = function(shiftNumber) {
	this.container.top = this.container.top - shiftNumber * this.itemHeight;
	this.container.css('top', this.container.top + 'px'); 
	for(i=shiftNumber; i>0; i--) {
		$(this.slideItems[this.slideItems.length - 1]).insertBefore(this.slideItems[0]);
		this.slideItems = $('.' + this.itemClass);
	} 
}
vertScroll.prototype.shiftElementsUp = function(shiftNumber) {
	this.container.top = this.container.top + shiftNumber * this.itemHeight;
	this.container.css('top', this.container.top + 'px'); 
	for(i=shiftNumber; i>0; i--) {
		$(this.slideItems[0]).insertAfter(this.slideItems[this.slideItems.length - 1]);
		this.slideItems = $('.' + this.itemClass);
	}
}
// slide elements down
vertScroll.prototype.slideDown = function() {
	var obj = this;
	this.container.top = this.container.top + this.totalSlide;
	this.container.animate({
		top: this.container.top
	}, this.speed*this.slideNumber, function() { obj.animate = false; });		
}
// slide elements up
vertScroll.prototype.slideUp = function() {
	var obj = this;
	this.container.top = this.container.top - this.totalSlide;
	this.container.animate({
		top: this.container.top
	}, this.speed*this.slideNumber, function() {obj.shiftElementsUp(obj.slideNumber); obj.animate = false;});
}
// handle graph items
vertScroll.prototype.graph = function() {
	obj = this;
	// set up graph items
	this.animate = false;
	$('.grid-wrapper .graph-item').each(function(){
		$(this).attr('rel', $(this).css('background-color')+ '|' + $(this).css('top'));
		$(this).css('top', '420px');
		$($(this).children()[0]).css('filter', 'alpha(opacity = 100)');
		$($(this).children()[1]).css('filter', 'alpha(opacity = 0)');
	});
	// top: 420 is hidden, 0 is full height
	$('.grid-wrapper .graph-item').hover(function(){
		if(!$(this).hasClass('active')) {
			$(this).stop(true, false).animate({backgroundColor: '#9ABB17', top: '0px'}, 500);
			$($(this).children()[0]).stop(true, false).animate({opacity: 0}, 500, function(){$(this).css('z-index', 2);});
			$($(this).children()[1]).stop(true, false).animate({opacity: 1}, 500, function(){$(this).css('z-index', 3);});
		}
	}, function(){
		if(!$(this).hasClass('active')) {
			$(this).stop(true, false).animate({backgroundColor: $(this).attr('rel').split('|')[0], top: $(this).attr('rel').split('|')[1]}, 500);
			$($(this).children()[0]).stop(true, false).animate({opacity: 1}, 500, function(){$(this).css('z-index', 3);});
			$($(this).children()[1]).stop(true, false).animate({opacity: 0}, 500, function(){$(this).css('z-index', 2);});
		}
	});
}
$(document).ready(function() {
	$('.grid-wrapper .graph-item').each(function(){
		$(this).delay(200*$(this).attr('href').split('#')[1]).animate({top: $(this).attr('rel').split('|')[1]}, 500, function() { $(this).animate({top:"-=30px"},100).animate({top:"+=30px"},100).animate({top:"-=20px"},100).animate({top:"+=20px"},100).animate({top:"-=10px"},100).animate({top:"+=10px"},100);});
	});

});