/*

@Kurtis Shaner (www.shanerdesign.net)

settings:
- transition: options are fade (default), slide, and carousel
- interval: time in milliseconds between transitions, also accepts 'slow' or 'fast' keywords (defaults to 5000)
- duration: time in milliseconds of the transition (defaults to 1000)
- navtype: creates a navigation list with the following options:
  - thumbnail: creates a thumbnail navigation item of the first image of each element
  - sprite: creates a css sprite for the naviation item (dimensions and image are defined in css)
  - alt: creates a text navigation of the alternate text from the first image
  - selector: parses the html from any jQuery selector and uses that for the navigation text
  - none: disable the navigation
- navselector: selector used if navtype is set to selector
- navposition: 'before', 'after' or 'none'
- automated: automatic and repeated transitions between elements (until nav item is clicked)

*/
(function($) {
	$.fn.sdview = function(options) {
	
		// default options
		var settings = {
			transition: 'fade',
			interval: 5000,
			duration: 1000,
			navtype: 'sprite',
			navposition: 'after',
			navselector: null,
			automated: true
		}
		if (options) $.extend(settings, options);

		$(this).each(function() {
		
			// add class to viewer for css
			$(this).addClass('sdview');

			// show first child element
			var elements = $(this).children();
			elements.addClass('sdview-element');
			
			// attach nav holder
			switch(settings.navposition) { 
				case 'after': $(this).after('<ul class="sdview-nav"></ul>'); break;
				case 'before': $(this).before('<ul class="sdview-nav"></ul>'); break;
				case 'none': break;
				default: alert('setting navposition must be after, before, or none'); return false;
			}
			
			// attach nav elements
			$('.sdview-nav').addClass(settings.navtype);			
			elements.each(function() {
				switch(settings.navtype) {
					case 'thumbnail':
						$('.sdview-nav').append('<li><a href="#'+ $(this).index() +'"><img src="'+ $(this).find('img:first').attr('src') +'"></a></li>');
					break;
					case 'sprite':
						$('.sdview-nav').addClass('sprite').append('<li><a href="#'+ $(this).index() +'"></a></li>');
					break;
					case 'alt':
						$('.sdview-nav').append('<li><a href="#'+ $(this).index() +'">'+ $(this).find('img:first').attr('alt') +'</a></li>');
					break;
					case 'selector':
						$('.sdview-nav').append('<li><a href="#'+ $(this).index() +'">'+$(this).find(settings.navselector).html() +'</a></li>');
					break;
					case 'none': 
					break;
					default: alert('setting navtype must be thumbnail, sprite, alt, or none'); return false;
				}
			});

			// position elements
			switch(settings.transition) {
				case 'fade':
					$(this).addClass('fade');
					elements.hide().filter(':first').show().addClass('sdview-active');
				break;
				case 'slide': 
					$(this).addClass('slide');
					elements.hide().filter(':first').show().addClass('sdview-active'); 
				break;
				case 'carousel':
					$(this).addClass('carousel');
					var w = 0;
					elements.each(function() {
						w += $(this).width();
					});
					$('.sdview').css({"width":w+"px"}).wrap('<div class="sdview-slider"></div>');
				break;
				default: alert('setting transition must be fade, slide, or carousel'); return false;
			}
				
			var nav = $('.sdview-nav').children();
			nav.filter(':first').addClass('sdview-active-link');
		
			// attach click function to nav items
			$('ul.sdview-nav a').click(function() {
				if (settings.automated) { clearInterval(moveit); }
				if ($(this).parent().hasClass('sdview-active-link')) return false;
				var next = this.hash.split('#')[1];
				switch(settings.transition) {
					case 'fade':
						elements.filter('.sdview-active').fadeOut(settings.duration).removeClass('sdview-active').end().filter(':eq('+ next +')').fadeIn(settings.duration).addClass('sdview-active');
					break;
					case 'carousel':
						var posx = -(next) * (elements.filter(':first').width()) + "px";
						$('ul.sdview').animate({'marginLeft': posx}, settings.duration);
					break;
					case 'slide':
						elements.filter('.sdview-active').slideUp(settings.duration).removeClass('sdview-active').end().filter(':eq('+ next +')').slideDown(settings.duration).addClass('sdview-active');
					break;
				}
				nav.filter('.sdview-active-link').removeClass('sdview-active-link').end().filter(':eq('+ next +')').addClass('sdview-active-link');
				return false;
			});
		
			// timed transitions
			if (settings.automated) {
				var i = 1;
				var moveit = setInterval(function() {
					switch(settings.transition) {
						case 'fade':
							if (elements.length == i) {
								elements.filter('.sdview-active').fadeOut(settings.duration).removeClass('sdview-active').end().filter(':first').fadeIn(settings.duration).addClass('sdview-active');
								nav.filter('.sdview-active-link').removeClass('sdview-active-link').end().filter(':first').addClass('sdview-active-link');
								i = 1;
							} else {
								elements.filter('.sdview-active').fadeOut(settings.duration).removeClass('sdview-active').next().fadeIn(settings.duration).addClass('sdview-active');
								nav.filter('.sdview-active-link').removeClass('sdview-active-link').next().addClass('sdview-active-link');
								i++;
							}
						break;
						case 'carousel':
							if (elements.length == i) {
								$('ul.sdview').animate({'marginLeft': '0px'}, settings.duration);
								nav.filter('.sdview-active-link').removeClass('sdview-active-link').end().filter(':first').addClass('sdview-active-link');
								i = 1;
							} else {
								var elemwidth = "-" + elements.filter(':first').width();
								posx = elemwidth * i + "px";
								$('.sdview').animate({'marginLeft': posx}, settings.duration);
								nav.filter('.sdview-active-link').removeClass('sdview-active-link').next().addClass('sdview-active-link');
								i++;
							}
						break;
						case 'slide':
							if (elements.length == i) {
								elements.filter('.sdview-active').slideUp(settings.duration).removeClass('sdview-active').end().filter(':first').slideDown(settings.duration).addClass('sdview-active');
								nav.filter('.sdview-active-link').removeClass('sdview-active-link').end().filter(':first').addClass('sdview-active-link');
								i = 1;
							} else {
								elements.filter('.sdview-active').slideUp(settings.duration).removeClass('sdview-active').next().slideDown(settings.duration).addClass('sdview-active');
								nav.filter('.sdview-active-link').removeClass('sdview-active-link').next().addClass('sdview-active-link');
								i++;
							}
						break;
					}
				}, settings.interval);
			}	
		});
	}
})(jQuery);