//POI Auto Map v3.0.0 30May2010 - (c) Gavin Smith 2010 - http://codecanyon.net/item/point-of-interest-poi-auto-map/101599
//Commercial License
//Sign Up for your Google AJAX Key Here: http://code.google.com/apis/ajaxsearch/signup.html
google.load("maps", "2");
google.load("search", "1");
// Map Configuration
var defaultAddress = "Eltham, Victoria";
var defaultHTML = "<strong>Eltham,<br/>Victoria, Australia</strong>";
var defaultZoomLevel = 16; //Larger Number = Higher Zoom 
var infoHTML = "<h4>Instructions</h4><p>Drag the map or enter an address above to view a different area's information. Click on the list of categories to show points of interest on the map. Click on each point to see more detail.</p>";
var overlayControls = true;
var searchControls = true;
var mapDivID = "map";
var categoriesList = "poiList";
//Database Bounds Search Extension
var extendLat = .05;
var extendLng = .005;
//Main Marker Configuration
var mainIconWidth = 43;
var mainIconHeight = 50;
var mainAnchorPointX = 17;
var mainAnchorPointY = 49;
// Icon Configuration
var iconPath = "icons/";
var iconWidth = 32;
var iconHeight = 37;
var anchorPointX = 16;
var anchorPointY = 34; 
/*-------------------------------*/
/*  Do Not edit below this line  */
/*-------------------------------*/
var classAdder;
var markerGroups = "";
var map = null;
var searchCenter;
var addressSet;
var overlayControls;
var wikiLayer;
var photoLayer;
var startAddress;
var directions;
var myPano;
var jsonGroups;
var mapDiv;
var mapLoading;
var ddBoxDiv;
var batchGeoLat = [];
var batchGeoLng = [];
google.setOnLoadCallback(OnLoad);

function OnLoad() {
  mapDiv = document.getElementById(mapDivID)
  map = new GMap2(mapDiv);
  map.enableScrollWheelZoom();
  map.disableDoubleClickZoom();
  setupAddress();
  infoBox();
  map.addControl(new GSmallZoomControl());
  map.addControl(new GMenuMapTypeControl());
  photoLayer = new GLayer("com.panoramio.all");
  wikiLayer = new GLayer("org.wikipedia.en");
  var geocoder = new GClientGeocoder(); //geocoder
  geocoder.getLatLng(
  startAddress, function (point) {
    if (!point) {
      GLog.write(startAddress + " not found");
    } else {
      map.setCenter(point, zoomLevel);
      addressSet = 1;
      searchCenter = point;
      getCategories(1);
      GEvent.addListener(map, "dragend", function () {
        getCategories(0);
      });
      map.addOverlay(createMarker(searchCenter, 0, markerHTML, "pin"));
      addLogo();
    }
  });

}

function setupAddress() {
  if (typeof poiAddress === 'undefined') {
    startAddress = defaultAddress;
  } else {
    startAddress = poiAddress;
  }
  if (typeof poiHTML === 'undefined') {
    markerHTML = defaultHTML;
  } else {
    markerHTML = poiHTML;
  }
  if (typeof poiZoomLevel === 'undefined') {
    zoomLevel = defaultZoomLevel;
  } else {
    zoomLevel = poiZoomLevel;
  }
}

