function changeTab(tab){

	jQuery('#gallery .tabcontent').hide();
	jQuery('#gallery .tabcontent').eq(tab-1).css({visibility:'visible', position:'relative', zIndex:1});	// make sure the position is not 'absolute'
	jQuery('#gallery .tabcontent').eq(tab-1).fadeIn(180);

	// set class
	jQuery('.tabs .tab').removeClass('active');
	jQuery('.tabs .tab:eq('+(tab-1)+')').addClass('active');
	
	// set class for tabs background - ali
	jQuery('.tabs').removeClass('state_1 state_2 state_3');
	jQuery('.tabs').addClass('state_'+(tab));
}

jQuery(document).ready(function(){

	if('undefined' == typeof tabs) return;

	// add tab controls
	jQuery('#gallery').before('<div class="tabs"></div>');

	// wrap the first tab in a '.tabcontent' class so we can manipulate it
	jQuery('#gallery').wrapInner('<div class="tabcontent" />');

	// make tab buttons
	var tabid = 0;
	for(t in tabs){
		tabid++;

		// create a new tab		
		jQuery('.tabs').append('<div class="tab tabid_'+tabid+'"><span>'+tabs[t].name+'</span></div>');

		// only preload tabs with URLs
		if(!tabs[t].url) continue;

		// preload tab content
		preload = $(document.createElement('iframe'))
			.attr('id','tab_'+tabid)
			.attr('class','tabcontent')
			.attr('width', '668')
			.attr('height', '337')
			.css({visibility:'hidden',position:'relative', zIndex:-10}) // we need to load it at correct height etc for gmaps
			.attr('src', tabs[t].url);

		jQuery('#gallery').append(preload);
	}

	// set first tab to active
	jQuery('.tabs .tab:first').addClass('active');
	
	jQuery('.tabs').addClass('state_1');

	// hook click event
	jQuery('.tabs .tab').click(function(){
		itemIndex = jQuery(this).index() + 1;
		changeTab(itemIndex);
	});

});