// customize the map control button graphics

/*
 * NOTE: this version of this script requires prototype.js
 *       to help solve issues with the button opacity of the
 *       map type buttons. Search for $( to find the places
 *       prototype.js was used.
 */

function KidsiteMapControl(){}

KidsiteMapControl.prototype = new GControl();

KidsiteMapControl.prototype._btnMouseOver = function()
{
	var opacity = KidsiteMapControl.prototype.defaultActiveOpacity;
	/*this.style.filter = "alpha(style=0,opacity=" + opacity * 100 + ")";
	this.style.opacity = opacity;*/
	$(this).setOpacity( opacity );
}
KidsiteMapControl.prototype._btnMouseOut = function()
{
	var opacity = KidsiteMapControl.prototype.defaultOpacity;
	/*this.style.filter = "alpha(style=0,opacity=" + opacity * 100 + ")";
	this.style.opacity = opacity;*/
	$(this).setOpacity( opacity );
}

KidsiteMapControl.prototype.defaultOpacity = 0.6;
KidsiteMapControl.prototype.defaultActiveOpacity = 1;
KidsiteMapControl.prototype.customImagePath = "/kidsite/img/custom_gmap_controls";
/**************************************/

function KidsiteMapMoveControl(){}

KidsiteMapMoveControl.prototype = new KidsiteMapControl();

KidsiteMapMoveControl.prototype.initialize = function( map )
{
	var container = document.createElement("div");
	
	var headerDiv = document.createElement("div");
	container.appendChild( headerDiv );
	var headImg = document.createElement( "img" );
	headerDiv.appendChild( headImg );
	headImg.src = this.customImagePath + "/move.png";
	
	var upDiv = document.createElement("div");
	container.appendChild(upDiv);
	var upImg = document.createElement("img");
	upDiv.appendChild( upImg );
	upImg.src = this.customImagePath + "/up.png";
	this._setBtnStyle(upDiv);
	GEvent.addDomListener( upDiv, "click", function(){ map.panDirection(0, 1); } );
	GEvent.addDomListener( upDiv, "mouseover", this._btnMouseOver );
	GEvent.addDomListener( upDiv, "mouseout", this._btnMouseOut );
	
	var downDiv = document.createElement("div");
	container.appendChild(downDiv);
	var downImg = document.createElement("img");
	downDiv.appendChild( downImg );
	downImg.src = this.customImagePath + "/down.png";
	this._setBtnStyle(downDiv);
	GEvent.addDomListener( downDiv, "click", function(){ map.panDirection(0, -1); } );
	GEvent.addDomListener( downDiv, "mouseover", this._btnMouseOver );
	GEvent.addDomListener( downDiv, "mouseout", this._btnMouseOut );
	
	var leftDiv = document.createElement("div");
	container.appendChild(leftDiv);
	var leftImg = document.createElement("img");
	leftDiv.appendChild( leftImg );
	leftImg.src = this.customImagePath + "/left.png";
	this._setBtnStyle(leftDiv);
	GEvent.addDomListener( leftDiv, "click", function(){ map.panDirection(1, 0); } );
	GEvent.addDomListener( leftDiv, "mouseover", this._btnMouseOver );
	GEvent.addDomListener( leftDiv, "mouseout", this._btnMouseOut );
	
	var rightDiv = document.createElement("div");
	container.appendChild(rightDiv);
	var rightImg = document.createElement("img");
	rightDiv.appendChild(rightImg);
	rightImg.src = this.customImagePath + "/right.png";
	this._setBtnStyle(rightDiv);
	GEvent.addDomListener( rightDiv, "click", function(){ map.panDirection(-1, 0); } );
	GEvent.addDomListener( rightDiv, "mouseover", this._btnMouseOver );
	GEvent.addDomListener( rightDiv, "mouseout", this._btnMouseOut );
	
	var inDiv = document.createElement( "div" );
	container.appendChild(inDiv);
	var inImg = document.createElement( "img" );
	inDiv.appendChild(inImg);
	inImg.src = this.customImagePath + "/zoomin.png";
	this._setZoomBtnStyle(inDiv);
	GEvent.addDomListener( inDiv, "click", function(){ map.zoomIn(); } );
	GEvent.addDomListener( inDiv, "mouseover", this._btnMouseOver );
	GEvent.addDomListener( inDiv, "mouseout", this._btnMouseOut );
	
	var outDiv = document.createElement("div");
	container.appendChild( outDiv );
	var outImg = document.createElement("img");
	outDiv.appendChild( outImg );
	outImg.src = this.customImagePath + "/zoomout.png";
	this._setZoomBtnStyle(outDiv);
	GEvent.addDomListener( outDiv, "click", function(){ map.zoomOut(); } );
	GEvent.addDomListener( outDiv, "mouseover", this._btnMouseOver );
	GEvent.addDomListener( outDiv, "mouseout", this._btnMouseOut );
	
	map.getContainer().appendChild( container );
	return container;
}

KidsiteMapMoveControl.prototype._setBtnStyle = function( btn )
{
	btn.style.width = "106px";
	btn.style.height = "36px";
	btn.style.cursor = "pointer";
	var opacity = this.defaultOpacity;
	btn.style.filter = "alpha(style=0,opacity=" + opacity * 100 + ")";
	btn.style.opacity = opacity;
	btn.style.margin = "0 0 3px 0";
	btn.style.padding = "0";
}