function infoBox() {
  mapLoading = document.createElement('div');
  mapLoading.setAttribute('id', 'mapLoading');
  mapDiv.appendChild(mapLoading);
  centerBox("mapLoading", "map");
  if (infoHTML != "") {
    var infoBoxDiv = document.createElement('div');
    infoBoxDiv.setAttribute('id', 'infoBox');
    mapDiv.appendChild(infoBoxDiv);
    infoBoxDiv.innerHTML = infoHTML;
    infoBoxDiv.style.position = "absolute";
    infoBoxDiv.style.top = (mapDiv.offsetHeight - infoBoxDiv.offsetHeight) + "px";
    var infoBoxClose = document.createElement('a');
    infoBoxClose.setAttribute('id', 'infoBoxClose');
    infoBoxDiv.appendChild(infoBoxClose);
    infoBoxClose.style.position = "absolute";
    infoBoxClose.style.top = "0px";
    infoBoxClose.style.left = (infoBoxDiv.offsetWidth - infoBoxClose.offsetWidth) + "px";
    infoBoxClose.onclick = function() { hideInfoBox() };
  }
  var overlayDiv = document.createElement('div');
  overlayDiv.setAttribute('id', 'overlayControl');
  mapDiv.appendChild(overlayDiv);
  overlayDiv.style.position = "absolute";
  var overlayHTML = "";
  if (overlayControls == true) {
    overlayHTML = overlayHTML + '<a id="wikiLayer" onclick="toggleOverlay(' + "'off', wikiLayer, 'wikiLayer'" + ')" style="cursor:pointer; display: block"></a>';
    overlayHTML = overlayHTML + '<a id="photoLayer" onclick="toggleOverlay(' + "'off', photoLayer, 'photoLayer'" + ')" style="cursor:pointer; display: block"></a>';
    overlayDiv.innerHTML = overlayHTML;
  }
  if (searchControls == true) {
    overlayHTML = overlayHTML + '<form id="searchForm" action="#" onsubmit="findAddress(this.address.value); return false">';
    overlayHTML = overlayHTML + '<input id="searchTxt" type="text" size="20" name="address" value="Enter a City or Address" />';
    overlayHTML = overlayHTML + '<input id="searchButton" type="submit" value="Go" /> </form>';
  }
  overlayDiv.innerHTML = overlayHTML;
}

function createMarker(latlng, index, html, category, icon) {
	if ( icon === undefined ) {
      icon = category;
   }
  if (category == "pin") {
    var defaultIcon = new GIcon(G_DEFAULT_ICON);
    defaultIcon.image = iconPath + category + ".png";
    defaultIcon.shadow = iconPath + category + "-shadow.png";
    defaultIcon.iconSize = new GSize(mainIconWidth, mainIconHeight);
    defaultIcon.shadowSize = new GSize(mainIconWidth, mainIconHeight);
    defaultIcon.iconAnchor = new GPoint(mainAnchorPointX, mainAnchorPointY);
    markerOptions = {
      icon: defaultIcon
    };
    var myHtml = markerHTML;
  } else {
  if (icon == ""){icon = category};
    var defaultIcon = new GIcon(G_DEFAULT_ICON);
    defaultIcon.image = iconPath + icon + ".png";
    defaultIcon.shadow = iconPath + icon + "-shadow.png";
    defaultIcon.iconSize = new GSize(iconWidth, iconHeight);
    defaultIcon.shadowSize = new GSize(iconWidth, iconHeight);
    defaultIcon.iconAnchor = new GPoint(anchorPointX, anchorPointY);
    markerOptions = {
      icon: defaultIcon
    };
    var myHtml = html;
  }
  if (category == "xml") {
    var marker = new GMarker(latlng, markerOptions);
    marker.value = index;
    marker.title = category;
    GEvent.addListener(marker, "click", function () {
      if (latlng) {
        map.setCenter(latlng);
        startAddress = latlng.lat() + "," + latlng.lng();
        map.openInfoWindow(latlng, myHtml);
      }
      markerGroups[category].push(marker);
    });
  } else {
    var marker = new GMarker(latlng, markerOptions);
    marker.value = index;
    marker.title = category;
    markerGroups[category].push(marker);
    GEvent.addListener(marker, "click", function () {
      if (latlng) {
        map.openInfoWindow(latlng, myHtml);
      }
    });
  }
  return marker;
}

function toggleGroup(type) {
  classAdder = document.getElementById(type);
  if (markerGroups[type].length != 0) {
    for (var i = 0; i < markerGroups[type].length; i++) {
      var marker = markerGroups[type][i];
      if (marker.isHidden() == true) {
        classAdder.attributes.getNamedItem("caption").value = "";
        addClass(classAdder, "visibleLayer");
        marker.show();
      } else {
        classAdder.attributes.getNamedItem("caption").value = "hidden";
        removeClass(classAdder, "visibleLayer");
        marker.hide();
      }
    }
  } else {
    mapLoading.style.display = "block";
    doSearch(classAdder.attributes.getNamedItem("title").value, type);
    classAdder.attributes.getNamedItem("caption").value = "";
    addClass(classAdder, "visibleLayer");
  }
}

