// GROUPED APP SLIDER W BUTTONS
// @author Gina Beisel 
// Last updated on 11/04/2011

(function($) {
	$.fn.ginaGroupedAppSlider = function(settings){
		var config = {
					'intervalSpeed'			: 5000,
					'slideSpeed' 		    : 1000,
					'autoRotate'            : "yes",
					'numberGrouped'         : "3"
					
					 
		};
		if (settings){$.extend(config, settings);}
		var element = this;
		this.each(function(index, list) {
			var element = this;
			var intervalSpeed = config.intervalSpeed;
			var autoRotate = config.autoRotate;
			var numberGrouped = config.numberGrouped;
			var countLis = 1;
			var countGroup = 0;
			var liString = "";
			var countGroupString = "";
			$(".ui-widget.app .ui-articles > li:not(.grouped)", element).each(function(){
				if (countLis  == 1){
					countGroup++ ;
					countGroupString = "<li class = 'grouped group" + countGroup + "'></li>";
					$(this).parent().append(countGroupString);
					liString = "";	
				}
				liString = liString + "<li>" + $(this).html() + "</li>" ;
				if (countLis  == numberGrouped){
					countGroupString = ".group" + countGroup;
					$(this).parent().find(countGroupString).append(liString);
					countLis = 1;
					liString = "";
						
				}
				else {
					countLis++;
				}
				$(this).remove();
	
				
			});
			if (liString != ""){
				$(".grouped:last").append(liString);
				liString = "";
			}
			
			$(element).parent().find('.previous').click(function() {
					slideOut(element);
					clearInterval(timer);
					if (autoRotate == "yes"){
						timer = setInterval(function() {slideIn(element); }, intervalSpeed);
					}
					  
				});
			$(element).parent().find('.next').click(function() {
					slideIn(element);
					clearInterval(timer);
					if (autoRotate == "yes"){
						timer = setInterval(function() {slideIn(element); }, intervalSpeed);
					}
					  
				});
			var appHeight = $(element).height();
			var appWidth = $(element).width();
			
			$(element).find("div.ui-widget-detail ul:first li.grouped").css({height: appHeight, overflow: "hidden", float: "left", width: "0"});
			$(element).find(".ui-widget.app .ui-article").css({width: appWidth});
			$(element).find(".ui-widget-detail").css({height: appHeight, overflow: "hidden"});
			
			var $active = $('div.ui-widget-detail ul:first li.active', element);
			if($active.length == 0) {
				$("div.ui-widget-detail ul:first li.grouped:first", element).addClass("active");
					$active = $('div.ui-widget-detail ul:first li.active', element);
					$active.css("width", appWidth + "px");
				}
			if (($("div.ui-widget-detail ul:first li.grouped", element).length > 1) && (autoRotate == "yes" )){
				var timer = setInterval(function() {slideIn(element); }, intervalSpeed);
			}
			if (autoRotate == "yes") { 
				$("div.ui-widget-detail", element).hover(
				  function () {
					clearInterval(timer);
				  }, 
				  function () {
					timer = setInterval(function() {slideIn(element); }, intervalSpeed);
				  }
				);
			}
			
			
			});
		function slideIn(element){
			var slideSpeed = config.slideSpeed;
			var appWidth = $(element).width();
			
			
			var $active = $('div.ui-widget-detail ul:first li.active', element);
			
			$active.animate({width: 0}, slideSpeed);
			$active.removeClass("active");
				if($active.next("li.grouped").length > 0) {
					$active.next("li.grouped").addClass("active");		
			} else {
				var $nextActive = $("div.ui-widget-detail ul:first li.grouped:first", element);
				$nextActive.addClass("active");
				$("div.ui-widget-detail ul:first", element).append($nextActive);
			}
			$active = $('div.ui-widget-detail ul:first li.active', element);
			$active.animate({width:appWidth + "px"}, slideSpeed);
			
		}
		function slideOut(element){
			var slideSpeed = config.slideSpeed;
			var appWidth = $(element).width();
			var $active = $('div.ui-widget-detail ul:first li.active', element);
			$active.animate({width: 0}, slideSpeed);
			$active.removeClass("active");
			if($active.prev("li.grouped").length > 0) {
					$active.prev("li.grouped").addClass("active");		
			} else {
				//$("div.ui-widget-detail ul:first li:last", element).addClass("active");
				var $prevActive = $("div.ui-widget-detail ul:first li.grouped:last", element);
				$("div.ui-widget-detail ul:first", element).prepend($prevActive);
				$prevActive.addClass("active");
				
			}
			$active = $('div.ui-widget-detail ul:first li.active', element);
			$active.animate({width:appWidth + "px"}, slideSpeed);
			
			
			
		}
	}
})(jQuery);