var current_select_photo_id = 1;
var map_markers = [];
var array_photo_info = [];
var lCurrentLoadingCount = 0;

// append point with picture to map
function createTabMarker(map, point, infoTabs, PhotoID){

	var icon = new GIcon();
	icon.image = "images/small_red_pin.png";
	icon.iconSize = new GSize(19, 21);
	icon.iconAnchor = new GPoint(6, 20);
	icon.infoWindowAnchor = new GPoint(5, 1);

	var markerOptions = { icon:icon };
	
    var marker = new GMarker(point, markerOptions);

    // Show the info window when it is clicked    
    GEvent.addListener(marker, "click", function(){
    
        var img_current_photo = document.getElementById("img_photo" + current_select_photo_id);
        var img_photo = document.getElementById("img_photo" + PhotoID);
        
        if (PhotoID != current_select_photo_id) {
            current_select_photo_id = PhotoID;
            
            img_current_photo.className = "img_normal";
            img_photo.className = "img_selected";
            
            var photo_index = img_photo.getAttribute("index");
            onClickMarker(photo_index);
        }
        
        
        
        marker.openInfoWindowTabsHtml(infoTabs);
        
    });
    
    map_markers.push(marker);
    
    map.addOverlay(marker);
}

function getPointName(placemark){
    var node = placemark.getElementsByTagName("name")[0].firstChild;
    if (node == null) 
        return "";
    return node.nodeValue;
}

function getPointImagePreview(placemark){
    var node = placemark.getElementsByTagName("description")[0].firstChild;
    if (node == null) 
        return "";
    return node.nodeValue;
}

function getPointImage0(placemark){
    var node = placemark.getElementsByTagName("gmap_image0")[0].firstChild;
    if (node == null) 
        return "";
    return node.nodeValue;
}

function getPointImage1(placemark){
    var node = placemark.getElementsByTagName("gmap_image1")[0].firstChild;
    if (node == null) 
        return "";
    return node.nodeValue;
}

function getPointImage2(placemark){
    var node = placemark.getElementsByTagName("gmap_image2")[0].firstChild;
    if (node == null) 
        return "";
    return node.nodeValue;
}

function getPointDescription(placemark){
    var node = placemark.getElementsByTagName("gmap_description")[0].firstChild;
    if (node == null) 
        return "";
    return "<br/>" + node.nodeValue;
}

function getPointDateTime(placemark){
    var node = placemark.getElementsByTagName("gmap_datetime")[0].firstChild;
    if (node == null) 
        return "";
    return node.nodeValue;
}

function getPoint(placemark){
    var points = placemark.getElementsByTagName("Point");
    var coords = points[0].getElementsByTagName("coordinates")[0].firstChild.nodeValue;
    var array_coord = coords.split(",");
    
    var point = new GLatLng(parseFloat(array_coord[1]).toString(), parseFloat(array_coord[0]).toString());
    
    return point;
}

// get bounds of many placemarks
function getBounds(marks){
    var min_lat = 90;
    var min_lng = 180;
    var max_lat = -90;
    var max_lng = -180;
    var my_lat = 0;
    var my_lng = 0;
    
    for (var i = 0; i < marks.length; i++) {
        my_lat = getPoint(marks[i]).lat();
        my_lng = getPoint(marks[i]).lng();
        if (min_lat > my_lat) 
            min_lat = my_lat;
        if (min_lng > my_lng) 
            min_lng = my_lng;
        if (max_lat < my_lat) 
            max_lat = my_lat;
        if (max_lng < my_lng) 
            max_lng = my_lng;
    }
    var sw = new GLatLng(min_lat, min_lng);
    var ne = new GLatLng(max_lat, max_lng);
    
    return new GLatLngBounds(sw, ne);
}

