$(function() {
	$(".scrollable").scrollable({circular: true, speed: 5000}).autoscroll({interval: 10000 });
	$("#bottom").scrollable();
	$(".team #content a[rel]").overlay({top: 100, mask: {color: '#ebecff', opacity: 0.5}});
	$("#content a[rel]").overlay({top: 10, mask: {color: '#ebecff', opacity: 0.5}});
	$("#large a[rel]").overlay({top: 10, mask: {color: '#ebecff', opacity: 0.5}});
	$(".promo .thumb .items img").overlay({top: 10, mask: {color: '#ebecff', opacity: 0.5}});
	$(".vertical").scrollable({vertical: true, circular: true});
	$(".thumbWrapper .items img").click(function() {

		// see if same thumb is being clicked
		if ($(this).hasClass("active")) { return; }
		$('#full').hide();

		// calclulate large image's URL based on the thumbnail URL
		var url = $(this).attr("src").replace("thumbnail", "full");
		var url2 = $(this).attr("src").replace("thumbnail", "big");
		var alt = $(this).attr("alt");

		// get handle to element that wraps the image and make it semi-transparent
		var wrap = $("#large").fadeTo("medium", 0.5);
		var wrap2 = $("#1");

		var img = new Image();

		// call this function after it's loaded
		img.onload = function() {

			// make wrapper fully visible
			wrap.fadeTo("fast", 1);

			// change the image
			wrap.find("img").attr("src", url);
			wrap2.find("img").attr("src", url2);
			wrap.find("img").attr("alt", alt);
			wrap.find("a").removeAttr("href");
		};

		// begin loading the image
		img.src = url;

		// activate item
		$(".items img").removeClass("active");
		$(this).addClass("active");

	// when page loads simulate a "click" on the first image
	}).filter(":first").click();
	
	$(".thumbWrapper .web img").click(function() {
		// see if same thumb is being clicked
		if ($(this).hasClass("active")) { return; }
		$('#large').hide();

		// calclulate large image's URL based on the thumbnail URL
		var url = $(this).attr("src").replace("thumbnail", "full");
		var alt = $(this).attr("alt");

		// get handle to element that wraps the image and make it semi-transparent
		var wrap = $("#full").fadeTo("medium", 0.5);

		var img = new Image();

		// call this function after it's loaded
		img.onload = function() {

			// make wrapper fully visible
			wrap.fadeTo("fast", 1);

			// change the image
			wrap.find("img").attr("src", url);
			wrap.find("img").attr("alt", alt);
			wrap.find("a").attr("href", alt);
		};

		// begin loading the image
		img.src = url;

		// activate item
		$(".web img").removeClass("active");
		$(this).addClass("active");
	});
});