var Esri = Class.create();
	
Esri.prototype = {
	
	initialize: function(varForm, theMap , useAjax) {
		this.useAjax = true;
		this.varForm = $(varForm);
		this.map = $(theMap);
		this.clickAction = "pan";
		this.ajaxUrl = "/public/js/Ajax/cfm/esri.cfm";
		
		this.loading = new Element('DIV' , {'class': 'loading'}).setStyle({'display': 'none'});
		
		this.map.up().up().appendChild(this.loading);
		
		Event.observe($(this.map) , "mousedown" , function(e){
			this.mapClick(e.pointerX(),e.pointerY());
		}.bind(this));
		
		Event.observe($('zoomin') , "mousedown" , this.zoomin.bind(this));
		Event.observe($('zoomout') , "mousedown" , this.zoomout.bind(this));
		
		$$('LI.zoom').each(function(e){
			var zooml = e.getElementsByTagName("SPAN")[0].innerHTML;
			
			
			e.observe("mousedown" , function(){
				this.zoom(zooml);
			}.bind(this));
			
		}.bind(this)); 
		
		$$('DIV.map-pan').each(function(e){
			var zooml = e.getElementsByTagName("SPAN")[0].innerHTML;
			
			// ne-en translation
			if(zooml == 'Z') zooml = 'S';
			if(zooml == 'O') zooml = 'E';
			if(zooml == 'ZO') zooml = 'SE';
			if(zooml == 'NO') zooml = 'NE';
			if(zooml == 'ZW') zooml = 'SW';
			
			e.observe("mousedown" , function(){
				this.pan(zooml);
			}.bind(this));
			
		}.bind(this)); 
		
		
		$$('DIV.map-pan').each(function(e){
			e.show();
		});
		$('map-nav').show();
	},		
	zoomin: function() {
		if(this.varForm.zoomlevel.value > 1) {
			this.varForm.zoomlevel.value = parseInt(this.varForm.zoomlevel.value) -1;
			this.post();
		}
	},
	zoomout: function() {
		if(this.varForm.zoomlevel.value < 8) {
			this.varForm.zoomlevel.value = parseInt(this.varForm.zoomlevel.value) +1;
			this.post();
		}
	},
	zoom: function(zoomlevel) {
		
		this.varForm.zoomlevel.value = zoomlevel;
		this.post();
	},
	pan: function(direction) {
		this.varForm.direction.value=direction;
		this.post();
		this.varForm.direction.value= "";
	},
	
	mapClick: function(mx,my){
		var offsetTrail = this.map;
   	 	var offsetLeft = 0;
    	var offsetTop = 0;
		
		while (offsetTrail) {
       		offsetLeft += offsetTrail.offsetLeft - offsetTrail.scrollLeft;
       	 	offsetTop += offsetTrail.offsetTop - offsetTrail.scrollTop;
       	 	
        	offsetTrail = offsetTrail.offsetParent;
    	}
		
	    x = mx - offsetLeft;
	    y = my - offsetTop;
    	
		this.varForm.clickaction.value = "pan";
    	this.varForm.x.value = x;
    	this.varForm.y.value = y;
    	this.post();
    	this.varForm.clickaction.value = "";
    	this.varForm.x.value = "";
    	this.varForm.y.value = "";
	},
	post: function() {
		
		if(this.useAjax) {
		
			this.map.cursor = 'wait';
			this.loading.show();
			new Ajax.Request(this.ajaxUrl, {
				parameters: Form.serialize(this.varForm),
				onSuccess: function(transport) {
					object = transport.responseText.evalJSON();
					this.map.src= object.url;
					this.varForm.state.value = object.state;
					this.map.cursor = 'default';
					
					$$('.map-nav LI').invoke('removeClassName' , 'selected');
					$$('.map-nav LI.zoom_' + this.varForm.zoomlevel.value).invoke('addClassName' , 'selected');
					this.loading.hide();
				}.bind(this)
				
			});
		} else {
			this.varForm.submit();
			
		}
	}
	
	
	
	
}