function doSearch(keyword, type) {
  currentCategory = type;

  if (keyword.substr(0,3) == "db:"){ 
  var bounds = map.getBounds();
  var southWest = bounds.getSouthWest();
  var northEast = bounds.getNorthEast();
  var swLat = southWest.lat();
  var swLng = southWest.lng();
  var neLat = northEast.lat();
  var neLng = northEast.lng();
  var dbCat = keyword.substr(3);
  
  var filename = "db/db.php?cat="+ dbCat + "&swLat="+ swLat + "&swLng="+ swLng + "&neLat="+ neLat + "&neLng="+ neLng + "&extendLat="+ extendLat + "&extendLng="+ extendLng;
	GDownloadUrl(filename, function (data, responseCode) {
    var xml = GXml.parse(data);
    var markers = xml.documentElement.getElementsByTagName("marker");
    var hider = document.getElementById(type).getAttribute("caption");
    if (hider != "hidden") {
	if (markers.length != 0) {
      for (var xmlItem = 0; xmlItem < markers.length; xmlItem++) {
		if (markers[xmlItem].getAttribute("icon") == "" ) {
				var icon = type;
			} else {
				var icon = markers[xmlItem].getAttribute("icon");
			}
        var xmlHTML = createXmlHTML(markers[xmlItem].getAttribute("address"), markers[xmlItem].getAttribute("title"), markers[xmlItem].getAttribute("html"), markers[xmlItem].getAttribute("url"), markers[xmlItem].getAttribute("lat"), markers[xmlItem].getAttribute("lng"));
        var xmlMarker = map.addOverlay(createMarker(new GLatLng(markers[xmlItem].getAttribute("lat"), markers[xmlItem].getAttribute("lng")), xmlItem, xmlHTML, type, icon));
      }
    }
  }
      mapLoading.style.display = "none";
});
  
  } else {

  var searchControl = new google.search.SearchControl();
  var localSearch = new google.search.LocalSearch();
  var options = new google.search.SearcherOptions();
  options.setExpandMode(GSearchControl.EXPAND_MODE_OPEN);
  searchControl.addSearcher(localSearch, options);
  searchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET);
  searchControl.draw(document.getElementById("searchcontrol"));
  searchControl.setSearchCompleteCallback(localSearch, function () {
    var resultcontent = '';
    var results = localSearch.results; // Grab the results array
    var hider = document.getElementById(type).getAttribute("caption");
    if (hider != "hidden") {
      if (results.length != 0) {
        for (var i = 0; i < results.length; i++) {
          var result = results[i];
		    if (typeof result.phoneNumbers != 'undefined') {
				var phoneNumber = result.phoneNumbers[0].number;
			  } else {
				var phoneNumber = "";
			  }
          var latlng = new GLatLng(parseFloat(result.lat), parseFloat(result.lng));
          var resultHTML = createHTML(result.titleNoFormatting, result.url, result.addressLines[0], result.addressLines[1], result.visibleUrl, phoneNumber, result.lat, result.lng);

          var tempMarker = map.addOverlay(createMarker(latlng, i, resultHTML, type));
          if (hider == "hidden") {
            markerGroups[type][i].hide();
          }
        }
      }
    }
    mapLoading.style.display = "none";
  });
  if (addressSet != 1) {
    localSearch.setCenterPoint(startAddress);
  } else {
    localSearch.setCenterPoint(map.getCenter());
  }
  searchControl.execute(keyword);
  }
  return 1;
}

function createHTML(title, url, address1, address2, website, phone, lat, lng) {
  var onClickSVCode = '"' + lat + '","' + lng + '","' + address1 + '","' + address2 + '"';
  var onClickDDCode = '"' + address1 + ' ' + address2 + '"';
  var finalHTML;
  finalHTML = '<div class="gs-localResult gs-result">';
  finalHTML = finalHTML + '<div class="gs-title"><a target="_blank" class="gs-title" href="' + url + '">' + title + '</a></div>';
  finalHTML = finalHTML + '<div class="gs-address">';
  finalHTML = finalHTML + '<div class="gs-street gs-addressLine">' + address1 + '</div>';
  if (address2 != null) {
    finalHTML = finalHTML + '<div class="gs-city gs-addressLine">' + address2 + '</div>'
  };
  finalHTML = finalHTML + '</div>';
  finalHTML = finalHTML + '<div class="gs-phone">Phone: ' + phone + '</div>';
  finalHTML = finalHTML + "<div class='gs-streetview'><a class='gs-sv-link' onclick='showStreetView(" + onClickSVCode + ")' style='cursor: pointer'>Street View</a><a class='gs-dd-link' onclick='showDirections(" + onClickDDCode + ")' style='cursor: pointer'>Driving Directions</a></div>";
  finalHTML = finalHTML + '</div>';
  return finalHTML;
}

