/*
MOpacityControl
Control to set the opacity of individual GTileLayers.

Copyright 2008 - Marcelo Montagna  - http://maps.forum.nu

Free to use as long as copyright notices are left unchanged.
Please save the file to your own server. Do not link directly,
or unexpected things might happen to your control :-)

Note: This script contains code to prevent hotlinking. (marked with 'REMOVE')
You need to remove it when saving the file to your server.

------------------------------------------------------------
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
------------------------------------------------------------


Usage:
	map.addControl(new MOpacityControl());
	map.addControl(new MOpacityControl(options?));

MOpacityControl options:
	Position: GControlPosition()
	background: HTML color - Default: '#8080FF';
	foreground: HTML color - Default: '#EEEEEE';
	parent: DOM element;


-------------------------------------------------------
NOTE: Remember to get the image for the opacity sliders
"http://maps.forum.nu/sliderBG1.jpg"
Please do not hotlink!
-------------------------------------------------------


*/

/////////////////////////////////////////////////////////////////////////////


function MOpacityControl(MOptions) {
	MOptions = MOptions ? MOptions : {};
	this.parent = MOptions.container ? MOptions.container : null;
	this.background = MOptions.background ? MOptions.background : '#333333';
	this.foreground = MOptions.foreground ? MOptions.foreground : '#FFFFFF';
	this.position = MOptions.position ? MOptions.position : new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(50, 5));
}


MOpacityControl.prototype =  new GControl();


MOpacityControl.prototype.initialize = function (map) {
    var that = this;
    this.map = map;
	this.map.getContainer().style.background = '#ffffff';

	this.sliders = Array();
    this.container = document.createElement("div");
    this.container.style.width = "300px";
	this.sliderWidth = 200;
	this.knobWidth = 5;
	
	if (this.parent) {
		this.parent.appendChild(this.container);
	}
	else {
		map.getContainer().appendChild(this.container);
	}

	var mapTypes = this.map.getMapTypes();
	for (var m = 0 ; m < mapTypes.length ; m++ ) {
		this.mapTypeAdded(mapTypes[m]);
	}

	GEvent.addListener(map, "addmaptype", function(type) {that.mapTypeAdded(type)});
	GEvent.addListener(map, "maptypechanged", function(o,n) {that.mapTypeChanged()});
	GEvent.addListener(map, "removemaptype", function(type) {that.mapRemoveType(type)});

	this.mapTypeChanged();
	return this.container;
}


// --------- Event handlers ----------------------

MOpacityControl.prototype.mapTypeAdded = function(mapType) {

	var layers = mapType.getTileLayers();
	//GLog.write('added: ' + mapType.getName() + ' - ' + layers.length + ' layers')
	for (var t = 0 ; t < layers.length ; t++ ) {
		if (!layers[t].opSlider) {
			//alert(layers[t].getOpacity());
			layers[t].op = layers[t].getOpacity();
			layers[t].getOpacity = function() {return this.op}
			var left = Math.round(layers[t].getOpacity() * (this.sliderWidth - this.knobWidth));

			var newSliderBox = this.createSlider(this,left,t);
			newSliderBox.label0.innerHTML = 'Layer ' + t + ': ';
			newSliderBox.label1.innerHTML = '[<b>' + layers[t].op + '</b>]';

			this.container.appendChild(newSliderBox);
			newSliderBox.slider.slideObj.layer = layers[t];
			layers[t].opSlider = newSliderBox;
		}
	}
};


MOpacityControl.prototype.mapTypeChanged = function() {
	var mapTypes = this.map.getMapTypes();

	for (var m = 0 ; m < mapTypes.length ; m++ ) {
		var layers = mapTypes[m].getTileLayers();
		for (var t = 0 ; t < layers.length ; t++ ) {
			layers[t].opSlider.style.display = 'none';
		}
	}
	window.setTimeout(function(){showCurrentSlider()},100);
	
}



showCurrentSlider = function() {
	var currentMapType = this.map.getCurrentMapType();
	var layers = currentMapType.getTileLayers();

	for (var t = 0 ; t < layers.length ; t++ ) {
		layers[t].opSlider.style.display = '';
		layers[t].opSlider.label0.innerHTML = 'Layer ' + t + ': ';
	}
}




