//A1 29/12/08 JOE, Modify Icon image
//Global variables. 
//         var map; //GMAP control
var mapSmall; //GMAP control - providerdetails2 page
var markers = []; //markers array  
var info = []; //infoWindow array
var baseIcon; //normal icon for marker
var markerImageURL = "http://www.carservice.com.au:8080/images/pointers/carservice_pointer.gif";
var markerImageHLURL = "http://www.carservice.com.au:8080/images/pointers/carservice_pointer_hl.gif";
var bounds; //store bounds required to fit smallmap to show all markers

var mapOverview; //mapOverview control (right bottom corner)
var bTableOver = false; //boolean to prevent scrolling provider list when list item is highlighted.



//initiate MAP, add controls, center for providerdetails2 page
function loadMapSmall(lat, lng, zoom) {
    //alert('loadMapSmall' + lat + ' ' + lng + ' ' + zoom);
    //if (map == null){alert('map is null')}else{alert('map is not null')}
    var div = document.getElementById('divGmapSmall');
    if (div && !mapSmall) {

        //Create map.
        var myLatlng = new google.maps.LatLng(lat, lng);
        var myOptions = {
            zoom: zoom,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        mapSmall = new google.maps.Map(div, myOptions);

        if (window.attachEvent) {
            window.attachEvent("onresize", function () { setMapPosition(); });
            window.attachEvent("onload", function () { setMapPosition(); });
        } else if (window.addEventListener) {
            window.addEventListener("resize", function () { setMapPosition(); }, false);
            window.addEventListener("load", function () { setMapPosition(); }, false);
        }
    }
} //loadMapSmall function

//initiate MAP, add controls, center for providerdetails2 page
function loadMapProviderDetails(lat, lng, zoom) {
    //alert('load map');
    //if (map == null){alert('map is null')}else{alert('map is not null')}
    var div = document.getElementById('divGmapProviderDetails');
    if (GBrowserIsCompatible() && div && !mapSmall) {

        //Create GMap element.
        mapSmall = new GMap2(div);

        if (window.attachEvent) {
            window.attachEvent("onresize", function () { mapSmall.checkResize() });
            window.attachEvent("onload", function () { mapSmall.checkResize() });
        } else if (window.addEventListener) {
            window.addEventListener("resize", function () { mapSmall.checkResize() }, false);
            window.addEventListener("load", function () { mapSmall.checkResize() }, false);
        }


        mapSmall.addControl(new GLargeMapControl());
        //mapSmall.addControl(new GScaleControl(256));
        //mapOverview = new GOverviewMapControl(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(0, 0));
        //mapSmall.addControl(mapOverview);
        mapSmall.enableContinuousZoom();
        mapSmall.enableDoubleClickZoom();

        mapSmall.setCenter(new GLatLng(lat, lng), zoom);
        bounds = new GLatLngBounds();

    }
} //loadMapSmall function


function setBounds() {
    google.maps.event.addListenerOnce(mapSmall, 'bounds_changed', function () {
        bounds = mapSmall.getBounds();
        var marker;

        for (i = 1; i < markers.length; i++) {
            marker = markers[i];
            bounds.extend(marker.position);
        }

        mapSmall.fitBounds(bounds);
        if (mapSmall.getZoom() > 12) mapSmall.setZoom(12);
        mapSmall.setCenter(bounds.getCenter());
    });
} //setBounds

// Creates a marker at the given point, add listeners - for providerdetails2 page.
function loadMarkerSmall(lat, lng, markerNumber, markerIconImg, markerIconImgHL, provID, htmlText, zoom, showOnStart, addEvents) {
    //alert('load marker: ' + htmlText);
    //Conert to coord
    var latlng = new google.maps.LatLng(lat, lng);

    //create marker
    var marker = new google.maps.Marker({
        position: latlng,
        map: mapSmall,
        icon: markerIconImg
    });

    //Set up marker value.
    marker.value = provID; //markerNumber;

    var icon = document.getElementById("btnIcon" + markerNumber);
    if (icon) { icon.src = markerIconImg; icon.style.display = 'block'; }

    //************* EVENT LISTENERS **********************//

    //click event
    var infowindow = new google.maps.InfoWindow({ content: htmlText, maxWidth: 400 });
    if (addEvents == true) {
        google.maps.event.addListener(marker, "click", function () {
            //var infoWindow = mapSmall.getInfoWindow();
            //mapSmall.openInfoWindowHtml(latlng,htmlText,{buttons:{close:{height:10,width:60}}}); 

            infowindow.open(mapSmall, marker);







            //                    mapSmall.openInfoWindowHtml(
            //                    latlng,
            //                    htmlText,
            //                    {onOpenFn:function(){
            //                        infoWindow.reset(latlng,infoWindow.getTabs(),new GSize(140,140),null,null);
            //                    }});



            //                    mapSmall.openInfoWindowHtml(
            //                    latlng,
            //                    htmlText,
            //                    {onOpenFn:function(){
            //                        /* Google Maps API does not support any way to resize the infoWindow, this is my hack.
            //                        * There is no CSS class to manipulate these divs and the infoWindow.reset method
            //                        * CAN be used to increase the size but not to make it smaller.(min height is about 60px).
            //                        */
            //                        //var infoWindowBlocks = $find("#divGmapSmall div div div div div");
            //                        //alert(infoWindowBlocks);   
            //                        
            //                        $.each($(".gmnoprint"), function(index, value) { 
            //                          alert(index + ': ' + value); 
            //                          $(value).width("77");
            //                          $(value).innerWidth("77");
            //                        });                        
            ////                        $.each($("#divGmapSmall div div div div div"), function(index, value) { 
            ////                          //alert(index + ': ' + value); 
            ////                          $(value).css("width","77");
            ////                        });

            //                        
            //                    }});                    

        });


        var tr = document.getElementById('tr' + markerNumber); //get list element 
        var tbl;

        //mouseover event
        google.maps.event.addListener(marker, 'mouseover', function () {
            //change image to highlited version
            marker.setIcon(markerIconImgHL); //change image to highlited version
            if (tr) {
                var tbl = tr.parentNode.id; //get parent object id
                if (tbl != null && tbl != '' && tbl == 'ctl00_ContentPlaceHolder1_pnlSponsor') {
                    ////change back bg color of list item
                    tr.style.backgroundColor = '#CDEDCF'; //trb.style.backgroundColor = '#CCFB5D';                        
                }
                else {
                    ////change back bg color of list item
                    tr.style.backgroundColor = '#f5fff6'; //trb.style.backgroundColor = '#f1f1f1';
                }

                //change icon in the prov list to highlited version
                if (icon) icon.src = markerIconImgHL;
            }
        });

        //mouseout event
        google.maps.event.addListener(marker, 'mouseout', function () {
            marker.setIcon(markerIconImg); //change image back to normal version
            if (tr) {
                var tbl = tr.parentNode.id; //get parent object id
                if (tbl != null && tbl != '' && tbl == 'ctl00_ContentPlaceHolder1_pnlSponsor') {
                    ////change back bg color of list item
                    tr.style.backgroundColor = '#E5F6E7'; //trb.style.backgroundColor = '#CCE5CE';                        
                }
                else {
                    tr.style.backgroundColor = '#ffffff'; //trb.style.backgroundColor = '#ffffff';
                }
                if (icon) icon.src = markerIconImg;
            }
        });

    }


    //************* EVENT LISTENERS(END) **********************//

    markers[markerNumber] = marker; //store marker in global collection.

    //mapSmall.addOverlay(marker); //add marker to the map

} //loadMarkerSmall function


// Creates a marker at the given point, add listeners - for providerdetails2 page.
function loadMarkerProviderDetails(lat, lng, markerNumber, markerIconImg, markerIconImgHL, provID, htmlText, zoom, showOnStart, addEvents) {
    //alert('load marker: ' + htmlText);
    //Conert to coord
    var latlng = new GLatLng(lat, lng);
    //adjust bounds required to show all markers
    bounds.extend(latlng);
    // Set up our GMarkerOptions object
    var markerIcon = new GIcon(getBaseIconProviderDetails());
    //A1, add icon image variable 
    markerIcon.image = markerIconImg;
    markerOptions = { icon: markerIcon };
    var marker = new GMarker(latlng, markerOptions);

    //Set up marker value.
    marker.value = provID; //markerNumber;

    var icon = document.getElementById("btnIcon" + markerNumber);
    if (icon) { icon.src = markerIconImg; icon.style.display = 'block'; }


    //************* EVENT LISTENERS **********************//

    //click event
    if (addEvents == true) {
        GEvent.addListener(marker, "click", function () {
            mapSmall.openInfoWindowHtml(latlng, htmlText, { buttons: { close: { height: 10, width: 13}} });
        });


        //var tr = document.getElementById('tr' + provID); //get list element 
        var tr = document.getElementById('tr' + markerNumber); //get list element 

        var tbl;

        //mouseover event
        GEvent.addListener(marker, 'mouseover', function () {
            //change image to highlited version
            marker.setImage(markerIconImgHL); //change image to highlited version
            if (tr) {
                var tbl = tr.parentNode.id; //get parent object id
                if (tbl != null && tbl != '' && tbl == 'ctl00_ContentPlaceHolder1_pnlSponsor') {
                    ////change back bg color of list item
                    tr.style.backgroundColor = '#CDEDCF'; //trb.style.backgroundColor = '#CCFB5D';                        
                }
                else {
                    ////change back bg color of list item
                    tr.style.backgroundColor = '#f5fff6'; //trb.style.backgroundColor = '#f1f1f1';
                }

                //change icon in the prov list to highlited version
                if (icon) icon.src = markerIconImgHL;
            }
        });

        //mouseout event
        GEvent.addListener(marker, 'mouseout', function () {
            marker.setImage(markerIconImg); //change image back to normal version
            if (tr) {
                var tbl = tr.parentNode.id; //get parent object id
                if (tbl != null && tbl != '' && tbl == 'ctl00_ContentPlaceHolder1_pnlSponsor') {
                    ////change back bg color of list item
                    tr.style.backgroundColor = '#E5F6E7'; //trb.style.backgroundColor = '#CCE5CE';                        
                }
                else {
                    tr.style.backgroundColor = '#ffffff'; //trb.style.backgroundColor = '#ffffff';
                }
                if (icon) icon.src = markerIconImg;
            }
        });

    }


    //************* EVENT LISTENERS(END) **********************//

    markers[markerNumber] = marker; //store marker in global collection.

    mapSmall.addOverlay(marker); //add marker to the map

} //loadMarker function


function makeMarker(lat, lng, markerNumber, markerIconImg, markerIconImgHL, provID, htmlText, zoom, showOnStart, addEvents) {


    //create marker
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lng),
        map: mapSmall,
        icon: markerIconImg
    });
    //Set up marker value.
    marker.value = provID; //markerNumber;

    var icon = document.getElementById("btnIcon" + markerNumber);
    if (icon) { icon.src = markerIconImg; icon.style.display = 'block'; }

    //Use infobox utility library instead of standard infoWindow to get more flexibility
    var myOptions = {
        content: htmlText
		        , disableAutoPan: false
		        , maxWidth: 0
		        , pixelOffset: new google.maps.Size(-75, 0)
		        , zIndex: null
		        , boxStyle: {
		            background: "url('/images/icons/tipbox2.gif') no-repeat"
		          , opacity: 1
		          , width: "150px"
		        }
		        , closeBoxMargin: "12px 4px 2px 2px"
		        , closeBoxURL: "/images/icons/cross.jpg"
		        , infoBoxClearance: new google.maps.Size(1, 1)
		        , isHidden: true
		        , pane: "floatPane"
    };

    var ib = new InfoBox(myOptions);
    info[markerNumber] = ib; //	store InfoBox in global collection.

    //ib.open(mapSmall, marker);

    //************* EVENT LISTENERS **********************//

    //click event        	
    google.maps.event.addListener(marker, 'click', function (e) {
        for (i = 1; i < info.length; i++) {
            info[i].close();
        }
        ib.open(mapSmall, marker);
        ib.show();
    });

    var tr = document.getElementById('tr' + markerNumber); //get list element 
    var tbl;

    //mouseover event
    google.maps.event.addListener(marker, 'mouseover', function () {
        //change image to highlited version
        marker.setIcon(markerIconImgHL); //change image to highlited version
        if (tr) {
            var tbl = tr.parentNode.id; //get parent object id
            if (tbl != null && tbl != '' && tbl == 'ctl00_ContentPlaceHolder1_pnlSponsor') {
                ////change back bg color of list item
                tr.style.backgroundColor = '#CDEDCF'; //trb.style.backgroundColor = '#CCFB5D';                        
            }
            else {
                ////change back bg color of list item
                tr.style.backgroundColor = '#f5fff6'; //trb.style.backgroundColor = '#f1f1f1';
            }

            //change icon in the prov list to highlited version
            if (icon) icon.src = markerIconImgHL;
        }
    });

    //mouseout event
    google.maps.event.addListener(marker, 'mouseout', function () {
        marker.setIcon(markerIconImg); //change image back to normal version
        if (tr) {
            var tbl = tr.parentNode.id; //get parent object id
            if (tbl != null && tbl != '' && tbl == 'ctl00_ContentPlaceHolder1_pnlSponsor') {
                ////change back bg color of list item
                tr.style.backgroundColor = '#E5F6E7'; //trb.style.backgroundColor = '#CCE5CE';                        
            }
            else {
                tr.style.backgroundColor = '#ffffff'; //trb.style.backgroundColor = '#ffffff';
            }
            if (icon) icon.src = markerIconImg;
        }
    });
    //************* EVENT LISTENERS(END) **********************//            

    markers[markerNumber] = marker; //store marker in global collection.

} //makeMarker





