var bCreateNewMMObj = false;
var bEditMMObj = false;
var bReadOnly = true;
var bHaveDeletedMM = -1;
var bSendMyMap = false;
var bWaitingCreateNewMap = false;

var bDrawingPolyline = false;
var arrDrawingPts = null;
var nDrawingPts = 0;
var tempPolyline = null;

var dsMyMap = null;
var dsMyMapCoor = null;

var iMyMapOpening = -1;
var iMyMapCoorSel = -1;
var iMyMapCoorOver = -1;

var arrMyMapCoorObj = new Array();
var nMyMapCoorObj = 0;

var arrControlPoint = new Array();
var nControlPoint = 0;

var arrAPControlPoint = new Array();
var nAPControlPoint = 0;

var bCPDragging = false;
var clickedPoint = null;
var selTbrButton = null;

var curTitle = '';
var curDesc = '';

var curIcon = '';

var curText = '';
var curFontFamily = '';
var curFontWeight = '';
var curFontSize = '';
var curFontColor = '';

var curLineColor = '';
var curLineWidth = '';
var curLineOpacity = '';
var curFillColor = '';
var curFillOpacity = '';

var curColElX = 0;
var curColElY = 0;

var colorArr = new Array(
	    new Array('#ff8080','#ffff80','#80ff80','#00ff80','#80ffff','#0080ff','#ff80c0','#ff80ff'),
	    new Array('#ff0000','#ffff00','#80ff00','#00ff40','#00ffff','#0080c0','#8080c0','#ff00ff'),
	    new Array('#804040','#ff8040','#00ff00','#008080','#004080','#8080ff','#800040','#ff0080'),
	    new Array('#800000','#ff8000','#008000','#008040','#0000ff','#0000a0','#800080','#8000ff'),
	    new Array('#400000','#804000','#004000','#004040','#000080','#000040','#400040','#400080'),
	    new Array('#000000','#808000','#808040','#808080','#408080','#c0c0c0','#400040','#ffffff')
	);
	
var iconArr = new Array(
        new Array('point-1.gif', 'point-2.gif', 'point-3.gif', 'point-4.gif', 'star-1.gif', 'star-2.gif', 'star-3.gif'),
	    new Array('point-5.gif', 'point_6.gif', 'point_7.gif', 'point_8.gif', 'heart_1.gif', 'heart_2.gif', 'heart_3.gif'),
	    new Array('taxi.gif', 'bus.gif', 'airplane.gif', 'train.gif', 'bike.gif', 'truck.gif', 'ship.gif'),
	    new Array('port.gif', 'food-1.gif', 'food-2.gif', 'food-3.gif', 'food-4.gif', 'media_1.gif', 'media_2.gif'),
	    new Array('media_3.gif', 'media_4.gif', 'media_5.gif', 'media_6.gif', 'media_7.gif', 'theatre.gif', 'hospital.gif'),
	    new Array('hotel.gif', 'parking.gif', 'bank.gif', 'umbrella.gif', 'park.gif', 'tool.gif', 'service.gif'),
	    new Array('post.gif', 'phone.gif', 'shopping.gif', 'petro.gif', 'home.gif', 'bag.gif', 'book.gif')
    );

function resizeMyMapDiv()
{
    var divMyMapList = document.getElementById('MyMapList');
    var divMyMapArea = document.getElementById('MyMapArea');
    var divMyMapToolbar = document.getElementById('MyMapToolbar');
    var divMyMapCoorList = document.getElementById('MyMapCoorList');
    if (divMyMapArea != null)
        divMyMapArea.style.top = parseInt(divMyMapList.offsetTop) + parseInt(divMyMapList.offsetHeight) + 'px';
    if (divMyMapCoorList != null)
    {
        if (!bReadOnly)
            divMyMapToolbar.style.height = '120px';
        else
            divMyMapToolbar.style.height = '82px';
        
        divMyMapCoorList.style.top = (parseInt(divMyMapToolbar.offsetTop) + parseInt(divMyMapToolbar.offsetHeight)) + 'px';
        divMyMapCoorList.style.height = (parseInt(divMyMapArea.offsetHeight) - parseInt(divMyMapToolbar.offsetHeight) - 10) + 'px';
    }
};

function createNewMap()
{
    if (bEditMMObj)
    {
        if (confirm("Bạn có muốn lưu lại bản đồ của bạn không?"))
        {
            bWaitingCreateNewMap = true;
            saveMyMap();
        }
        else
        {
            fnCreateNewMap();
        }
    }
    else
    {
        fnCreateNewMap();
    }
};

function checkLogin()
{
    var spanUsr = document.getElementById('UserName');
    if ((browserName == 'msie' && spanUsr.innerText == '') || (browserName != 'msie' && spanUsr.firstChild == null))
        return false;//chua dang nhap
    return true;//da dang nhap
};

function fnCreateNewMap()
{
    bEditMMObj = false;
    bReadOnly = false;
    //var isUpLoadUser = document.getElementById('hdUploadUser').value;
    if (!checkLogin())
	{
		window.location =  "login.aspx?tab=5";
		return;
	}
	closeMyMap();
	
	var dtRow = new Object();
	dtRow.MyMapID = '';
	dtRow.UserID = '';
	dtRow.Title = 'Chưa đặt tên';
	dtRow.Description = '';
	dtRow.MapID = 'vietnam';
	dtRow.ZoomLevel = map.getLevel();
	var cp = map.getCenter();
	dtRow.LastPosX = cp.longitude;
	dtRow.LastPosY = cp.latitude;
	dsMyMap.Tables[0].Rows[dsMyMap.Tables[0].Rows.length] = dtRow;
	
	var strRequest = map.getLevel() + '!' + cp.longitude + '!' + cp.latitude;
	showBusyDiv('Đang tạo bản đồ mới');
	vbdmap.CreateNewMap(strRequest, createNewMapCallback);
	
	var divMyMapList = document.getElementById('MyMapList');
	var table = document.createElement('TABLE');
    table.setAttribute('width', '95%');
    table.setAttribute('border', 0);
    table.setAttribute('align', 'center');
    table.setAttribute('cellPadding', 0);
    table.setAttribute('cellSpacing', 0);
    table.style.cursor = 'pointer';
    table.style.border = '1px #ffffff solid';
    table.setAttribute('id', 'MyMapList_' + (dsMyMap.Tables[0].Rows.length - 1));
    
    table.onclick = function(){
            loadMyMapCoor(this.id.substring(this.id.indexOf('_') + 1, this.id.length));
        };
    table.onmouseover = function(){
            ChangeBorderColor(this, '#ff9933');
        };
    table.onmouseout = function(){
            ChangeBorderColor(this, '#ffffff');
        };
    
    var tBody = document.createElement('TBODY');
    
    var row = document.createElement('TR');
    var cell = document.createElement('TD');
    cell.setAttribute('height', '5px');
    cell.setAttribute('colspan', 3);
    row.appendChild(cell);
    tBody.appendChild(row);
    
    row = document.createElement('TR');
    
    cell = document.createElement('TD');
    cell.setAttribute('width', '11%');
    cell.setAttribute('height', '25px');
    cell.setAttribute('align', 'center');
    cell.setAttribute('valign', 'middle');
    var strHTML = "<img src='images/point_mymap.gif' width='19px' height='18px' />";
    cell.innerHTML = strHTML;
    row.appendChild(cell);
    
    cell = document.createElement('TD');
    cell.setAttribute('width', '82%');
    cell.setAttribute('align', 'left');
    cell.setAttribute('valign', 'middle');
    strHTML = "<span id='MyMapListTitle_" + (dsMyMap.Tables[0].Rows.length - 1) + "' class='blue'>";
    strHTML += "Chưa đặt tên</span><br /><span id='MyMapListDesc_" + (dsMyMap.Tables[0].Rows.length - 1) + "'>&nbsp;&nbsp;&nbsp;</span>";
    cell.innerHTML = strHTML;
    row.appendChild(cell);
    
    cell = document.createElement('TD');
    cell.setAttribute('width', '7%');
    cell.setAttribute('align', 'left');
    cell.setAttribute('valign', 'middle');
    strHTML = "<img onclick='deleteMyMap(" + (dsMyMap.Tables[0].Rows.length - 1) + ")' src='images/delete.gif' width='16' height='16' />";
    cell.innerHTML = strHTML;
    row.appendChild(cell);
    
    tBody.appendChild(row);
    
    row = document.createElement('TR');
    cell = document.createElement('TD');
    cell.setAttribute('height', '5px');
    cell.setAttribute('colspan', 3);
    row.appendChild(cell);
    tBody.appendChild(row);
    
    table.appendChild(tBody);
    divMyMapList.appendChild(table);
    
    if (iMyMapOpening != -1)
        document.getElementById('MyMapListTitle_' + iMyMapOpening).className = 'blue';
    iMyMapOpening = (dsMyMap.Tables[0].Rows.length - 1);
    document.getElementById('MyMapListTitle_' + iMyMapOpening).className = 'green';
    document.getElementById('MyMapList_' + iMyMapOpening).style.backgroundColor = '#ffffcc';
    
    bReadOnly = false;
    if (dsMyMapCoor == null)
    {
        dsMyMapCoor = new Object();
        dsMyMapCoor.Tables = new Array();
        dsMyMapCoor.Tables[0] = new Object();
        dsMyMapCoor.Tables[0].Rows = new Array();
    }
    
    var divMyMapArea = document.getElementById('MyMapArea');
    strHTML = "";
    strHTML += "<div id='MyMapToolbar' style='position:absolute; top:0px; width:100%; background-color:#ffffff; overflow:hidden;'>";
    strHTML += "<table border='0' cellpadding='0' cellspacing='0' bgcolor='#f7f7f7' width='100%' style='height:30px;'>";
    strHTML += "<tr style='border-bottom:1px #cccccc solid;'>";
    strHTML += "<td><img onmouseover=ChangeImageSrc(this,'images/move_over.gif') onmouseout=ChangeImageSrc(this,'images/move.gif') onclick='selectToolbarBtn(this)' src='images/move.gif' id='btnMove' style='margin-right:4px; margin-left:5px;'/></td>";
    strHTML += "<td><img onmouseover=ChangeImageSrc(this,'images/point_over.gif') onmouseout=ChangeImageSrc(this,'images/point.gif') onclick='selectToolbarBtn(this)' src='images/point.gif' id='btnAddPoint' style='margin-right:4px;' /></td>";
    strHTML += "<td><img onmouseover=ChangeImageSrc(this,'images/text_over.gif') onmouseout=ChangeImageSrc(this,'images/text.gif') onclick='selectToolbarBtn(this)' src='images/text.gif' id='btnAddText' style='margin-right:4px;' /></td>";
    strHTML += "<td><img onmouseover=ChangeImageSrc(this,'images/polyline_over.gif') onmouseout=ChangeImageSrc(this,'images/polyline.gif') onclick='selectToolbarBtn(this)' src='images/polyline.gif' id='btnAddPolyline' style='margin-right:4px;' /></td>";
    strHTML += "<td><img onmouseover=ChangeImageSrc(this,'images/polygon_over.gif') onmouseout=ChangeImageSrc(this,'images/polygon.gif') onclick='selectToolbarBtn(this)' src='images/polygon.gif' id='btnAddPolygon' style='margin-right:4px;' /></td>";
    strHTML += "<td width='200' align='right' valign='middle'>";
    strHTML += "<img onclick='cancelEditMyMap()' onmouseover=ChangeBorderColor(this,'#00cc00') onmouseout=ChangeBorderColor(this,'#ca0000') src='images/back.gif' style='cursor:pointer; border:1px #ca0000 solid; margin-right:3px;'/>";
    strHTML += "<img onclick='saveMyMap()' onmouseover=ChangeBorderColor(this,'#00cc00') onmouseout=ChangeBorderColor(this,'#ca0000') src='images/save.gif' id='btnSaveMyMap' style='cursor:pointer; border:1px #ca0000 solid; margin-right:3px;'/>";
    strHTML += "</td>";
    strHTML += "</tr>";
    strHTML += "</table>";
    strHTML += "<table width='100%' border='0' cellspacing='0' cellpadding='0' align='center' style='overflow:hidden; width:95%; margin-bottom:5px; margin-top:5px; border-bottom:1px #efefef solid;'>";
    strHTML += "<tr>";
    strHTML += "<td width='19%' height='20' align='left' valign='middle'>&nbsp;&nbsp;<strong>Tên </strong></td>";
    strHTML += "<td width='81%' height='20' align='left' valign='middle'>";
    strHTML += "<input id='txtMapTitle' onkeydown='enableSaveBtn()' type='text' style='width:250px; border: 1px solid rgb(153, 153, 153);' value='Chưa đặt tên' />";
    strHTML += "</td></tr>";
    strHTML += "<tr>";
    strHTML += "<td width='19%' height='20' align='left' valign='middle'>&nbsp;&nbsp;<strong>Mô tả </strong></td>";
    strHTML += "<td align='left' valign='middle'>";
    //strHTML += "<input id='txtMapDesc' onkeydown='enableSaveBtn()' type='text' style='border: 1px solid rgb(153, 153, 153);' value='' />";
    var nRows = (browserName == 'firefox') ? 2 : 3;
    strHTML += "<textarea rows='" + nRows + "' id='txtMapDesc' onkeydown='enableSaveBtn()' style='width:250px; font-family:Arial; font-size:12px; border: 1px solid rgb(153, 153, 153);' >" + dsMyMap.Tables[0].Rows[iMyMapOpening].Description + "</textarea>";
    strHTML += "</td></tr>";
    strHTML += "</table>";
    strHTML += "</div>";
    strHTML += "<div id='MyMapCoorList' style='position:absolute; width:100%; height:65%; top:82px; background-color:#ffffff; overflow-x:hidden; overflow-y:auto;'></div>";
    divMyMapArea.innerHTML = strHTML;
    resizeMyMapDiv();
    selectToolbarBtn(document.getElementById('btnMove'));
    disableSaveBtn();
};

