var current_marker;
var current_center_list;
var gallery_started = false;

function buildDetailCenterTabs( id, marker ) {

	var url = makeUrl("?detail_center_id=" + id);
	sendAlert(url);

	gallery_started = false;
	current_marker = marker;
	
	$.getJSON("",
		{
			method: "getCenterUnitDetail",
			unit_id: id
		},
		function(json){			
			var center_index = centers_index[id];
			var center = centers[center_index];
			
			var Html = [];
			
			var street_view_link = {
										es: "Míralo con Street View",
										ca: "Mira'l amb Street View ",
										en: "Watch it with Street View"
									}
			
			Html.push('<div class="detail-center cat' + center.category_id + '">');
			Html.push('<ul>');
			Html.push('<li><h2>' + center.category_name + '</h2></li>');
			Html.push('<li><h3>' + center.name + '</h3></li>');
			Html.push('</ul>');
			Html.push('<div class="text">' + json.introduction);
			Html.push('<ul class="list-text">');
			Html.push('<li>' + center.address + ', ' + center.number + '</li>');
			Html.push('<li><strong>Tel.</strong> +34 93' + center.phone + '</li>');
			Html.push('<li><strong>Website: </strong><a target="_blank" href="http://' + center.website + '">' + center.website + '</a></li>');
			Html.push('<li><strong>Zones: </strong>' + json.zone + '</li>');
			//Html.push('<li><strong>Tags: </strong>' + json.tags + '</li>');			
			Html.push('</ul></div>');
			Html.push('<p class="street-view"><a href="javascript:streetViewClick(' + id + ')">' + street_view_link[currentLanguageCode] + '</a></p>');
			Html.push('</div>');
			
			var tabsArray = [];
			var title_description_tab = {
										es: "Descripción",
										ca: "Descripció",
										en: "Description"
									}
									
			var title_resources_tab = {
										es: "Recursos",
										ca: "Recursos",
										en: "Resources"
									}
						
			var title_images_tab = {
									es: "Imágenes",
									ca: "Imatges",
									en: "Images"
								}
			
			var title_attached_documents = {
									es: "Adjuntos",
									ca: "Adjunts",
									en: "Attachments"
								}
								
			var title_video_tab = {
									es: "Vídeo",
									ca: "Video",
									en: "Video"
								}
			
			var tab1 = new google.maps.InfoWindowTab(title_description_tab[currentLanguageCode], Html.join(''));
			tabsArray.push(tab1);
			
			if( json.resource_text != '' ) {
				Html = [];
				
				Html.push('<div class="detail-center cat' + center.category_id + '">');
				Html.push('<ul>');
				Html.push('<li><h2>' + center.category_name + '</h2></li>');
				Html.push('<li><h3>' + center.name + '</h3></li>');
				Html.push('</ul>');
				Html.push('<div class="text text-resources">' + json.resource_text + '</div>');
				Html.push('<div id="resource-urls">');
				Html.push(json.resource_urls);
				Html.push('</div>');
				var documents = json.documents;
				if( documents ) {
					Html.push("<p class=\"attachments-title\">" + title_attached_documents[currentLanguageCode] + "</p>");
					Html.push(documents);
				}
				Html.push('</div>');
				
				var tab2 = new google.maps.InfoWindowTab(title_resources_tab[currentLanguageCode], Html.join(''));
				tabsArray.push(tab2);
				
			}
			
			if( json.gallery != '' ) {
				Html = [];
				
				Html.push('<div id="detail-center-images" class="detail-center cat' + center.category_id + '">');
				Html.push('<ul>');
				Html.push('<li><h2>' + center.category_name + '</h2></li>');
				Html.push('<li><h3>' + center.name + '</h3></li>');
				Html.push('</ul>');
				Html.push(json.gallery);
				Html.push('</div>');
				
				var tab3 = new google.maps.InfoWindowTab(title_images_tab[currentLanguageCode], Html.join(''));
				tabsArray.push(tab3);
				
			}
			
			if( json.embed_video != '' ) {
				Html = [];
				
				Html.push('<div id="detail-center-video" class="detail-center cat' + center.category_id + '">');
				Html.push('<ul>');
				Html.push('<li><h2>' + center.category_name + '</h2></li>');
				Html.push('<li><h3>' + center.name + '</h3></li>');
				if( json.video_title != '' )
					Html.push('<li><h4>' + json.video_title + '</h4></li>');
				Html.push('</ul>');
				Html.push(json.embed_video);
				Html.push('</div>');
				
				var tab4 = new google.maps.InfoWindowTab(title_video_tab[currentLanguageCode], Html.join(''));
				tabsArray.push(tab4);
				
			}
										
			current_marker.openInfoWindowTabsHtml(
				tabsArray,
				{
					maxWidth: 400
				}
			);
			
			handleTabClick = function() {
				var infoWindow = map.getInfoWindow();
				var containers = infoWindow.getContentContainers();
				var selected_tab = infoWindow.getSelectedTab();
				var tab = containers[selected_tab];
				var infoTab = $(tab);
				var div_element = infoTab.find("#detail-center-images");
				if( div_element.attr("id") == "detail-center-images" && !gallery_started ) {
					startGallery();
					gallery_started = true;
				}
			}
			
			$("div").click( handleTabClick );
			
		}
	);

}

