var x = '';
var y = '';	
var map = null;
var geocoder = null;
var point = null;
var markers = new Array();
var ViewControlsObj = null;
var NavControlsObj = null;

function load() {
  if (GBrowserIsCompatible()) {
   	map = new GMap2(document.getElementById("map"));
   	ViewControlsObj = new GLargeMapControl();
   	NavControlsObj = new GMapTypeControl();
   	if ( showViewControls == 'y' ) {
   		map.addControl(ViewControlsObj);
   	}
   	if ( showNavControls == 'y' ) {
		map.addControl(NavControlsObj);	
   	}
	if ((x != '') && (y != ''))
   	{
   		var center = new GLatLng(x, y);   		
	} else {					
	    var center = new GLatLng(38.61687,-94.130859);	  
	} 
	map.setCenter(center, Number(zoomLevel));
	if ( mapView == 'satelite' )	 {
		map.setMapType(G_SATELLITE_MAP);
	} else if ( mapView == 'hybrid' ) {
		map.setMapType(G_HYBRID_MAP);
	} else if ( mapView == 'map' ) {
		map.setMapType(G_NORMAL_MAP);
	}
   	 				
	
	
	GEvent.addListener(map, "moveend", function() {
    	var zl = map.getZoom();
    	if ( Number(zl)<= 17 && Number(zl) >= 0 ) {
    		document.getElementById("zoom_level").selectedIndex = Number(zl);
    	}
    });
    
    GEvent.addListener(map, "moveend", function() {
    	var point = map.getCenter();
		document.getElementById('geocoords').value = point.toUrlValue();
    });
    
    GEvent.addListener( map, "maptypechanged", function() {
		var map_type = '0';
		var type = map.getCurrentMapType().getName()
		
		switch (type) {
			case "Satellite":
				map_type = '1';
				break;
			
			case "Hybrid":
				map_type = '2';
				break;
			
			case "Map":
				map_type = '0';
				break;
		}
    	document.getElementById("mapView").selectedIndex = map_type;
    });
	
	function createMarker(coord, text, iconImage) { 
	  var icon = new GIcon();
	  if ( iconImage ) {
	  	icon.image = 'http://maps.google.com/' + iconImage;
	  } else {
	  	icon.image = 'http://maps.google.com/' + defaultIcon;
	  }
	  icon.iconAnchor = new GPoint(8, 9);
	  icon.infoWindowAnchor = new GPoint(8, 9);
	  var marker = new GMarker(coord, icon);
//	  GEvent.addListener(marker, "click", function() {
//	    marker.openInfoWindowHtml(text);
//	  });
	  return marker;
	}       		
	   
	GEvent.addListener(map, "click", function(marker, point) {		
	  	if (!marker) {
			var marker = createMarker(point, 'Item ' + i);
		    map.addOverlay(marker);
		    markers[i] = marker;
			addField(i, point.toUrlValue());
			i++;
	  	}
	});	
	for (var k = 0; k <= itemCoord.length; k++) {
		var item_coord = itemCoord[k];
		if ( item_coord ) {
			var itemCoordsSplited = item_coord.split(',');
			if ((itemCoordsSplited[0] && itemCoordsSplited[0].length > 0) && (itemCoordsSplited[1] && itemCoordsSplited[1].length > 0)) {
				itemX = itemCoordsSplited[0];
				itemY = itemCoordsSplited[1];
				point = new GLatLng(itemX, itemY);
				var marker = createMarker(point, 'Item ' + k, itemIcon[k]);
				map.addOverlay(marker);
				markers[k] = marker;
			}		
		}
	}															    								   	        							    							        							        							       								        							        														               				      	       							
  }
} 

function elem(name, attrs, style, text) {
    var e = document.createElement(name);
    if (attrs) {
        for (key in attrs) {
            if (key == 'class') {
                e.className = attrs[key];
            } else if (key == 'id') {
                e.id = attrs[key];
            } else {
                e.setAttribute(key, attrs[key]);
            }
        }
    }
    if (style) {
        for (key in style) {
            e.style[key] = style[key];
        }
    }
    if (text) {
        e.appendChild(document.createTextNode(text));
    }
    return e;
}		