KidsiteMapMoveControl.prototype._setZoomBtnStyle = function( btn )
{
	btn.style.width = "106px";
	btn.style.height = "62px";
	btn.style.cursor = "pointer";
	var opacity = this.defaultOpacity;
	btn.style.filter = "alpha(style=0,opacity=" + opacity * 100 + ")";
	btn.style.opacity = opacity;
	btn.style.margin = "3px 0 0 0";
	btn.style.padding = "0";
}

KidsiteMapMoveControl.prototype.getDefaultPosition = function()
{
	return new GControlPosition( G_ANCHOR_TOP_LEFT, new GSize( 5, 5 ) );
}

/******************************************/
function KidsiteMapTypeControl() {}

KidsiteMapTypeControl.prototype = new KidsiteMapControl();

KidsiteMapTypeControl.prototype.initialize = function( map )
{
	var container = document.createElement( "div" );
	container.style.width = "391px";
	container.style.height = "35px";
	
	var mapDiv = document.createElement( "div" );
	mapDiv.id = "btn_maptype_" + G_NORMAL_MAP.getName();
	container.appendChild( mapDiv );
	var mapImg = document.createElement( "img" );
	mapDiv.appendChild( mapImg );
	mapImg.src = this.customImagePath + "/map.png";
	mapImg.width = "101";
	mapImg.height = "35";
	this._setBtnStyle( mapDiv, "101px", "35px" );
	GEvent.bindDom( mapDiv, "click", this, function(){ this._btnClick( G_NORMAL_MAP ); } );
	GEvent.addDomListener( mapDiv, "mouseover", this._btnMouseOver );
	GEvent.addDomListener( mapDiv, "mouseout", this._btnMouseOut );
	
	var satDiv = document.createElement( "div" );
	satDiv.id = "btn_maptype_" + G_SATELLITE_MAP.getName();
	container.appendChild( satDiv );
	var satImg = document.createElement( "img" );
	satDiv.appendChild( satImg );
	satImg.src = this.customImagePath + "/satellite.png";
	satImg.width = "166";
	satImg.height = "35";
	this._setBtnStyle( satDiv, "166px", "35px" );
	GEvent.bindDom( satDiv, "click", this, function(){ this._btnClick( G_SATELLITE_MAP ); } );
	GEvent.addDomListener( satDiv, "mouseover", this._btnMouseOver );
	GEvent.addDomListener( satDiv, "mouseout", this._btnMouseOut );
	
	var hybDiv = document.createElement( "div" );
	hybDiv.id = "btn_maptype_" + G_HYBRID_MAP.getName();
	container.appendChild( hybDiv );
	var hybImg = document.createElement( "img" );
	hybDiv.appendChild( hybImg );
	hybImg.src = this.customImagePath + "/hybrid.png";
	hybImg.width = "124";
	hybImg.height = "35";
	this._setBtnStyle( hybDiv, "124px", "35px" );
	GEvent.bindDom( hybDiv, "click", this, function(){ this._btnClick( G_HYBRID_MAP ); } );
	GEvent.addDomListener( hybDiv, "mouseover", this._btnMouseOver );
	GEvent.addDomListener( hybDiv, "mouseout", this._btnMouseOut );
	
	GEvent.bind( map, 'maptypechanged', this, this._toggleButtons );
	
	map.getContainer().appendChild( container );
	return container;
}

KidsiteMapTypeControl.prototype._btnClick = function(maptype)
{
	map.setMapType( maptype );
}

KidsiteMapTypeControl.prototype._toggleButtons = function()
{
	var mtypes = map.getMapTypes();
	var cmtype = map.getCurrentMapType();
	var b;
	for( t=0; t < mtypes.length; ++t )
	{
		var type = mtypes[t];
		var btnID = 'btn_maptype_' + type.getName();
		var btn = document.getElementById(btnID);
		if( cmtype == type )
			this._setBtnActive( btn );
		else
			this._setBtnInactive( btn, type );
	}
}

KidsiteMapTypeControl.prototype._setBtnStyle = function( btn, width, height )
{
	btn.style.display = "inline";
	btn.style.width = width;
	btn.style.height = height;
	btn.style.margin = 0;
	btn.style.padding = 0;
}

KidsiteMapTypeControl.prototype._setBtnActive = function( btn )
{
	GEvent.clearInstanceListeners( btn );
	var opacity = this.defaultActiveOpacity;
	/*btn.style.opacity = opacity;
	btn.style.filter = "alpha(style=0,opacity=" + opacity * 100 + ")";*/
	$(btn).setOpacity( opacity );
	btn.style.cursor = "default";
}

KidsiteMapTypeControl.prototype._setBtnInactive = function( btn, maptype )
{
	this._setBtnInactiveStyle( btn );
	GEvent.bindDom( btn, "click", this, function(){ this._btnClick( maptype ); } );
	GEvent.addDomListener( btn, "mouseover", this._btnMouseOver );
	GEvent.addDomListener( btn, "mouseout", this._btnMouseOut );
}

KidsiteMapTypeControl.prototype._setBtnInactiveStyle = function( btn )
{
	var opacity = this.defaultOpacity;
	btn.style.opacity = opacity;
	/*btn.style.filter = "alpha(style=0,opacity=" + opacity * 100 + ")";
	btn.style.cursor = "pointer";*/
	$(btn).setOpacity( opacity );
}

KidsiteMapTypeControl.prototype.getDefaultPosition = function()
{
	return new GControlPosition( G_ANCHOR_TOP_RIGHT, new GSize( 5, 5 ) );
}