//<!--
//# LayerLord.js
//# Written by Russell Moffitt, Fernando Drabik NOAA
//# Modified May 2007
//# License: GPL
//-->

/*
NOTE: LayerLord, like other OceanEye components, requires the xbrowser (modified 
cross-browser.com x lib) for the functions that handle mouse events and other 
things.  Both x_core.js and x_event.js must be imported in the HTML code before 
this script.
*/

/*
LayerLord.js contains the LayerLord class constructor.  It's a play on words, as the 
map handling class is MapManager.  This creates a LayerLord object instance that is in 
charge of managing the list of current user configured data layers and representing
them as an interactive sidebar.

LayerLord does the following:
* Data Layer Management
	- createLayer
	- configLayer
	- deleteLayer
* GUI functions
	- activateLayer
	most other gui functions are found in gui.js, including layer list expand/collapse
* API to Fetch Layer List (used by MapManager to query active layers and get configs)
	- getLayerList
	- getActiveLayerList
*/

//////////////////////////////////
// Begin MapLayer class definition
//////////////////////////////////


function toggleLayer(imgInput, layerID) {

	var layer = xGetElementById(layerID);
	if(layer.dataHandle.config.open) {
		imgInput.src = 'images/layerClosed.png';
		var layerConf = xGetElementById(layerID + '_conf');
		var layerInfo = xGetElementById(layerID + '_info');
		layer.style.height = xOffsetTop(layerConf) -  xOffsetTop(layerInfo) + 'px';
		xHide(layerConf);
		layer.dataHandle.config.open = false;
	} else {
		imgInput.src = 'images/layerOpen.png';
		var layerConf = xGetElementById(layerID + '_conf');
		var layerInfo = xGetElementById(layerID + '_info');
		xShow(layerConf);
		layer.style.height = '100%';
		layer.dataHandle.config.open = true;
	}
}


