/*
*	Author: Henning Reich, henning[dot]reich[at]delphi-imm[dot]de
*	Version: 1.0 20080911
*
*	Provides all visual features to the gon400 map object
*	written by Christoph Kinkeldey
*/
/**
 * @requires prototype.js
 * @requires scriptaculous.js
 * @requires OpenLayers.js
 * @requires GMES.js
 */
/**
 * Class: GMES.Requests 
 */
GMES.GUI = OpenLayers.Class({
	
	mapMarginTop: 120,
	mapMarginTop : 120, //map top margin
	mapMinHeight : 256, //minimal height of the mapclient
	
	mapMarginRight : 270, // map right margin
	mapMarginLeft : (Prototype.Browser.IE && (parseInt(navigator.userAgent.substring(navigator.userAgent.indexOf("MSIE")+5)) == 7))? 240 : 220,
	metadataWidth : 400, // width of the metadata window
	metadataMargin : 25, //metadata margin left + right
	metadataMarginBottom : 20, //metadata margin bottom
	
	
	currentLayerID : "", // the name of the current layer
	currentWindow : "", // current shown window metadata/email
	showWindow : false, // is true if the window for metadata/email is visible
	
	/*EXTRAS WINDOW*/
	currentExtras : "", // the name of the current extras contributors/disclaimer/imprint
	currentExtrasWindow : "", // name of the current extras window
	showExtrasWindow : false, // is true if the extras window is visible

	/* TABS */
	switchLayerActive : true, 
	switchWmsActive : false, 
	switchWmcActive : false, 
	
	currentPage : "",
	
	initialize: function() {
		this.initOverLabels();
		/*scrollbar fix for the left and right menu*/
		if($("menuleft")) $("menuleft").style.overflowY = "hidden";
		if($("menuright")) $("menuright").style.overflowY = "hidden";
		this.setLayerChooserHeight();
		setTimeout(this.restyleOverview,5000);
		setTimeout(this.restyleGMESMap,5000);
		var that= this;
		window.onresize = function() {
			that.setLayerChooserHeight();
		}
	},	
	
	initOverLabels: function() {
		var labels, id, field;
		var that = this;
		// Set focus and blur handlers to hide and show 
		// LABELs with 'overlabel' class names.
		labels = document.getElementsByTagName("label");
		if(labels == null) return;
		for (var i = 0; i < labels.length; i++) {
			if (labels[i].className == 'overlabel') {
				// Skip labels that do not have a named association
				// with another field.
				id = labels[i].htmlFor || labels[i].getAttribute('for');
				if (!id || !(field = $(id))) {
					continue;
				}
				// Change the applied class to hover the label 
				// over the form field.
				labels[i].className = 'overlabel-apply';

				// Hide any fields having an initial value.
				if (field.value !== '') {
					that.hideLabel(field.getAttribute('id'), true);
				}

				// Set handlers to show and hide labels.
				field.onfocus = function () {
					that.hideLabel(this.getAttribute('id'), true);
				};
				field.onblur = function () {
					if (field.value === '') {
						that.hideLabel(this.getAttribute('id'), false);
					}
				};

				// Handle clicks to LABEL elements (for Safari).
				labels[i].onclick = function () {
					var id, field;
					id = this.getAttribute('for');
					if (id && (field = $(id))) {
						field.focus();
					}
				};
			}
		}
		//GMES.Request.updateLayerChooser.apply(this,[$('filterproject').value,$('filterservice').value,$('filterproduct').value,$('filtertext').value]);		  
	},
	
	restyleGMESMap: function() {
		$("gmesmap").style.background="#FFFFFF";		
	},
	
	restyleOverview: function() {
		var omap = $("gmesmap_overview");
		if (omap) {
			omap.firstChild.firstChild.style.top = 3 + "px";
			omap.firstChild.firstChild.style.left = 3 + "px";
			omap.firstChild.firstChild.style.height = 95 + "px";
			omap.firstChild.firstChild.style.width = 95 + "px";
			omap.firstChild.firstChild.style.border = "1px solid #BCBCBC";
			omap.firstChild.firstChild.style.background = "#FCFCFC";
			omap.firstChild.style.borderTop = "1px solid #BCBCBC";
			omap.firstChild.style.borderLeft = "1px solid #BCBCBC";
		}
	},

	setLayerChooserHeight: function(){
		if($('menuleftLayers').style.display != "none") $('layerchooser').style.height = ($('menuleft').offsetHeight-$('layerchooser').offsetTop-20) +'px';
		if($('menuleftWms').style.display != "none") $('wmslayerchooser').style.height = ($('menuleft').offsetHeight-$('wmslayerchooser').offsetTop-20) +'px';
		if($('menuright').style.display != "none") $('menurightLayer').style.height = ($('menuright').offsetHeight-$('menurightLayer').offsetTop-20) +'px';
	},

	/* METADATA/EMAIL WINDOW *********************************************/
	closeWindow : function(){
		this.showWindow = false;
		this.currentLayerID = "";
		this.fadeWindow();
	},

	fadeWindow : function(){
		$('metadata').fade({queue:'front'});
		
		if (this.showExtrasWindow) {
			
			if ($('extras').style.display == "none") {
				$('extras').appear({queue:'end'});
				$('metadata').morph('width:'+(this.metadataWidth)+'px',{queue:'end'});
			}
			else {
				$('extras').morph('margin-right:'+this.mapMarginRight+'px;',{queue:'end'});
				$('gmesmap').style.marginRight = this.mapMarginRight+'px';
			}			
		}else {
			if ($('gmesmap').style.display == "none") {
				$('gmesmap').appear({queue:'end'});
				$('metadata').morph('width:'+(this.metadataWidth)+'px',{queue:'end'});
			}
			else {
				$('gmesmap').morph('margin-right:'+this.mapMarginRight+'px;',{queue:'end'});
				$('extras').style.marginRight = this.mapMarginRight+'px';
			}
		}
		$('metadata').style.width = this.metadataWidth;
	},

	appearWindow : function(){
		$('metadata').appear({queue:'end'});
		if (this.showExtrasWindow) {
			if ($('extras').offsetWidth - (this.metadataWidth + this.metadataMargin) < 250) {
				$('extras').fade({queue:'front'});
				$('metadata').style.width = ($('extras').offsetWidth-this.metadataMargin)+'px';
			}
			else {
				$('extras').morph('margin-right:'+(this.mapMarginRight + this.metadataWidth + this.metadataMargin)+'px;',{queue:'front'});
				$('gmesmap').style.marginRight = (this.mapMarginRight + this.metadataWidth + this.metadataMargin)+'px';
			}
		}
		else {
			if ($('gmesmap').offsetWidth - (this.metadataWidth + this.metadataMargin) < 250) {
				$('gmesmap').fade({queue:'front'});
				$('metadata').style.width = ($('gmesmap').offsetWidth-this.metadataMargin)+'px';
			}
			else {
				$('gmesmap').morph('margin-right:'+(this.mapMarginRight + this.metadataWidth + this.metadataMargin)+'px;',{queue:'front'});
				$('extras').style.marginRight = (this.mapMarginRight + this.metadataWidth + this.metadataMargin)+'px';
			}
		}
	},

	/* EXTRAS WINDOW *********************************************/
	toggleWindow : function(trigger,window){
		GMES.debug("Window="+window);
		if (trigger == this.currentLayerID) {
			if (this.showWindow) {
				if (this.currentWindow == window) {
					this.showWindow = false;
					this.fadeWindow();
				}
				else this.currentWindow = window;
			}
			else {
				this.currentWindow = window;
				this.showWindow = true;
				this.appearWindow();
			}
		}else {
			this.currentLayerID = trigger;
			this.currentWindow = window;
			if (!this.showWindow) {
				this.showWindow = true;
				this.appearWindow();
			}
		}
	},

	closeExtrasWindow : function(){
		this.showExtrasWindow = false;
		this.currentExtras = "";
		this.fadeExtrasWindow();
	},

	appearExtrasWindow : function(){
		if ($('gmesmap').style.display == "none"){
			this.closeWindow();
		}else {
			$('extras').appear({queue:'end'});
			$('gmesmap').fade({queue:'front'});
		}
	},

	fadeExtrasWindow : function(){
		$('gmesmap').appear({queue:'end'});
		$('extras').fade({queue:'front'});
	},
	
	toggleExtrasWindow : function(trigger,window){
		if (trigger == this.currentExtras) {
			if (!this.showExtrasWindow) {
				this.currentExtrasWindow = window;
				this.showExtrasWindow = true;
				this.appearExtrasWindow();
			}
		}else {
			this.currentExtras = trigger;
			this.currentExtrasWindow = window;
			if (!this.showExtrasWindow) {
				this.showExtrasWindow = true;
				this.appearExtrasWindow();
			}
		}
	},

	toggleLegend : function(trigger){		
		if($(trigger).style.display != "none") {
			Effect.BlindUp($(trigger));
		}else{
			Effect.BlindDown($(trigger));
		}
	},

	toggleNotification : function(trigger){		
		if($(trigger).style.display == "none") {
			$(trigger).appear();
		}else {
			Effect.Pulsate($(trigger), { pulses: 3, duration: 2 });
		}
	},

	switchLayerChooserContent : function(content){		
		if (content == "layers") {
			this.switchLayerActive = true;
			this.switchLegendActive = false;
			this.switchWmsActive = false;
			this.switchWmcActive = false;
		}else if (content == "wms") {
			this.switchLayerActive = false;
			this.switchLegendActive = false;
			this.switchWmsActive = true;
			this.switchWmcActive = false;
		}else if( content == "wmc"){
			this.switchLayerActive = false;
			this.switchLegendActive = false;
			this.switchWmsActive = false;
			this.switchWmcActive = true;
		}

		if (this.switchLayerActive) {
			$('menuleftLayers').style.display = 'block';
			$('menuleftLayersLink').className = 'active';
			$('menuleftLayersLink').innerHTML = '<span>Layers</span>'
		}else {
			$('menuleftLayers').style.display = 'none';
			$('menuleftLayersLink').className = '';
			$('menuleftLayersLink').innerHTML = '<a href="#" onclick="GMES.gui.switchLayerChooserContent(\'layers\'); return false;">Layers</a>'
		}
		
		if (this.switchWmsActive) {
			$('menuleftWms').style.display = 'block';
			$('menuleftWmsLink').className = 'active';
			$('menuleftWmsLink').innerHTML = '<span>WMS</span>'

		}else {
			$('menuleftWms').style.display = 'none';
			$('menuleftWmsLink').className = '';
			$('menuleftWmsLink').innerHTML = '<a href="#" onclick="GMES.gui.switchLayerChooserContent(\'wms\'); return false;">WMS</a>'	
		}
		
		if (this.switchWmcActive) {
			GMES.request.requestWMCMap();
			$('menuleftWmc').style.display = 'block';
			$('menuleftWmcLink').className = 'active';
			$('menuleftWmcLink').innerHTML = '<span>WMC</span>'
		}else {
			$('menuleftWmc').style.display = 'none';
			$('menuleftWmcLink').className = '';
			$('menuleftWmcLink').innerHTML = '<a href="#" onclick="GMES.gui.switchLayerChooserContent(\'wmc\'); return false;">WMC</a>'	
		}
	},
	
	toogleLabelVisibility: function(field) {
	    if (field.value === '') {
	        this.hideLabel(field.getAttribute('id'), false);
	      } else {
	      	this.hideLabel(field.getAttribute('id'), true);
	      }	
	},	

	resetFilters: function() {
		document.forms["formfilter"].reset();
		var labels = document.getElementsByTagName('label');
		for (var i = 0; i < labels.length; i++) {
			var spans = labels[i].getElementsByTagName('span');
			spans[0].style.display = (false) ? 'none' : 'block';
		}
		GMES.bbox.setVisibility(false);		
	},
	
	hideLabel: function (field_id, hide) {
	  var field_for;
	  var labels = document.getElementsByTagName('label');
	  if(labels == null) return;
	  for (var i = 0; i < labels.length; i++) {
	    field_for = labels[i].htmlFor || labels[i].getAttribute('for');
	    if (field_for == field_id) {
	    	var spans = labels[i].getElementsByTagName('span');
			spans[0].style.display = (hide) ? 'none' : 'block';
		  return true;
	    }
	  }
	},
	
	showInfo: function(message){
		var infoHtml = '<a href="#" class="close" onclick="GMES.gui.closeWindow(); return false;" title="Close this window">Close this window</a>'+
					'<div class="metadatabox"><h3>Info:</h3>'+
					message+
					'</div>';		
		$('metadata').innerHTML = infoHtml;
		this.appearWindow();
	}		
});