(function(pkg, $){
	
	var delay = 3000;
	var animTime = 300;
	
	$.fn.CarousselSP = function(){
		this.each(function(){
		
			var _self = $(this);
			var allArticles = _self.find('article');
			var containerWidth = _self.width();
			var currentId = 0;
			var nItems = allArticles.length;
			var inAction = false;
			
			//build menu
			var nav = $('<nav>').appendTo(_self);
			var lst = $('<ul>').appendTo(nav);
			var lnks;
			var autoInterval;
			
					
			//place menu and adjusts heights depending on article's height
			var setContainerSize = function(idx) {
				var ah = allArticles.eq(idx).height();
				var mh = nav.height();
				var totalH = ah+mh;
				_self.css({height: totalH});
				nav.css({left: (containerWidth - nav.width())/2});
			};
			
			var swapArticle = function(idx, fromInterval) {
				if(inAction) return false;
				inAction = true;
				var oldId = currentId;
				currentId = idx;
				
				//direction of the anim depends on position of previous active item
				var inDir = oldId < currentId || fromInterval ? 'right' : 'left';
				var outDir = oldId < currentId || fromInterval? 'left' : 'right';
				
				lnks.removeClass('active');
				lnks.eq(currentId).addClass('active');
				
				var oldArticle = allArticles.eq(oldId);
				var newArticle = allArticles.eq(currentId);
				var options = {easing: 'easeInExpo', direction: outDir};
				oldArticle.hide('drop', options, animTime, function(){

					var options = {easing: 'easeOutExpo', direction: inDir};
					newArticle.show('drop', options, animTime, function(){
						inAction =  false;
					});
				});
				//setContainerSize(currentId);
			};
		
			var setAutoInterval = function(){
				return setInterval(function(){
					var nextItem = currentId + 1;
					if(nextItem>=nItems) nextItem=0;
					swapArticle(nextItem, true);
				}, delay);
			};
			
			//when hovering on an item, stops the slideshow temporarily
			(function(){
				var hasInterval = false;
				allArticles.hover(function(){
					//if an interval was present, stop it, but remember to put it back it on hover out
					if(autoInterval){
						hasInterval = true;
						clearInterval(autoInterval);
						autoInterval = false;
					}
				}, function(){
					if(hasInterval){
						autoInterval = setAutoInterval();
					}
					hasInterval = false;
				});
			})();
			
			//size slider to accept biggest article
			var sz = 0;
			var biggest = 0;
			for(var i=0; i<nItems; i++){
				var thisSz = allArticles.eq(i).height();
				if(thisSz>sz){
					biggest = i;
				}
			}
			setContainerSize(biggest);
			
			
			for(var i=0; i<nItems; i++){
				(function(itemId){
					var lnk = $('<a>').attr('href', '#').bind('click.sp', function(){
						swapArticle(itemId, false);
						if(autoInterval){
							clearInterval(autoInterval);
							autoInterval = false;
						}
						return false;
					});
					if(itemId == currentId) lnk.addClass('active');
					$('<li>').append(lnk).appendTo(lst);
				})(i);
			}
			lnks = $(nav).find('a');
			
			allArticles.eq(currentId).show();
			setContainerSize(currentId);
			autoInterval = setAutoInterval();
			
			
		});
		
		return this;
	};
	

})(window.skyspa = window.skyspa || {}, jQuery);