function showDirections(toAddress) {
  var ddFrame = document.createElement('div');
  ddFrame.setAttribute('id', 'ddFrame');
  mapDiv.appendChild(ddFrame);
  centerBox("ddFrame", "map");
  ddBoxDiv = document.createElement('div');
  ddBoxDiv.setAttribute('id', 'ddBox');
  ddFrame.appendChild(ddBoxDiv);
  ddBoxDiv.style.position = "absolute";
  var ddBoxClose = document.createElement('a');
  ddBoxClose.setAttribute('id', 'ddBoxClose');
  ddFrame.appendChild(ddBoxClose);
  ddBoxClose.style.position = "absolute";
  ddBoxClose.style.zIndex = "10";
  ddBoxClose.style.top = "0px";
  ddBoxClose.style.left = (ddFrame.offsetWidth - ddBoxClose.offsetWidth - 4) + "px";
  ddBoxClose.onclick = function() { closeDirections() };
  var ddBoxPrint = document.createElement('a');
  ddBoxPrint.setAttribute('id', 'ddBoxPrint');
  ddFrame.appendChild(ddBoxPrint);
  ddBoxPrint.innerHTML = "<span>Print</span>";
  ddBoxPrint.style.position = "absolute";
  ddBoxPrint.style.zIndex = "10";
  ddBoxPrint.style.top = "4px";
  ddBoxPrint.style.left = (ddFrame.offsetWidth - ddBoxClose.offsetWidth - 29) + "px";
  ddBoxPrint.setAttribute("href", "print/print.html?start=" + escape(startAddress) + "&end=" + escape(toAddress));
  ddBoxPrint.setAttribute("target", "_blank");
  directions = new GDirections(map, ddBoxDiv);
  GEvent.addListener(directions, "error", handleDDErrors);
  var loadStr = "from: " + startAddress + " to: " + toAddress;
  directions.load(loadStr);
}

function handleDDErrors() {
  var ddError = "<h4>Unable to retreive driving directions to this location.</h4><a onclick='closeDirections();' style='text-decoration: underline; cursor: pointer; color: blue'>close</a>";
  var ddErrorDiv = document.createElement('div');
  ddErrorDiv.setAttribute('id', 'ddError');
  ddBoxDiv.appendChild(ddErrorDiv);
  ddErrorDiv.innerHTML = ddError;
  ddErrorDiv.style.width = "50%";
  ddErrorDiv.style.marginLeft = "10%";
}


function closeDirections() {
  mapDiv.removeChild(document.getElementById("ddFrame"));
}

function showStreetView(lat, lng, address1, address2) {
  var svFrame = document.createElement('div');
  svFrame.setAttribute('id', 'svFrame');
  mapDiv.appendChild(svFrame);
  centerBox("svFrame", "map");
  var svBoxDiv = document.createElement('div');
  svBoxDiv.setAttribute('id', 'svBox');
  svFrame.appendChild(svBoxDiv);
  svBoxDiv.style.position = "absolute";
  var svBoxClose = document.createElement('a');
  svBoxClose.setAttribute('id', 'svBoxClose');
  svFrame.appendChild(svBoxClose);
  svBoxClose.style.position = "absolute";
  svBoxClose.style.zIndex = "10";
  svBoxClose.style.top = "0px";
  svBoxClose.style.left = (svFrame.offsetWidth - svBoxClose.offsetWidth - 5) + "px";
  svBoxClose.onclick = function() { closeStreetView() };
  var svLatLng = new GLatLng(parseFloat(lat), parseFloat(lng));
  panoramaOptions = {
    latlng: svLatLng
  };
  myPano = new GStreetviewPanorama(document.getElementById("svBox"), panoramaOptions);
  GEvent.addListener(myPano, "error", handleSVError);
}

function closeStreetView() {
  mapDiv.removeChild(document.getElementById("svFrame"));
}