function createNewMapCallback(retVal)
{
    if (retVal.error != null)
    {
        alert('Đã có lỗi trong quá trình kết nối đến server. Bạn vui lòng nhấn F5 để refresh lại trang web.');
        hideBusyDiv();
        return;
    }
    var arrResponse = retVal.value.split('!');
    dsMyMap.Tables[0].Rows[iMyMapOpening].MyMapID = arrResponse[0];
    dsMyMap.Tables[0].Rows[iMyMapOpening].UserID = arrResponse[1];
    hideBusyDiv();
};

function deleteMyMap(iMyMap)
{
    bHaveDeletedMM = iMyMap;
    var answer = confirm("Bạn có thật sự muốn xóa bản đồ này?");
    if (answer)
    {
        if (iMyMap == iMyMapOpening)
        {
            closeMyMap();
            showMyMapHelp();
        }
        var delMMID = dsMyMap.Tables[0].Rows[iMyMap].MyMapID;
        showBusyDiv('Đang xóa bản đồ');
        vbdmap.DeleteMyMap(delMMID, deleteMyMapCallback);
        var divMyMapList = document.getElementById('MyMapList');
        var tableMyMapList = document.getElementById('MyMapList_' + iMyMap);
        divMyMapList.removeChild(tableMyMapList);
    }
};

function deleteMyMapCoor(iMyMapCoor)
{
    var divMyMapCoorList = document.getElementById('MyMapCoorList');
    var tableMyMapCoorList = document.getElementById('MyMapCoorList_' + iMyMapCoor);
    divMyMapCoorList.removeChild(tableMyMapCoorList);
    
    if (arrMyMapCoorObj[iMyMapCoor].actionType == 'New')
        arrMyMapCoorObj[iMyMapCoor].actionType = 'NoAction';
    else
        arrMyMapCoorObj[iMyMapCoor].actionType = 'Delete';
    map.removeOverlay(arrMyMapCoorObj[iMyMapCoor]);
    clearControlPoint();
    enableSaveBtn();
};

function deleteMyMapCallback(retVal)
{
    if (retVal.error != null)
    {
        alert('Đã có lỗi trong quá trình kết nối đến server. Bạn vui lòng nhấn F5 để refresh lại trang web.');
    }
    hideBusyDiv();
};

function loadMyMap()
{
    if (!checkLogin())
		return;
	if (dsMyMap == null)
	{
	    showBusyDiv('Đang tải bản đồ');
        vbdmap.GetAllMyMap(loadMyMapCallback);
    }
};

function loadMyMapCallback(retVal)
{
    if (retVal.error != null)
    {
        alert('Đã có lỗi trong quá trình kết nối đến server. Bạn vui lòng nhấn F5 để refresh lại trang web.');
        hideBusyDiv();
        return;
    }
    var divMyMapList = document.getElementById('MyMapList');
    dsMyMap = retVal.value;
    var iMM = -1;
    if (dsMyMap != null)
    {
        var strHTML = "";
        for (var i = 0; i < dsMyMap.Tables[0].Rows.length; i++)
        {
            strHTML += "<table width='95%' border='0' align='center' cellpadding='0' cellspacing='0'";
            strHTML += " id='MyMapList_" + i + "' onclick='loadMyMapCoor(" + i + ")' onmouseover=ChangeBorderColor(this,'#ff9933') onmouseout=ChangeBorderColor(this,'#ffffff') style='border:1px #ffffff solid; cursor:pointer;'>";
	        strHTML += "<tr>";
            strHTML += "<td colspan='3' style='height:5px;'></td>";
            strHTML += "</tr>";
            strHTML += "<tr>";
            strHTML += "<td width='11%' height='25' align='center' valign='middle'><img src='images/point_mymap.gif' width='19' height='18' /></td>";
            strHTML += "<td width='82%' align='left' valign='middle'><span id='MyMapListTitle_" + i + "' class='blue'>";
            strHTML += dsMyMap.Tables[0].Rows[i].Title + "</span><br /><span id='MyMapListDesc_" + i + "'>";
            var mapDes = dsMyMap.Tables[0].Rows[i].Description;
            if (mapDes != '')
                strHTML += mapDes;
            else
                strHTML += '&nbsp;&nbsp;&nbsp;';
            strHTML += "</span></td>";
            strHTML += "<td width='7%' align='left' valign='middle'><img onclick='deleteMyMap(" + i + ")' src='images/delete.gif' width='16' height='16' /></td>";
            strHTML += "</tr>";
            strHTML += "<tr>";
            strHTML += "<td colspan='3' style='height:5px;'></td>";
            strHTML += "</tr>";
            strHTML += "</table>";
            
            if (dsMyMap.Tables[0].Rows[i].MyMapID == bSendMyMap)
            {
                iMM = i;
                bSendMyMap = false;
            }
        }
        divMyMapList.innerHTML = strHTML;
    }
    hideBusyDiv();
    if (bSendMyMap == false)
    {
        loadMyMapCoor(iMM);
    }
    else
    {
        var mm = bSendMyMap;
        bSendMyMap = true;
        loadMyMapCoor(mm);
    }
};

function loadMyMapCoor(iMyMap)
{
    if (bSendMyMap)
    {
        showBusyDiv('Đang nạp bản đồ');
        vbdmap.GetAllMyCoorML(iMyMap, loadMyMapCoorCallback);
    }
    else
    {
        if (bHaveDeletedMM == iMyMap)
        {
            bHaveDeletedMM = -1;
            return;
        }
        bHaveDeletedMM = -1;
        
        if (iMyMap == iMyMapOpening)
        {
            closeMyMap();
            showMyMapHelp();
            return;
        }
        
        closeMyMap();
        if (iMyMapOpening != -1)
            document.getElementById('MyMapListTitle_' + iMyMapOpening).className = 'blue';
        iMyMapOpening = iMyMap;
        document.getElementById('MyMapListTitle_' + iMyMapOpening).className = 'blue';
        document.getElementById('MyMapList_' + iMyMapOpening).style.backgroundColor = '#ffffcc';
        showBusyDiv('Đang nạp bản đồ');
        vbdmap.GetAllMyCoor(dsMyMap.Tables[0].Rows[iMyMapOpening].MyMapID, loadMyMapCoorCallback);
    }
};

function loadMyMapCoorCallback(retVal)
{
    if (retVal.error != null)
    {
        alert('Đã có lỗi trong quá trình kết nối đến server. Bạn vui lòng nhấn F5 để refresh lại trang web.');
        hideBusyDiv();
        return;
    }
    bReadOnly = true;
    fnLoadMyMapCoor(retVal);
    bSendMyMap = false;
    hideBusyDiv();
};