function setMarker(param)
{
	if (checkCoord( document.getElementById('geocoords') ))
	{
		var arrCoord = param.split(',');
		map.setCenter( new GLatLng(arrCoord[0], arrCoord[1]) )			
	}
}
function checkCoord( cObj )
{
	var checkCoord = cObj.value;
	if (checkCoord.length > 0)
	{
		if (checkCoord.indexOf(',')==-1 || checkCoord.indexOf(',')==0 || checkCoord.indexOf(',')==checkCoord.length)
		{
			alert('You should enter proper value for coordinates');
		 	return false;
		} else {
			var arrCheck = checkCoord.split(',');
			if ((arrCheck[0] == '') || (arrCheck[1] == '') || (!arrCheck.length))
			{
				cObj.value = '';				
				alert('You should enter proper value for coordinates');	
				return false;			
			} else if ((arrCheck[0].match(/[A-Za-z]+/)) || (arrCheck[1].match(/[A-Za-z]+/))) {
				cObj.value = '';
				alert('You should enter proper value for coordinates');
				return false;
			} else return true;
		} 
	} 
}
function showBaloon(sObj) {
	var display = '';
	if(sObj.checked == true) {
		display = '';
	} else {
		display = 'none';
	}
	document.getElementById('baloonText').style.display = display;	
}
function showPin(sObj) {
	var display = '';
	if(sObj.checked == true) {
		display = '';
	} else {
		display = 'none';
	}
	document.getElementById('showBaloon').style.display = display;	
}	
function checkForm(oForm) {
	if (checkCoord( document.getElementById('geocoords') )) oForm.submit();
}
function changeWidth(width) {	
	if (width.match(/[0-9]+/)) {
		document.getElementById('map').style.width = width + 'px';
	} else {
		alert('Map width should be numeric!');
		document.getElementById('width').value = '';
	}
}
function changeHeight(height) {
	if (height.match(/[0-9]+/)) {
		document.getElementById('map').style.height = height + 'px';	
	} else {
		alert('Map height should be numeric!');
		document.getElementById('height').value = '';
	}
}

function addField( item, itemCoordinates ) {
	var next_field = get_map_next_field_no();
    var last_field = get_map_last_field_no();
    var count = update_map_field_count();
    if ( document.getElementById('field_' + last_field) ) {
    	var previous_field = document.getElementById('field_' + last_field);
    } else {
    	var previous_field = document.getElementById('field_head');
    }
       
    var main_tr = elem('tr', {id: 'field_' + next_field});
    
    var main_td = elem('td', {align: 'left'});
    main_td.className = 'text_normal_9pt';
       
    var table = elem('table', {id: 'map_table_' + next_field, border: '0', width: '100%', style: 'background-color: #CCCCCC'}, {width: '100%'});
    table.style.background = '#CCCCCC';
    var tbody = elem('tbody');
    table.appendChild(tbody);
       
    main_td.appendChild(table);
  
    var tr1 = elem('tr');       
    var td1 = elem('td', {width: '50%'});
//    td.className = 'text_normal_9pt';
    td1.className = 'header_admin';
    td1.innerHTML = 'Item ' + count;
    tr1.appendChild(td1);
    var td2 = elem('td', {width: '50%', align:'right'});
    td2.className = 'header_admin';
    td2.innerHTML = '<a href="javascript:removeField(\'' + next_field + '\', \'' + item + '\')"><img src="'+site_base_url+'includes/images/delete.gif" border="0"/></a>';
    tr1.appendChild(td2);
    tbody.appendChild(tr1);
    
    var tr2 = elem('tr');
    var td1 = elem('td', {align: 'right'});
    td1.className = 'text_normal_9pt';
    td1.innerHTML = '<b>Item Title:</b>';
    var td2 = elem('td', {align: 'left'});
    td2.className = 'text_normal_9pt';
    td2.appendChild(elem('input', {name: 'title[' +next_field+ ']', id:'itemTitle_' + next_field, type: 'text'}, {width: '150px'}));
    tr2.appendChild(td1);
    tr2.appendChild(td2);
    tbody.appendChild(tr2);
    
    var tr6 = elem('tr');
    var td1 = elem('td', {align: 'right'});
    td1.className = 'text_normal_9pt';
    td1.innerHTML = '<b>Item Coordinates:</b>';
    var td2 = elem('td', {align: 'left'});
    td2.className = 'text_normal_9pt';
    var coords = elem('input', {name: 'item_coordinates[' +next_field+ ']', id: 'itemCoordinates_'+next_field, type: 'text', value: itemCoordinates});   
    if(window.addEventListener){ // Mozilla, Netscape, Firefox
		coords.addEventListener('change', changeMarkerCoord, false);
		coords.mydata = next_field;
	} else { // IE
		coords.attachEvent('onchange', changeMarkerCoord);
		coords.mydata = next_field;
	}
	td2.appendChild(coords);
    tr6.appendChild(td1);
    tr6.appendChild(td2);
    tbody.appendChild(tr6);
    
    var tr3 = elem('tr');
    var td1 = elem('td', {align: 'right'});
    td1.className = 'text_normal_9pt';
    td1.innerHTML = '<b>Select a Marker:</b>';
    var td2 = elem('td', {align: 'left'});
    td2.className = 'text_normal_9pt';
    var img = elem( 'img', { src: 'http://maps.google.com/' + defaultIcon, id: 'pin_img_' + next_field } );
    td2.appendChild( img );
//    td2.appendChild( document.createTextNode( '&nbsp;' ) );
    var select = elem( 'select', {name: 'showpin[' +next_field+ ']', id: 'showpin_' + next_field} );
    for ( var k = 0; k < markersIcons.length; k++ ) {
    	if ( markersIcons[k] instanceof Object !== true  ) {
    		select.appendChild( elem( 'option', {value: markersIcons[k]}, null, markersTitles[k] ) );
    	}
    }
    if(window.addEventListener){ // Mozilla, Netscape, Firefox
		select.addEventListener('change', changeMarkerIcon, false);
		select.mydata = next_field;
	} else { // IE
		select.attachEvent('onchange', changeMarkerIcon);
		select.mydata = next_field;
	}
    td2.appendChild(select);
    
    tr3.appendChild(td1);
    tr3.appendChild(td2);
    tbody.appendChild(tr3);
    
    var tr4 = elem('tr');
    var td1 = elem('td', {align: 'right', valign: 'top'});
    td1.className = 'text_normal_9pt';
    td1.innerHTML = '<b>Show Balloon:</b><br/><br/><br/><br/><b>Balloon Text:</b>';
    var td2 = elem('td', {align: 'left'});
    td2.className = 'text_normal_9pt';
    
    td2.innerHTML = '<input type="checkbox" name="showbaloon[' + next_field + ']" value="y"/><br/><label><input type="radio" value="' + next_field + '" name="showbydefault"/>Show by Default</label><br/><label><input id="baloonHeading_' + next_field + '" type="checkbox" onchange="showBaloon(document.getElementById(\'baloonText_' + next_field + '\'));" value="y" name="heading[' + next_field + ']"/>Display Title as Heading</label><br/>';
    var text = elem('textarea', {name:'text[' +next_field+ ']', id: 'baloonText_'+next_field});
    if(window.addEventListener){ // Mozilla, Netscape, Firefox
		text.addEventListener('change', changeMarkerBaloon, false);
		text.mydata = next_field;
	} else { // IE
		text.attachEvent('onchange', changeMarkerBaloon);
		text.mydata = next_field;
	}
    td2.appendChild( text ); 
    tr4.appendChild(td1);
    tr4.appendChild(td2);
    tbody.appendChild(tr4);
           
    main_tr.appendChild(main_td);
    	                                                      	
    previous_field.parentNode.insertBefore(main_tr, previous_field.nextSibling);	
}