//not in use. use setBounds instead. 
//adjust map centre and zoom to accomodate all markers
function adjustMapZoom() {
    $(document).ready(function () {
        //alert('adjustMapZoom:' + bounds)
        mapSmall.setZoom(mapSmall.getBoundsZoomLevel(bounds));
        if (mapSmall.getZoom() > 12) mapSmall.setZoom(12);
        mapSmall.setCenter(bounds.getCenter());

    });
} //adjustMapZoom

function getBaseIcon() {
    // Create a base icon for all of our markers that specifies the
    // shadow, icon dimensions, etc.
    baseIcon = new google.maps.MarkerImage();
    baseIcon.iconSize = new google.maps.Size(24, 37);
    baseIcon.iconAnchor = new google.maps.Point(9, 34);
    baseIcon.infoWindowAnchor = new google.maps.Point(9, 2);
    //baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
    //baseIcon.shadowSize = new google.maps.Size(37, 34);
    //baseIcon.infoShadowAnchor = new google.maps.Point(18, 25);	
    return baseIcon;
} //getBaseIcon

function getBaseIconProviderDetails() {
    // Create a base icon for all of our markers that specifies the
    // shadow, icon dimensions, etc.
    baseIcon = new GIcon();
    baseIcon.iconSize = new GSize(24, 37);
    baseIcon.iconAnchor = new GPoint(9, 34);
    baseIcon.infoWindowAnchor = new GPoint(9, 2);
    //baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
    //baseIcon.shadowSize = new GSize(37, 34);
    //baseIcon.infoShadowAnchor = new GPoint(18, 25);	
    return baseIcon;
} //getBaseIcon



