/*
	Class:		Switchy
	Author:		Tom Dancer
	Website:	http://tomdancer.com/
	Version:	0.1.0
	Date:		3rd February 2010
	Library:	jQuery 1.2.6+
	
	Usage:
	
	<div id="container">
		<div id="display">
			<img id="id_example_1" src="" alt="" />
		</div>
		<div id="store">
			<img id="id_example_2" src="" alt="" />
			<img id="id_example_3" src="" alt="" />
		</div>
		<div id="thumbs">
			<ul>
				<li>
					<a href="1.jpg" id="example_1">1</a>
				</li>
				<li>
					<a href="2.jpg" id="example_2">2</a>
				</li>
				<li>
					<a href="3.jpg" id="example_3">3</a>
				</li>
			</ul>
		</div>
	</div>
	
	$('#container').Switchy({
		display: '#display',	// holds initial image
		store: '#store',		// holds all other images
		thumbs: '#thumbs',		// holds thumbnails
		fadeSpeed: 'fast',		// fading speed
		eventType: 'click',		// event type to use
		thumbClass: 'active',	// active class for thumbnail
		delay: 4000				// interval time in ms
		reset: 5000				// interval pause timeout
	});
*/

(function($) {
	$.fn.Switchy = function(opts) {
		return this.each(function() {
			$.Switchy(this, opts);
		});
	};
	
	$.Switchy = function(container, opts) {
		var options = {
			container: null,
			display: null,
			store: null,
			thumbs: null,
			fadeSpeed: 'normal',
			eventType: 'click',
			thumbClass: '',
			delay: -1,
			reset: -1,
			interval: null,
			ids: [],
			current: 0,
			count: 0
		};
		
		// Stop events until setup
		var noEvents = true;
		
		// Get all divs
		options.container = $(container);
		options.display = $(opts.display, options.container);
		options.store = $(opts.store, options.container);
		options.thumbs = $(opts.thumbs, options.container);
		options.fadeSpeed = typeof opts.fadeSpeed != 'undefined' ? opts.fadeSpeed : options.fadeSpeed;
		options.eventType = typeof opts.eventType != 'undefined' ? opts.eventType : options.eventType;
		options.thumbClass = typeof opts.thumbClass != 'undefined' ? opts.thumbClass : options.thumbClass;
		
		// Is there a delay set?
		if (typeof opts.delay != 'undefined') {
			options.delay = opts.delay;
			if (typeof opts.reset != 'undefined') {
				options.reset = opts.reset;
			}
			options.count = options.store.children().length + 1;
			options.ids.push($(options.display.children()[0]).attr('id'));
			options.store.children().each(function() {
				options.ids.push($(this).attr('id'));
			});
		}
		
		// Hide the store
		options.store.hide();
		
		// Maintain container size
		var conSize = {
			'w': options.container.width(),
			'h': options.container.height()
		};
		options.container.width(conSize.w);
		options.container.height(conSize.h);

		// Maintain the thumbs holder position
		/*
		var thumbsPos = options.thumbs.position();
		options.thumbs.css({
			'position': 'absolute',
			'left': thumbsPos.left,
			'top': thumbsPos.top
		});
		*/
		
		// Position the display and first main image
		options.display.css('position', 'relative');
		$('> *', options.display).css('position', 'absolute');
		
		// Copy position values from first main image to stored
		var mainPos = $('> *', options.display).position();
		$('> *', options.store).css({
			'position': 'absolute',
			'left': mainPos.left,
			'top': mainPos.top
		});
		
		// Setup interval
		if (options.delay > -1) {
			setDelay();
		}
		
		// Enable clicking and assign the event
		noEvents = false;
		$('a', options.thumbs).bind(options.eventType, function() {
			if (!noEvents) {
				switchySwitch('id_' + this.id, false);
			}
			return false;
		});
		
		// Set the interval delay
		function setDelay() {
			options.interval = setInterval(function() {
				switchySwitch(getNextId(), true);
			}, options.delay);
		}
		
		// Get the next timed element
		function getNextId() {
			// Calc next current
			options.current = options.current + 1 >= options.count ? 0 : options.current + 1;
			return options.ids[options.current];
		}
		
		// The switch event
		function switchySwitch(nextId, timed){
			// Get current item and item corresponding to the activated thumb
			var currentActive = $('> *', options.display);
			//console.log(nextId);
			var newActive = $('#' + nextId, options.store);
			
			// If not a timed change
			if (timed === false) {
				clearInterval(options.interval);
				if (options.reset > -1) {
					options.interval = setTimeout(setDelay, options.reset);
				}
				// Update the next id
				for (var i in options.ids) {
					if (options.ids[i] == nextId) {
						options.current = parseInt(i);
						break;
					}
				}
			}
			
			// If there's an active class to set
			if (options.thumbClass != '') {
				var activeThumbId = currentActive.attr('id').replace('id_', '');
				var nextThumbId = nextId.replace('id_', '');
				$('#' + activeThumbId, options.thumbs).removeClass(options.thumbClass);
				$('#' + nextThumbId, options.thumbs).addClass(options.thumbClass);
			}
			
			// If we're not clicking the thumbnail for the current image...
			if (newActive.length > 0) {
				// Prepend the display with the new active image
				newActive.prependTo(options.display).show();
				
				// Fade the old active image
				currentActive.fadeOut(options.fadeSpeed, function(){
					// Once the fade is complete append this image to the store
					$(this).appendTo(options.store);
				});
			}
		}
	};
})(jQuery);