function fnLoadMyMapCoor(retVal)
{
    var divMyMapArea = document.getElementById('MyMapArea');
    dsMyMapCoor = retVal.value;
    if (dsMyMapCoor != null)
    {
        var strHTML = "";
        strHTML += "<div id='MyMapToolbar' style='position:absolute; top:0px; width:100%; background-color:#ffffff; overflow:hidden;'>";
        strHTML += "<table border='0' cellpadding='0' cellspacing='0' bgcolor='#f7f7f7' width='100%' style='height:30px;'>";
        if (!bSendMyMap)
        {
            map.setCenter(new VLatLng(dsMyMap.Tables[0].Rows[iMyMapOpening].LastPosY, dsMyMap.Tables[0].Rows[iMyMapOpening].LastPosX), dsMyMap.Tables[0].Rows[iMyMapOpening].ZoomLevel);
            strHTML += "<tr style='border-bottom:1px #cccccc solid;'>";
            strHTML += "<td width='100%' align='right' valign='middle'>";
            strHTML += "<img onclick='editMyMap()' src='images/edit.gif' id='btnEditMyMap' onmouseover=ChangeBorderColor(this,'#00cc00') onmouseout=ChangeBorderColor(this,'#ca0000') style='cursor:pointer; border:1px #ca0000 solid; margin-right:3px;'/>";
            strHTML += "<img onclick='closeMyMap();showMyMapHelp();' src='images/dong1.gif' id='btnCloseMyMap' onmouseover=ChangeBorderColor(this,'#00cc00') onmouseout=ChangeBorderColor(this,'#ca0000') style='cursor:pointer; border:1px #ca0000 solid; margin-right:3px;'/>";
            strHTML += "</td>";
            strHTML += "</tr>";
            strHTML += "</table>";
            strHTML += "<table width='100%' border='0' cellspacing='0' cellpadding='0' align='center' style='overflow:hidden; width:95%; margin-bottom:5px; margin-top:5px; border-bottom:1px #efefef solid;'>";
            strHTML += "<tr>";
            strHTML += "<td width='19%' height='20' align='left' valign='middle'>&nbsp;&nbsp;<strong>Tên </strong></td>";
            strHTML += "<td width='81%' height='20' align='left' valign='middle' class='blue'>" + dsMyMap.Tables[0].Rows[iMyMapOpening].Title + "</td>";
            strHTML += "</tr>";
            strHTML += "<tr>";
            strHTML += "<td width='19%' height='20' align='left' valign='middle'>&nbsp;&nbsp;<strong>Mô tả </strong></td>";
            strHTML += "<td align='left' valign='middle'>" + dsMyMap.Tables[0].Rows[iMyMapOpening].Description + "</td>";
            strHTML += "</tr>";
            
        }
        strHTML += "</table>";
        strHTML += "</div>";
        strHTML += "<div id='MyMapCoorList' style='position:absolute; width:100%; height:65%; top:82px; background-color:#ffffff; overflow-x:hidden; overflow-y:auto;'>";
        
        for (var i = 0; i < dsMyMapCoor.Tables[0].Rows.length; i++)
        {
            /*
                0 - line width || font weight
                1 - line color || text color
                2 - fill color || font size
                3 - line opacity (polyline) || fill opacity (polygon) || font family
                4 - icon source || line opacity
                5 - text
            */
            var strStyle = (dsMyMapCoor.Tables[0].Rows[i].Style).toString().split(';');
            var strCoor = dsMyMapCoor.Tables[0].Rows[i].Coor;
            strHTML += "<table id='MyMapCoorList_" + i + "' onclick='clickedPoint=null;showMyMapInfoWindow(" + i + ", 0)' width='95%' border='0' cellpadding='0' cellspacing='0' style='cursor:pointer;'";
            strHTML += " onmouseover=changeCoorTextStyle(" + i + ") onmouseout=changeCoorTextStyle(" + i + ") style='margin-top:5px; margin-bottom:5px; margin-left:5px;'>";
            strHTML += "<tr>";
            strHTML += "<td width='13%' rowspan='2' align='center' valign='middle'>";
            if (strCoor.indexOf('POINT') >= 0)
            {
                var strCoorValue = strCoor.substring(6, strCoor.indexOf(")"));
			    while (strCoorValue.indexOf(")") != -1)
			        strCoorValue = strCoorValue.replace(")", "");
			    while (strCoorValue.indexOf("(") != -1)
			        strCoorValue = strCoorValue.replace("(", "");
			    while (strCoorValue.indexOf(" ") != -1)
			        strCoorValue = strCoorValue.replace(" ", ",");
                if (strStyle.length >= 6 && strStyle[5].length > 0)
                {
                    strHTML += "<img src='images/icon_text.gif' /></td>";
                    var textStyle = new VTextStyle(parseInt(strStyle[2]), strStyle[0], strStyle[1], strStyle[3]);
                    var text = new VText(strCoorValue, strStyle[5], textStyle);
                    text.type = MYMAPOBJ;
                    text.mmIndex = nMyMapCoorObj;
                    text.actionType = 'NoAction';
                    map.addOverlay(text);
				    arrMyMapCoorObj[nMyMapCoorObj] = text;
				    nMyMapCoorObj++;
				    
				    VEvent.addListener(text, 'dragend', function(textObj){
				            if (textObj.actionType != 'New')
                                textObj.actionType = 'Edit';
                            enableSaveBtn();
                        });
				    
                }
                else
                {
                    strHTML += "<img id='MyMapCoorListImg_" + i + "' src='images/MyMap_icon/" + strStyle[4] + ".gif' width='32px' height='32px' /></td>";
				    var marker = new VMarker(strCoorValue, new VIcon('images/MyMap_icon/' + strStyle[4] + '.gif', new VSize(32, 32)));
				    marker.type = MYMAPOBJ;
				    marker.mmIndex = nMyMapCoorObj;
				    marker.actionType = 'NoAction';
				    map.addOverlay(marker);
				    arrMyMapCoorObj[nMyMapCoorObj] = marker;
				    nMyMapCoorObj++;
				    
				    VEvent.addListener(marker, 'dragend', function(markerObj){
				            if (markerObj.actionType != 'New')
                                markerObj.actionType = 'Edit';
                            enableSaveBtn();
                        });
                }
            }
            else if (strCoor.indexOf('LINESTRING') >= 0)
            {
                strHTML += "<img src='images/icon_polyline.gif' /></td>";
                var strCoorValue = strCoor.substring(11, strCoor.indexOf(")"));
			    while (strCoorValue.indexOf(")") != -1)
			        strCoorValue = strCoorValue.replace(")", "");
			    while (strCoorValue.indexOf("(") != -1)
			        strCoorValue = strCoorValue.replace("(", "");
			    while (strCoorValue.indexOf(" ") != -1)
			        strCoorValue = strCoorValue.replace(" ", ",");
                var polyline = new VPolyline(strCoorValue, strStyle[1], parseFloat(strStyle[0]), strStyle[2], parseFloat(strStyle[3]));
                polyline.type = MYMAPOBJ;
                polyline.mmIndex = nMyMapCoorObj;
                polyline.actionType = 'NoAction';
			    map.addOverlay(polyline);
			    arrMyMapCoorObj[nMyMapCoorObj] = polyline;
			    nMyMapCoorObj++;
			    VEvent.addListener(polyline, 'mouseover', showControlPoint);
            }
            else if (strCoor.indexOf('POLYGON') >= 0)
            {
                strHTML += "<img src='images/icon_polygon.gif' /></td>";
                var strCoorValue = strCoor.substring(9, strCoor.indexOf("))"));
			    while (strCoorValue.indexOf(")") != -1)
			        strCoorValue = strCoorValue.replace(")", "");
			    while (strCoorValue.indexOf("(") != -1)
			        strCoorValue = strCoorValue.replace("(", "");
			    while (strCoorValue.indexOf(" ") != -1)
			        strCoorValue = strCoorValue.replace(" ", ",");
			    var lineOpacity = (strStyle[4] == '') ? 0.5 : strStyle[4];
			    var polygon = new VPolygon(strCoorValue, strStyle[1], parseFloat(strStyle[0]), strStyle[2], lineOpacity, parseFloat(strStyle[3]));
			    polygon.type = MYMAPOBJ;
			    polygon.mmIndex = nMyMapCoorObj;
			    polygon.actionType = 'NoAction';
			    polygon.reductionTol = 0;
			    map.addOverlay(polygon);
			    arrMyMapCoorObj[nMyMapCoorObj] = polygon;
			    nMyMapCoorObj++;
			    VEvent.addListener(polygon, 'mouseover', showControlPoint);
            }
            
            strHTML += "<td width='87%' height='20' align='left' valign='middle'>";
            strHTML += "<span id='MyMapCoorListTitle_" + i + "' style='color:#0066cc; font-weight:bold;' >";
            strHTML += dsMyMapCoor.Tables[0].Rows[i].ObjectTitle + "</span><br /><span id='MyMapCoorListDesc_" + i + "' >";
            var coorDes = dsMyMapCoor.Tables[0].Rows[i].ObjectDesc;
            if (coorDes != '' && coorDes != null)
                strHTML += coorDes;
            else
                strHTML += '&nbsp;&nbsp;&nbsp;';
            strHTML += "</span></td>";
            strHTML += "</tr>";
            strHTML += "</table>";
        }
        
        strHTML += "</div>";
        divMyMapArea.innerHTML = strHTML;
        resizeMyMapDiv();
    }
};

function disableSaveBtn()
{
    var btnSaveMyMap = document.getElementById('btnSaveMyMap');
    if (btnSaveMyMap != null)
    {
        btnSaveMyMap.style.filter = 'alpha(opacity = 40)';
        btnSaveMyMap.style.opacity = 0.4;
        btnSaveMyMap.onmouseover = null;
    }
    bEditMMObj = false;
};

function enableSaveBtn()
{
    var btnSaveMyMap = document.getElementById('btnSaveMyMap');
    if (btnSaveMyMap != null)
    {
        btnSaveMyMap.style.filter = '';
        btnSaveMyMap.style.opacity = 1;
        btnSaveMyMap.onmouseover = function(){ ChangeBorderColor(this, '#f4c201') };
        bEditMMObj = true;
    }
};

function editMyMap()
{
    bReadOnly = false;
    map.closeInfoWindow();
    var divMyMapToolbar = document.getElementById('MyMapToolbar');
    var strHTML = "";
    strHTML += "<table border='0' cellpadding='0' cellspacing='0' bgcolor='#f7f7f7' width='100%' style='height:30px;'>";
    strHTML += "<tr style='border-bottom:1px #cccccc solid;'>";
    strHTML += "<td><img onmouseover=ChangeImageSrc(this,'images/move_over.gif') onmouseout=ChangeImageSrc(this,'images/move.gif') onclick='selectToolbarBtn(this)' src='images/move.gif' id='btnMove' style='margin-right:4px; margin-left:5px;'/></td>";
    strHTML += "<td><img onmouseover=ChangeImageSrc(this,'images/point_over.gif') onmouseout=ChangeImageSrc(this,'images/point.gif') onclick='selectToolbarBtn(this)' src='images/point.gif' id='btnAddPoint' style='margin-right:4px;' /></td>";
    strHTML += "<td><img onmouseover=ChangeImageSrc(this,'images/text_over.gif') onmouseout=ChangeImageSrc(this,'images/text.gif') onclick='selectToolbarBtn(this)' src='images/text.gif' id='btnAddText' style='margin-right:4px;' /></td>";
    strHTML += "<td><img onmouseover=ChangeImageSrc(this,'images/polyline_over.gif') onmouseout=ChangeImageSrc(this,'images/polyline.gif') onclick='selectToolbarBtn(this)' src='images/polyline.gif' id='btnAddPolyline' style='margin-right:4px;' /></td>";
    strHTML += "<td><img onmouseover=ChangeImageSrc(this,'images/polygon_over.gif') onmouseout=ChangeImageSrc(this,'images/polygon.gif') onclick='selectToolbarBtn(this)' src='images/polygon.gif' id='btnAddPolygon' style='margin-right:4px;' /></td>";
    strHTML += "<td width='200' align='right' valign='middle'>";
    strHTML += "<img onclick='cancelEditMyMap()' onmouseover=ChangeBorderColor(this,'#00cc00') onmouseout=ChangeBorderColor(this,'#ca0000') src='images/back.gif' style='cursor:pointer; border:1px #ca0000 solid; margin-right:3px;'/>";
    strHTML += "<img onclick='saveMyMap()' onmouseover=ChangeBorderColor(this,'#00cc00') onmouseout=ChangeBorderColor(this,'#cb0101') src='images/save.gif' id='btnSaveMyMap' style='cursor:pointer; border:1px #cb0101 solid; margin-right:3px;'/>";
    strHTML += "</td>";
    strHTML += "</tr>";
    strHTML += "</table>";
    strHTML += "<table width='100%' border='0' cellspacing='0' cellpadding='0' align='center' style='overflow:hidden; width:95%; margin-bottom:5px; margin-top:5px; border-bottom:1px #efefef solid;'>";
    strHTML += "<tr>";
    strHTML += "<td width='19%' height='20' align='left' valign='middle'>&nbsp;&nbsp;<strong>Tên </strong></td>";
    strHTML += "<td width='81%' height='20' align='left' valign='middle'>";
    strHTML += "<input id='txtMapTitle' onkeydown='enableSaveBtn()' type='text' style='width:250px; border: 1px solid rgb(153, 153, 153);' value='" + dsMyMap.Tables[0].Rows[iMyMapOpening].Title + "' />";
    strHTML += "</td></tr>";
    strHTML += "<tr>";
    strHTML += "<td width='19%' height='20' align='left' valign='middle'>&nbsp;&nbsp;<strong>Mô tả </strong></td>";
    strHTML += "<td align='left' valign='middle'>";
    //strHTML += "<input id='txtMapDesc' onkeydown='enableSaveBtn()' type='text' style='border: 1px solid rgb(153, 153, 153);' value='" + dsMyMap.Tables[0].Rows[iMyMapOpening].Description + "' />";
    var nRows = (browserName == 'firefox') ? 2 : 3;
    strHTML += "<textarea rows='" + nRows + "' id='txtMapDesc' onkeydown='enableSaveBtn()' style='width:250px; font-family:Arial; font-size:12px; border: 1px solid rgb(153, 153, 153);' >" + dsMyMap.Tables[0].Rows[iMyMapOpening].Description + "</textarea>";
    strHTML += "</td></tr>";
    strHTML += "</table>";
    divMyMapToolbar.innerHTML = strHTML;
    
    disableSaveBtn();
    selectToolbarBtn(document.getElementById('btnMove'));
    
    for (var i = 0; i < nMyMapCoorObj; i++)
        if (arrMyMapCoorObj[i].vType() == 'VMarker' || arrMyMapCoorObj[i].vType() == 'VText')
            arrMyMapCoorObj[i].enableDragging();
    
    resizeMyMapDiv();
};