function clickFind() {
    var btn = document.getElementById("ctl00_ContentPlaceHolder1_btnFind")
    if (btn != null) { btn.click() }
}

function showMarker(provId) {
    for (i = 1; i < markers.length; i++) {
        var marker = markers[i];
        if (marker.value == provId) {
            google.maps.event.trigger(marker, "click");
            break;
        }
    }
}

//***************** TEST ***************************
function myClick(markerNumber) {
    //var marker = 
    //map.setCenter(new google.maps.LatLng(-33, 165), 13);
    var marker = markers[markerNumber];

    var coord = markers[markerNumber].getLatLng();
    map.setCenter(coord, 13);

    google.maps.event.trigger(markers[markerNumber], "click");

}



//		//make map global
//		function getMap(){return map}

//		//not in use
//		//initiate MAP, add controls, center
//		function loadMap(lat, lng, zoom) {
//			//alert('load map');
//			//if (map == null){alert('map is null')}else{alert('map is not null')}
//			var ucMap = document.getElementById('divGmap');
//			if (GBrowserIsCompatible() && (ucMap != null) && (map == null)) {
//				
//				//Create GMap element.
//				map = new GMap2(ucMap);
//				
//				//map.addControl(new GLargeMapControl());
//                var largeMapControl = new GLargeMapControl();
//                var topLeft = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10,20));
//                //var bottomRight = new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10));
//                map.addControl(largeMapControl, topLeft);
//				
//				//map.addControl(new GMapTypeControl(1));
//				map.addControl(new GScaleControl(256));
//				
//				//these 2 lines caused error 'this.$e.width is null or not an object'. Solution: http://groups.google.nl/group/Google-Maps-API/browse_thread/thread/9ea875fb01895189
//				//mapOverview = new GOverviewMapControl(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(0, 0));
//				//map.addControl(mapOverview);				
//				window.setTimeout("mapOverview = new GOverviewMapControl(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(0, 0));map.addControl(mapOverview);",700); 
//				
//				//new GKeyboardHandler(map);
//				map.enableContinuousZoom();
//				map.enableDoubleClickZoom();			
//				
//				map.setCenter(new google.maps.LatLng(lat, lng), zoom);				
//				
//			} //If GBrowserIsCompatible
//			//if (map == null){alert('map is null')}else{alert('map is not null')}
//		} //loadMap function

