(function($){
	$.fn.heroSwap = function(options) {
		// add to defaults
		var o = $.extend({}, $.fn.heroSwap.defaults, options);
		// check we have the right id
		o.container = '#' + $(this).attr('id');
		o.container_static = $(this).attr('id');
		o.animation_ref = o.container_static + '_' + o.animation_ref;

		
		// some default setting
		var timer, continue_cycle = true, next_hero, current_hero = o.default_hero;
		// list of all the available heroes
		var heroes = $(this).find(o.content_class + " li");
		// list of available nav items
		var navs = $(this).find(o.nav_class + " li");
		
		/** automatic something **/
		// swap two images
		var swap = function(a,b) {
			// make sure the new one isnt the original
			if(a != b) {
				
				// set the new current hero
				set_active(b);
				
				// easy use
				var fout = $(heroes[a]);
				var fin = $(heroes[b]);
			
				// and the old one out
				fout.fadeOut(o.fade_time);
				// fade the new item in
				fin.fadeIn(o.fade_time);
			}
		}
		
		// 
		var set_active = function(i)
		{
			// remove the active state from the current hero
			$(navs[current_hero]).removeClass('active');
			
			// make whatever was clicked the new hero
			current_hero = i;
			
			// add an active class to the selected item
			$(navs[i]).addClass('active');
		}
		
		// get the next hero
		var get_next_hero = function(i)
		{
			// get the next index
			var next = current_hero + 1;
			
			// make sure the next one exists
			if(next+1 > heroes.length)
			{
				// if not, start at the start
				next_hero = 0;
			}
			else
			{
				// otherwise make the next one next
				next_hero = next;
			}
		}
		
		// anything to do if auto is set?
		var cycle = function(type) {
			// if we should continue the cycle
			if (continue_cycle == true) {
				// no point fading if theres only one item
				if (heroes.length >= 1) {
					// get the next hero
					get_next_hero(current_hero);
					
					timer = setTimeout(function(){
						swap(current_hero, next_hero);
						cycle();
					}, o.cycle_delay);
					
				}
			}
		}
		
		// if we want to cycle
		if(o.cycle == true) {
			cycle(o.type);
		}
		

		// get all the nav items
		$(this).find(o.nav_class + " li").each(function(i) {
			$(heroes[i]).css({
				'position'	:	'absolute',
				'top'		:	'0',
				'left'		:	'0',
				'overflow'	:	'hidden'
			});
			
			if(i != current_hero)
			{
				$(heroes[i]).css({
					'display'	:	'none'
				});
			}
			
			// set clickable for each nav item
			$(this).click(function() {
				var clicked_nav = navs.index(this);
				// stop cycling
				if(o.cycle == true)
				{
					clearTimeout(timer);
					continue_cycle = false;
				}
				// fade them over
				swap(current_hero, clicked_nav);
				
				// stop the anchor being followed
				return false;
			});
		});
		
		// get all the prev link
		$("a.prevlink",this).click(function(e) {
			e.preventDefault();							
			
			//var clicked_nav = navs.index(this);
			if(current_hero<1){
				go_to = (heroes.length-1);
			}else{
				go_to = (current_hero-1);	
			}
			
			// stop cycling
			if(o.cycle == true)
			{
				clearTimeout(timer);
				//continue_cycle = false;
			}
			
			swap(current_hero, go_to);
			
			//cycle();
		});
		
		// get all the next link
		$("a.nextlink",this).click(function(e) {
			e.preventDefault();							
			
			//var clicked_nav = navs.index(this);
			if(current_hero>=(heroes.length-1)){
				go_to = 0;
			}else{
				go_to = (current_hero+1);	
			}
			
			// stop cycling
			if(o.cycle == true)
			{
				clearTimeout(timer);
				//continue_cycle = false;
			}
			
			swap(current_hero, go_to);
			
			//cycle();
		});
		
		// the current hero
		set_active(o.default_hero);
	};
		
	
	$.fn.heroSwap.defaults = {
		default_hero	: 0,
		container		: "#fader",
		nav_class		: ".fader-nav",
		content_class	: ".fader-content",
		animation_ref	: "in_anim_0o0o",
		cycle			: true,
		cycle_delay		: 2500,
		type			: 'fade',
		fade_time		: 1500
	};
})(jQuery);