/**
 * Slide Paginator
 * jQuery plugin
 * 
 * Dependencies: 
 * 	jQuery (v1.3.2 or higher)
 *  jQuery easing plugin
 * 
 * Allows user to paginate lengthy content, slides horizontally. Left/Right arrows
 * along with a "dot" for each paginated section are added to parent container.
 * You may override css for this plugin by specifying your own in the 'options'
 * parameter.
 * 
 * @author Munish Dabas
 * @version 1.0
 */

(function($) {
    
    $.fn.slidePaginator = function(options){
			var that = $(this);
			var markup = '';
    	var pagClass = 'slidePaginator';
			var totalItems;
			var pagDisabled = false;
			var itemWidth = 0;
			var maxIndex = 0;
				
      var settings = {
        arrowLeftClass: 'leftArrow',
        arrowRightClass: 'rightArrow',
				contentPanel: '',
				displayItems: 4,
				currIndex: 1,
				slideDuration: 500
      };
			
			// extend settings if options are specified	
			if(options){
				$.extend(settings, options);
			}
			
			/**
			 * Animates slider movement to new page denoted by index
			 * @param {Object} i - new index
			 */
			gotoIndex = function(i, dontAnimate){
				// remove selected state from old index
				$($(that).find('ul li').get(settings.currIndex)).removeClass('current');
				
				// set new index and highlight
				settings.currIndex = i;
				$($(that).find('ul li').get(i)).addClass('current');
				
				// animate!
				var destX = -(itemWidth * settings.displayItems) * (i-1);
				if(!dontAnimate){
					$(settings.contentPanel).animate({ marginLeft: destX }, {duration: settings.slideDuration, easing: 'easeInOutQuad'});
				} else{
					$(settings.contentPanel).css('margin-left', destX);
				}
				
				$(that).find('ul li.leftArrowDisabled').removeClass('leftArrowDisabled').addClass('leftArrow');
				$(that).find('ul li.rightArrowDisabled').removeClass('rightArrowDisabled').addClass('rightArrow');
				//$(that).find('ul li.leftArrowHover').removeClass('leftArrowHover').addClass('leftArrow');
				//$(that).find('ul li.rightArrowHover').removeClass('rightArrowHover').addClass('rightArrow');
				
				
				if(settings.currIndex == 1){
					$(that).find('ul li[class^="leftArrow"]').attr('class', '').addClass('leftArrowDisabled');
				} else if(settings.currIndex == maxIndex){
					$(that).find('ul li[class^="rightArrow"]').attr('class', '').addClass('rightArrowDisabled');
				}
				
			};
			
			// clear out first
			$(this).empty();
			
			// determine item width
			itemWidth = $(settings.contentPanel).find('li').width();
			
			// determine total # of items in container
			totalItems = $(settings.contentPanel).find('li').length;
			
			// determine max indices for paging
			maxIndex = Math.ceil(totalItems / settings.displayItems);
			
			if (totalItems > 0) {
	  		// if # display items fewer than total amt of items, disable paginator
				if (settings.displayItems > $(settings.contentPanel).find('li').length) {
					pagClass += ' disabled';
					pagDisabled = true;
				}
				
				// add paginator container
				markup += '<ul class="' + pagClass + '">';
				
				// add left arrow
				markup += '<li class="' + settings.arrowLeftClass + '"></li>';

				// add dots
				if(!pagDisabled) {
					for(var i=0; i<maxIndex; i++){
						markup += '<li class=""></li>';
					}
				}
				
				// add right arrow
				markup += '<li class="' + settings.arrowRightClass + '"></li>';
				
				// close paginator container
				markup += '</ul>';
			}
			
			// calculate total width of paginator
			var totalWidth = 0;
			$(this).empty().html(markup).find('ul li').each(function(){
				totalWidth += $(this).width();
			}).parent().css('width', totalWidth );
			
			if (!pagDisabled) {
		  	$(this).find('li').hover(function(){
					if ($(this).hasClass(settings.arrowLeftClass)) {
		  			$(this).addClass(settings.arrowLeftClass + 'Hover');
		  		} else if ($(this).hasClass(settings.arrowRightClass)) {
			  		$(this).addClass(settings.arrowRightClass + 'Hover');
			  	} else {
			  		$(this).addClass('hover');
			  	}
		  	}, function(){
		  		if ($(this).hasClass(settings.arrowLeftClass)) {
		  			$(this).removeClass(settings.arrowLeftClass + 'Hover');
		  		} else if ($(this).hasClass(settings.arrowRightClass)) {
			  		$(this).removeClass(settings.arrowRightClass + 'Hover');
			  	} else {
			  		$(this).removeClass('hover');
			  	}
		  	}).click(function(e){ 
					// if clicking on arrow, move left or right once only
					if($(this).hasClass(settings.arrowLeftClass)){
						var index = settings.currIndex - 1;
						if (index > 0) {
							gotoIndex(index);
						};
					} else if($(this).hasClass(settings.arrowRightClass)){
						var index = settings.currIndex + 1;
						if (index <= maxIndex) {
							gotoIndex(index);
						};
					} else if($(this).hasClass('hover') && !$(this).hasClass('leftArrowDisabled') && !$(this).hasClass('rightArrowDisabled')) { 
						var index = $(that).find('ul li').index(this);
		  			gotoIndex(index);
					}
		  	});
		  } 
			
			// highlight + go to current Index
			gotoIndex(settings.currIndex, true);
			
			return $(this);
    };
    
})(jQuery)