function handleSVError(errorCode) {
  if (errorCode == 600) {
    var svErrorText = "Unable to display Street View image for this location.";
  }
  if (errorCode == 603) {
    var svErrorText = "Unable to display Street View image for this location.";
  }
  var svError = "<h4>" + svErrorText + "</h4><a onclick='closeStreetView();' style='text-decoration: underline; cursor: pointer; color: blue'>close</a>";
  var svErrorDiv = document.createElement('div');
  svErrorDiv.setAttribute('id', 'svError');
  document.getElementById("svBox").appendChild(svErrorDiv);
  svErrorDiv.innerHTML = svError;
  document.getElementById("svBox").style.backgroundImage = "none";
  svErrorDiv.style.width = "50%";
  svErrorDiv.style.marginLeft = "10%";
}

function getCategories(initial) {
  mapLoading.style.display = "block";
  map.clearOverlays();
  markerGroups = null;
  jsonGroups = "";
  var elem = document.getElementById(categoriesList);
  jsonGroups = '{ xml: [], "pin": [] ';
  for (var i = 0; i < elem.childNodes.length; i++) {
    if (elem.childNodes[i].nodeName == "LI") {
      jsonGroups = jsonGroups + ',  "' + elem.childNodes[i].attributes.getNamedItem("id").value + '": [] ';
    }
  }
  jsonGroups = jsonGroups + "}";
  markerGroups = eval('(' + jsonGroups + ')');
  map.addOverlay(createMarker(searchCenter, 0, markerHTML, "pin"));
  resetOverlayControl("wikiLayer");
  resetOverlayControl("photoLayer");
  for (var i = 0; i < elem.childNodes.length; i++) {
    if (elem.childNodes[i].nodeName == "LI") {
      result = doSearch(elem.childNodes[i].attributes.getNamedItem("title").value, elem.childNodes[i].attributes.getNamedItem("id").value);
    }
  }
  if (initial == 1) {
    for (var i = 0; i < elem.childNodes.length; i++) {
      if (elem.childNodes[i].nodeName == "LI") {
        var elemID = elem.childNodes[i].attributes.getNamedItem("id").value;
        if (elemID != "user") {
          elem.childNodes[i].innerHTML = "<a onclick='" + 'toggleGroup("' + elemID + '")' + "'>" + elem.childNodes[i].innerHTML + "</a>";
        } else {
          elem.childNodes[i].innerHTML = '<form id="userPOIForm" action="#" onsubmit="userPOIFind(this.userPOI.value); return false"><input id="userPOITxt" size="20" name="userPOI" value="' + elem.childNodes[i].innerHTML + '" type="text"><input id="userPOIButton" value="Go" type="submit"> </form>';

        }
        if (hasClass(elem.childNodes[i], "hidden") != null) {
          elem.childNodes[i].setAttribute("caption", "hidden");
        } else {
          elem.childNodes[i].setAttribute("caption", "");
        }
        if (elem.childNodes[i].attributes.getNamedItem("caption").value != "hidden") {
          classAdder = document.getElementById(elemID);
          addClass(classAdder, "visibleLayer");
        }
      }
    }
  }
  if (typeof xmlFile === 'undefined') {
    // Do Nothing for now
  } else {
    addXML(xmlFile);
  }
}

function addXML(filename) {
  GDownloadUrl(filename, function (data, responseCode) {
    var xml = GXml.parse(data);
    var markers = xml.documentElement.getElementsByTagName("marker");
    if (markers.length != 0) {
      for (var xmlItem = 0; xmlItem < markers.length; xmlItem++) {
        var xmlHTML = createXmlHTML(markers[xmlItem].getAttribute("address"), markers[xmlItem].getAttribute("title"), markers[xmlItem].getAttribute("html"), markers[xmlItem].getAttribute("url"), markers[xmlItem].getAttribute("lat"), markers[xmlItem].getAttribute("lng"));
        var xmlMarker = map.addOverlay(createMarker(new GLatLng(markers[xmlItem].getAttribute("lat"), markers[xmlItem].getAttribute("lng")), xmlItem, xmlHTML, "xml"));
      }
    }
  });
}