function chgOp(opctValue,layerID) {
	layer = xGetElementById(layerID);
	layer.style.opacity = opctValue/100.0;
}
function moveDown(layerID) {
	var thisLayer = xGetElementById(layerID);
	var nextLayer = thisLayer.nextSibling;

	var thisLayerImg =  xGetElementById(layerID + '_img');
 	var thisLayerLegend =  xGetElementById(layerID + '_legend');

	if(nextLayer) {
		var nextLayerImg = xGetElementById(nextLayer.id + '_img');
		var nextLayerLegend = xGetElementById(nextLayer.id + '_legend');

		xGetElementById('layerLabels').insertBefore(nextLayer, thisLayer);
		xGetElementById('legendImage').insertBefore(nextLayerLegend, thisLayerLegend);
		//xGetElementById('mapImage').insertBefore(nextLayerImg, thisLayerImg);
		var temp = thisLayerImg.style.zIndex
		thisLayerImg.style.zIndex = nextLayerImg.style.zIndex;
		thisLayerLegend.style.zIndex = nextLayerLegend.style.zIndex;		
		nextLayerImg.style.zIndex = temp;
		nextLayerLegend.style.zIndex = temp;
	
	}
}
function moveUp(layerID) {

	var thisLayer = xGetElementById(layerID);
	var prevLayer = thisLayer.previousSibling;

	var thisLayerImg =  xGetElementById(layerID + '_img');
	var thisLayerLegend =  xGetElementById(layerID + '_legend');
 	

	if(prevLayer) {
		var prevLayerImg = xGetElementById(prevLayer.id + '_img');
		var prevLayerLegend = xGetElementById(prevLayer.id + '_legend');

		xGetElementById('layerLabels').insertBefore(thisLayer,prevLayer);
		xGetElementById('legendImage').insertBefore(thisLayerLegend,prevLayerLegend);
		//xGetElementById('mapImage').insertBefore(prevLayerImg, thisLayerImg);
		var temp = thisLayerImg.style.zIndex
		thisLayerImg.style.zIndex = prevLayerImg.style.zIndex;
		thisLayerLegend.style.zIndex = prevLayerLegend.style.zIndex;
		prevLayerImg.style.zIndex = temp;
		prevLayerLegend.style.zIndex = temp;
	}
}
function MapLayer(layerID) {
	// Div for newly created layerbox item
	layerDiv = document.createElement('div');
	layerDiv.setAttribute('id',layerID);
	layerDiv.setAttribute('name',layerID);
	layerDiv.setAttribute('class',"layeritem");  // Mozilla wants class, IE wants className, Opera likes both
	layerDiv.className = "layeritem";  // works for all three


	this.config = new Object();
	this.config.update = true;
	this.config.open = true;
	this.config.colormap = "default";
	this.config.layerId = layerID;
	this.config.varshortname = "";
	this.config.varlongname = "";
	this.config.datasetid = "";
	this.config.datasetlongname = "";
	this.config.composite = false;
	this.config.compositePair = "";
	this.config.dimList = new Array();
	this.config.graphsList = new Array();
	//this.config.dimensions = new Object();
	//this.config.dimensions.dim1 = {"name":"", "range":""};
	//this.config.display = "colormap|contour|vector";

	layerDiv.dataHandle = this;	
	
	var title = " New Layer ";
	var source = " - Unknown Source ";
	var date = "Unknown Date";
	
	var inputID = layerID+'_check';

// 	sliderCombo = document.createElement('div');
// 	sliderCombo.className = 'carpe_horizontal_slider_display_combo';
// 
// 	sliderHolder = document.createElement('div'); 
// 	sliderHolder.className = 'carpe_slider_display_holder';
// 
// 	sliderDisplay = document.createElement('input'); 
// 	sliderDisplay.className = 'carpe_slider_display';
// 	sliderDisplay.id = 'display1';
// 	sliderDisplay.value = 100;
// 
// 	sliderTrack = document.createElement('div');
// 	sliderTrack.className = 'carpe_horizontal_slider_track';
// 
// 	sliderSlit = document.createElement('div');
// 	sliderSlit.className = 'carpe_slider_slit';
// 
// 	slider = document.createElement('div');
// 	slider.className = 'carpe_slider';
// 	slider.id = 'slider1';
// 	slider.setAttribute('layerId', '3');
// 	
// 
// 	sliderTrack.appendChild(sliderSlit);
// 	sliderTrack.appendChild(slider);
// 	
// 	sliderHolder.appendChild(sliderDisplay);
// 	sliderCombo.appendChild(sliderHolder);
// 	sliderCombo.appendChild(sliderTrack);
// 
// 	layerDiv.appendChild(sliderCombo);
// 	slider.onmousedown = slide // Attach event listener.
// 	sliderDisplay.onfocus = focusDisplay // Attach event listener.

/*	'<div id="layerID_summary"><div id="info"></div><div id="layerControl"></div></div>
	'<div id="layerID_config"><div id="info"></div><div id="layerControl"></div></div>*/
	var content = selector 

	// Get mapHolder
	var holder = xGetElementById('mapImage');
	var legendHolder = xGetElementById('legendImage');
	// Create new image element for this layer
	var newImg = document.createElement('img');
	var newLegend = document.createElement('img');
	// Append new image to holder
	
	//newImg.src = '/images/oceanEyeLogo.png';
	newImg.id = layerID + '_img';
	newLegend.id = layerID + '_legend';
	newLegend.style.position = 'relative';
	newLegend.className = "lgd";
	newLegend.style.zIndex = mapLayerHandler.layerCount + 70;
	newImg.style.position = 'absolute';
	newImg.style.zIndex = mapLayerHandler.layerCount + 70;

	holder.insertBefore(newImg, xGetElementById('theMap'));
	legendHolder.insertBefore(newLegend, xGetElementById('legend'));

	var selector = '<input type="image" src="images/layerOpen.png" onClick="toggleLayer(this, \''+layerID+'\');">&nbsp;<input id="'+inputID+'" name="'+layerID+'_check" checked type="checkbox" title="select layer" value="'+layerID+'" onclick="toggleOverlay(\''+layerID+'\');" style="margin-left:0px; margin-right:0px;" onmouseover="var title=document.getElementById(\''+layerID+'_title\'); title.className=\'title_ul\';" onmouseout="var title=document.getElementById(\''+layerID+'_title\'); title.className=\'title\';">';
	
	var content = ''
		+ '<div id="'+layerID+'_info" style="height:auto;border-bottom: 1px solid #ffcccc;">'
			+'<table><tr><td width="150">'
				+ selector
				+ '<span id="'+layerID+'_title"  title="select layer" onclick="var input=document.getElementById(\''+inputID+'\'); input.checked=!(input.checked); input.onclick();" onmouseover="this.className=\'title_ul\';" onmouseout="this.className=\'title\';"> '
				+ title
				+ ' </span>'
				+ '<span id="'+layerID+'_source"> '+source+' </span>'
			+ '</td><td align="right">'
				+ '<input type="image" id="'+layerID+'_delete" name="'+layerID+'_delete" class="mouseborder" onclick="mapLayerHandler.deleteLayer(\''+layerID+'\');return false;" onmouseover="this.className=\'mouseborderon\';" onmouseout="this.className=\'mouseborder\';" title="delete layer" alt="delete layer" src="images/layerDelete.png"  border="0" style="margin-top:2px; cursor:no-drop;">'
				+ '<input type="image" src="images/arrowUp.png" onClick="moveUp(\''+layerID+'\');"><br>'
				+ '<input type="image" src="images/arrowDown.png"  onClick="moveDown(\''+layerID+'\');">'
			+ '</td>'
		+ '</tr></table></div>'
		+ '<div id="'+layerID+'_conf" style="">'
			+ '<table><tr><td width="150">'
				+ '<form id="' + layerID + '_form"><div id="selectors" class="layeritem_date"></div></form>'
				+ '<div class="clear"><br class="clear" /></div>'
				+ 'Opacity:<select style="font-size:9pt;" onChange="chgOp(this.value,' + layerID + '_img);">'
				+ '<option value="0">0%</option>'
				+ '<option value="10">10%</option>'
				+ '<option value="20">20%</option>'
				+ '<option value="30">30%</option>'
				+ '<option value="40">40%</option>'
				+ '<option value="50">50%</option>'
				+ '<option value="60">60%</option>'
				+ '<option value="70">70%</option>'
				+ '<option value="80">80%</option>'
				+ '<option value="90">90%</option>'
				+ '<option value="100" selected>100%</option>'
				+ '</select>'
			+ '</td><td align="right">'

				+ '<br/><img src="images/clear.gif" alt="" width="1" height="2"><br/>'
				+ '<input type="image" id="'+layerID+'_edit" name="'+layerID+'_edit"  class="mouseborder" onclick="mapLayerHandler.configLayer(\''+layerID+'\');return false;" onmouseover="this.className=\'mouseborderon\';" onmouseout="this.className=\'mouseborder\';" title="edit layer" alt="edit layer" src="images/icons/icon_gear.gif" width="12" height="12" border="0">'
				+ '<br/><img src="images/clear.gif" alt="" width="1" height="2"><br/>'
				+ '<input style="background-color:#bcb;" type="image" id="'+layerID+'_link" name="'+layerID+'_link"  class="mouseborder" onclick="mapLayerHandler.linkLayer(\''+layerID+'\');return false;" onmouseover="this.className=\'mouseborderon\';" onmouseout="this.className=\'mouseborder\';" title="link with other layers" alt="link with other layers" src="images/icons/icon_link_on.gif" width="13" height="16" border="0">'
			+ '</td></tr></table>'
		+ '</div>'
		+ '';

	layerDiv.innerHTML = content;
	
	return this;	
}

