(function($){

	$.fn.buildScrollableList = function(customOptions) {

		var base = this;
        var options = $.extend({}, $.fn.buildScrollableList.defaultOptions, customOptions);


		return this.each(function() {
		
			$theScroller = $(this).hide(); /** Sunil Added **/
			
			$theScroller.parent().append('<div id="scrollerclose"></div>');
				$theScroller.find('li.page').find('.scrollable').parent().find('h2').hide();
			
			$theScroller.find('li.page').each( function() {

				$(this).prepend('<div class="navi"></div>');
				
				$('#secondarynav ul').append('<li><a href="#">' + $(this).find('h2').text() + '</a></li>')
				
				$('#secondarynav ul li').click(function() {
					
					$('#main').css({ /** Sunil Added **/
						'background-color' : '#ccc'
					});
					
					if ($('#main').css('display') == 'none') {
						$('#main').show("fast");
						$('#scrollerclose').show("fast");
						$(this).addClass("active");
					}
				});
			});
			
		
			$theScroller.scrollable({
				vertical: true,
				size: 1,
				clickable: false
			}).navigator("#secondarynav ul").mousewheel();
			 
			// horizontal scrollables. each one is circular and has its own navigator instance
			var horizontal = $(".scrollable").scrollable({size: 1}).circular().navigator(".navi");
			horizontal.eq(0).scrollable().focus();		
			
			
			
			$('#scrollerclose').hide();
			$('#scrollerclose').click(function() {
				//$theScroller.hide();
				//$('#scrollerclose').hide(); /* Change Sunil */				
			  $theScroller.fadeOut(1300);
			  $('#scrollerclose').fadeOut(1300);
			  $('#secondarynav li').removeClass("active");
			});
			$('#secondarynav li').removeClass("active");
	
		
		
		});
		


	}
	
	
	$.fn.buildScrollableList.defaultOptions = {
	


	}
	

})(jQuery);