function cancelEditMyMap()
{
    selTbrButton = null;
    bReadOnly = true;
    map.closeInfoWindow();
    clearControlPoint();
    var divMyMapToolbar = document.getElementById('MyMapToolbar');
    var strHTML = "";
    strHTML += "<table border='0' cellpadding='0' cellspacing='0' bgcolor='#f7f7f7' width='100%' style='height:30px;'>";
    strHTML += "<tr style='border-bottom:1px #cccccc solid;'>";
    strHTML += "<td width='100%' align='right' valign='middle'>";
    strHTML += "<img onclick='editMyMap()' src='images/edit.gif' id='btnEditMyMap' onmouseover=ChangeBorderColor(this,'#00cc00') onmouseout=ChangeBorderColor(this,'#cb0101') style='cursor:pointer; border:1px #cb0101 solid; margin-right:3px;'/>";
    strHTML += "<img onclick='closeMyMap();showMyMapHelp();' src='images/dong1.gif' id='btnCloseMyMap' onmouseover=ChangeBorderColor(this,'#00cc00') onmouseout=ChangeBorderColor(this,'#cb0101') style='cursor:pointer; border:1px #cb0101 solid; margin-right:3px;'/>";
    strHTML += "</td>";
    strHTML += "</tr>";
    strHTML += "</table>";
    strHTML += "<table width='100%' border='0' cellspacing='0' cellpadding='0' align='center' style='overflow:hidden; width:95%; margin-bottom:5px; margin-top:5px; border-bottom:1px #efefef solid;'>";
    strHTML += "<tr>";
    strHTML += "<td width='19%' height='20' align='left' valign='middle'>&nbsp;&nbsp;<strong>Tên </strong></td>";
    strHTML += "<td width='81%' height='20' align='left' valign='middle' class='blue'>" + dsMyMap.Tables[0].Rows[iMyMapOpening].Title + "</td>";
    strHTML += "</tr>";
    strHTML += "<tr>";
    strHTML += "<td width='19%' height='20' align='left' valign='middle'>&nbsp;&nbsp;<strong>Mô tả </strong></td>";
    strHTML += "<td align='left' valign='middle'>" + dsMyMap.Tables[0].Rows[iMyMapOpening].Description + "</td>";
    strHTML += "</tr>";
    strHTML += "</table>";
    divMyMapToolbar.innerHTML = strHTML;
    
    for (var i = 0; i < nMyMapCoorObj; i++)
        if (arrMyMapCoorObj[i].vType() == 'VMarker' || arrMyMapCoorObj[i].vType() == 'VText')
            arrMyMapCoorObj[i].disableDragging();
    resizeMyMapDiv();
};

function saveMyMap()
{
    if (!bEditMMObj) return;
    showBusyDiv('Đang lưu bản đồ');
    var arrNewObj = new Array();
    var arrEditObj = new Array();
    var arrDeleteObj = new Array();
    for (var i = 0; i < nMyMapCoorObj; i++)
    {
        if (arrMyMapCoorObj[i].actionType != 'NoAction')
        {
            var strCoor = ''
            if (arrMyMapCoorObj[i].actionType != 'Delete')
            {
                if (arrMyMapCoorObj[i].vType() == 'VMarker' || arrMyMapCoorObj[i].vType() == 'VText')
                {
	                var latlng = arrMyMapCoorObj[i].getLatLng();
	                strCoor = 'POINT(' + latlng.longitude + ' ' + latlng.latitude + ')';
                }
                else if (arrMyMapCoorObj[i].vType() == 'VPolyline')
                {
	                var arrLatLngs = arrMyMapCoorObj[i].getLatLngs();
	                strCoor = 'LINESTRING(';
	                for (var j = 0; j < arrLatLngs.length; j++)
	                {
		                strCoor += arrLatLngs[j].longitude + ' ' + arrLatLngs[j].latitude;
		                if (j < arrLatLngs.length - 1)
			                strCoor += ',';
	                }
	                strCoor += ')';
                }
                else if (arrMyMapCoorObj[i].vType() == 'VPolygon')
                {
	                var arrLatLngs = arrMyMapCoorObj[i].getLatLngs();
	                strCoor = 'POLYGON((';
	                for (var j = 0; j < arrLatLngs.length; j++)
	                {
		                strCoor += arrLatLngs[j].longitude + ' ' + arrLatLngs[j].latitude;
		                if (j < arrLatLngs.length - 1)
			                strCoor += ',';
	                }
	                strCoor += '))';
                }
            }
            
            var dtRow = dsMyMapCoor.Tables[0].Rows[i];
            var oID = (dtRow.MyMapCoorID != '') ? dtRow.MyMapCoorID : 'null';
            var oTitle = (dtRow.ObjectTitle != '') ? dtRow.ObjectTitle : 'null';
            var oDesc = (dtRow.ObjectDesc != '') ? dtRow.ObjectDesc : 'null';
            var oCoor = (strCoor != '') ? strCoor : 'null';
            var oStyle = (dtRow.Style != '') ? dtRow.Style : 'null';
            
            
            if (arrMyMapCoorObj[i].actionType == 'New')
                arrNewObj[arrNewObj.length] = oTitle + '!' + oDesc + '!' + oCoor + '!' + oStyle;
            else if (arrMyMapCoorObj[i].actionType == 'Edit')
                arrEditObj[arrEditObj.length] = oID + '!' + oTitle + '!' + oDesc + '!' + oCoor + '!' + oStyle;
            else if (arrMyMapCoorObj[i].actionType == 'Delete')
                arrDeleteObj[arrDeleteObj.length] = oID;
        }
    }
    var strNewObj = arrNewObj.join('!!');
    var strEditObj = arrEditObj.join('!!');
    var strDeleteObj = arrDeleteObj.join('!!');
    var dtRow = dsMyMap.Tables[0].Rows[iMyMapOpening];
    var cp = map.getCenter();
    
    var mapTitle = document.getElementById('txtMapTitle').value;
    var mapDesc = document.getElementById('txtMapDesc').value;
    var strMM = dtRow.MyMapID + '!!' + mapTitle + '!!' + mapDesc + '!!' + map.getLevel() + '!!' + cp.longitude + '!!' + cp.latitude;
    vbdmap.SaveMyMap(strMM, strNewObj, strEditObj, strDeleteObj, saveMyMapCallback);
    
    var strTitle = document.getElementById('txtMapTitle').value;
    var strDesc = document.getElementById('txtMapDesc').value;
    dsMyMap.Tables[0].Rows[iMyMapOpening].Title = strTitle;
    dsMyMap.Tables[0].Rows[iMyMapOpening].Description = strDesc;
    dsMyMap.Tables[0].Rows[iMyMapOpening].ZoomLevel = map.getLevel();
	dsMyMap.Tables[0].Rows[iMyMapOpening].LastPosX = cp.longitude;
	dsMyMap.Tables[0].Rows[iMyMapOpening].LastPosY = cp.latitude;

    if (browserName == 'msie')
    {
        document.getElementById('MyMapListTitle_' + iMyMapOpening).innerText = strTitle;
        document.getElementById('MyMapListDesc_' + iMyMapOpening).innerText = strDesc;
    }
    else
    {
        document.getElementById('MyMapListTitle_' + iMyMapOpening).firstChild.nodeValue = strTitle;
        document.getElementById('MyMapListDesc_' + iMyMapOpening).firstChild.nodeValue = strDesc;
    }
};

function saveMyMapCallback(retVal)
{
    if (retVal.error != null)
    {
        alert('Đã có lỗi trong quá trình kết nối đến server. Bạn vui lòng nhấn F5 để refresh lại trang web.');
        hideBusyDiv();
        return;
    }
    if (retVal.value != null)
    {
        var iMM = iMyMapOpening;
        closeMyMap();
        if (iMyMapOpening != -1)
            document.getElementById('MyMapListTitle_' + iMyMapOpening).className = 'blue';
        iMyMapOpening = iMM;
        document.getElementById('MyMapListTitle_' + iMyMapOpening).className = 'green';
        document.getElementById('MyMapList_' + iMyMapOpening).style.backgroundColor = '#ffffcc';
        
        fnLoadMyMapCoor(retVal);
        editMyMap();
    }
    hideBusyDiv();
    if (bWaitingCreateNewMap)
    {
        fnCreateNewMap();
        bWaitingCreateNewMap = false;
    } 
};

function closeMyMap()
{
    clearControlPoint();
    map.closeInfoWindow();
    iMyMapCoorOver = -1;
    for (var i = 0; i < nMyMapCoorObj; i++)
    {
        if (arrMyMapCoorObj[i].actionType != 'Delete')
            map.removeOverlay(arrMyMapCoorObj[i]);
    }
    arrMyMapCoorObj = new Array();
    nMyMapCoorObj = 0;
    dsMyMapCoor = null;
    if (iMyMapOpening != -1)
    {
        document.getElementById('MyMapListTitle_' + iMyMapOpening).className = 'blue';
        document.getElementById('MyMapList_' + iMyMapOpening).style.backgroundColor = '#ffffff';
    }
    iMyMapOpening = -1;
};

function showMyMapHelp()
{
    var divMyMapArea = document.getElementById('MyMapArea');
    var strHTML = '';
    strHTML += "<table align='center' border='0' cellpadding='0' cellspacing='0' style='width:310px; margin-top:5px;'>";
    strHTML += "<tr>";
    strHTML += "<td width='1' height='20' align='center' valign='middle'><img src='vbd_images/icomymap_help.gif' width='32' height='32' /></td>";
    strHTML += "<td height='20' colspan='2' align='left' valign='middle'><span style='font-size:12px; color:#333333; font-weight:bold;'>Hướng dẫn tạo bản đồ của tôi</span></td>";
    strHTML += "</tr>";
    strHTML += "<tr>";
    strHTML += "<td height='65' colspan='3' align='left' valign='top'>";
    strHTML += "<div align='justify'><br/>";
    strHTML += "Click vào thanh công cụ bên trái bản đồ để thêm các điểm, đường, vùng, nhãn, vào bản đồ của bạn.";
    strHTML += "<br/><br/>";
    strHTML += "Nhập thông tin về tên, mô tả của các đối tượng, nhấn nút lưu để lưu lại bản đồ.";
    strHTML += " Bạn cũng có thể thêm, xóa, sửa bản đồ của mình. <br/>";
    strHTML += "</div>";
    strHTML += "</td>";
    strHTML += "</tr>";
    strHTML += "</table>";
    divMyMapArea.innerHTML = strHTML;
};

