(function($) {
	$.fn.bannerScroller = function(options) {
		var defaults = {
			length: 300,
			minTrail: 20,
			moreText: "more",
			lessText: "less",
			ellipsisText: "..."
		};

		var options = $.extend(defaults, options);
		
		return this.each(function(){
			var tabsLinks = $(this).find(".tabs_links");
			var panelsList = $(this).find(".panels_list");
			var firstPanelContent = panelsList.find("li:first").html();
			
			var firstPanel;
			var virtualPanel;
			var activePanelIndex;
			var currentPanel;
			var nextPanel;
			
			var firstTab;
			var virtualTab;
			var activeTabIndex;
			var currentTab;
			var nextTab;

			function init() {
				//Add a virtual panel, a new one that will hold the info of all the panels
				panelsList.prepend("<li class='bannerScrollerPanel'>" + firstPanelContent + "</li>");
				virtualPanel = panelsList.find("li:first");
				
				virtualPanel.find(".panel_information").show();
				virtualPanel.find(".description").animate({ opacity: 0.85 }, 1 );
				
				panelsList.find("li:not(:first)").hide();
				
				firstPanel = panelsList.find("li").eq(1);
				firstPanel.addClass('rotatorActivePanel');
				tabsLinks.find("li:first").addClass('rotatorActiveTab');
				
				//Click and Hover events for thumbnail list
				tabsLinks.find("li").click(tabClicked).hover(function(){
					$(this).addClass('hover');
				}, function() {
					$(this).removeClass('hover');
				});

				//Toggle Teaser
				$(".collapse").click(function(){
					$(".description").slideToggle();
					$(".collapse").toggleClass("show");
				});
				
			}
			
			function rotate() {
				//It actually gets the number of elements before the active panel which is also it's position.
				activePanelIndex = $(".rotatorActivePanel").prevAll().length;
				
				currentPanel = panelsList.find("li").eq(activePanelIndex);
				if (currentPanel.is(":last-child")) { nextPanel = firstPanel; } else { nextPanel = currentPanel.next(); }
				
				currentPanel.removeClass('rotatorActivePanel');
				nextPanel.addClass('rotatorActivePanel');
				currentPanel = nextPanel;
				
				//It actually gets the number of elements before the active panel which is also it's position.
				activetabIndex = $(".rotatorActiveTab").prevAll().length;
				
				currentTab = tabsLinks.find("li.rotatorActiveTab");
				if (currentTab.is(":last-child")) { nextTab = tabsLinks.find("li:first"); } else { nextTab = currentTab.next(); }
				
				currentTab.removeClass('rotatorActiveTab');
				nextTab.addClass('rotatorActiveTab');
				currentTab = nextTab;
				
				rotateContent(currentPanel);
			}
			
			function rotateContent(selectedElement){
				//Set Variables
				var panelDesc = $(selectedElement).find('.description').html(); 	//Get HTML of description
				var panelContent = $(selectedElement).find('.panel_content').html(); 	//Get HTML of description
				var panelDescHeight = $(selectedElement).find('.description').height();	//Calculate height of description

				//Animate the Teaser
				virtualPanel.find(".description").slideUp("slow" , function() {
					$(this).html(panelDesc);//.animate({ opacity: 0.85, marginBottom: "0" }, 250 );
					virtualPanel.find('.panel_content').fadeOut("slow", function() {
						$(this).fadeIn("normal");
						$(this).html(panelContent);
						//$(this).attr({ src: imgUrl, alt: imgAlt });
					});
					$(this).slideDown("slow");
				});
				$(selectedElement).find(".collapse").animate({ bottom: panelDescHeight }, 250 );

				return false;
			}

			function tabClicked(){
				var tabLink = $(this).find('a').attr("href");

				if ($(this).is(".rotatorActiveTab")) {
					return false;
				} else {
					rotateContent(tabLink);
				}

				currentPanel = tabLink;
				$(currentPanel).addClass('rotatorActivePanel');
				tabsLinks.find("li").removeClass('rotatorActiveTab'); //Remove class of 'active' on all lists
				$(this).addClass('rotatorActiveTab');  //add class of 'active' on this list only
				return false;
			}
			
			//Rotator style
			$('head').append('<link href="http://localhost/cardsflip/wp-content/themes/cardsflip/js/jquery.bannerScroller.css" rel="stylesheet" type="text/css">');
			
			init();
			setInterval(rotate, 6000);
		});
	};

	//jQuery logging
	jQuery.fn.log = function (msg) {
		console.log("%s: %o", msg, this);
		return this;
	};

})(jQuery);