// Give new cfg string or object to layer and have it update its appearance
MapLayer.prototype.updateConfig = function(cfg) {

	// Updating title in the layer div
	title = document.getElementById(this.config.layerId+'_title');
	title.innerHTML = " " + this.config.varshortname +": "+ this.config.varlongname;
	
	// Updating source in the layer div
	source = document.getElementById(this.config.layerId+'_source');
	source.innerHTML = " " + this.config.datasetlongname;

}

//////////////////////////////////
// End MapLayer class definition
//////////////////////////////////

//////////////////////////////////
// Begin LayerLord class definition
//////////////////////////////////

function LayerLord(layerHolder) {
	// layerHolder is a container element in the document that will be used to place layer items
	/* Defines the following methods:
	and the following internal elements:
	*/
	
	this.layerHolder = xGetElementById(layerHolder);
	//this.layerHolder.className = "layerHolder";
	// Set this so we can find this MapManager object from the mapHolder element
	//this.layerHolder.myLayerLord = this;
	
	this.layerList = new Array();
	this.layerCount = 0;
	this.prefix = "layer_"; //attached to layer number to create layerid
	this.currentLayerId = "";
	this.datacatalogURL = "dataset_tree.html";
}

// Append a new layeritem to a layer category
// Present configure screen to user
// Update layeritem
// Map is not redrawn until user selects this layer
LayerLord.prototype.createLayer = function() {
	// Create the layeritem selection block
	var layernum = ++this.layerCount;
	var layerID = this.prefix+layernum;

	mylayer = new MapLayer(layerID);
	this.currentLayerId = layerID;

	xGetElementById('layerLabels').insertBefore(layerDiv, document.getElementById('layerLabels').childNodes[0]);
	
	this.layerList.unshift(mylayer);

	// Display map layer configuration screen
	this.configLayer(mylayer);
	toggleOverlay(layerID);
	
//	Show all layers if list is collapsed, otherwise layerwe won't see this one
//	expander('layerLabels', true);
}

