function CustomControls (mapObject, controlbar_id) {
	this.gmap = mapObject;
	this.controlElem = document.getElementById(controlbar_id);
	if (!this.controlElem)
		alert ("Cannot find custom control element id=" + controlbar_id + ", cannot create custom controls");
}

// Methods to create the controls

CustomControls.prototype.createZoomControl = function(zoomOut_elemId, zoomIn_elemId, zoomKnob_elemId, zoomBar_elemId, zoomBar_left, zoomBar_width, zoomBar_height, map_type) {
	if (!this.controlElem) return;
	// if map_type is not passed, try to get
	if (!map_type) {
		try {
			map_type = this.gmap.getCurrentMapType();
		}
		catch (e) {
			throw "Map Type is not defined yet, can't initialize slider zoom control";
		}
	}
	var zoomout = document.getElementById(zoomOut_elemId);
	// event handlers
	var thisObj = this;
	if (zoomout.addEventListener) {
		zoomout.addEventListener("click", function(event) {thisObj.zoomOut();}, false);
	}
	else {
		zoomout.attachEvent("onclick", function(event) {thisObj.zoomOut();});
	}
	var slidebar = document.getElementById(zoomBar_elemId);

	// this will handle different sizes of slidebar:
	var minZoom = map_type.getMinimumResolution();
	var maxZoom = map_type.getMaximumResolution();
	var partitions = maxZoom - minZoom + 1;
	var part_size = Math.floor(zoomBar_width / partitions);	
	var bar_width = partitions * part_size;
	slidebar.style.width = bar_width + "px";
	// need to have these here because when they're set in css I can't see them in code
	slidebar.style.left = zoomBar_left + "px";
	slidebar.style.height = zoomBar_height + "px";

	var zoomin = document.getElementById(zoomIn_elemId);
	zoomin.style.left = zoomBar_left + bar_width + 2 + "px";
	// event handlers
	var thisObj = this;
	if (zoomin.addEventListener) {
		zoomin.addEventListener("click", function(event) {thisObj.zoomIn();}, false);
	}
	else {
		zoomin.attachEvent("onclick", function(event) {thisObj.zoomIn();});
	}

	var knob = document.getElementById(zoomKnob_elemId);

	this.zoomControl = {};	
	// add the slider control
	this.zoomControl.slider = new Slider(slidebar, knob, minZoom, maxZoom, 1, 
					this, "zoomChange");
	// is this something to do with a shadow on the right side of the image?
	this.zoomControl.slider.knobRightBuffer = 1;

	this.zoomControl.slider.init(this.gmap.getZoom());
}

CustomControls.prototype.createPanControl = function(panLeft_elemId, panRight_elemId, panUp_elemId, panDown_elemId) {
	var left = document.getElementById(panLeft_elemId);
	var right = document.getElementById(panRight_elemId);
	var up = document.getElementById(panUp_elemId);
	var down = document.getElementById(panDown_elemId);
	// add listeners for click on buttons
	var thisObj = this;
	if (left) {
		if (left.addEventListener) {
			left.addEventListener("click", function(event) {
					thisObj.gmap.panDirection(1,0);}, false);
		}
		else {
			left.attachEvent("onclick", function(event) {thisObj.gmap.panDirection(1,0)});
		}
	}
	if (right) {
		if (right.addEventListener) {
			right.addEventListener("click", function(event) {
					thisObj.gmap.panDirection(-1,0);}, false);
		}
		else {
			right.attachEvent("onclick", function(event) {thisObj.gmap.panDirection(-1,0)});
		}
	}
	if (up) {
		if (up.addEventListener) {
			up.addEventListener("click", function(event) {
					thisObj.gmap.panDirection(0,1);}, false);
		}
		else {
			up.attachEvent("onclick", function(event) {thisObj.gmap.panDirection(0,1)});
		}
	}
	if (down) {
		if (down.addEventListener) {
			down.addEventListener("click", function(event) {
					thisObj.gmap.panDirection(0,-1);}, false);
		}
		else {
			down.attachEvent("onclick", function(event) {thisObj.gmap.panDirection(0,-1)});
		}
	}
}

// Zoom control methods:

// callback from slider
CustomControls.prototype.zoomChange = function(newZoom) {
	// set the map to new zoom value
	this.gmap.setZoom(newZoom);
}

// update the zoom control to match zoom level
CustomControls.prototype.updateZoom = function(level) {
	if (level) {
//		if (level >= Map.minZoom && level <= Map.maxZoom) {
			this.zoomControl.slider.setSlider(level);

			if (this.gmap.getZoom() != level)
				this.gmap.setZoom(level);
//		}
		// else if outside range, allow it but don't update slider	
	}
	else
		this.zoomControl.slider.setSlider(this.gmap.getZoom());
}

// respond to clicks on zoom buttons
CustomControls.prototype.zoomIn = function() {
	this.zoomControl.slider.moveUp();
	this.gmap.zoomIn();
}
CustomControls.prototype.zoomOut = function() {
	this.zoomControl.slider.moveDn();
	this.gmap.zoomOut();
}