$j(document).ready(function(){
	var serviceTabs = new serviceTabsInstance();
	serviceTabs.init();
});

function serviceTabsInstance(){};
serviceTabsInstance.prototype = {
	init : function() {
		var o = this;
		o.component = $j('#Services');
		o.scrollPane = $j('#ScrollPane');
		o.tabListItemLinks = $j('#Tabs li a');
		o.serviceListItems = $j('#ServicesList li');
		o.companyHeading = $j('h4',o.scrollPane);
		o.serviceHeadings = $j('h5',o.scrollPane);
		o.servicesListScrollPane = $j('#ServicesListScrollPane');
		o.servicesListPrev = $j('.scroll-arrow-up');
		o.servicesListNext = $j('.scroll-arrow-down');
		o.tabTarget = $j('#TabTarget');
		o.render();
	},
	render : function() {
		var o = this;
		
		o.scrollPane.css({
			overflow: 'hidden',
			height: '500px'
		});
		
		o.component.localScroll({
			target: '#ScrollPane',
			axis: 'y',
			onAfter:function(anchor){
				//Only highlight h5 tags
				var $anchor = $j(anchor);
				if( $anchor[0].tagName == 'H5') {
					//Returns rail/tech color value etc
					$anchor.effect("highlight", {color: colorScheme['power'].highlight},1000,function(){
						o.serviceHeadings.removeClass('active');
						$anchor.addClass('active');
					});
				}
			}
		});
		
		o.servicesListScrollPane.css({
			overflow: 'hidden',
			height: '288px'
		});
		
		
		o.servicesListScrollPane.serialScroll({
			items:'li',
			axis: 'y',
			prev: o.servicesListPrev,
			next: o.servicesListNext,
			offset:1, //1
			start:0, //as we are centering it, start at the 2nd
			step: 8,
			duration:1200,
			force:true,
			stop:true,
			lock:false,
			cycle:false, //don't pull back once you reach the end
			jump: true //click on the images to scroll to them
		});
	
		o.events();
	},
	events : function() {
		var o = this;
		//Tab Hovers
		o.tabListItemLinks.hover(
			function(){ $j(this).addClass('hover'); },
			function(){ $j(this).removeClass('hover');}
		);
		//Service list active
		o.serviceListItems.click(function(){
			var clicked = $j(this);
			var anchorTarget = $j('a',clicked).attr('href');
			o.serviceListItems.removeClass('active');
			clicked.addClass('active');
		});
		o.servicesListNext.hover(
			function(){ $j(this).addClass('scroll-arrow-down-hover'); },
			function(){ $j(this).removeClass('scroll-arrow-down-hover');}
		);
		o.servicesListPrev.hover(
			function(){ $j(this).addClass('scroll-arrow-up-hover'); },
			function(){ $j(this).removeClass('scroll-arrow-up-hover');}
		);
	}
}