$j(document).ready(function(){
	$j('#AZAlphabet').localScroll({
			target: '#ServicesList',
		  onAfter:function(e,anchor,target){
		}
	});
	$j('#AZAlphabet').attr({scrollTop:0,scrollLeft:0});
	var services = new servicesInstance();
	services.init();
});

function servicesInstance(){};
servicesInstance.prototype = {
	
	init : function() {
		var o = this;
		o.component = $j('#ServicesAZ');
		o.container = $j('#ServicesList');
		o.body = $j('#AZBody');
		o.trigger = $j('#AZTrigger');
		o.triggerText = $j('.text', o.trigger);
		o.scroller = $j('#ServicesScroll');
		o.scrollDown = $j('#ScrollDown');
		o.scrollUp = $j('#ScrollUp');
		
		//set state
		if(o.component.hasClass('open')) {
			o.optionsOpen = true;
			o.body.show();
			o.changeTriggerText('Close search options');
		}
		else { o.optionsOpen = false; }
		
		o.render();
	},
	render : function() {
		var o = this;
		o.container.css({
			width: '240px',
			overflow: 'hidden'
		});
		o.events();
	},
	events: function(){
  	var o = this;
		o.scrollDown.mousedown(function(){
			var currentPos = o.container.scrollTop();
			o.container.animate({scrollTop: (currentPos + 138)},100);
		});
		o.scrollUp.mousedown(function(){
			var currentPos = o.container.scrollTop();
			o.container.animate({scrollTop: (currentPos - 138)},100);
		});
		o.scrollUp.hover(function(){ $j(this).css({backgroundPosition: '-28px 0'})  }, function(){ $j(this).css({backgroundPosition: '0 0'})   });
		o.scrollDown.hover(function(){ $j(this).css({backgroundPosition: '-28px -16px'})    }, function(){ $j(this).css({backgroundPosition: '0 -16px'})   });
		o.trigger.click(function(){
			if(o.optionsOpen){ o.close(); }
			else { o.open(); }
		});
  },
	open : function() {
		var o = this;
		o.body.slideDown('slow',function(){
			o.scroller.show();
		});
		o.optionsOpen = true;
		o.component.addClass('open');
		o.changeTriggerText('Close search options');
	},
	close : function() {
		var o = this;
		o.scroller.hide();
		o.body.slideUp('slow');
		o.optionsOpen = false;
		o.component.removeClass('open');
		o.changeTriggerText('Show search options');
	},
	changeTriggerText : function(text){
		var o = this;
		o.triggerText.html(text);
	}
}