//not in use
//		// Creates a marker at the given point, add listeners.
//		var lastProvId; //id of the provider shown in infoWindow. Use to change background of related prov in the list.
//		function loadMarker(lat, lng, markerNumber, markerIconImg, markerIconImgHL, provID, htmlText, zoom, showOnStart) {
//		    alert('loadMarker');
//			//alert('markerIconImg: ' + markerIconImg);
//			//alert('markerIconImgHL: ' + markerIconImgHL);
//			//Conert to coord
//			var latlng = new google.maps.LatLng(lat, lng);
//			// Set up our google.maps.MarkerOptions object
//			var markerIcon = new google.maps.MarkerImage(getBaseIcon());
//			//A1, add icon image variable 
//			markerIcon.image = markerIconImg;//markerImageURL.replace("#",markerIconImg);

//			markerOptions = { icon: markerIcon};
//			var marker = new google.maps.Marker(latlng, markerOptions);
//			
//			//Set up marker value.
//			marker.value = provID; //markerNumber;

//			//************* EVENT LISTENERS **********************//
//			
//			//click event
//			google.maps.event.addListener(marker,"click", function() {
//				var coord = markers[markerNumber].getLatLng();
//				var tbl = document.getElementById('tbl' + provID); //get list element and check its existense
//				if (tbl != null){
//				    tbl.style.backgroundColor = '#b2dafb'; //change bg color of list item to HL
//                }
//				//map.openInfoWindowHtml(latlng, htmlText);
//				map.openInfoWindowHtml(latlng,htmlText,{buttons:{close:{height:10,width:13}}}); 
//				
//				
//				lastProvId = provID;
//				
//                makeWebRequest(location.protocol + '//' + location.host + '/car-service-log.aspx?provid=' + lastProvId);
//                //makeWebRequest('~/car-service-log.aspx?&provid=' + lastProvId);