function saveMyMapCoor()
{
    var strTitle = document.getElementById('txtTitle').value;
    var strDesc = document.getElementById('txtDesc').value;
    dsMyMapCoor.Tables[0].Rows[iMyMapCoorSel].ObjectTitle = strTitle;
    dsMyMapCoor.Tables[0].Rows[iMyMapCoorSel].ObjectDesc = strDesc;
    
    if (browserName == 'msie')
    {
        document.getElementById('MyMapCoorListTitle_' + iMyMapCoorSel).innerText = strTitle;
        document.getElementById('MyMapCoorListDesc_' + iMyMapCoorSel).innerText = strDesc;
    }
    else
    {
        document.getElementById('MyMapCoorListTitle_' + iMyMapCoorSel).firstChild.nodeValue = strTitle;
        document.getElementById('MyMapCoorListDesc_' + iMyMapCoorSel).firstChild.nodeValue = strDesc;
    }
    
    var mmObj = arrMyMapCoorObj[iMyMapCoorSel];
    if (mmObj.actionType != 'New')
        mmObj.actionType = 'Edit';
    if (mmObj.vType() == 'VMarker')
    {
        var iconSrc = document.getElementById('btnShowPro').src;
        iconSrc = iconSrc.substring(iconSrc.lastIndexOf('/') + 1, iconSrc.lastIndexOf('.'));
        dsMyMapCoor.Tables[0].Rows[iMyMapCoorSel].Style = ';;;;' + iconSrc + ';';
        mmObj.setIcon(new VIcon('images/MyMap_icon/' + iconSrc + '.gif', new VSize(32, 32)));
        document.getElementById('MyMapCoorListImg_' + iMyMapCoorSel).src = 'images/MyMap_icon/' + iconSrc + '.gif';
        
        var latlng = mmObj.getLatLng();
        dsMyMapCoor.Tables[0].Rows[iMyMapCoorSel].Coor = 'POINT(' + latlng.longitude + ' ' + latlng.latitude + ')';
    }
    else if (mmObj.vType() == 'VText')
    {
        if (curText != '')
        {
            dsMyMapCoor.Tables[0].Rows[iMyMapCoorSel].Style = curFontWeight + ';' + curFontColor + ';' + curFontSize + ';' + curFontFamily + ';;' + curText;
            var textStyle = new VTextStyle(curFontSize, curFontWeight, curFontColor, curFontFamily);
            mmObj.setText(curText, textStyle);
            
            var latlng = mmObj.getLatLng();
            dsMyMapCoor.Tables[0].Rows[iMyMapCoorSel].Coor = 'POINT(' + latlng.longitude + ' ' + latlng.latitude + ')';
        }
    }
    else if (mmObj.vType() == 'VPolyline')
    {
        if (curLineColor != '')
        {
            dsMyMapCoor.Tables[0].Rows[iMyMapCoorSel].Style = curLineWidth + ';' + curLineColor + ';' + curLineColor + ';' + (parseFloat(curLineOpacity)/100) + ';;';
            mmObj.setStyle(curLineColor, parseFloat(curLineWidth), curLineColor, parseFloat(curLineOpacity)/100);
            
            var arrLatLngs = mmObj.getLatLngs();
            var strLatLngs = 'LINESTRING(';
            for (var i = 0; i < arrLatLngs.length; i++)
            {
                strLatLngs += arrLatLngs[i].longitude + ' ' + arrLatLngs[i].latitude;
                if (i < arrLatLngs.length - 1)
                    strLatLngs += ',';
            }
            strLatLngs += ')';
            dsMyMapCoor.Tables[0].Rows[iMyMapCoorSel].Coor = strLatLngs;
        }
    }
    else if (mmObj.vType() == 'VPolygon')
    {
        if (curLineColor != '')
        {
            dsMyMapCoor.Tables[0].Rows[iMyMapCoorSel].Style = curLineWidth + ';' + curLineColor + ';' + curFillColor + ';' + (parseFloat(curLineOpacity)/100) + ';' + (parseFloat(curFillOpacity)/100) + ';';
            mmObj.setStyle(curLineColor, parseFloat(curLineWidth), curFillColor, parseFloat(curLineOpacity)/100, parseFloat(curFillOpacity)/100);
            
            var arrLatLngs = mmObj.getLatLngs();
            var strLatLngs = 'POLYGON((';
            for (var i = 0; i < arrLatLngs.length; i++)
            {
                strLatLngs += arrLatLngs[i].longitude + ' ' + arrLatLngs[i].latitude;
                if (i < arrLatLngs.length - 1)
                    strLatLngs += ',';
            }
            strLatLngs += '))';
            dsMyMapCoor.Tables[0].Rows[iMyMapCoorSel].Coor = strLatLngs;
        }
    }
    map.closeInfoWindow();
};

function showMyMapInfoWindow(mmIndex, caller)
{
    changeCoorBkColor(iMyMapCoorSel, false);
    changeCoorBkColor(mmIndex, true);
    iMyMapCoorSel = mmIndex;
    var mmObj = arrMyMapCoorObj[mmIndex];
    var strStyle = (dsMyMapCoor.Tables[0].Rows[mmIndex].Style).toString().split(';');
    var strHTML = '';
    if (bReadOnly)
    {
        strHTML += "<table><tr><td  align='center' colspan='2'><span style='color:#0066cc; font-weight:bold;'>Thông tin địa điểm</span></td></tr>";
        strHTML += "<tr><td width='20%' align='left'><span class='blue'>Tên</span></td>";
        strHTML += "<td width='80%' align='left'>";
        strHTML += dsMyMapCoor.Tables[0].Rows[mmIndex].ObjectTitle + "</td></tr>";
        strHTML += "<tr><td align='left'><span class='blue'>Mô tả</span></td><td align='left'>";
        var coorDes = dsMyMapCoor.Tables[0].Rows[mmIndex].ObjectDesc;
        if (coorDes != '')
            strHTML += coorDes;
        else
            strHTML += '&nbsp;&nbsp;&nbsp;';
        strHTML += "</td></tr></table>";
    }
    else
    {
        var objIcon = '';
        var objTooltip = 'Thay đổi thuộc tính';
        if (mmObj.vType() == 'VMarker')
        {
            if (curIcon == '')
                objIcon = 'mymap_icon/' + strStyle[4];
            else
                objIcon = 'mymap_icon/' + curIcon;
            objTooltip = 'Chọn biểu tượng';
        }
        else if (mmObj.vType() == 'VText')
        {
            objIcon = 'icon_text';
        }
        else if (mmObj.vType() == 'VPolyline')
        {
            objIcon = 'icon_polyline';
        }
        else if (mmObj.vType() == 'VPolygon')
        {
            objIcon = 'icon_polygon';
        }
        
        var strWindowTitle;
        if (bCreateNewMMObj)
            strWindowTitle = 'Tạo mới địa điểm';
        else
            strWindowTitle = 'Cập nhật địa điểm';
        
        strHTML += "<table border='0' cellspacing='0' cellpadding='0' style='width:280px; height:200px; background-color:#FFFFFF;'>";
        strHTML += "<tr>";
        strHTML += "<td width='220' align='left' valign='middle' style='height:32px;'><img src='images/spacer.gif' width='2' height='25' align='texttop' /><span style='color:#0066cc; font-size:12px; font-weight:bold;'>" + strWindowTitle + "</span></td>";
        strHTML += "<td width='60' style='height:32px;'><span style='float:none; width:32px; height:32px;'>";
        strHTML += "<img id='btnShowPro' src='images/" + objIcon + ".gif' style='cursor:pointer;' alt='" + objTooltip + "'/></span></td>";
        strHTML += "</tr>";
        strHTML += "<tr>";
        strHTML += "<td colspan='2' align='left' valign='top'>";
        
        strHTML += "<b>&nbsp;Tên</b>";
        strHTML += "<input id='txtTitle' type='text' value='";
        if (curTitle == '')
            strHTML += dsMyMapCoor.Tables[0].Rows[mmIndex].ObjectTitle;
        else
            strHTML += curTitle;
        strHTML += "' style='font-family:Arial; width:236px; margin-left:6px; border:1px #999999 solid; ' />";
        strHTML += "<br /><br />";
        strHTML += "<b>&nbsp;Mô tả</b><br />";
        strHTML += "<textarea id='txtDesc' name='' cols='' rows='' style='font-family:Arial; font-size:12px; width: 266px; height:70px; margin-left:5px; margin-top:3px; border:1px #999999 solid; '>";
        if (curDesc == '')
            strHTML += dsMyMapCoor.Tables[0].Rows[mmIndex].ObjectDesc;
        else
            strHTML += curDesc;
        strHTML += "</textarea>";
        strHTML += "<img align='right' onclick='saveMyMapCoor()' onmouseover=ChangeBorderColor(this,'#00cc00') onmouseout=ChangeBorderColor(this,'#cb0101') src='images/dongy.gif' id='btnSaveMyMapCoor' style='cursor:pointer; border:1px #cb0101 solid;";
        
        if (browserName == 'msie')
            strHTML += " margin-right:4px; margin-top:12px;'/>";
        else
            strHTML += " margin-right:7px; margin-top:14px;'/>";
        
        strHTML += "<img align='right' onclick='map.closeInfoWindow()' onmouseover=ChangeBorderColor(this,'#00cc00') onmouseout=ChangeBorderColor(this,'#cb0101') src='images/cancel.gif' style='cursor:pointer; border:1px #cb0101 solid; margin-right:4px;";
        
        if (browserName == 'msie')
            strHTML += " margin-top:12px; '/>";
        else
            strHTML += " margin-top:14px; '/>";
        
        strHTML += "</td>";
        strHTML += "</tr>";
        strHTML += "</table>";
    }
    if (caller == 0 || clickedPoint == null)
    {
        mmObj.openInfoWindow(strHTML);
    }
    else
    {
        if (mmObj.vType() == 'VMarker' || mmObj.vType() == 'VText')
            mmObj.openInfoWindow(strHTML);
        else
            map.openInfoWindow(clickedPoint, strHTML);
    }
    if (!bReadOnly)
        document.getElementById('btnShowPro').onclick = function(){
                curTitle = document.getElementById('txtTitle').value;
                curDesc = document.getElementById('txtDesc').value;
                showMyMapProInfoWindow();
            };
};

