//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 = "8301 Goshen View Drive, Laytonsville, Maryland 20882-1018";
var defaultHTML = "<strong>XBRL International,<br/>USA</strong>";
var defaultZoomLevel = 1; //Larger Number = Higher Zoom 
var infoHTML = "<h4>Instructions</h4><p>Drag the map to move around the world. Click the checkbox next to the list of XBRL Topics (see right) to filter the locations shown on the map. Click on each pointer to see more detail about the XBRL initiative. Click links to go to the relevant XBRL site.</p>";
var overlayControls = false;
var searchControls = false;
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 = 32;
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, ' ');
  }
}