var WebServiceRequestPage = new Class({
	Implements: [Options, Events],
    options: { 
    	wrapdiv: '',
		outputdiv: '',
		errorclass: 'error',
		successclass: 'success',
		textEmpty: ''
    },
    initialize: function(options) {
        this.setOptions(options);
        
        this.uiComponent.companyname=$('companyname');
        this.uiComponent.url=$('url');
        this.uiComponent.hostname=$('hostname');
        this.uiComponent.username=$('username');
        this.uiComponent.email=$('email');
        this.uiComponent.intendeduse=$('intendeduse');
        this.uiComponent.webserviceregisterbtn=$('webserviceregister-btn');
        
        this.setupEventHandlers();
    },
    uiComponent: {
            companyname: null,
            url: null,
            hostname: null,
            username: null,
            email: null,
            intendeduse: null,
            webserviceregisterbtn: null
      },
    
   setupEventHandlers: function(){    
        if(this.uiComponent.companyname != null){
        	this.uiComponent.companyname.addEvent('blur',function() {
        		this.options.outputdiv='companyname-out';
    			this.options.wrapdiv='companyname-wrap';
    			this.options.textEmpty='Company name can not be empty';
    	        this.validate(this.uiComponent.companyname);     	                      
           }.bind(this));
           this.uiComponent.companyname.addEvent('keydown',function() {
           		this.options.outputdiv='companyname-out';
    			this.options.wrapdiv='companyname-wrap';
    			this.showMessage('','clear');     	                      
           }.bind(this));
        }
        if(this.uiComponent.url != null){
        	this.uiComponent.url.addEvent('blur',function() {
        		this.options.outputdiv='url-out';
    			this.options.wrapdiv='url-wrap';
    			this.options.textEmpty='Company URL can not be empty';
    			this.validate(this.uiComponent.url);     	                      
           }.bind(this));
            this.uiComponent.url.addEvent('keydown',function() {
           		this.options.outputdiv='url-out';
    			this.options.wrapdiv='url-wrap';
    			this.showMessage('','clear');     	                      
           }.bind(this));
        }
        if(this.uiComponent.username != null){
        	this.uiComponent.username.addEvent('blur',function() {
        		this.options.outputdiv='username-out';
    			this.options.wrapdiv='username-wrap';
    			this.options.textEmpty='Contact person name can not be empty';
    			this.validate(this.uiComponent.username);     	                      
           }.bind(this));
            this.uiComponent.username.addEvent('keydown',function() {
           		this.options.outputdiv='username-out';
    			this.options.wrapdiv='username-wrap';
    			this.showMessage('','clear');     	                      
           }.bind(this));
        }
        if(this.uiComponent.email != null){
        	this.uiComponent.email.addEvent('blur',function() {
        		this.options.outputdiv='email-out';
    			this.options.wrapdiv='email-wrap';
    			this.options.textEmpty='Email can not be empty';
    			this.validateEmail(this.uiComponent.email);     	                      
           }.bind(this));
            this.uiComponent.email.addEvent('keydown',function() {
           		this.options.outputdiv='email-out';
    			this.options.wrapdiv='email-wrap';
    			this.showMessage('','clear');     	                      
           }.bind(this));
        }
        if(this.uiComponent.hostname != null){
        	this.uiComponent.hostname.addEvent('blur',function() {
        		this.options.outputdiv='hostname-out';
    			this.options.wrapdiv='hostname-wrap';
    			this.options.textEmpty='IP address cannot be empty';
    			this.validateHostName(this.uiComponent.hostname);     	                      
           }.bind(this));
            this.uiComponent.hostname.addEvent('keydown',function() {
           		this.options.outputdiv='hostname-out';
    			this.options.wrapdiv='hostname-wrap';
    			this.showMessage('','clear');     	                      
           }.bind(this));
        }
        
        /*if(this.uiComponent.webserviceregisterbtn != null){
        	this.uiComponent.webserviceregisterbtn.addEvent('click', function(e) {
        		var e = new Event(e).stop();      		
		   }.bind(this));
        }*/
        
    },
    validate: function(element){
    	if(element.value.length == 0)
		{
			this.showMessage(this.options.textEmpty,'error');
			return false;
		}
		else
		{
			this.showMessage('','success');
			return true;
		}
    },

    validateEmail: function(element){
    	if(element.value.length == 0)
		{
			this.showMessage(this.options.textEmpty,'error');
		}
		else
		{
	    	email = element.value;
	    	sfAPIRegistrationWebService = new SFAPIRegistrationWebServiceClient();
	    	sfAPIRegistrationWebService.onSuccess(this.sfAPIRegistrationWebService_validateEmail_onSuccess);
			sfAPIRegistrationWebService.onFailure(this.sfAPIRegistrationWebService_validateEmail_onFailure);
			sfAPIRegistrationWebService.validateEmail(email);			
		}
    },
    sfAPIRegistrationWebService_validateEmail_onSuccess: function(response){
    	$('email-out').innerHTML = '';
		$('email-wrap').removeClass('error');
		$('email-wrap').addClass('success');
	},
	
	sfAPIRegistrationWebService_validateEmail_onFailure: function(exception,response,context){
		$('email-out').innerHTML = exception.faultString;
		$('email-wrap').addClass('error');
		$('email-wrap').removeClass('success');
	},
	
	validateHostName: function(element){
    	if(element.value.length == 0)
		{
			this.showMessage(this.options.textEmpty,'error');
		}
		else
		{
	    	hostName = element.value;
	    	sfAPIRegistrationWebService = new SFAPIRegistrationWebServiceClient();
	    	sfAPIRegistrationWebService.onSuccess(this.sfAPIRegistrationWebService_validateHostName_onSuccess);
			sfAPIRegistrationWebService.onFailure(this.sfAPIRegistrationWebService_validateHostName_onFailure);
			sfAPIRegistrationWebService.validateHostName(hostName);			
		}
    },
    sfAPIRegistrationWebService_validateHostName_onSuccess: function(response){
    	$('hostname-out').innerHTML = '';
		$('hostname-wrap').removeClass('error');
		$('hostname-wrap').addClass('success');
	},
	
	sfAPIRegistrationWebService_validateHostName_onFailure: function(exception,response,context){
		$('hostname-out').innerHTML = exception.faultString;
		$('hostname-wrap').addClass('error');
		$('hostname-wrap').removeClass('success');
	},
    showMessage: function(message, type)
    {
    	this.output = $(this.options.outputdiv);
		this.wrap = $(this.options.wrapdiv);
		this.output.innerHTML = '';
		if(message && message != '' && type=='error')
		{
			this.output.innerHTML = message;
			this.wrap.addClass(this.options.errorclass);
			this.wrap.removeClass(this.options.warningclass);
			this.wrap.removeClass(this.options.successclass);
		}
		else if(type=='success')
		{
			this.wrap.removeClass(this.options.errorclass);
			this.wrap.removeClass(this.options.warningclass);
			this.wrap.addClass(this.options.successclass);
		}
		else if(type=='clear')
		{			
			this.wrap.removeClass(this.options.errorclass);
			this.wrap.removeClass(this.options.warningclass);
			this.wrap.removeClass(this.options.successclass);
		}
    }
});