function showMyMapProInfoWindow()
{
    //food-5.gif, heart_4.gif, movie.gif, moto.gif, school.gif, sport.gif, star-4.gif
    
    var mmObj = arrMyMapCoorObj[iMyMapCoorSel];
    var strStyle = (dsMyMapCoor.Tables[0].Rows[iMyMapCoorSel].Style).toString().split(';');
    if (mmObj.vType() == 'VMarker')
    {
        var strHTML = '';
        strHTML += "<table border='0' cellspacing='0' cellpadding='0' style='width:280px; height:200px; background-color:#FFFFFF;'>";
        strHTML += "<tr>";
        strHTML += "<td onclick='showMyMapInfoWindow(" + iMyMapCoorSel + ", 0)' width='280px' align='left' valign='middle' style='height:32px;'><img src='images/backpage.gif' align='absmiddle' style='cursor:pointer;' /><a style='color:#999999; font-size:11px;font-family:Verdana;cursor:pointer;' onmouseover=ChangeTextColor(this,'#558800') onmouseout=ChangeTextColor(this,'#999999')>Quay lại</a></td>";
        strHTML += "</tr>";
        strHTML += "<tr>";
        strHTML += "<td align='left' valign='top'>";
        strHTML += "<div style='cursor:pointer; float:left; width:280px;height:155px; margin-top:2px; overflow:auto; background-color:#ffffff;'>";
        
        for (var i = 0; i < 7; i++)
            for (var j = 0; j < 7; j++)
            {
                var iconSrc = '';
                if (curIcon == '')
                    iconSrc = strStyle[4] + '.gif';
                else
                    iconSrc = curIcon + '.gif';
                if (iconArr[i][j] == (iconSrc))
                    strHTML += "<img width='32px' height='32px' style='border:1px #0066cc solid;' onclick='chooseIcon(this)' src='images/mymap_icon/" + iconArr[i][j] + "'/> ";
                else
                    strHTML += "<img width='32px' height='32px' style='border:1px #ffffff solid;' onclick='chooseIcon(this)' onmouseover='changeMarkerIconStyle(this)' onmouseout='changeMarkerIconStyle(this)' src='images/mymap_icon/" + iconArr[i][j] + "'/> ";
            }
        
        strHTML += "</div></td></tr>";
        strHTML += "</table>";
        mmObj.openInfoWindow(strHTML);
    }
    else if (mmObj.vType() == 'VText')
    {
        var strHTML = '';
        var strVal = '';
        strHTML += "<table border='0' cellspacing='0' cellpadding='0' style='width:280px; height:200px; background-color:#FFFFFF;'>";
        strHTML += "<tr>";
        strHTML += "<td onclick='showMyMapInfoWindow(" + iMyMapCoorSel + ", 0)' width='280px' align='left' valign='middle' style='height:20px;'><img src='images/backpage.gif' align='absmiddle' style='cursor:pointer;' /><a style='color:#999999; font-size:11px;font-family:Verdana;cursor:pointer;' onmouseover=ChangeTextColor(this,'#558800') onmouseout=ChangeTextColor(this,'#999999')>Quay lại</a></td>";
        strHTML += "</tr>";
        strHTML += "<tr>";
        strHTML += "<td align='left' valign='top'>";
        strHTML += "<table width='100%'>";
        strHTML += "<tr>";
        strHTML += "<td><b>&nbsp;Chuỗi hiển thị</b></td>";
        strVal = (curText == '') ? strStyle[5] : curText;
        strHTML += "<td colspan='3'><input id='txtText' onblur='changeSampleText()' onkeyup='changeSampleText()' type='text' value='" + strVal + "' style='font-family:Arial; width:167px; border:1px #999999 solid; ' /></td>";
        strHTML += "</tr>";
        strHTML += "<tr>";
        strHTML += "<td><b>&nbsp;Phông chữ</b></td>";
        strHTML += "<td colspan='3'>";
        strVal = (curFontFamily == '') ? strStyle[3] : curFontFamily;
        strHTML += getFontListHTMLString(strVal);
        strHTML += "</td>";
        strHTML += "</tr>";
        strHTML += "<tr>";
        strHTML += "<td><b>&nbsp;Kiểu chữ</b></td>";
        strHTML += "<td colspan='3'>";
        strVal = (curFontWeight == '') ? strStyle[0] : curFontWeight;
        strHTML += getWeightListHTMLString(strVal);
        strHTML += "</td>";
        strHTML += "</tr>";
        strHTML += "<tr>";
        strHTML += "<td><b>&nbsp;Cỡ chữ&nbsp;</b></td>";
        if (browserName == 'msie')
            strHTML += "<td>";
        else
            strHTML += "<td width='137'>";
        strVal = (curFontSize == '') ? strStyle[2] : curFontSize;
        strHTML += getSizeListHTMLString(strVal);
        if (browserName == 'msie')
            strHTML += "<b>&nbsp;&nbsp;&nbsp;&nbsp;Màu chữ&nbsp;&nbsp;</b>";
        else
            strHTML += "<b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Màu chữ</b>";
            
        strHTML += "</td><td colspan='2' valign='center'>";
        strVal = (curFontColor == '') ? strStyle[1] : curFontColor;
        strHTML += "<div id='divTextColor' onclick=showColorChosing(event,'divTextColor') valign='middle' style='background:" + strVal + "; position:relative; width:26px; height:18px; BORDER: #558800 1px solid; vertical-align:middle; cursor:pointer;'></div>";
        strHTML += "</td>";
        strHTML += "</tr>";
        strHTML += "<tr>";
        strHTML += "<td height='40' colspan='4' align='center'>";
        strHTML += "<a class='a1' id='textSample' align='absmiddle'>Sample Text</a>";
        strHTML += "</td>";
        strHTML += "</tr>";
        strHTML += "<tr>";
        strHTML += "<td colspan='4'>";
        strHTML += "<img align='right' onclick='saveTextPro()' onmouseover=ChangeBorderColor(this,'#f4c201') onmouseout=ChangeBorderColor(this,'#83c327') src='images/dongy.gif' id='btnSaveTextPro' style='cursor:pointer; border:1px #83c327 solid;";
        if (browserName == 'msie')
            strHTML += " margin-right:1px; margin-top:3px;'/>";
        else
            strHTML += " margin-right:4px; margin-top:9px;'/>";
        strHTML += "</td>";
        strHTML += "</tr>";
        strHTML += "</table>";
        strHTML += "</td>";
        strHTML += "</tr>";
        strHTML += "</table>";
        mmObj.openInfoWindow(strHTML);
        changeSampleText();
    }
    else if (mmObj.vType() == 'VPolyline')
    {
        var strHTML = '';
        strHTML += "<table border='0' cellspacing='0' cellpadding='0' style='width:280px; height:200px; background-color:#FFFFFF;'>";
        strHTML += "<tr>";
        strHTML += "<td onclick='showMyMapInfoWindow(" + iMyMapCoorSel + ", 1)' width='280px' align='left' valign='middle' style='height:40px;'><img src='images/backpage.gif' align='absmiddle' style='cursor:pointer;' /><a style='color:#999999; font-size:11px;font-family:Verdana;cursor:pointer;' onmouseover=ChangeTextColor(this,'#558800') onmouseout=ChangeTextColor(this,'#999999')>Quay lại</a></td>";
        strHTML += "</tr>";
        strHTML += "<tr>";
        strHTML += "<td align='left' valign='top'>";
        strHTML += "<table width='100%'>";
        strHTML += "<tr>";
        strHTML += "<td><b>&nbsp;Màu đường</b></td>";
        strHTML += "<td><div id='divLineColor' onclick=showColorChosing(event,'divLineColor') valign='middle' style='background:" + strStyle[1] + "; position:relative; width:26px; height:18px; BORDER: #558800 1px solid; vertical-align:middle; cursor:pointer;'></div></td>";
        strHTML += "</tr>";
        strHTML += "<tr>";
        strHTML += "<td><b>&nbsp;Độ rộng đường</b></td>";
        strHTML += "<td><input type='text' id='txtLineWidth' value='" + strStyle[0] + "' style='text-align:right; font-family:Arial; width:163px; border:1px #999999 solid; ' /></td>";
        strHTML += "</tr>";
        strHTML += "<tr>";
        strHTML += "<td><b>&nbsp;Độ mờ đường</b></td>";
        strHTML += "<td><input type='text' id='txtLineOpacity' value='" + (parseFloat(strStyle[3]) * 100) + "' style='text-align:right; font-family:Arial; width:163px; border:1px #999999 solid; ' /></td>";
        strHTML += "</tr>";
        strHTML += "<tr>";
        strHTML += "<td colspan='2'>";
        strHTML += "<img align='right' onclick='savePolylinePro()' onmouseover=ChangeBorderColor(this,'#f4c201') onmouseout=ChangeBorderColor(this,'#83c327') src='images/dongy.gif' id='btnSavePolylinePro' style='cursor:pointer; border:1px #83c327 solid;";
        if (browserName == 'msie')
            strHTML += " margin-right:1px; margin-top:52px;'/>";
        else
            strHTML += " margin-right:4px; margin-top:53px;'/>";
        strHTML += "</td>";
        strHTML += "</tr>";
        strHTML += "</table>";
        strHTML += "</td>";
        strHTML += "</tr>";
        strHTML += "</table>";
        if (clickedPoint != null)
            map.openInfoWindow(clickedPoint, strHTML);
        else
            mmObj.openInfoWindow(strHTML);
    }
    else if (mmObj.vType() == 'VPolygon')
    {
        var strHTML = '';
        strHTML += "<table border='0' cellspacing='0' cellpadding='0' style='width:280px; height:200px; background-color:#FFFFFF;'>";
        strHTML += "<tr>";
        strHTML += "<td onclick='showMyMapInfoWindow(" + iMyMapCoorSel + ", 1)' width='280px' align='left' valign='middle' style='height:32px;'><img src='images/backpage.gif' align='absmiddle' style='cursor:pointer;' /><a style='color:#999999; font-size:11px;font-family:Verdana;cursor:pointer;' onmouseover=ChangeTextColor(this,'#558800') onmouseout=ChangeTextColor(this,'#999999')>Quay lại</a></td>";
        strHTML += "</tr>";
        strHTML += "<tr>";
        strHTML += "<td align='left' valign='top'>";
        strHTML += "<table width='100%'>";
        strHTML += "<tr>";
        strHTML += "<td><b>&nbsp;Màu đường</b></td>";
        strHTML += "<td><div id='divLineColor' onclick=showColorChosing(event,'divLineColor') valign='middle' style='background:" + strStyle[1] + "; position:relative; width:26px; height:18px; BORDER: #558800 1px solid; vertical-align:middle; cursor:pointer;'></div></td>";
        strHTML += "</tr>";
        strHTML += "<tr>";
        strHTML += "<td><b>&nbsp;Độ rộng đường</b></td>";
        strHTML += "<td><input id='txtLineWidth' type='text' value='" + strStyle[0] + "' style='text-align:right; font-family:Arial; width:163px; border:1px #999999 solid; ' /></td>";
        strHTML += "</tr>";
        strHTML += "<tr>";
        strHTML += "<td><b>&nbsp;Độ mờ đường</b></td>";
        var lineOpacity = (strStyle[4] == '') ? 50 : parseFloat(strStyle[4]) * 100;
        strHTML += "<td><input id='txtLineOpacity' type='text' value='" + lineOpacity + "' style='text-align:right; font-family:Arial; width:163px; border:1px #999999 solid; ' /></td>";
        strHTML += "</tr>";
        strHTML += "<tr>";
        strHTML += "<td><b>&nbsp;Màu tô</b></td>";
        strHTML += "<td><div id='divFillColor' onclick=showColorChosing(event,'divFillColor') valign='middle' style='background:" + strStyle[2] + "; position:relative; width:26px; height:18px; BORDER: #558800 1px solid; vertical-align:middle; cursor:pointer;'></div></td>";
        strHTML += "</tr>";
        strHTML += "<tr>";
        strHTML += "<td><b>&nbsp;Độ mờ tô</b></td>";
        strHTML += "<td><input id='txtFillOpacity' type='text' value='" + parseFloat(strStyle[3]) * 100 + "' style='text-align:right; font-family:Arial; width:163px; border:1px #999999 solid; ' /></td>";
        strHTML += "</tr>";
        strHTML += "<tr>";
        strHTML += "<td colspan='2'>";
        strHTML += "<img align='right' onclick='savePolygonPro()' onmouseover=ChangeBorderColor(this,'#f4c201') onmouseout=ChangeBorderColor(this,'#83c327') src='images/dongy.gif' id='btnSavePolygonPro' style='cursor:pointer; border:1px #83c327 solid;";
        if (browserName == 'msie')
            strHTML += " margin-right:1px; margin-top:10px;'/>";
        else
            strHTML += " margin-right:4px; margin-top:13px;'/>";
        strHTML += "</td>";
        strHTML += "</tr>";
        strHTML += "</table>";
        strHTML += "</td>";
        strHTML += "</tr>";
        strHTML += "</table>";
        if (clickedPoint != null)
            map.openInfoWindow(clickedPoint, strHTML);
        else
            mmObj.openInfoWindow(strHTML);
    }
};

