function tabs() {
	$('#tabs-content div').hide(); // Hide all divs
	$('#tabs-content div:first').show(); // Show the first div
	$('#tabs ul li:first').addClass('active'); // Set the class of the first link to active
	$('#tabs ul li a').click(function(){ //When any link is clicked
		if (!($(this).parent().hasClass('active'))) {
		$('#tabs ul li').removeClass('active'); // Remove active class from all links
		$(this).parent().addClass('active'); //Set clicked link class to active
		var currentTab = $(this).attr('href'); // Set variable currentTab to value of href attribute of clicked link
		$('#tabs-content div').hide(); // Hide all divs
		$(currentTab).show(); // Show div with id equal to variable currentTab
		}
		return false;
	});
}
$(document).ready(function() {
	tabs();
});

$.fn.infiniteCarousel = function () {

	function repeat(str, num) {
		return new Array( num + 1 ).join( str );
	}
  
	return this.each(function () {
		var $wrapper = $('> div', this).css('overflow', 'hidden'),
			$slider = $wrapper.find('> ul'),
			$items = $slider.find('> li'),
			$single = $items.filter(':first'),
			
			singleWidth = $single.outerWidth(), 
			visible = Math.ceil($wrapper.innerWidth() / singleWidth), 
			// note: doesnt include padding or border
			currentPage = 1,
			pages = Math.ceil($items.length / visible);            


		// 1. Pad so that 'visible' number will always be seen, otherwise create empty items
		if (($items.length % visible) != 0) {
			$slider.append(repeat('<li class="empty" />', visible - ($items.length % visible)));
			$items = $slider.find('> li');
		}

		// 2. Top and tail the list with 'visible' number of items, top has the last section, and tail has the first
		$items.filter(':first').before($items.slice(- visible).clone().addClass('cloned'));
		$items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned'));
		$items = $slider.find('> li'); // reselect
		
		// 3. Set the left position to the first 'real' item
		$wrapper.scrollLeft(singleWidth * visible);
		
		// 4. paging function
		function gotoPage(page) {
			var dir = page < currentPage ? -1 : 1,
				n = Math.abs(currentPage - page),
				left = singleWidth * dir * visible * n;
			
			$wrapper.filter(':not(:animated)').animate({
				scrollLeft : '+=' + left
			}, 1200, function () {
				if (page == 0) {
					$wrapper.scrollLeft(singleWidth * visible * pages);
					page = pages;
				} else if (page > pages) {
					$wrapper.scrollLeft(singleWidth * visible);
					// reset back to start position
					page = 1;
				} 

				currentPage = page;
			});                
			
			return false;
		}
		
		$wrapper.after('<a class="arrow back"></a><a class="arrow forward"></a>');
		
		// 5. Bind to the forward and back buttons
		$('a.back', this).click(function () {
			return gotoPage(currentPage - 1);                
		});
		
		$('a.forward', this).click(function () {
			return gotoPage(currentPage + 1);
		});
		
		// create a public interface to move to a specific page
		$(this).bind('goto', function (event, page) {
			gotoPage(page);
		});
	});  
};

$(document).ready(function () {
  $('.infiniteCarousel').infiniteCarousel();
});

$(document).ready(function() {

	//Select all anchor tag with rel set to tooltip
	$('a.tipped').mouseover(function(e) {
		
		//Grab the title attribute's value and assign it to a variable
		var tip = $(this).attr('rel');	
		var tiptitle = '<h4>' + $(this).attr('name') + '</h4>';

		//Append the tooltip template and its value
		$('#doc2').append('<div id="tooltip"><div class="tipBody"></div></div>');	
		$('.tipBody').html(tiptitle + tip);	

		//Remove the title attribute's to avoid the native tooltip from the browser
		$(this).attr('title','');
	
		//Set the X and Y axis of the tooltip
		$('#tooltip').css('top', e.pageY + 15 );
		$('#tooltip').css('left', e.pageX + 25 );
		
		//Show the tooltip with fadeIn effect
		$('#tooltip').css('opacity', '0');
		$('#tooltip').fadeTo('1000',1);
		
	}).mousemove(function(e) {
	
		//Keep changing the X and Y axis for the tooltip, thus, the tooltip move along with the mouse
		$('#tooltip').css('top', e.pageY + 15 );
		$('#tooltip').css('left', e.pageX + 25 );
		
	}).mouseout(function() {
	
		//Remove the appended tooltip template
		$('div#tooltip').remove();
		
	});
	
});