function click_photo(index, PhotoID){

    var marker = map_markers[index];
    marker.openInfoWindowHtml(array_photo_info[index]);
    
    if (PhotoID == current_select_photo_id) {
    
        return;
    }
    
    var img_current_photo = document.getElementById("img_photo" + current_select_photo_id);
    var img_photo = document.getElementById("img_photo" + PhotoID);
    
    current_select_photo_id = PhotoID;
    img_current_photo.className = "img_normal";
    img_photo.className = "img_selected";
    
}

function show_detail(strImage){
    document.getElementById("div_photo_indicator").style.visibility = "visible";
    document.getElementById("div_photo_overlay").style.visibility = "visible";
    document.photo_detail.onload = function(e){
        document.getElementById("div_photo_indicator").style.visibility = "hidden";
        document.getElementById("div_photo_viewer").style.visibility = "visible";
    }
    document.photo_detail.src = strImage;
}

function hide_detail(){
    document.photo_detail.onload = function(e){
    }
    document.getElementById("div_photo_indicator").style.visibility = "hidden";
    document.getElementById("div_photo_viewer").style.visibility = "hidden";
    document.getElementById("div_photo_overlay").style.visibility = "hidden";
    document.photo_detail.src = "gmaps/images/loading.gif";
}

function loadMap(lang, section){
    if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(25.0, 0.0), 2);
        
        map.enableDoubleClickZoom();
        map.enableContinuousZoom();
        map.setMapType(G_SATELLITE_MAP);
        
        GDownloadUrl("albums/" + lang + "/" + section + ".kml", function(data, responseCode){
            if (responseCode == 404) 
                alert("No GoogleMaps data found for this language and section");
            var xml = GXml.parse(data);
            
            var placemarks = xml.documentElement.getElementsByTagName("Placemark");
            var myBound = getBounds(placemarks);
            map.setCenter(myBound.getCenter(), map.getBoundsZoomLevel(myBound) - 1);
            
            var array_points = [];
            
            // Create the DIV representing our rectangle
            
            var div_bar_view = document.getElementById("div_slide_view");
            var div_bar = document.createElement("div");
            div_bar.setAttribute("id", "div_slide_bar");
            div_bar.className = "div_slide_bar_hidden";
            
            
            // loading interface
            // create frame container
            var div_loading_frame = document.createElement("div");
            div_loading_frame.setAttribute("id", "div_loading_frame");
            div_loading_frame.className = "div_loading_frame";
            
            
            var table_loading_bar = document.createElement("table");
            
            table_loading_bar.className = "table_loading_bar";
            var row_loading = table_loading_bar.insertRow(0);
            var td_loading1 = row_loading.insertCell(0);
            var td_loading2 = row_loading.insertCell(1);
            row_loading.setAttribute("align", "center");
            row_loading.setAttribute("valign", "middle");
            td_loading1.setAttribute("align", "center");
            td_loading2.setAttribute("align", "left");
            td_loading1.setAttribute("width", "200px");
            td_loading2.setAttribute("width", "100px");
            
            //td_loading.setAttribute("width","50%");
            
            var text_loading = document.createTextNode("Loading......");
            td_loading1.appendChild(text_loading);
            var text_percent = document.createTextNode("0%");
            td_loading2.appendChild(text_percent);
            
            div_loading_frame.appendChild(table_loading_bar);
            div_bar_view.appendChild(div_loading_frame);
            div_bar_view.appendChild(div_bar);
            
            
            var percent = 0;
            
            for (var i = 0; i < placemarks.length; i++) {
                if (i == 0) 
                    current_select_photo_id = getPointName(placemarks[i]);
                
                var pointName = getPointName(placemarks[i]);
                
                var infoTabs = [
					new GInfoWindowTab("Photo",
						"<div class='div_photo_imagetab'>" +
							"<a onclick='show_detail(\"" + getPointImage2(placemarks[i]) + "\")'>" +
								"<center>" +
									"<img src='" + getPointImage1(placemarks[i]) + "' border='0'/>" +
								"</center>" +
							"</a><br/>" +
							getPointDescription(placemarks[i]) +
						"</div>"),
					new GInfoWindowTab("Info",
						"<div class='div_photo_infotab'>" + 
							getPointDescription(placemarks[i]) + "<br/><br/>" +
							"Photo ID: " + getPointName(placemarks[i]) + "<br/><br/>" +
							"Capture Time: " + getPointDateTime(placemarks[i]) +
						"</div>")
				];
                
                createTabMarker(map, getPoint(placemarks[i]), infoTabs, getPointName(placemarks[i]));
                array_points.push(getPoint(placemarks[i]));
                array_photo_info.push(infoTabs);
                
                var div_photo = document.createElement("div");
                var img_photo = document.createElement("img");
                var table_photo_frame = document.createElement("table");
                div_photo.setAttribute("id", "div_photo" + pointName);
                div_photo.className = "div_photo";
                
                
                img_photo.setAttribute("id", "img_photo" + pointName);
                img_photo.setAttribute("photoID", pointName);
                img_photo.setAttribute("index", i);
                img_photo.setAttribute("onclick", "javascript:click_photo(" + i + "," + pointName + ");");
                img_photo.className = "img_normal";
                img_photo.onmouseout = clearSmoothOpacity;
                img_photo.onmouseover = smoothOpacity;
                
                if (pointName == current_select_photo_id) {
                    img_photo.className = "img_selected";
                }
                
                img_photo.onload = function(e){
                    var targ;
                    if (!e) 
                        var e = window.event;
                    if (e.target) 
                        targ = e.target;
                    else 
                        if (e.srcElement) 
                            targ = e.srcElement;
                    
                    lCurrentLoadingCount = lCurrentLoadingCount + 1;
                    
                    var div_bar_view = document.getElementById("div_slide_view");
                    var div_loading_frame = document.getElementById("div_loading_frame");
                    var div_bar = document.getElementById("div_slide_bar");
                    var lCount = placemarks.length;
                    percent = Math.round(eval("(" + lCurrentLoadingCount + ") / " + lCount + "* 100"));
                    text_percent.data = percent + "%";
                    
                    if (lCurrentLoadingCount == lCount) {
                        div_bar_view.removeChild(div_loading_frame);
                        div_bar.className = "div_slide_bar";
                    }
                }
                img_photo.src = getPointImage0(placemarks[i]);
                
                img_photo.onclick = function(e){
                    var targ;
                    if (!e) 
                        var e = window.event;
                    if (e.target) 
                        targ = e.target;
                    else 
                        if (e.srcElement) 
                            targ = e.srcElement;
                    if (targ.nodeType == 3) // defeat Safari bug
                        targ = targ.parentNode;
                    
                    var index = targ.getAttribute("index");
                    var pointName = targ.getAttribute("photoID");
                    
                    var marker = map_markers[index];
                    marker.openInfoWindowTabsHtml(array_photo_info[index]);
                    
                    var img_photo = document.getElementById("img_photo" + pointName);
                    if (pointName == current_select_photo_id) {
                        img_photo.className = "img_selected";
                        return;
                    }
                    
                    var img_current_photo = document.getElementById("img_photo" + current_select_photo_id);
                    
                    current_select_photo_id = pointName;
                    img_current_photo.className = "img_normal";
                    img_photo.className = "img_selected";
                };
                
                
                
                table_photo_frame.className = "table_photo_frame";
                var row = table_photo_frame.insertRow(0);
                var td = row.insertCell(0);
                td.setAttribute("align", "center");
                td.setAttribute("valign", "middle");
                td.appendChild(img_photo);
                
                div_photo.appendChild(table_photo_frame);
                div_bar.appendChild(div_photo);
                
                hide_detail();
            }
            
            
            lMaxCenterPhotoIndex = placemarks.length - 3; //lMaxCenterPhotoIndex defined in the included js file
        });
        
    }
}