var map;

var btnPlusImg;
var btnPlusNormalImg;
var btnPlusSelectImg;
var btnPlusOverImg;
var btnMinusImg;
var btnMinusNormalImg;
var btnMinusSelectImg;
var btnMinusOverImg;

function ControlMap(map) {
	this.map = map
	initImages();
}

function initImages() {
	btnPlusImg = getImage("files/pacontrol/buttonPlus37x26.png");
	btnPlusNormalImg = getImage("files/pacontrol/buttonPlus37x26.png");
	btnPlusSelectImg = getImage("files/pacontrol/buttonPlusSelect37x26.png");
	btnPlusOverImg = getImage("files/pacontrol/buttonPlusOver37x26.png");
	btnMinusImg = getImage("files/pacontrol/buttonMinus37x26.png");
	btnMinusNormalImg = getImage("files/pacontrol/buttonMinus37x26.png");
	btnMinusSelectImg = getImage("files/pacontrol/buttonMinusSelect37x26.png");
	btnMinusOverImg = getImage("files/pacontrol/buttonMinusOver37x26.png");
}

function getImage(src) {
	var image = buildTransparentImage(src);
	image.onclick = null;
	image.onmousedown = null;
	return image;
}

ControlMap.prototype = new GControl();

ControlMap.prototype.initialize = function(map) {
	var container = document.createElement("div");
	
	var zoomInDiv = document.createElement("div");
	var zoomInFunc = function() {
		map.zoomIn();
	};
	container.appendChild(buildButton(zoomInDiv, btnPlusImg, btnPlusNormalImg, btnPlusSelectImg, btnPlusOverImg, zoomInFunc));
	
	container.appendChild(buildSlider(map, 5));

	var zoomOutDiv = document.createElement("div");
	var zomOutFunc = function() {
		map.zoomOut();
	};
	container.appendChild(buildButton(zoomOutDiv, btnMinusImg, btnMinusNormalImg, btnMinusSelectImg, btnMinusOverImg, zomOutFunc));
	
	map.getContainer().appendChild(container);
	return container;
}

function buildSlider(map, sliderLevel){
	var TPL = {
		'b_vertical' : true,
		'b_watch': true,
		'n_controlWidth': 30,
		'n_controlHeight': 108,
		'n_sliderWidth': 39,
		'n_sliderHeight': 17,
		'n_pathLeft' : -4,
		'n_pathTop' : 0,
		'n_pathLength' : 91,
		's_imgControl': 'files/pacontrol/sliderRail30x108.png',
		's_imgSlider': 'files/pacontrol/thumb39x17.png',
		's_imgSliderOver': 'files/pacontrol/thumbOver39x17.png',
		's_imgSliderSelect': 'files/pacontrol/thumbSelect39x17.png',
		'n_zIndex': 1
	}
	var INIT = {
		's_form' : 0,
		//'s_name': 'sliderValue5v',
		'n_minValue' : 1,
		'n_maxValue' : 8,
		'n_value' : 4,
		'n_step' : 1
	}
	var zoomInFunc = function() {
		map.zoomIn();
	};
	var sliderDiv = document.createElement("div");
	var sliderMap = new slider(INIT, TPL , sliderDiv);
	sliderMap.f_setValue(sliderLevel);
	sliderMap.mapSlider = map;
	return sliderDiv;
	
}

function buildButton(btnDiv, img, normalImg, selectImg, overImg, onClickFunction){
	setButtonStyle(btnDiv);
	btnDiv.appendChild(img);
	GEvent.addDomListener(btnDiv, "mousedown", function(){
		img.src = selectImg.src;
	});
	
	GEvent.addDomListener(btnDiv, "mouseup", function(){
		img.src = overImg.src;
	});
	
	GEvent.addDomListener(btnDiv, "click", onClickFunction);
	
	GEvent.addDomListener(btnDiv, "mouseover", function() {
		img.src = overImg.src;
	});
	
	GEvent.addDomListener(btnDiv, "mouseout", function() {
		img.src = normalImg.src;
	});
		  
	return btnDiv;
}

// By default, the control will appear in the top left corner of the
// map with 7 pixels of padding.
ControlMap.prototype.getDefaultPosition = function() {
	return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 43));
}

// Sets the proper CSS for the given button element.
function setButtonStyle(button) {
	button.style.backgroundColor = "transparent";
	button.style.textAlign = "center";
	button.style.width = "37px";
	button.style.height = "26px";
	button.style.cursor = "pointer";
	button.style.border = 0;
	button.style.margin = "0";
	button.style.padding = "0";
}

fileLoaded("ControlMap.js");