function updateMarkersMap( data, element_id ) {
	
	var centers_ids = data.split("_");
	
	var centers_html = [];
	
	if( current_marker )
		current_marker.closeInfoWindow();
	
	for( var j = 0 ; j < centers.length ; j++ ) {
		if( centers[j] ) {
			var center_id = centers[j].id;
			var marker = markers_hash[center_id];
			marker.hide();
		}
	}
	
	if( $("#current_center_list") )
		$("#current_center_list").remove();
		
	centers_html.push("<ul id=\"current_center_list\" class=\"\">");
	
	//var selected = " selected";
	var selected = "";
	for( var i = 0 ; i < centers_ids.length ; i++ ) {
		if( centers_ids[i] ) {
			var center_id = centers_ids[i];
			var center_index = centers_index[center_id];
			var center = centers[center_index];
			var marker = markers_hash[center_id];
			if( marker ) {
				marker.show();
				var name = "";
				if( center.menu_name != "" )
					name = center.menu_name;
				else
					name = center.name;
				centers_html.push("<li><a id=\"c" + center_id + "\" class=\"cat" + center.category_id + selected + "\" href=\"javascript:centerClick(" + center_id + ")\">" + name + "</a></li>");
				selected = "";
			}
		}
	}
	
	centers_html.push("</ul>");
	
	$("#second-menu").append(centers_html.join(""));
	
}


startGallery = function() {
	

	$('.gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to maintain degradability	
	$('.nav').css('display','none'); // hides the nav initially
	
	$('ul.gallery_demo').galleria({
		history   : false, // deactivates the history object for bookmarking, back-button etc.
		clickNext : false, // helper for making the image clickable. Let's not have that in this example.
		insert    : undefined, // the containing selector for our main image. 
							   // If not found or undefined (like here), galleria will create a container 
							   // before the ul with the class .galleria_container (see CSS)
		onImage   : function(image,caption,thumb) { // let's add some image effects for demonstration purposes
			
			// fade in the image & caption
			image.css('display','none').fadeIn(1500);
			caption.css('display','none').fadeIn(1500);
			
			// fetch the thumbnail container
			var _li = thumb.parents('li');
			
			// fade out inactive thumbnail
			_li.siblings().children('img.selected').fadeTo(500,0.6);
			
			// fade in active thumbnail
			thumb.fadeTo('fast',1).addClass('selected');
			
			// add a title for the clickable image
			image.attr('title','Next image >>');
		},
		onThumb : function(thumb) { // thumbnail effects goes here
			
			// fetch the thumbnail container
			var _li = thumb.parents('li');
			
			// if thumbnail is active, fade all the way.
			var _fadeTo = _li.is('.active') ? '1' : '0.6';
			
			// fade in the thumbnail when finnished loading
			thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
			
			// hover effects
			thumb.hover(
				function() { thumb.fadeTo('fast',1); },
				function() { _li.not('.active').children('img').fadeTo('fast',0.6); } // don't fade out if the parent is active
			)
		}
	});
	

	
}