function showControlPoint(mmObj)
{
    if (!bReadOnly && !bCPDragging)
    {
        if (selTbrButton != null && selTbrButton.id != 'btnMove')
            return;
        clearControlPoint();
        iMyMapCoorOver = mmObj.mmIndex;
        var nLen = (mmObj.vType() == 'VPolyline') ? mmObj.latlngs.length : mmObj.latlngs.length - 1;
        var nLenAP = (mmObj.vType() == 'VPolyline') ? nLen - 1 : nLen;
        for (var i = 0; i < nLen; i++)
        {
            var ic = new VIcon('images/rec.jpg');
    	    ic.iconSize = new VSize(8, 8);
    	    var opts = new VMarkerOptions(ic);
    	    opts.offset = new VSize(4, 4);
            var cp = new VMarker(mmObj.latlngs[i].copy(), opts);
            cp.borderStyle = '1px ' + mmObj.lineColor + ' solid';
            map.addOverlay(cp);
            cp.enableDragging();
            cp.editObjectIndex = mmObj.mmIndex;
            cp.editPointIndex = nControlPoint;
            cp.type = MMCONTROLOBJ;
            arrControlPoint[nControlPoint] = cp;
            nControlPoint++;
            
            if (i < nLenAP)
            {
                var lat = (mmObj.latlngs[i].latitude + mmObj.latlngs[i + 1].latitude) / 2;
                var lng = (mmObj.latlngs[i].longitude + mmObj.latlngs[i + 1].longitude) / 2;
                var addcp = new VMarker(new VLatLng(lat, lng), opts);
                addcp.borderStyle = '1px ' + mmObj.lineColor + ' solid';
                addcp.opacity = 50;
                map.addOverlay(addcp);
                addcp.enableDragging();
                addcp.editObjectIndex = mmObj.mmIndex;
                addcp.addPointIndex = nAPControlPoint;
                addcp.type = MMAPCONTROLOBJ;
                arrAPControlPoint[nAPControlPoint] = addcp;
                nAPControlPoint++;
                
                VEvent.addListener(addcp, 'dragging', function(cpObj){
                        bCPDragging = true;
                        
                        var pt1, pt2, pt3;
                        pt1 = arrMyMapCoorObj[iMyMapCoorOver].latlngs[cpObj.addPointIndex].copy();
                        pt2 = cpObj.getLatLng().copy();
                        pt3 = arrMyMapCoorObj[iMyMapCoorOver].latlngs[cpObj.addPointIndex + 1].copy();
                        
                        if (tempPolyline == null)
                        {
                            var plOpts = new VPolylineOptions(true, false, 'Dot');
                            tempPolyline = new VPolyline([pt1, pt2, pt3], arrMyMapCoorObj[iMyMapCoorOver].lineColor);
                            tempPolyline.opts = plOpts;
                            map.addOverlay(tempPolyline);
                        }
                        else
                        {
                            tempPolyline.setLatLngs([pt1, pt2, pt3]);
                        }
                    });
                
                VEvent.addListener(addcp, 'dragend', function(cpObj){
                        bCPDragging = false;
                        if (tempPolyline != null)
                        {
                            map.removeOverlay(tempPolyline);
                            tempPolyline = null;
                        }
                        var np = cpObj.getLatLng().copy();
                        arrMyMapCoorObj[iMyMapCoorOver].insertPoint(cpObj.addPointIndex, np);
                        if (arrMyMapCoorObj[iMyMapCoorOver].actionType != 'New')
                            arrMyMapCoorObj[iMyMapCoorOver].actionType = 'Edit';
                        enableSaveBtn();
                        clearControlPoint();
                        showControlPoint(mmObj);
                    });
            }
            
            VEvent.addListener(cp, 'dragging', function(cpObj){
                    bCPDragging = true;
                    var nP = arrMyMapCoorObj[iMyMapCoorOver].latlngs.length;
                    var p1, p3;
                    p1 = cpObj.editPointIndex - 1;
                    p3 = cpObj.editPointIndex + 1;
                    
                    var pt1, pt2, pt3;
                    if (p1 != -1)
                        pt1 = arrMyMapCoorObj[iMyMapCoorOver].latlngs[p1].copy();
                    else if (arrMyMapCoorObj[iMyMapCoorOver].vType() == 'VPolygon')
                        pt1 = arrMyMapCoorObj[iMyMapCoorOver].latlngs[nP - 2].copy();
                    
                    pt2 = cpObj.getLatLng().copy();
                    
                    if (p3 != nP)
                        pt3 = arrMyMapCoorObj[iMyMapCoorOver].latlngs[p3].copy();
                    
                    if (tempPolyline == null)
                    {
                        var plOpts = new VPolylineOptions(true, false, 'Dot');
                        if (p1 == -1)
                        {
                            if (arrMyMapCoorObj[iMyMapCoorOver].vType() == 'VPolyline')
                            {
                                tempPolyline = new VPolyline([pt2, pt3], arrMyMapCoorObj[iMyMapCoorOver].lineColor);
                                
                                var lat = (pt2.latitude + pt3.latitude) / 2;
                                var lng = (pt2.longitude + pt3.longitude) / 2;
                                arrAPControlPoint[cpObj.editPointIndex].setPoint(new VLatLng(lat, lng));
                            }
                            else
                            {
                                tempPolyline = new VPolyline([pt1, pt2, pt3], arrMyMapCoorObj[iMyMapCoorOver].lineColor);
                                
                                var lat = (pt1.latitude + pt2.latitude) / 2;
                                var lng = (pt1.longitude + pt2.longitude) / 2;
                                arrAPControlPoint[nAPControlPoint - 1].setPoint(new VLatLng(lat, lng));
                                
                                lat = (pt2.latitude + pt3.latitude) / 2;
                                lng = (pt2.longitude + pt3.longitude) / 2;
                                arrAPControlPoint[cpObj.editPointIndex].setPoint(new VLatLng(lat, lng));
                            }
                        }
                        else if (p3 == nP)
                        {
                            tempPolyline = new VPolyline([pt1, pt2], arrMyMapCoorObj[iMyMapCoorOver].lineColor);
                            
                            var lat = (pt1.latitude + pt2.latitude) / 2;
                            var lng = (pt1.longitude + pt2.longitude) / 2;
                            arrAPControlPoint[p1].setPoint(new VLatLng(lat, lng));
                        }
                        else
                        {
                            tempPolyline = new VPolyline([pt1, pt2, pt3], arrMyMapCoorObj[iMyMapCoorOver].lineColor);
                            
                            var lat = (pt1.latitude + pt2.latitude) / 2;
                            var lng = (pt1.longitude + pt2.longitude) / 2;
                            arrAPControlPoint[p1].setPoint(new VLatLng(lat, lng));
                            
                            lat = (pt2.latitude + pt3.latitude) / 2;
                            lng = (pt2.longitude + pt3.longitude) / 2;
                            arrAPControlPoint[cpObj.editPointIndex].setPoint(new VLatLng(lat, lng));
                        }
                        tempPolyline.opts = plOpts;
                        map.addOverlay(tempPolyline);
                    }
                    else
                    {
                        if (p1 == -1)
                        {
                            if (arrMyMapCoorObj[iMyMapCoorOver].vType() == 'VPolyline')
                            {
                                tempPolyline.setLatLngs([pt2, pt3]);
                                
                                var lat = (pt2.latitude + pt3.latitude) / 2;
                                var lng = (pt2.longitude + pt3.longitude) / 2;
                                arrAPControlPoint[cpObj.editPointIndex].setPoint(new VLatLng(lat, lng));
                            }
                            else
                            {
                                tempPolyline.setLatLngs([pt1, pt2, pt3]);
                                
                                var lat = (pt1.latitude + pt2.latitude) / 2;
                                var lng = (pt1.longitude + pt2.longitude) / 2;
                                arrAPControlPoint[nAPControlPoint - 1].setPoint(new VLatLng(lat, lng));
                                
                                lat = (pt2.latitude + pt3.latitude) / 2;
                                lng = (pt2.longitude + pt3.longitude) / 2;
                                arrAPControlPoint[cpObj.editPointIndex].setPoint(new VLatLng(lat, lng));
                            }
                        }
                        else if (p3 == nP)
                        {
                            tempPolyline.setLatLngs([pt1, pt2]);
                            
                            var lat = (pt1.latitude + pt2.latitude) / 2;
                            var lng = (pt1.longitude + pt2.longitude) / 2;
                            arrAPControlPoint[p1].setPoint(new VLatLng(lat, lng));
                        }
                        else
                        {
                            tempPolyline.setLatLngs([pt1, pt2, pt3]);
                            
                            var lat = (pt1.latitude + pt2.latitude) / 2;
                            var lng = (pt1.longitude + pt2.longitude) / 2;
                            arrAPControlPoint[p1].setPoint(new VLatLng(lat, lng));
                            
                            lat = (pt2.latitude + pt3.latitude) / 2;
                            lng = (pt2.longitude + pt3.longitude) / 2;
                            arrAPControlPoint[cpObj.editPointIndex].setPoint(new VLatLng(lat, lng));
                        }
                    }
                });
            VEvent.addListener(cp, 'dragend', function(cpObj){
                    bCPDragging = false;
                    if (tempPolyline != null)
                    {
                        map.removeOverlay(tempPolyline);
                        tempPolyline = null;
                    }
                    var np = cpObj.getLatLng().copy();
                    arrMyMapCoorObj[iMyMapCoorOver].setVertex(cpObj.editPointIndex, np);
                    if (arrMyMapCoorObj[iMyMapCoorOver].actionType != 'New')
                        arrMyMapCoorObj[iMyMapCoorOver].actionType = 'Edit';
                    enableSaveBtn();
                });
        }
    }
};

function clearControlPoint()
{
    for (var i = 0; i < nControlPoint; i++)
    {
        map.removeOverlay(arrControlPoint[i]);
    }
    arrControlPoint = new Array();
    nControlPoint = 0;
    
    for (var i = 0; i < nAPControlPoint; i++)
    {
        map.removeOverlay(arrAPControlPoint[i]);
    }
    arrAPControlPoint = new Array();
    nAPControlPoint = 0;
};

function chooseIcon(iconObj)
{
    var iconSrc = iconObj.src;
    iconSrc = iconSrc.substring(iconSrc.lastIndexOf('/') + 1, iconSrc.lastIndexOf('.'));
    curIcon = iconSrc;
    showMyMapInfoWindow(iMyMapCoorSel, 0);
};

function saveTextPro()
{
    curText = document.getElementById('txtText').value;
    curFontFamily = document.getElementById('cboFontFamily').value;
    curFontWeight = document.getElementById('cboFontWeight').value;
    curFontSize = document.getElementById('cboFontSize').value;
    var strTextColor = document.getElementById('divTextColor').style.background.toString();
    if (browserName != 'msie')
    {
        if(strTextColor.indexOf(')') > 0)
		    strTextColor = strTextColor.substring(0, strTextColor.indexOf(')')+1);
	    else
		    strTextColor = strTextColor.substring(0, strTextColor.indexOf(' '));
    }
    curFontColor = strTextColor;
    showMyMapInfoWindow(iMyMapCoorSel, 0);
};