MOpacityControl.prototype.mapRemoveType = function(type) {
}


// ------------------------------------------------------


MOpacityControl.prototype.createSlider = function (that,left,ix) {
	var newSliderBox = document.createElement('TABLE');
	newSliderBox.setAttribute('cellSpacing','1');
	newSliderBox.setAttribute('cellPadding','0');
	var oTBody = document.createElement('TBODY');
	newSliderBox.appendChild(oTBody);

	var oTRow = document.createElement('TR');
	oTBody.appendChild(oTRow);

	var oLabelCell = document.createElement('TD');
	oTRow.appendChild(oLabelCell);

	oLabelCell.style.width = '98px';
	oLabelCell.style.paddingLeft = '5px';
	oLabelCell.style.font = 'normal 10px verdana';

	oLabelCell.style.color = this.foreground;
	oLabelCell.style.backgroundColor = this.background;
    oLabelCell.style.border = "1px solid black";

	var oLabel0 = document.createElement('SPAN');
	oLabelCell.appendChild(oLabel0);

	var oLabel1 = document.createElement('SPAN');
	oLabelCell.appendChild(oLabel1);

	var oTCell = document.createElement('TD');
	oTRow.appendChild(oTCell);
	
	newSliderBox.slider = document.createElement("DIV");
	oTCell.appendChild(newSliderBox.slider);

	newSliderBox.slider.style.color = this.background;
	newSliderBox.slider.style.backgroundColor = this.foreground;
	newSliderBox.slider.style.height = "20px";
	newSliderBox.slider.style.position = "relative";
	newSliderBox.slider.style.textAlign = "center";
	newSliderBox.slider.style.top = "0px";

    newSliderBox.slider.style.width = this.sliderWidth + "px";

	oTCell.style.border = "1px solid black";
	

	newSliderBox.slider.knob = document.createElement("IMG");
	newSliderBox.slider.knob.src = "/css/img/sliderBG1.jpg";
	newSliderBox.slider.knob.height = '20';
	newSliderBox.slider.knob.width =  '5';
    newSliderBox.slider.appendChild(newSliderBox.slider.knob);

	newSliderBox.slider.slideObj = new GDraggableObject(newSliderBox.slider.knob, {container:newSliderBox.slider,left:left});
	newSliderBox.slider.slideObj.label0 = oLabel0;
	newSliderBox.slider.slideObj.label1 = oLabel1;
		
    GEvent.addListener(newSliderBox.slider.slideObj, "drag", function () {that.controlDrag(this)});
    GEvent.addListener(newSliderBox.slider.slideObj, "dragend", function () {that.controlDragEnd(this)});
	newSliderBox.label0 = oLabel0;
	newSliderBox.label1 = oLabel1;
	this.sliders.push(newSliderBox);
	newSliderBox.style.display = 'none';
	return newSliderBox;
}

MOpacityControl.prototype.controlDrag = function (slideObj) {
	var opacity = Math.round(slideObj.left / (this.sliderWidth - this.knobWidth) * 100) / 100;
	slideObj.label1.innerHTML = '[<b>' + opacity + '</b>]';
}

MOpacityControl.prototype.controlDragEnd = function (slideObj) {
	var opacity = Math.round(slideObj.left / (this.sliderWidth - this.knobWidth) * 100) / 100;
	slideObj.layer.op = opacity;
	slideObj.label1.innerHTML = '[<b>' + opacity + '</b>]';
	var currentMapType = this.map.getCurrentMapType();
	this.map.setMapType(this.map.getMapTypes()[0]);
	this.map.setMapType(this.map.getMapTypes()[1]);
	this.map.setMapType(currentMapType);
}

//------------------------------------------------------


MOpacityControl.prototype.getDefaultPosition = function () {
    return this.position;
}

MOpacityControl.prototype.show = function () {
	this.container.style.display = '';
}

MOpacityControl.prototype.hide = function () {
	this.container.style.display = 'none';
}

MOpacityControl.prototype.toggle = function () {
	this.container.style.display = this.container.style.display == '' ? 'none' : '';
}