function createXmlHTML(address, title, html, url, lat, lng) {
  var onClickSVCode = '"' + lat + '","' + lng + '","' + address + '"';
  var onClickDDCode = '"' + address + '"';
  var finalHTML;
  finalHTML = '<div class="gs-localResult gs-result">';
  finalHTML = finalHTML + '<div class="gs-title"><a target="_blank" class="gs-title" href="' + url + '">' + title + '</a></div>';
  finalHTML = finalHTML + '<div class="gs-customHTML">' + html;
  finalHTML = finalHTML + '</div>';
//  finalHTML = finalHTML + "<div class='gs-streetview'><a class='gs-sv-link' onclick='showStreetView(" + onClickSVCode + ")' style='cursor: pointer'>Street View</a></div>";
    finalHTML = finalHTML + "<div class='gs-streetview'><a class='gs-sv-link' onclick='showStreetView(" + onClickSVCode + ")' style='cursor: pointer'>Street View</a><a class='gs-dd-link' onclick='showDirections(" + onClickDDCode + ")' style='cursor: pointer'>Driving Directions</a></div>";
  finalHTML = finalHTML + '</div>';
  return finalHTML;
}


function userPOIFind(searchText) {
  document.getElementById("user").setAttribute("title", searchText);
  getCategories(0);
}

function centerBox(child, parent) {
  var h = document.getElementById(child).offsetHeight;
  var a = Math.round(parseInt(document.getElementById(parent).offsetHeight) / 2);
  var b = Math.round(h / 2);
  var c = (a - b) + "px";
  document.getElementById(child).style.top = c;
  var w = document.getElementById(child).offsetWidth;
  var x = Math.round(parseInt(document.getElementById(parent).offsetWidth) / 2);
  var y = Math.round(w / 2);
  var z = x - y;
  document.getElementById(child).style.left = z + "px";
}


function findAddress(address, HTML) {
  if (HTML === undefined) {
    HTML = "<strong>" + address + "</strong>";
  }
  markerHTML = HTML;
  var geocoder = new GClientGeocoder(); //geocoder
  if (geocoder) {
    geocoder.getLatLng(
    address, function (point) {
      if (!point) {
        alert(address + " not found");
      } else {
        map.setCenter(point, zoomLevel);
        addressSet = 1;
        searchCenter = point;
        startAddress = address;
        getCategories(0);
        GEvent.addListener(map, "dragend", function () {
          getCategories(0);
        });
        map.addOverlay(createMarker(searchCenter, 0, HTML, "pin"));
      }
    });
  }
}


function hideInfoBox() {
  document.getElementById("infoBox").style.display = "none";
}

function resetOverlayControl(control) {
 if (overlayControls == true) {
  var wikiLayerControl = document.getElementById("wikiLayer");
  var photoLayerControl = document.getElementById("photoLayer");
  wikiLayerControl.onclick = function() { toggleOverlay('off', wikiLayer, 'wikiLayer')};
  photoLayerControl.onclick = function() { toggleOverlay('off', photoLayer, 'photoLayer')};
  wikiLayerControl.style.backgroundColor = "#fff";
  photoLayerControl.style.backgroundColor = "#fff";
 }
}

function toggleOverlay(layerState, layer, control) {
  if (overlayControls == true) {	
	  var toggleControl = document.getElementById(control);
	  if (layerState == "off") {
		if (layer.isHidden() == true) {
		  layer.show();
		} else {
		  map.addOverlay(layer);
		}
		toggleControl.style.backgroundColor = "#fc9";
		toggleControl.onclick = function() { toggleOverlay('on', layer , control )};
	  }
	  if (layerState == "on") {
		layer.hide();
		toggleControl.style.backgroundColor = "#fff";
		toggleControl.onclick = function() { toggleOverlay('off', layer , control )};
	  }
  }
}

function addLogo() {
  document.getElementById("logocontrol").innerHTML = document.getElementById("logocontrol").innerHTML + '<a target="_blank" href="http://api.australele.com/local/" title="Powered by POI Auto Map - Click for more info"><img src="http://api.australele.com/local/powered_by_POI.png" style="width: 44px; height: 29px; border: 0px none; padding: 0px; margin: 0px; cursor: pointer;"></a>';
}

function hasClass(ele, cls) {
  return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(ele, cls) {
  if (!this.hasClass(ele, cls)) ele.className += " " + cls;
}

function removeClass(ele, cls) {
  if (hasClass(ele, cls)) {
    var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
    ele.className = ele.className.replace(reg, ' ');
  }
}