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: "Street View",
										ca: "Street View ",
										en: "Street View"
									}
			
			Html.push('<div class="detail-center cat' + center.category_id + '">');
			Html.push('<ul>');
			Html.push('<li class="category-name"><h2>' + center.category_name + '</h2></li>');
			Html.push('<li class="center-name">');
			Html.push('<h3>' + center.name + '</h3>');   
			Html.push('<p>');            
            if (center.address != "") {
                if (center.address_type != '') {
                    Html.push("<span class='address-type'>" + center.address_type + "</span> ");
                }
                Html.push(center.address);
                if (center.number != ''){
                    Html.push(', ' + center.number);
                }
            }
			if (center.phone != ''){
                if (center.address != "") {
                    Html.push(',');
                }
				Html.push(' Tel. ' + center.phone);
			}            
			Html.push('</p>');            
            
			if (center.website != ''){
				Html.push('<p><a target="_blank" href="http://' + center.website + '">' + center.website + '</a></p>');
			}
            
			if (json.timetable != ''){
				Html.push('<p>' + json.timetable + '</p>');
			}	            
            
			Html.push('</li>');
			Html.push('</ul>');
			Html.push('<div class="text">' + json.introduction);			
			Html.push('</div>');
            Html.push('<p class="zones"><strong>Zones: </strong>' + json.zone + '</p>');
            if (json.tags != ''){
				Html.push('<p class="tags"><strong>Tags: </strong>' + json.tags + '</p>');
			}
            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 class="category-name"><h2>' + center.category_name + '</h2></li>');
				Html.push('<li class="center-name"><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);
                // Tag galeria imatges
				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 );
			
		}
	);

}

if(typeof String.prototype.trim !== 'function') {
    String.prototype.trim = function() {
        return this.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
    }
}

function updateMarkersMap( data, element_id ) {
	
    var centers_ids = [];
    data = data.trim();
    if( String(data) != "" && String(data) != "undefined" )
    	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( $("#search-results-container") )
		$("#search-results-container").remove();

    centers_html.push('<div id="search-results-container">');

    centers_html.push('<div id="head-menu-results">');
    var category_id = $("select#categories").val();
    var zone_id = $("select#zones").val();
    var tag_id = $("select#tags").val();    

    var category_name = $('option[value="'+category_id+'"]').html();
    if( String(category_name) == "null" )
        category_name = $("select#categories").val();
        
    var zone_name = $('option[value="'+zone_id+'"]').html();
    if( String(zone_name) == "null" )
        zone_name = $("select#zones").val();
        
    var tag_name = $('option[value="'+tag_id+'"]').html();
    if( String(tag_name) == "null" )
        tag_name = $("select#tags").val();
    
    
    var result_values = [];
    
    if( String(category_name) != "Categories" && String(category_name) != "Categorías" )
        result_values.push(String(category_name));
    if( String(zone_name) != "Zones" && String(zone_name) != "Zonas" && String(zone_name) != "Areas" )
        result_values.push(String(zone_name));
    if( String(tag_name) != "Etiquetes" && String(tag_name) != "Etiquetas" && String(tag_name) != "Tags" )
        result_values.push(String(tag_name));
    
    
    var text_results = {
        ca: "resultats de:",
        es: "resultados de:",
        en: "search results of:"
    };
    
    var icon_file = "";
    
		switch (category_id) {
		case "207":
            icon_file = "icon_arquitectura.png";
			break;
		case "208":
			icon_file = "icon_bars.png";
			break;
		case "209":
            icon_file = "icon_bookshops.png";
			break;
		case "210":
            icon_file = "icon_fashion.png";
			break;
		case "211":
            icon_file = "icon_hotels.png";
			break;
		case "212":
            icon_file = "icon_schools.png";
			break;            
		case "213":
            icon_file = "icon_shops.png";
			break;
		case "224":
            icon_file = "icon_entities.png";
			break;
		case "294":
            icon_file = "icon_urban_spaces.png";
			break;
		}
    
    centers_html.push('<p class="search-results">'+ centers_ids.length+' '+text_results[currentLanguageCode]);
    centers_html.push('<br /><strong>' + result_values.join(" - ") + '</strong>');
    centers_html.push('</p>');
    if (icon_file)
        centers_html.push('<img src=\"/src/bcd_maps/images/icons/' + icon_file + '\" alt\"\" border=\"0\"/>');
    centers_html.push('</div>');
		
	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 class=\"cat" + center.category_id + selected + "\">");
                if( center_id in mainImageCenters ) {
                   centers_html.push('<a id="c' + center_id + '" href="javascript:centerClick(' + center_id + ')">');
                   centers_html.push('<div class="picture-wrapper"><img src="'+mainImageCenters[center_id]+'" atl="" /></div>');
                   centers_html.push('</a>');
                }
                centers_html.push("<a id=\"c" + center_id + "\" href=\"javascript:centerClick(" + center_id + ")\">" + name + "</a>");
                //centers_html.push("<p class=\"cat" + center.category_id+ "\">" + center.category_name + "</p>");
                centers_html.push('<p class="cat-zone-tag-info">');
                centers_html.push(center.category_name);
                if( center.zone_names != "undefined" )
                    centers_html.push('<br />' + center.zone_names);
                centers_html.push('</p>');
                centers_html.push("</li>");
				selected = "";
			}
		}
	}
	
	centers_html.push("</ul>");
    centers_html.push("</div>");
	
	$("#menu").html(centers_html.join(""));
	
}