//			});
//			
//			//Change background color of prov in the list when infoWindow is closed.
//			google.maps.event.addListener(map,"infowindowclose", function() {
//			    if (lastProvId != null){
//				    var tbl = document.getElementById('tbl' + lastProvId); //get list element and check its existense
//				    if (tbl != null){
//				        tbl.style.backgroundColor = 'White'; //change bg color of list item to HL
//                    }
//			        lastProvId = null;
//			    }
//			});
//			
//			//mouseover event
//			google.maps.event.addListener(marker,'mouseover',function(){
//                //A1
//				//marker.setImage(markerImageHLURL.replace("#",markerIconImg)); //change image to highlited version
//				marker.setImage(markerIconImgHL); //change image to highlited version
//				var tbl = document.getElementById('tbl' + provID); //get list element and check its existense
//				if (tbl != null){
//				     //change bg color of list item to HL
//				    if (!(tbl.style.backgroundColor == '#b2dafb' || tbl.style.backgroundColor == 'rgb(178, 218, 251)')){tbl.style.backgroundColor = '#febaba';}
//    				
//				    //change icon in the prov list to highlited version
//				    var icon = document.getElementById("btnIcon" + markerNumber);
//				    //A1
//				    //icon.src = markerImageHLURL.replace("#",markerIconImg);
//				    icon.src = markerIconImgHL;//markerImageURL.replace("#",markerIconImg);
//				    
//				    //scroll list of service centres
//				    var panel = document.getElementById("ctl00_ContentPlaceHolder1_pnlProviderList");
//				    if (panel != null && bTableOver == false){var scrollTop = 71 * (markerNumber - 1);panel.scrollTop = scrollTop;};
//				}
//			});			
//			
//			//mouseout event
//			google.maps.event.addListener(marker,'mouseout',function(){
//			    //A1
//				//marker.setImage(markerImageURL.replace("#",markerIconImg)); //change image back to normal version
//				marker.setImage(markerIconImg); //change image back to normal version
//				var tbl = document.getElementById('tbl' + provID); //get list element and check its existense
//				if (tbl != null){
//				     ////change back bg color of list item
//                    //rgb(178, 218, 251) - for FF
//				    if (!(tbl.style.backgroundColor == '#b2dafb' || tbl.style.backgroundColor == 'rgb(178, 218, 251)')){tbl.style.backgroundColor = 'White';}

//				    //change icon in the prov list to normal version
//				    var icon = document.getElementById("btnIcon" + markerNumber);
//				    //A1
//				    //icon.src = markerImageURL.replace("#",markerIconImg);
//				    icon.src = markerIconImg;
//				}    
//			});			
//			//************* EVENT LISTENERS(END) **********************//
//			
//			markers[markerNumber] = marker; //store marker in global collection.
//			
//			map.addOverlay(marker); //add marker to the map
//			
//			//show info window for the provider.
//			//if (showOnStart == true){
//			//    map.openInfoWindowHtml(latlng, htmlText);
//			//}
//			
//		} //lo	

//        //not in use
//		function centerMap(lat, lng, zoom){
//			if (map == null) {loadMap(lat, lng, zoom)}
//				else {
//					var latlng = new google.maps.LatLng(lat, lng); 
//					map.setCenter(latlng, zoom);
//				}
//		}//centerMap function

//        //Remove all markers.
//        function clearOverlays(){
//            if (map){map.clearOverlays()};
//        }//clearOverlays