function savePolylinePro()
{
    var strLineColor = document.getElementById('divLineColor').style.background.toString();
    if (browserName != 'msie')
    {
        if(strLineColor.indexOf(')') > 0)
		    strLineColor = strLineColor.substring(0, strLineColor.indexOf(')')+1);
	    else
		    strLineColor = strLineColor.substring(0, strLineColor.indexOf(' '));
    }
    curLineColor = strLineColor;
    curLineWidth = document.getElementById('txtLineWidth').value;
    curLineOpacity = document.getElementById('txtLineOpacity').value;
    showMyMapInfoWindow(iMyMapCoorSel, 1);
};

function savePolygonPro()
{
    var strLineColor = document.getElementById('divLineColor').style.background.toString();
    if (browserName != 'msie')
    {
        if(strLineColor.indexOf(')') > 0)
		    strLineColor = strLineColor.substring(0, strLineColor.indexOf(')')+1);
	    else
		    strLineColor = strLineColor.substring(0, strLineColor.indexOf(' '));
    }
    curLineColor = strLineColor;
    curLineWidth = document.getElementById('txtLineWidth').value;
    curLineOpacity = document.getElementById('txtLineOpacity').value;
    var strFillColor = document.getElementById('divFillColor').style.background.toString();
    if (browserName != 'msie')
    {
        if(strFillColor.indexOf(')') > 0)
		    strFillColor = strFillColor.substring(0, strFillColor.indexOf(')')+1);
	    else
		    strFillColor = strFillColor.substring(0, strFillColor.indexOf(' '));
    }
    curFillColor = strFillColor;
    curFillOpacity = document.getElementById('txtFillOpacity').value;
    showMyMapInfoWindow(iMyMapCoorSel, 1);
}

function changeMarkerIconStyle(iconObj)
{
    if (iconObj.style.borderColor == '#ffffff' || iconObj.style.borderLeftColor == 'rgb(255, 255, 255)')
        iconObj.style.border = '1px #ff9933 solid';
    else
        iconObj.style.border = '1px #ffffff solid';
};

function changeCoorBkColor(iMyMapCoor, bOn)
{
    var tableMMC = document.getElementById('MyMapCoorList_' + iMyMapCoor);
    if (tableMMC != undefined)
    {
        if (bOn)
            tableMMC.style.backgroundColor = '#ffffcc';
        else
            tableMMC.style.backgroundColor = '#ffffff';
    }
};

function changeCoorTextStyle(iMyMapCoor)
{
    var spanMMC = document.getElementById('MyMapCoorListTitle_' + iMyMapCoor);
    if (spanMMC != undefined)
    {
        if (spanMMC.style.color == '#0066cc')
            spanMMC.style.color = '#ff0000';
        else
            spanMMC.style.color = '#0066cc';
    }
};

function getFontListHTMLString(sel)
{
    var arrFont = ['Arial', 'Arial Black', 'Arial Narrow', 'Times New Roman', 'Verdana', 'Tahoma', 'Currier New', 'Microsoft Sans Serif', 'Webdings'];
    var strHTML = '';
    var w = (browserName == 'msie') ? 171 : 169;
    strHTML += "<select id='cboFontFamily' onchange='changeSampleText()' style='font-family:Arial; font-size:12px; width:" + w + "px; border:1px #999999 solid;'>";
    for (var i = 0; i < 9; i++)
    {
        strHTML += "<option value='" + arrFont[i] + "'";
        if (sel == arrFont[i])
            strHTML += "selected";
        strHTML += ">" + arrFont[i] + "</option>";
    }
    strHTML += "</select>";
    return strHTML;
};

function getSizeListHTMLString(sel)
{
    var arrSize = [8, 10, 12, 14, 16, 18, 20, 22, 24];
    var strHTML = '';
    var w = (browserName == 'msie') ? 60 : 55;
    strHTML += "<select id='cboFontSize' onchange='changeSampleText()' style='font-family:Arial; font-size:12px; width:" + w + "px; border:1px #999999 solid;'>";
    for (var i = 0; i < 9; i++)
    {
        strHTML += "<option value='" + arrSize[i] + "'";
        if (sel == arrSize[i])
            strHTML += "selected";
        strHTML += ">" + arrSize[i] + "</option>";
    }
    strHTML += "</select>";
    return strHTML;
};

function getWeightListHTMLString(sel)
{
    var arrWeight = ['Thường', 'Đậm'];
    var arrWeightValue = ['Normal', 'Bold'];
    var strHTML = '';
    var w = (browserName == 'msie') ? 171 : 169;
    strHTML += "<select id='cboFontWeight' onchange='changeSampleText()' style='font-family:Arial; font-size:12px; width:" + w + "px; border:1px #999999 solid;'>";
    for (var i = 0; i < 2; i++)
    {
        strHTML += "<option value='" + arrWeightValue[i].toLowerCase() + "'";
        if (sel == arrWeightValue[i].toLowerCase())
            strHTML += "selected";
        strHTML += ">" + arrWeight[i] + "</option>";
    }
    strHTML += "</select>";
    return strHTML;
};

function showColorChosing(e, obj)
{
	var table = document.createElement('TABLE');
	table.setAttribute('width', 100);
	table.setAttribute('cellPadding', 0);
	table.setAttribute('cellSpacing', 0);
	table.setAttribute('border', 1);
	table.setAttribute('borderColor', '#ff9933');
	table.setAttribute('id', 'basic_color_table');
	table.style.backgroundColor = 'white';
	
	var tBody = document.createElement('TBODY');
	table.appendChild(tBody);
	for (var x = 0; x < 8; x++)
	{
		var row = document.createElement('TR');
		for (var y = 0; y < 6; y++)
		{
			var cell = document.createElement('TD');
			cell.style.backgroundColor = colorArr[y][x];
			cell.style.color = colorArr[y][x];
			cell.style.width = 16 + "px";
			cell.style.height = 16 + "px";
			cell.style.borderWidth = "1px";
			cell.style.borderColor = "#ffffff";

			cell.style.borderStyle = "solid";
			cell.setAttribute('id', "basic_color_" + x + "_" + y);
			onClickEvent = 
				function(col, colX, colY) {
					return (
						function (){
							fnOnColorClick(col, colX, colY);
						}
					); 
				} (colorArr[y][x], x, y);
			ondblClickEvent = 
				function(col, colX, colY) {
					return (
						function (){
							fnOnColordblClick(col, colX, colY, obj);
						}
					); 
				} (colorArr[y][x], x, y);
			if (document.all) { //IE4 and up
				cell.attachEvent("onmouseover", onClickEvent);
				cell.attachEvent("onclick", ondblClickEvent);
			} else if (document.layers) {
				cell.addeventlistener("onmouseover", onClickEvent, false);
				cell.addeventlistener("onclick", ondblClickEvent, false);
			} else if (document.getElementById) {
				cell.addEventListener("mouseover", onClickEvent, false);
				cell.addEventListener("click", ondblClickEvent, false);
			} 
			
			var theData = document.createTextNode('.');
			cell.appendChild(theData);
			row.appendChild(cell);
		}
		tBody.appendChild(row);
	}
	
	var divPopup = document.getElementById('colorChosingPopup');
	if (divPopup == null)
	{
		divPopup	=	document.createElement('div');
		divPopup.id	=	'colorChosingPopup';
		document.getElementById(obj).appendChild(divPopup);
		divPopup.style.position	= 'absolute';
		//divPopup.style.width	= '200px';
		//divPopup.style.height	= '200px';
		divPopup.style.zIndex = 200;
		table.style.zIndex = 200;
		divPopup.appendChild(table);
	}
	
    if (browserName == 'msie')
    {
	    divPopup.style.left = event.x - 80;
	    divPopup.style.top = event.y - 90;
	}
	else
	{
	    divPopup.style.left = e.clientX;
	    divPopup.style.top = e.clientY;
	}
};

function fnOnColorClick(color, x, y){
	cell = document.getElementById("basic_color_"+curColElX+"_"+curColElY);
	if(cell != null)
		cell.style.borderColor = "#ffffff";
	
	curColElX = x;
	curColElY = y;
	cell = document.getElementById("basic_color_"+curColElX+"_"+curColElY);
	if(cell != null)
		cell.style.borderColor = "#ff0000";
};

function fnOnColordblClick(color,x,y,obj)
{
	/*cell = document.getElementById("basic_color_"+curColElX+"_"+curColElY);
	cell.style.borderColor = "#ffffff";
	
	curColElX = y;
	curColElY = x;
	cell = document.getElementById("basic_color_"+curColElX+"_"+curColElY);
	cell.style.borderColor = "#ff0000";*/
	
	document.getElementById(obj).style.background = colorArr[y][x];
	if(document.getElementById('id3') != null)
		id3.fillcolor=colorArr[y][x];
	var temp = document.getElementById('colorChosingPopup');
	if (temp != null)
	{
		document.getElementById(obj).removeChild(temp);
	}
	if(document.getElementById('textSample') != null)
	     changeSampleText();
};

function changeSampleText()
{
    var aTextSample = document.getElementById('textSample');
    var strText = document.getElementById('txtText').value;
    if (strText == '')
        strText = ' ';
    if (strText.length > 15)
        strText = strText.substring(0, 16);
    aTextSample.innerHTML = strText;
    aTextSample.style.fontFamily = document.getElementById('cboFontFamily').value;
    aTextSample.style.fontWeight = document.getElementById('cboFontWeight').value;
    aTextSample.style.fontSize = document.getElementById('cboFontSize').value + 'px';
    var strTextColor = document.getElementById('divTextColor').style.background.toString();
    if (browserName != 'msie')
    {
        if(strTextColor.indexOf(')') > 0)
		    strTextColor = strTextColor.substring(0, strTextColor.indexOf(')')+1);
	    else
		    strTextColor = strTextColor.substring(0, strTextColor.indexOf(' '));
    }
    aTextSample.style.color = strTextColor;
};

function selectToolbarBtn(tbrBtn)
{
    clearControlPoint();
    if (tbrBtn == selTbrButton) return;
    if (selTbrButton != null)
    {
        var strSrc = selTbrButton.src;
        strSrc = strSrc.substring(0, strSrc.lastIndexOf('_'));
        selTbrButton.src = strSrc + '.gif';
        selTbrButton.onmouseover = function(){
                var strSrc = this.src;
                if (strSrc.indexOf('_') != -1)
                    strSrc = strSrc.substring(0, strSrc.lastIndexOf('_'));
                else
                    strSrc = strSrc.substring(0, strSrc.lastIndexOf('.'));
                this.src = strSrc + '_over.gif';
            };
        selTbrButton.onmouseout = function(){
                var strSrc = this.src;
                if (strSrc.indexOf('_') != -1)
                    strSrc = strSrc.substring(0, strSrc.lastIndexOf('_'));
                else
                    strSrc = strSrc.substring(0, strSrc.lastIndexOf('.'));
                this.src = strSrc + '.gif';
            };
    }
    
    var strSrc = tbrBtn.src;
    if (strSrc.indexOf('_') != -1)
        strSrc = strSrc.substring(0, strSrc.lastIndexOf('_'));
    else
        strSrc = strSrc.substring(0, strSrc.lastIndexOf('.'));
    strSrc += '_down.gif';
    tbrBtn.src = strSrc;
    tbrBtn.onmouseover = null;
    tbrBtn.onmouseout = null;
    selTbrButton = tbrBtn;
    if (tbrBtn.id != 'btnMove')
        document.getElementById('container').style.cursor = 'pointer';
    else
        document.getElementById('container').style.cursor = "url('images/openhand.cur'),auto";
    map.closeInfoWindow();
};