TABS = new Array();
TABS[0]="Descripcio";
TABS[1]="Opinions";
function canviTab(sNomTab){
    for (var i=0;i<TABS.length;i++){
        var oTab = document.getElementById("li" + TABS[i]);
        var oDiv = document.getElementById("div" + TABS[i]);
        
        if (oTab != undefined && oDiv != undefined){
            if (TABS[i] == sNomTab){
                oTab.className = "seleccionat";
                oDiv.style.display = "block";
            }
            else{
                oTab.className = "";
                oDiv.style.display = "none";
            }
        }
    }
}


function getObra(sId)
{
    //Obtenim el Identificador del hidden a on hem de guardar l'identificador de l'obra
    var oIdH = document.getElementById("HidHIdObra");
    if (oIdH != null){
        //En oIdH tenim el id del hidden a on de guardar l'obra
        var oIdObra = document.getElementById(oIdH.value);
        if (oIdObra != null){
        //Posem el valor de l'identificador de l'obra en el hidden
            oIdObra.value = sId;
            //Fem click en el botó per demanar aquesta obra via AJAX
            var oIdButton = document.getElementById("HidButGetObra");
            if (oIdButton != null){
                var oButton = document.getElementById(oIdButton.value);
                oButton.click();
            }
            
        }
    }
    
}

function loadItinerari()
{
    //Obtenim l'Identificador del hidden a on hem de guardar l'identificador de l'itinerari
    var oIdH = document.getElementById("HidHIdItinerari");
    if (oIdH != null){
        //En oIdH tenim el id del hidden a on de guardar l'itinerari
        var oIdItinerari = document.getElementById(oIdH.value);
        if (oIdItinerari != null){
            //Posem el valor de l'identificador de l'itinerari en el hidden
            if (oIdItinerari.value.length>0)
            {
                loadMapa(oIdItinerari.value);
                //oIdItinerari.value = sId;
                /*//Fem click en el botó per demanar aquesta obra via AJAX
                var oIdButton = document.getElementById("HidButGetObra");
                if (oIdButton != null){
                    var oButton = document.getElementById(oIdButton.value);
                    oButton.click();
                }*/
                
            }
        }
    }    
}

/////////////////////////////////////////////////////////////////////////////////////////////////
//                                CODI GOOGLE MAPS                                             //
/////////////////////////////////////////////////////////////////////////////////////////////////