function changeMarkerIcon( evt ) {
	var e_out_line;
	var e_out_sel;
	var e_out_val;
	var ie_var = "srcElement";
	var moz_var = "target";
	var prop_var = "mydata";
	evt[moz_var] ? e_out_line = evt[moz_var][prop_var] : e_out_line = evt[ie_var][prop_var];
	changePin( document.getElementById( 'showpin_' + e_out_line ) );
}

function changeMarkerBaloon( evt ) {
	var e_out_line;
	var e_out_sel;
	var e_out_val;
	var ie_var = "srcElement";
	var moz_var = "target";
	var prop_var = "mydata";
	evt[moz_var] ? e_out_line = evt[moz_var][prop_var] : e_out_line = evt[ie_var][prop_var];
	showBaloon( document.getElementById( 'baloonText_' + e_out_line ) );
}

function changeBaloonVisibility( evt ) {
	var e_out_line;
	var e_out_val;
	var ie_var = "srcElement";
	var moz_var = "target";
	var prop_var = "mydata";
	var prop_val = "myval";
	evt[moz_var] ? e_out_line = evt[moz_var][prop_var] : e_out_line = evt[ie_var][prop_var];
	evt[moz_var] ? e_out_val = evt[moz_var][prop_val] : e_out_val = evt[ie_var][prop_val];
	displayBaloon( e_out_line, e_out_val );
}

function changeMarkerCoord( evt ) {
	var e_out_line;
	var e_out_sel;
	var e_out_val;
	var ie_var = "srcElement";
	var moz_var = "target";
	var prop_var = "mydata";
	evt[moz_var] ? e_out_line = evt[moz_var][prop_var] : e_out_line = evt[ie_var][prop_var];
	if ( document.getElementById( 'itemCoordinates_' + e_out_line ) ) {
		changeMarkerCoordVal( e_out_line, document.getElementById( 'itemCoordinates_' + e_out_line ).value );
	}
}

