/*
 * jQuery Featured LIVESTRONG Plugin 
 * Version: 1.0 (Feb 03 2009)
 * Requires: jQuery v1.3.1
*/

/*
 <div id="featured">
	<ul>
		<li class="">
			<img src="/images/junk/diet.jpg" alt="" class="image" />
			<h2>Cooking and Calories</h2>
			<p>Different ways to make lower-calorie meals</p>
		</li>
		<li class="">
			<img src="/images/junk/cells.jpg" alt="" class="image" />
			<h2>Ibuprofen</h2>
			<p>How it affects you and your stomach.</p>
		</li>
		<li class="">
			<img src="/images/junk/foods.jpg" alt="" class="image" />
			<h2> Explore Healthy Foods</h2>
			<p>Get diet and nutrition information on healthy eating, picking the right foods, eating for your condition and maintaining a well balanced diet.</p>
		</li>
		<li class="">
			<img src="/images/junk/climb.jpg" alt="" class="image" />
			<h2>The Great Outdoors</h2>
			<p>Discover some of the best ways to enjoy the great outdoors.</p>
		</li>
		<li class="">
			<img src="/images/junk/people.jpg" alt="" class="image" />
			<h2>Learn to Love Exercise</h2>
			<p>Turn your love hate relationship into a healthy one.</p>
		</li>
	</ul>
</div>
*/

(function($){

$.fn.feature = function(options) {
	// Extend our default options with those provided.
	var opts = $.extend({}, $.fn.feature.defaults, options);

	// Local Variables
	var items			= $(this).find("li");
	var timeoutID		= null;
	var current_index	= 0;
	var controls 		= document.createElement("ul");
	var parent 			= this;
	
	// Add the controls to the element.
	controls.className = "controls";
	this[0].appendChild(controls);

	this.show_item = function(index, func) {
		this.hide_item(current_index);
		
		if(index >= items.length) {
			index = 0;
		}
		
		if(index < 0) {
			index = items.length-1;
		} 
		
		// Set the current index to the new value.
		current_index = index;
		
		// $(items[index].shadow_box).hide();
		$(items[index]).animate({ 
			opacity: "show"
		}, opts.animation_duration, function(){
			$(this.control).css("background-position",opts.bullet_on);
		});
	}

	this.hide_item = function(index) {
		// Check if the index actually exists.
		if(!items[index]) {
			index = 0;
		} 
		
		$(items[index]).animate({ 
			opacity: "hide"
		}, opts.animation_duration, function(){
			$(this.control).css("background-position",opts.bullet_off);
		});
	}

	this.show_next = function() {
		this.show_item(current_index + 1);
	}

	this.show_previous = function() {
		this.show_item(current_index - 1);
	}

	this.rotate = function() {
		if(opts.pause == true) {
			return;
		}
		this.show_next();
		this.start_rotate();
	}

	this.start_rotate = function() {
		var self = this;
		timeoutID = window.setTimeout(function(){ self.rotate(); }, opts.rotate_delay);
	}

	this.stop_rotate = function() {
		window.clearTimeout(timeoutID);
	}

	$(items).each(function(index) {
		// Create a control element for each featured module
		var img = document.createElement("li");
		//img.src = index == 0 ? opts.bullet_on : opts.bullet_off;
		if (index == 0) {
			$(img).css("background-position",opts.bullet_on);
		} else {
			$(img).css("background-position",opts.bullet_off);
		}
		img.index = index;
		img.onclick = function() {
			parent.show_item(this.index);
		}
		controls.appendChild(img);
		this.control = img;
		
		if(opts.show_controls == false) {
			controls.style.display = "none";
		}
		
		this.title_obj = $(this).find(".title")[0];
		this.description_obj = $(this).find(".description")[0];
		
		var shadow_box = document.createElement("div");
		$(shadow_box).css({
				opacity: 0.7, 
				zIndex: 70, 
				position: "absolute", 
				left: "0px", 
				bottom: "0px", 
				width: $(items).width() + "px", 
				height: 80 + "px", 
				background: "#365c05"
			});
		
		//this.appendChild(shadow_box);
		//this.shadow_box = shadow_box;
	});
	
	this.start_rotate();

	return(this);
};

// override these globally if you like (they are all optional)
$.fn.feature.defaults = {
	rotate_delay:			5000,
	pause:					false,
	show_controls:			true,
	animation_duration:		1500,
	bullet_off:				"left top",
	bullet_on:				"left -15px"
};

})(jQuery);