var highlightinput = new Class({
	initialize: function(id, classname) {
		this.items = $$("#"+id+' .'+classname);
		this.items.each(function(item) {
			this.addHighlightEvent(item);
			//this.addHighlightRow(item.getParent().getParent());
		},this);
	},
	addHighlightEvent: function(el) {
		el.addEvent('focus', function(e) {
			this.addHighlight(el);
		}.bind(this));
		el.addEvent('blur', function(e) {
			this.removeHighlight(el);
		}.bind(this));
	},
	addHighlight: function(el) {
		el.addClass('focused-inner');
		el.getParent().addClass('focused-outer');
		el.getParent().getParent().addClass('focused');
	},
	removeHighlight: function(el) {
		el.removeClass('focused-inner');
		el.getParent().removeClass('focused-outer');
		el.getParent().getParent().removeClass('focused');
	}
});


var tips = new Class({
	Implements: [Options, Events],
	options: {
		inputclass: 'input-text',
		tipclass: 'tip',
		containerdiv: 'registration',
		animate: 500
	},
	initialize: function(options) {
		this.setOptions(options);
		this.tips = $$('#'+this.options.containerdiv+' .'+this.options.classname);
		this.effects = {};
		this.active = [];
		this.tips.each(function(item, ind) { 
			this.effects[ind] = new Fx.Morph(item.id, {duration: this.options.animate}).set({opacity:0});			
			item.setStyle('display', 'block');
		},this);
		this.inputs = $$('#'+this.options.containerdiv+' .'+this.options.inputclass);
		this.inputs.each(function(item, ind) {
			item.addEvent('focus', function(e) { 
				this.showtip(ind);
			}.bind(this));
		}, this);
	},
	showtip: function(ind) {
		this.effects[ind].start({opacity: 1});
		this.active.each( function(val, ind) {
			if(this.tips[ind].getStyle('opacity') > 0) {
				this.hidetip(ind);
			}
		}, this);
		this.active[ind] = true;
	},
	hidetip: function(ind) {
		this.effects[ind].start({opacity: 0}).chain( function() {
			this.active[ind] = false;
		}.bind(this));
	}
});