var RunnerScreen = Class.create({

initialize: 		function(host) {
						this.host = host;
						this.addUrl = 'http://' + this.host + '/runners/add';
						this.detailsUrl = 'http://' + this.host + '/runners/details/';
						
						this.details = $('runnerDetails');
						this.form = $('theForm');
						this.formNameInput = $('theFormNameInput');
						this.formNameErrorMsg = $('theFormNameErrorMsg');
						this.formContainer = $('runnerFormContainer');
						this.selectedArrow = $('runnerSelectedArrow');
						this.detailsLoading = $('runnerDetailsLoading');
										
						$('theLoadingRunnerImg').hide();						
				  		$('theRunnerTable').show();
				  		Event.observe('theRunnerTable', 'click', this.onClick.bindAsEventListener(this));
				  		Event.observe('theFormButton', 'click', this.onFormButtonClick.bindAsEventListener(this));
						Event.observe('runnerSelectedArrow', 'click', this.onSelectedArrowClick.bindAsEventListener(this));
  					},

selectCellByCoords:	function(coords) {
						this.onUsedCellClick(null, $(coords));
					},
  					
onClick: 			function(ev) {
						
						this.formNameErrorMsg.hide();
						
						var el = Event.element(ev);
						if(el.nodeName != 'TD'){
							el = $(el.parentNode);
						}
					    
					    if(el.hasClassName('rc')){
						    this.onRealCellClick(ev,el);
						}
						else if(el.hasClassName('uc')){
							this.onUsedCellClick(ev,el);							
						}    
  					},
  
onRealCellClick:	function(ev, el) {
						if(el){
							$('coordInput').setValue(el.id);
						    this.selectCell(el);					    
						    this.showSelectedArrow(el);
						    this.details.hide();
						    this.formContainer.show();
					    }
					},
					
onUsedCellClick:	function(ev, el) {
						if(el){
							this.selectCell(el);
							this.showSelectedArrow(el);	
						    this.formContainer.hide();	
						    this.details.show();						
							this.findRunnerDetails(el.id);
						}else{
							window.location = '/runners';
						}
					},					

selectCell:			function(el) {
						$$('td.cellSelected').each(
					    	function(cel, index) {
					  			cel.removeClassName('cellSelected');
							}
						);		
						if(el){					
							el.addClassName('cellSelected');
						}		
					},

showSelectedArrow:	function(el) {
						if(el){
							this.selectedArrow.show();
					    	elPos = el.positionedOffset();
					    	this.selectedArrow.setStyle({top: (elPos.top - 44) +'px', left: (elPos.left + 2) +'px'});
					    }	
					},
 
onSelectedArrowClick:  function(ev) {
						this.selectedArrow.hide();
					},
  
onFormButtonClick:	function() {

						this.formNameErrorMsg.hide();
						var nameVal = this.formNameInput.getValue();
						if(nameVal.strip().empty()){
							this.formNameErrorMsg.show();
						}
						else{

							var url = this.addUrl;
							
							this.formContainer.hide();
							this.detailsLoading.show();
	
							new Ajax.Request(url, {
					  			 method: 'post',
					  			 parameters: $('theForm').serialize(),
					  			 onSuccess: this.onSaveSuccess.bind(this),
					  			 onFailure: this.onSaveFailure.bind(this)
					    	});
					    	
				    	}
					}, 

onSaveSuccess:		function(transport){

						this.detailsLoading.hide();
						this.formContainer.hide();
						this.details.show();
						this.details.update(transport.responseText);
						
						formHash = this.form.serialize(true);
						coord = formHash['data[Runner][coord]'];
						color = formHash['data[Runner][color]'];
						
						$$('td.cellSelected').each(
					    	function(cel, index) {
					    		if(cel.id == coord){
									cel.removeClassName('cellSelected');
									cel.removeClassName('rc');
									cel.addClassName('r' + color);
									cel.addClassName('uc');
					    		}
							}
						);
						
						this.form.reset();
					},
					
onSaveFailure:		function(transport){
						this.detailsLoading.hide();
						this.form.reset();
						alert('Connection Error: ' + transport.status);
					}, 
  
findRunnerDetails:	function(cellId){
						
						var url = this.detailsUrl + cellId;
						this.details.update('');
						this.detailsLoading.show();

				  		new Ajax.Request(url, {
				  			 method: 'get',
				  			 onSuccess: this.onDetailsSuccess.bind(this),
				  			 onFailure: this.onDetailsFailure.bind(this)
				    	});
					},					
					
onDetailsSuccess:		function(transport){
						this.detailsLoading.hide();
						this.details.update(transport.responseText);
					},
					
onDetailsFailure:		function(transport){
						this.detailsLoading.hide();
						alert('Connection Error: ' + transport.status);
					}
  
  
  
});