// Remove layeritem from interface
LayerLord.prototype.deleteLayer = function(layerID) {
	var mylayer = xGetElementById(layerID);
	var mylayerImg = xGetElementById(layerID + '_img');

	var title = xGetElementById(layerID+'_title');
	if (confirm("Do you really want to delete layer "+title.innerHTML+"?")) {
		for (var i=0; i<this.layerList.length; i++) {
			if (this.layerList[i].config.layerId == layerID) {
				this.layerList.splice(i,1);
			}
		}
		mylayer.parentNode.removeChild(mylayer);
		mylayerImg.parentNode.removeChild(mylayerImg);

/*		if (layerID.match(/^(.*)_[^_]*$/)) {
			var categoryID = RegExp.$1;
			var itemselect = xGetElementsByClassName('layeritem_selected');
			if (itemselect.length <= 0) expander(categoryID, true);
		}*/
	}
}

// Present map layer configuration screen to user
// Config menus will then save layer info to cfg object
// Layeritem will not be updated with this new configuration, so
// updateLayer needs to be called.
LayerLord.prototype.configLayer = function(mylayer) {
	

	if (mylayer == null) return false;
	if (!(mylayer.cfg)) mylayer.cfg = new Object();
	cfg = mylayer.cfg;

	// Give iframe a way to find which layer to configure
	var iframe = xGetElementById('frameholder');
	
	window.currentlayer = mylayer;
	// Popup data selection menu which leads to layer config options
	showFrame(true, this.datacatalogURL);
}

// Update appearance of layeritem with new settings in cfg object
LayerLord.prototype.updateLayer = function(layerID, cfg) {
	var mylayer = document.getElementById(layerID);
	if (!mylayer) return false;
	mylayer.updateConfig(cfg);
	// !!! ADD CODE TO LAYEROBJ.updateConfig TO GO THROUGH CONFIG AND SET LAYER TEXT AND SELECT BOXES !!!
	
	// Update the map now that we've changed things
	//drawMap();
}

// 
LayerLord.prototype.getLayerConfigList = function() {
	var configList = new Array();
	for (var i=0; i<this.layerList.length; i++) {
		configList.push(this.layerList[i].config);
	}
	return(configList);
}


//////////////////////////////////
// End MapManager class definition
//////////////////////////////////