function createMarker( center, icon ) {
				
    var lat = center.lat;
    var lng = center.lng;
    
    if( lat && lng ) {
        
        var point = new google.maps.LatLng(lat, lng);
                        
        var marker = new google.maps.Marker(point, {
                                                        draggable: false,
                                                        title: center.name.stripHTML(),
                                                        icon: icon
                                                    });
        
        new google.maps.Event.addListener(marker, 'click', function() {
            buildDetailCenterTabs( center.id, marker );
        });
        
    }
    
    return marker;
    
}

String.prototype.stripHTML = function () {
	
	// Eliminar tags
	var str = this.replace(/<[^>]+>/g, "");
	
	// Eliminar entitats
	str = str.replace(/&[^;]+;/g, function (entity) {
		return String.htmlEntities[entity] || entity;
	});
	
	return str;
}

String.htmlEntities = {
	"&aacute;": "á",
	"&Aacute;": "Á",
	"&agrave;": "à",
	"&Agrave;": "À",
	"&eacute;": "é",
	"&Eacute;": "É",
	"&egrave;": "è",
	"&Egrave;": "È",
	"&iacute;": "í",
	"&Iacute;": "Í",
	"&igrave;": "ì",
	"&Igrave;": "Ì",
	"&iuml;":"ï",
	"&Iuml;":"Ï",
	"&oacute;": "ó",
	"&ouml;": "ö",
	"&Oacute;": "Ó",
	"&ograve;": "ò",
	"&Ograve;": "Ò",
	"&uacute;": "ú",
	"&Uacute;": "Ú",
	"&ugrave;": "ù",
	"&Ugrave;": "Ù",
	"&ccedil;": "ç",
	"&Ccedil;": "Ç",
	"&ntilde;": "ñ",
	"&Ntilde;": "Ñ",
	"&uuml;": "ü",
	"&Uuml;": "Ü",
	"&amp;": "&",
	"&gt;": ">",
	"&lt;": "<",
	"&eq;": "=",
	"&quot;":"\"",
	"&apos;": "'",
	"&#39;": "'",
	"&rsquo;": "'",
	"&lsquo;": "'",
	"&rdquo;": "\"",
	"&ldquo;": "\"",
	"&iquest;": "¿",
	"&nbsp;": " ",
	"&ordf;": "ª",
	"&middot;": "·"
};

startGallery = function() {
    
    /*
    
    var zoomFunc = function(dimension) {
        return dimension * 1;
    }
    
    $('div.gallery img').slidingGallery({
        'Lzoom':zoomFunc,
        'Pzoom':zoomFunc,
        'Lshrink':zoomFunc,
        'Pshrink':zoomFunc,
        'Lwidth':300,
        'Lheight':230,
        'Pwidth':180,
        'Pheight':230,
        'gutterWidth':20,
        'container':$('#gallery_container')
    });
    
    */
    
    $('.gallery').orbit({
        'bullets': false,
        'timer' : false,
        'animation' : 'horizontal-slide'
    });

	$(".gallery a").fancybox({
        'opacity'       : true,
        'transitionIn'  : 'elastic',
        'transitionOut' : 'none',
        'overlayColor'  : '#000',
		'overlayOpacity': 0.85
    });

}