$(document).ready(function() {

// overlays

$("a[rel]").overlay({

// some mask tweaks suitable for modal dialogs
	mask: {
		color: '#000',
		loadSpeed: 200,
		opacity: 0.6
	},

	closeOnClick: true

});

// enable tooltips for the images
	$(".slides img").tooltip({
		position: "bottom center",
		offset: [0, 0],
		opacity: 0.8,
		effect: 'fade',

		// position tooltips relative to the parent scrollable
		relative: true
});


// gallery example 1 on services page

// enable circular scrollables with a click handler

$("#example1").scrollable({ circular: true }).click(function() {
	$(this).data("scrollable").next();		
});


// gallery example 1 using sifferent tab slideshow

$(".slidetabs").tabs(".slides > div", {

	// enable "cross-fading" effect
	effect: 'fade',
	fadeOutSpeed: "slow",

	// start from the beginning after the last tab
	rotate: true

// use the slideshow plugin. It accepts its own configuration
}).slideshow();


	

// portfolio gallery

$("#gallery .items").tabs("div.gallerypanel", {rotate:true});


//~ $(".scrollable").scrollable({
	//~ onBeforeSeek:function(){
		//~ this.getItems().eq(this.getIndex()).children('img').removeClass("active");
	//~ },
	//~ onSeek:function(){
		//~ this.getItems().eq(this.getIndex()).children('img').click().addClass("active");
	//~ }
//~ });
//~ var api = $(".scrollable").scrollable();
$("#gallery .next").click(function(){
	//~ //var api = $(".porfoliogallery").data("scrollable");
	//~ //console.info("current position is: " + api.getIndex())
//	$(".porfoliogallery").scrollable().next();
	$("#gallery .items").data("tabs").next().getCurrentTab().children('img').click();
});

$("#gallery .prev").click(function(){
	//~ //var api = $(".porfoliogallery").data("scrollable");
	//~ //console.info("current position is: " + api.getIndex())
//	$(".porfoliogallery").scrollable().next();
	$("#gallery .items").data("tabs").prev().getCurrentTab().children('img').click();
});

$(".portfoliogallery .items img").click(function() {

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

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

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

	// the large image
	var img = new Image();

	// hide panels
	$('#image_wrap div').addClass('gallerypanel');	

	// 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);
		
		// show current panel
		$('#'+url.slice(7,-4)).removeClass('gallerypanel');


	};

	// 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();

});