function changeMarkerCoordVal( item, coords ) {
	if ( checkCoord( document.getElementById( 'itemCoordinates_' + item ) ) ) {
		var itemCoordsSplited = coords.split(',');
		if ((itemCoordsSplited[0] && itemCoordsSplited[0].length > 0) && (itemCoordsSplited[1] && itemCoordsSplited[1].length > 0)) {
			itemX = itemCoordsSplited[0];
			itemY = itemCoordsSplited[1];
			point = new GLatLng(itemX, itemY);
			markers[item].setLatLng( point );
		}
	}
}

function displayBaloon( elId, elVal ) {
	if ( elVal == 'clicked' || elVal == 'default' ) {
		document.getElementById( 'baloon_' + elId ).style.display = '';
	} else {
		document.getElementById( 'baloon_' + elId ).style.display = 'none';
	}
}

function removeMarker( item ) {
	map.removeOverlay( markers[item] );
}

function get_map_next_field_no()
{
    var field = document.getElementById('field_head').nextSibling;
    var next = 0;
    while(field) {
        if (field.id) {
            var id_string = field.id;
            next = id_string.substr(6);
        }
        field = field.nextSibling;
    }
    return ++next;
}

function get_map_last_field_no()
{

    var field = document.getElementById('field_head').nextSibling;
    var last = 0;
    while(field) {
        if (field.id) {
            var id_string = field.id;
            last = id_string.substr(6);
        }
        field = field.nextSibling;
    }
    return last;
}

function update_map_field_count()
{
    var field = document.getElementById('field_head').nextSibling;
    var count = 1;
    while(field) {
        if (field.id) {
//            alert(field.firstChild.id);
//            var count_col = field.firstChild.childNodes[0].firstChild.childNodes[0].firstChild;
//            count_col.innerHTML = 'Item ' + count++ ;
			count++;
        }
        field = field.nextSibling;
    }
    if ( count > 0 ) {
    	document.getElementById('itemInfo').innerHTML = 'You may click on the map to add another item.';
    } 
    return count;
}

function removeField(id, markerNum)
{
	var field = document.getElementById('field_'+id);
	if ( field ) {
		field.parentNode.removeChild(field);
		removeMarker( markerNum );
		update_map_field_count();
	}
}

function showBorder(cObj) {
	if ( cObj.checked == true )	 {
		document.getElementById('map').style.border = '1px solid #000000';
	} else {
		document.getElementById('map').style.border = 'none';
	}
}

function changeView(cObj) {
	if ( cObj.options[cObj.selectedIndex].value == 'satelite' )	 {
		map.setMapType(G_SATELLITE_MAP);
	} else if ( cObj.options[cObj.selectedIndex].value == 'hybrid' ) {
		map.setMapType(G_HYBRID_MAP);
	} else if ( cObj.options[cObj.selectedIndex].value == 'map' ) {
		map.setMapType(G_NORMAL_MAP);
	}
}

function changeZoom(cObj) {
	map.setZoom(Number(cObj.options[cObj.selectedIndex].value));
}

function changePin(cObj) {
	var iconImage = cObj.options[cObj.selectedIndex].value;
	var idSpltd = cObj.id.split('_');
	var imageEl = document.getElementById('pin_img_'+idSpltd[1]);
	imageEl.src = 'http://maps.google.com/' + iconImage;
	var imageDim = markersDimentions[cObj.selectedIndex].split('_');
	imageEl.width = imageDim[0];
	imageEl.height = imageDim[1];
	var point = markers[idSpltd[1]].getLatLng();
	map.removeOverlay( markers[idSpltd[1]] );
	
	var icon = new GIcon();
	icon.image = 'http://maps.google.com/' + iconImage;
	icon.iconAnchor = new GPoint(8, 9);
	icon.infoWindowAnchor = new GPoint(8, 9);
	var marker = new GMarker( point, icon );
	map.addOverlay( marker );
	markers[idSpltd[1]] = marker;
}

function showBaloon( cObj ) {
	var idSpltd = cObj.id.split('_');
	var title = '';
	if ( document.getElementById( 'baloonHeading_' + idSpltd[1] ).checked == true ) {
		title = document.getElementById( 'itemTitle_' + idSpltd[1] ).value;
		if ( title.length > 0 ) {
			title = '<b>'+title+'</b><br/>';
		}
	}
	var text = title + cObj.value;
	text = text.replace(/([^>])\n/g, '$1<br />\n');
	markers[idSpltd[1]].openInfoWindowHtml(text);
}

function removeZoom(cObj) {
	if ( cObj.checked == true )	 {
		map.addControl(ViewControlsObj);
	} else {
		map.removeControl(ViewControlsObj);
	}	
}

function removeView(cObj) {
	if ( cObj.checked == true )	 {
		map.addControl(NavControlsObj);
	} else {
		map.removeControl(NavControlsObj);
	}	
}