/*
 * 	Content Fade - jQuery plugin
 *	written by Esteban Soler
 *  based on EasySlider 1.5
 *  
 *	Copyright (c) 2009 Esteban Soler (http://www.informalthinkers.com/)
 *	Dual licensed under the MIT (MIT-LICENSE.txt)
 *	and GPL (GPL-LICENSE.txt) licenses.
 *
 *	Built for jQuery library
 *	http://jquery.com
 *
 */

/*
 *	markup example for $("#slider").contentFade();
 *	
 * 	<div id="content-fade">
 *		<ul>
 *			<li><img src="images/01.jpg" alt="" /></li>
 *			<li><img src="images/02.jpg" alt="" /></li>
 *			<li><img src="images/03.jpg" alt="" /></li>
 *			<li><img src="images/04.jpg" alt="" /></li>
 *			<li><img src="images/05.jpg" alt="" /></li>
 *		</ul>
 *	</div>
 *
 */

	
( function($) {

	$.fn.contentFade = function(options) {
		
		// default configuration properties
		var defaults = {
			prevId :'prevButton',
			prevText :'Prev',
			nextId :'nextButton',
			nextText :'Next',
			pauseId :'pauseButton',
			pauseText :'Pause',
			playId :'playButton',
			playText :'Play',
			controlsShow :true,
			controlsBefore :'',
			controlsAfter :'',
			controlsFade :true,
			firstShow :false,
			speed :800,
			auto :true,
			pause :2000,
			continuous :true,
			progressBar : 'none'			
		};

		var options = $.extend(defaults, options);
		var data = {
			idx :0,
			timeout :0
		};

		this.each( function() {
			var obj = $(this);
			var uniqid = Math.floor(Math.random()*101);
			var s = $("li", obj).length;
			var w = $("li", obj).width();
			var h = $("li", obj).height();
			// obj.width(w);
				// obj.height(h);
				// obj.css("overflow","hidden");
				$('li', obj).hide();
				$("li:first", obj).addClass('selected').show();

				if (options.controlsShow) {
					var html = options.controlsBefore;

					html += '<div class="feedNav grid_1"><span class="prev" id="'
							+ options.prevId+uniqid
							+ '"><a href=\"javascript:void(0);\">'
							+ options.prevText + '</a></span>';
					html += ' <span class="pause" id="' + options.pauseId+uniqid
							+ '"><a href=\"javascript:void(0);\">'
							+ options.pauseText + '</a></span>';
					html += ' <span style="display: none;" class="play" id="' + options.playId+uniqid
							+ '"><a href=\"javascript:void(0);\">'
							+ options.playText + '</a></span>';
					html += ' <span class="next" id="' + options.nextId+uniqid
							+ '"><a href=\"javascript:void(0);\">'
							+ options.nextText + '</a></span></div>';

                            
					html += options.controlsAfter;
					$(obj).after(html);
				}
				;

				$("a", "#" + options.nextId+uniqid).click( function() {
					animate("next", true);
				});
				$("a", "#" + options.prevId+uniqid).click( function() {
					animate("prev", true);
				});
				$("a", "#" + options.pauseId+uniqid).click( function() {
					animate("pause", $("a", "#" + options.pauseId+uniqid));
				});
				$("a", "#" + options.playId+uniqid).click( function() {
					animate("play", $("a", "#" + options.playId+uniqid));
				});

					
				$("#"+options.progressBar).progressbar({ value: 0 });
				
				function animate(btn, clicked) {
					
					startPB();
					
					// console.log(btn+ ' - '+clicked+' - '+data.timeout);
					var cur = $('li.selected', obj);
					
					switch (btn) {
					case 'next':
					default:
						var next = $('li.selected', obj).next();
						cur.removeClass('selected').fadeOut(
								'slow',
								function() {
									if (next.length > 0)
										next.fadeIn(options.speed).addClass(
												'selected');
									else
										$('li:first', obj)
												.fadeIn(options.speed)
												.addClass('selected');
								});

						if (clicked)
							clearTimeout(timeout);
						if (options.auto && !clicked) {
							;
							data.timeout = setTimeout( function() {
								animate("next", false);
							}, options.speed + options.pause);
						} else {
							$('#' + options.playId).css('display','block');
							$('#' + options.pauseId).css('display','none');
						}
						;
						// console.log(options.speed+options.pause);
						break;
					case 'prev':
						var prev = $('li.selected', obj).prev();
						cur.removeClass('selected').fadeOut(
								'slow',
								function() {
									if (prev.length > 0)
										prev.fadeIn(options.speed).addClass(
												'selected');
									else
										$('li:last', obj).fadeIn(options.speed)
												.addClass('selected');
								});

						if (clicked)
							clearTimeout(timeout);
						if (options.auto && !clicked) {
							;
							data.timeout = setTimeout( function() {
								animate("next", false);
							}, options.speed + options.pause);
						} else {
							$('#' + options.playId+uniqid).css('display','block');
							$('#' + options.pauseId+uniqid).css('display','none');
						}
						;
						// console.log(options.speed+options.pause);
						break;
					case 'pause':
						clearTimeout(data.timeout);
						$('#' + options.playId+uniqid).css('display','block');
						$('#' + options.pauseId+uniqid).css('display','none');
						break;
					case 'play':
						animate("next", false);
						$('#' + options.playId+uniqid).css('display','none');
						$('#' + options.pauseId+uniqid).css('display','block');
						break;
					}

					return false;
				}
				
				
				function startPB(){
					$("#"+options.progressBar).progressbar("option", "value", 0);
					updateProgressBar();
				}

				function updateProgressBar() {

					var progress;
					progress = $("#"+options.progressBar).progressbar("option","value");
					if (progress < 100) {
						$("#"+options.progressBar).progressbar("option", "value", progress + 1);
						setTimeout(updateProgressBar, 350);
					}else{
						  $("#"+options.progressBar).progressbar("option", "value", progress + 1);
				    }
			
				}
	

				// init
				var timeout;
				if (options.auto) {
					;
					timeout = setTimeout( function() {
						animate("play", false);						
					}, options.pause);
				}
				;

				if (!options.continuous && options.controlsFade) {
					$("a", "#" + options.prevId).hide();
					$("a", "#" + options.firstId).hide();
				}
				;

			});

	};

})(jQuery);