/**
 * Vehicle Thumbnail Slider plugin
 *
 * @example $([field]).thumbnailSlider([params]);
 * @desc Activate the slider functionality
 *
 * @param Object of parameters for the autocomplete
 *		slidermask 		string		ID (without hash) of the slider mask element
 *		slidertracks	string		ID (without hash) of the slider track element
 *		thumbpages		string		Class (without period) of the slider page element
 *		mainimage		string		ID (without hash) of the main vehicle image element
 *		slideshow		boolean		true: slideshow autoplay on, false: slideshow autoplay off
 *		loop			boolean		false: off, true: on
 * @return jQuery element object
 *
 * @name thumbnailSlider
 * @author Greg Wardwell
 */

(function($) {
	//
	// plugin definition
	//
	$.fn.thumbnailSlider = function(options) {
		
		var params = {
			browsertype : '',
			slider : '',
			slidermask : '',
			slidertrack : '',
			slidernav : '',
			photonav : '',
			thumbpages : '',
			mainimage : '',
			currentslide : 0,
			currentthumb : 0,
			opts : ''
		}
		
		// Identify an iOS device
		if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
			params.browsertype = 'ios';
		}
		
		// build main options before element iteration
		params.opts = $.extend({}, $.fn.thumbnailSlider.defaults, options);
		
		// Setup slider on each matched element
		return this.each(function() {
			params.slider = $(this);
			params.slidermask = $('#' + params.opts.slidermask, params.slider);
			params.slidertrack = $('#' + params.opts.slidertrack, params.slider);
			params.thumbpages = $('.' + params.opts.thumbpages, params.slidertrack);
			params.mainimage = $('#' + params.opts.mainimage);
			params.slidertrack.width(params.thumbpages.outerWidth() * params.thumbpages.length);
			
			// Setup the slider navigation
			$.fn.thumbnailSlider.setupSliderNav(params);
			
			// Setup the photo navigation
			$.fn.thumbnailSlider.setupPhotoNav(params);
			
			// Event: Listen for click events on the HTML tag
			$('html').click(function(e) {
			
				var etarget = $(e.target);
				
				// If this is a thumbnail slider navigation button
				if (etarget.parents('a').length != 0 && etarget.parents('a').hasClass('navbutton')) {
					
					e.preventDefault();
					
					var clicked = etarget.parents('a');
					if (clicked.hasClass('disabled')) return false;
					
					if (params.opts.slideshow === true) $.fn.thumbnailSlider.stopSlideshow(params);
					$.fn.thumbnailSlider.selectAndSlide(clicked,params);
					
					etarget, clicked = null;
					return;
				
				} else if ((etarget.parents('a').length != 0 && etarget.parents('a').hasClass('photobutton')) || (etarget.is('li') && etarget.hasClass('photobuttonwrap'))) {
				
					e.preventDefault();
					var clicked = null;
					if (etarget.is('li')) {
						clicked = $('a', etarget);
					} else {
						clicked = etarget.parents('a');
					}
								
					if (clicked.hasClass('disabled')) return false;
					
					if (params.opts.slideshow === true) $.fn.thumbnailSlider.stopSlideshow(params);
					$.fn.thumbnailSlider.nextPrevPhoto(clicked, params);
					
					etarget, clicked = null;
					return;
				}
			});
			
			// Event: Listen for clicks on Slideshow thumbnails
			$('li a', params.slidertrack).click(function(e) {
				e.preventDefault();
				$.fn.thumbnailSlider.stopSlideshow(params);
				$.fn.thumbnailSlider.selectThumb($(this), params);		
			});
			
			// Event: Listen for slideshow on/off toggle click
			$('#slideshowToggles a').click(function(e) {
				
				e.preventDefault();
				var clicked = $(this);
						
				if (clicked.hasClass('on')) {
					
					$('#slideshowToggles .selected').removeClass('selected');
					$('#slideshowToggles a.on').addClass('selected');
					
					$.fn.thumbnailSlider.selectAndTransition(params);
					
				} else if (clicked.hasClass('off')) {
					
					$.fn.thumbnailSlider.stopSlideshow(params);
				}
			});
		});
	};
	
	// Function: Setup Slider Nav
	$.fn.thumbnailSlider.setupSliderNav = function(params) {
		if (params.thumbpages.length > 1) {
			
			// Slider nav
			params.slidernav = jQuery($('<ul id="thumbGalleryNav"></ul>'));
			var prevnav = jQuery($('<li class="prev" title="Previous Page"><a href="#" class="navbutton"><span>&laquo; Previous</span></a></li>'));
			var nextnav = jQuery($('<li class="next" title="Next Page"><a href="#" class="navbutton"><span>Next &raquo;</span></a></li>'));
			params.slidernav.append(prevnav).append(nextnav);
			if (params.opts.loop === false) $.fn.thumbnailSlider.disableEnableThumbNav($('a', prevnav), params);
			params.slider.append(params.slidernav);
			if (params.opts.slideshow === true) $.fn.thumbnailSlider.selectAndTransition(params);
		}
	};
	
	// Function: Setup Slider Nav
	$.fn.thumbnailSlider.setupPhotoNav = function(params) {
		if ($('li', params.slidertrack).length > 1 && params.mainimage.length != 0) {
			
			// Show the Slideshow toggle controls
			$('#slideshowToggles').css('display','block');
			
			// Photo nav
			params.photonav = jQuery($('<ul id="photoNav"></ul>'));
			var photoprevnav = jQuery($('<li class="photobuttonwrap prev" title="Previous Photo"><a href="#" class="photobutton"><span>&laquo; Previous</span></a></li>'));
			var photonextnav = jQuery($('<li class="photobuttonwrap next" title="Next Photo"><a href="#" class="photobutton"><span>Next &raquo;</span></a></li>'));
			params.photonav.append(photoprevnav).append(photonextnav);
			//disableEnableThumbNav($('a', photoprevnav));
			params.mainimage.append(params.photonav);
			
			// Add hover event listeners to the photo nav
			if (params.browsertype == 'ios') {
				$('li a', params.photonav).css('display','block');
			} else {
				$('li', params.photonav).hover(function(){
					$.fn.thumbnailSlider.addRemoveHoverClass($(this),params);
				},function() {
					$.fn.thumbnailSlider.addRemoveHoverClass($(this),params);
				});
			}
		}
	};
	
	// Function: Disable/Enable the thumbnail slider navigation buttons
	$.fn.thumbnailSlider.disableEnableThumbNav = function(navbutton, params) {
		var navparentli = navbutton.parents('li');
		var cursor = 'default';
		var opacity = 0.3;
		var getattr = 'title';
		var putattr = 'disabledtitle';
		var addclass = 'disabled';
		var removeclass = 'enabled';
		
		if (navbutton.hasClass('disabled')) {
			cursor = 'pointer';
			opacity = 1.0;
			getattr = 'disabledtitle';
			putattr = 'title';
			addclass = 'enabled';
			removeclass = 'disabled';
		} else {
			navbutton.removeClass('hover');
		}
		navbutton.css({'cursor':cursor, 'opacity':opacity}).addClass(addclass).removeClass(removeclass);
		navparentli.addClass(addclass).removeClass(removeclass);
		$('*', navbutton).css({'cursor':cursor});
		
		var getattrval = navparentli.attr(getattr);
		if (getattrval != '') {
			navparentli.attr(putattr, navparentli.attr(getattr));
			navparentli.removeAttr(getattr);
		}
		
		navbutton, cursor, opacity, getattr, putattr, addclass, removeclass, getattrval = null;
	};
	
	// Function: Go the either the next of the previous photo
	$.fn.thumbnailSlider.nextPrevPhoto = function(clicked, params) {
		
		var clickedli = clicked.parents('li');
		var clickedDir = $("li", params.photonav).index(clickedli);
		var nextView = false;		
		if (clickedDir) {
			nextView = true;
		}
		
		$.fn.thumbnailSlider.playSlideShow(nextView, false, params);
	};
	
	// Function: Transition to next vehicle image
	$.fn.thumbnailSlider.selectAndTransition = function(params) {
		
		var slideshow = params.slider.data('slideshow');
		clearInterval(slideshow);
		
		params.slider.data('slideshow',setTimeout(function() {
			$.fn.thumbnailSlider.playSlideShow(true,true,params);
		},5500));
	};
	
	// Function: Start the thumbnail slideshow
	$.fn.thumbnailSlider.playSlideShow = function(dir,restart,params) {
	
		// dir = true (forward) false (reverse)
		// restart = true (start the timer again) false (nope)
		
		var slideshow = params.slider.data('slideshow');
		clearInterval(slideshow);
		
		var thumbs = $('li', params.thumbpages);
		
		// Get the next thumb
		var nextthumb = (params.currentthumb + 1 < thumbs.length ? params.currentthumb + 1 : 0);
		
		// Get the slider-relative index of the first and last thumbnails on this page
		var firstthumb = $('li', params.thumbpages).index($('ul:eq('+ params.currentslide +') li:first-child', params.slidertrack));
		var lastthumb = $('li', params.thumbpages).index($('ul:eq('+ params.currentslide +') li:last-child', params.slidertrack));
		
		var changepage = false;
		
		// Determine if you need to go to the next page
		if (dir === true && (nextthumb > lastthumb || nextthumb == 0)) {
			changepage = (nextthumb == 0 ? 0 : (params.currentslide + 1 < params.thumbpages.length ? params.currentslide + 1 : 0));
		}
				
		if (dir === false) {
		
			nextthumb = (params.currentthumb - 1 >= 0 ? params.currentthumb - 1 : thumbs.length - 1);
			
			// Get the previous page's thumbnail count
			thumbsprevpage = $('ul:eq('+ (params.currentslide - 1) +') li', params.slidertrack).length;
						
			// Determine if you need to go to the next page			
			if (nextthumb < firstthumb || nextthumb == thumbs.length - 1) {
				changepage = (nextthumb == thumbs.length - 1 ? params.thumbpages.length - 1 : (params.currentslide - 1 > params.thumbpages.length ? params.thumbpages.length - 1 : params.currentslide - 1));
			}
		}
		
		// Slide to the next/previous page		
		if (changepage !== false) $.fn.thumbnailSlider.animateSlide(changepage,params);
		
		// Activate the next thumb
		$.fn.thumbnailSlider.selectThumb($('a', thumbs.eq(nextthumb)), params);
				
		// Restart the slideshow
		if (restart === true) $.fn.thumbnailSlider.selectAndTransition(params);
		
	};
	
	// Function: Load large version of thumbnail
	$.fn.thumbnailSlider.selectThumb = function(clicked, params) {
		
		var href = clicked.attr('href');
		var oldimg = $('img', params.mainimage);
		var parentli = clicked.parents('li');
		var thumbs = $('li', params.slidertrack);
		var nextthumb = thumbs.index(parentli);
		var prevbutton = $('li.prev a', params.slidernav);
		var nextbutton = $('li.next a', params.slidernav);
		var sclass = 'selected';
				
		// Swap selected class
		$('.' + sclass, params.slidertrack).removeClass(sclass);
		parentli.addClass(sclass);
		
		// Disable/enable next/previous photo buttons
		if (params.opts.loop === false) {
			if (nextthumb == 0) $.fn.thumbnailSlider.disableEnableThumbNav(prevbutton, params);
				else if (prevbutton.hasClass('disabled')) $.fn.thumbnailSlider.disableEnableThumbNav(prevbutton, params);
					
			if (nextthumb + 1 == frameNum) $.fn.thumbnailSlider.disableEnableThumbNav(nextbutton, params);
				else if (nextbutton.hasClass('disabled')) $.fn.thumbnailSlider.disableEnableThumbNav(nextbutton, params);
		}
		
		// Load in the new large image
		var img = new Image();
		img.src = href;
		
		if (img.complete) {
			
			$.fn.thumbnailSlider.transitionImg($(img), oldimg, params);
			
		} else {
		
			img.onload = function() {
				$.fn.thumbnailSlider.transitionImg(img, oldimg, params);
			};
		}
				
		// Store the new current page and thumb
		params.currentthumb = nextthumb;
	};
	
	
	// Function: Transition the old image to the new image
	$.fn.thumbnailSlider.transitionImg = function(img, oldimg, params) {
		$(img).css({'z-index':'50'});
		oldimg.css({'z-index':'100'});
		params.mainimage.prepend(img);
		oldimg.fadeOut('normal',function() {
			$(this).remove();
		});
	};
	
	// Function: Stop the slideshow
	$.fn.thumbnailSlider.stopSlideshow = function(params) {
		var slideshow = params.slider.data('slideshow');
		clearInterval(slideshow);
		
		$('#slideshowToggles .selected').removeClass('selected');
		$('#slideshowToggles a.off').addClass('selected');
	};
	
	// Function: Add/remove a hover class
	$.fn.thumbnailSlider.addRemoveHoverClass = function(hovered, params) {
				
		if (hovered.hasClass('hover')) hovered.removeClass('hover');
			else if (!hovered.hasClass('disabled')) hovered.addClass('hover');
	};
	
	// Function: Figure out the direction to slide
	$.fn.thumbnailSlider.selectAndSlide = function(clicked, params) {
		
		var clickedli = clicked.parents('li');
		var clickedDir = $('li', params.slidernav).index(clickedli);
		var frameNum = params.thumbpages.length;
		var nextview = (params.currentslide - 1 < 0 ? frameNum - 1 : params.currentslide - 1);
		
		if (clickedDir) {
			nextview = (params.currentslide + 1 > frameNum - 1 ? 0 : params.currentslide + 1);
		}
					
		if (params.opts.loop === true || (nextview <= frameNum - 1 && nextview >= 0)) {
			// slide to the new panel
			$.fn.thumbnailSlider.animateSlide(nextview, params);
		}
		clickedli, clickedDir, nextview, frameNum = null;
	};
	
	// Function: Perform the slide movement
	$.fn.thumbnailSlider.animateSlide = function(n, params) {
					
		var prevbutton = $('li.prev a', params.slidernav);
		var nextbutton = $('li.next a', params.slidernav);
		var frameNum = params.thumbpages.length;
	
		if (params.opts.loop === false) {
			if (n == 0) $.fn.thumbnailSlider.disableEnableThumbNav(prevbutton, params);
				else if (prevbutton.hasClass('disabled')) $.fn.thumbnailSlider.disableEnableThumbNav(prevbutton, params);
					
			if (n + 1 == frameNum) $.fn.thumbnailSlider.disableEnableThumbNav(nextbutton, params);
				else if (nextbutton.hasClass('disabled')) $.fn.thumbnailSlider.disableEnableThumbNav(nextbutton, params);
		}
		
		params.currentslide = n;
		params.slidertrack.animate({left:"-" + Math.round(n * params.slidermask.outerWidth()) + "px"});
		
		n, prevbutton, nextbutton, frameNum = null;
	};
	
	// Function: Plugin defaults
	$.fn.thumbnailSlider.defaults = {
		slidermask : 'thumbGalleryMask', // String: ID (without hash) of the slider mask element
		slidertrack : 'thumbGalleryTrack', // String: ID (without hash) of the slider track element
		thumbpages : 'thumbGalleryPage', // String: Class (without period) of the slider page element
		mainimage : 'mainVehicleImage', // String: ID (without hash) of the main vehicle image element
		slideshow : false, // Boolean: true: slideshow autoplay on, false: slideshow autoplay off
		loop : true // Boolean: false: off, true: on
	};
})(jQuery);