function loadMapa(id){
    if (GBrowserIsCompatible()) { 
		var sXMLPath = "itineraris.ashx?id="+id;

      // Display the map, with some controls and set the initial location 
      var map = new GMap2(document.getElementById("map"));
      map.setUIToDefault();
      //map.addControl(new GLargeMapControl());
      //map.addControl(new GMapTypeControl());
      //map.setCenter(new GLatLng(43.907787,-79.359741),9);
    

      // ====== set up marker mouseover tooltip div ======
      var tooltip = document.createElement("div");
      map.getPane(G_MAP_FLOAT_PANE).appendChild(tooltip);
      tooltip.style.visibility="hidden";

      // arrays to hold copies of the markers and html used by the side_bar
      // because the function closure trick doesnt work there
      var side_bar_html = "";
      var gmarkers = [];
      var htmls = [];
      var i = 0;


      // A function to create the marker and set up the event window
      function createMarker(point,name,html) {

        
		//var mylabel = {"url":overlay[ov], "anchor":new GLatLng(4,4), "size":new GSize(20,20)};
//		var oImage = {"url":, "anchor":new GLatLng(4,4), "size":new GSize(20,20)}


//        var Icon = new GIcon();
//        Icon.image = "punt20.gif";
//        Icon.iconSize = new GSize(20, 20);
//        Icon.iconAnchor = new GPoint(5, 20);
//        Icon.infoWindowAnchor = new GPoint(5, 2);
//        Icon.imageMap=[9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,
//       19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,
//       16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0];


        var Icon = new GIcon(G_DEFAULT_ICON);//, "imatges/punt.gif");
		//Icon.iconSize = new GSize(10, 10);
		//Icon.iconAnchor = new GPoint(4, 4);
		Icon.shadow = "";

		
        var marker = new GMarker(point,Icon);
        //var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        // save the info we need to use later for the side_bar
        gmarkers[i] = marker;
        htmls[i] = html;
        // add a line to the side_bar html
        side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br>';
        i++;

        //  ======  The new marker "mouseover" and "mouseout" listeners  ======
        GEvent.addListener(marker,"mouseover", function() {
			showTooltip(marker);
        });        
        GEvent.addListener(marker,"mouseout", function() {
			tooltip.style.visibility="hidden"
        });        

        return marker;
      }


      // ====== This function displays the tooltip ======
      // it can be called from an icon mousover or a side_bar mouseover
      function showTooltip(marker) {
      	tooltip.innerHTML = marker.tooltip;
		var point=map.getCurrentMapType().getProjection().fromLatLngToPixel(map.fromDivPixelToLatLng(new GPoint(0,0),true),map.getZoom());
		var offset=map.getCurrentMapType().getProjection().fromLatLngToPixel(marker.getPoint(),map.getZoom());
		var anchor=marker.getIcon().iconAnchor;
		var width=marker.getIcon().iconSize.width;
		var height=tooltip.clientHeight;
		var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(offset.x - point.x - anchor.x + width, offset.y - point.y -anchor.y -height)); 
		pos.apply(tooltip);
		tooltip.style.visibility="visible";
      }

      // ===== This function is invoked when the mouse goes over an entry in the side_bar =====
      // It launches the tooltip on the icon      
      function mymouseover(i) {
        showTooltip(gmarkers[i])
      }
      // ===== This function is invoked when the mouse leaves an entry in the side_bar =====
      // It hides the tooltip      
      function mymouseout() {
		tooltip.style.visibility="hidden";
      }

      // This function picks up the click and opens the corresponding info window
      function myclick(i) {
        gmarkers[i].openInfoWindowHtml(htmls[i]);
      }

      var bounds = new GLatLngBounds(); 
      // Read the data from example4.xml
      
      var request = GXmlHttp.create();
      request.open("GET", sXMLPath, true);
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          var xmlDoc = GXml.parse(request.responseText);
          if (xmlDoc.documentElement != null){
              // obtain the array of markers and loop through it
              var markers = xmlDoc.documentElement.getElementsByTagName("marker");
              var aPoints;
              aPoints = new Array();
              for (var i = 0; i < markers.length; i++) {
                // obtain the attribues of each marker
                var lat = parseFloat(markers[i].getAttribute("lat"));
                var lng = parseFloat(markers[i].getAttribute("lng"));
                var point = new GLatLng(lat,lng);
                var html = markers[i].getAttribute("html");
                var label = markers[i].getAttribute("label");
    			
			    map.setCenter(point,1);
			    bounds.extend(point);
                // create the marker
                var marker = createMarker(point,label,html);
			    marker.tooltip = '<div class="tooltip"><nobr>'+label+'</nobr></div>';
			    //marker.tooltip = label;
                map.addOverlay(marker);
              }
              
              // centrem el mapa en el primer punt
              map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
    			
    			
              // put the assembled side_bar_html contents into the side_bar div
              //document.getElementById("side_bar").innerHTML = side_bar_html;
              
             
              // ========= Now process the polylines ===========
              var lines = xmlDoc.documentElement.getElementsByTagName("line");
              // read each line
              for (var a = 0; a < lines.length; a++) {
                // get any line attributes
                var colour = lines[a].getAttribute("colour");
                var width  = parseFloat(lines[a].getAttribute("width"));
                // read each point on that line
                var points = lines[a].getElementsByTagName("point");
                var pts = [];
                for (var i = 0; i < points.length; i++) {
                   pts[i] = new GLatLng(parseFloat(points[i].getAttribute("lat")),
                                       parseFloat(points[i].getAttribute("lng")));
                }
                map.addOverlay(new GPolyline(pts,colour,width));
              }
              // ================================================           
          }
        }
      }
      request.send(null);

    }
    
    // display a warning if the browser was not compatible
    else {
      //alert("Sorry, the Google Maps API is not compatible with this browser");
    }
}
    setTimeout("loadItinerari()",500);
    
/////////////////////////////////////////////////////////////////////////////////////////////////