jQuery(function(){
    
    messangerSettings = {
        form            :       '#orderForm',
        box             :       '#messengers-box',
        addButton       :       'a.add-field',
        validation      :       {
            icq             :       {
                required: true,
				number: true,
				minlength: 5,
				messages: {
					required: "↑ This field is required.",
					number: "↑ ICQ should be only numbers.",
					minlength: "↑ ICQ should contain minimum 5 symbols."
				}
            },
            msn             :       {
                required: true,
				email: true,
				messages: {
					required: "↑ This field is required.",
					email: "↑ Please enter a valid MSN address."
				}
            },
            aim             :       {
                required: true,
				testAim: true,
				messages: {
					required: "↑ This field is required.",
					testAim: "↑ Please enter a valid AIM address."
				}
            },
            skype           :       {
				required: true,
				testSkype: true,
				messages        :       {
					required: "↑ This field is required.",
					testSkype: "↑ Please enter a valid Skype address."
                }
            }            
        }
    }
    
    messanger = new Messanger(messangerSettings);
    messanger.init();
        
})

function Messanger(opt){
    messanger = this
    this.init = function(){
        opt.exists = []
        opt.box = jQuery(opt.box)

        opt.addButton = jQuery(opt.addButton)
        opt.lastSelect = jQuery(opt.box).find('select').removeAttr('disabled')
        
        jQuery(opt.form).validate({
    		errorClass: "reg-error",
    		rules: {
    			addForm_name: {
    				required: true
    			},
    			addForm_email: {
    				required: true,
    				email: true
    			},
    			addForm_company: {
    				required: true
    			},
    			addForm_url: {
    				required: true
    			},
    			addForm_terms: {
    				required: true
    			}
    		},
    		messages: {
    			addForm_name: "↑ This field is required",
    			addForm_email: {
    				required: "↑ This field is required",
    				email: "↑ Please enter a valid e-mail address"
    			},
    			addForm_company: "↑ This field is required",
    			addForm_terms: "↑ Please select one of the above options.",
    			addForm_url: "↑ This field is required"
    		}
    	})
        
        
        this.addValidationTypes()
        this.setValidator(jQuery(opt.box).find('input'))
        
        jQuery(opt.addButton).bind('click', function(e){
            e.preventDefault()
            messanger.addField(this)
        })
        jQuery(opt.box).find('select').bind('change', function(){
            messanger.changeFieldType(this)
        })
        
    }
    this.addField = function(elem){

        var select = jQuery('<select class="messenger_field" name="messenger" style="width:74px;min-width:74px;"></select>')
        var alias = ''
        var txt = ''
       
        jQuery(opt.lastSelect).find('option').not(':selected').each(function(i){
            if(jQuery(this).val() !== 'none'){
                var option = jQuery(this).clone()

                if(i==0){
                   alias = jQuery(option).val()
                   txt = jQuery(option).text()
                   //console.log(txt)
                }
                jQuery(select).append(option)
            }
            
        })
        
        if(jQuery(select).find('option').length >= 1){
            
            var remove = jQuery('<a class="add_messanger remove-field" href="#"><img align="absmiddle" alt="" src="design/env.default/images/crm_client_registration/button-minus.gif"></a>') 
                       
            jQuery(remove).bind('click', function(e){
                e.preventDefault()
                messanger.removeField(this)
            })
            jQuery(select).bind('change', function(){
                messanger.changeFieldType(this)
            })
            
            
            var item = jQuery('<div class="clearfix form-item"></div>')
            var elem1 = jQuery('<div class="left signup-left">&nbsp;</div>')
            var elem2 = jQuery('<div class="messager-div" id="messager"></div>')
            var elem3 = jQuery('<div style="width:264px;" class="left signup-right messenger-box"></div>')
            var elem4 = jQuery('<div style="width:74px;min-width:74px;margin:3px 0 0 0;" class="select_box"></div>')
            var elem5 = jQuery('<div></div>')
            var elem6 = jQuery('<span>'+txt+'</span>')
            
            var input = jQuery('<input type="text" value="" name="'+alias+'" alias="'+txt.toLowerCase()+'" class="signup-input-2 input" />')
            
            jQuery(elem5).append(elem6).append(select).appendTo(jQuery(elem4))
            jQuery(elem3).append(elem4).append(input).appendTo(elem2)
            jQuery(item).append(elem1).append(remove).append(elem2).appendTo(jQuery(opt.box))
            
            messanger.setValidator(jQuery(input))
            
            jQuery(opt.lastSelect).attr('disabled', 'disabled')
            opt.lastSelect = jQuery(select)
            
            if(jQuery(select).find('option').length == 1){
                jQuery(select).attr('disabled', 'disabled')
            }
        }
        
        
    }
    this.removeField = function(elem){
        var parent = jQuery(elem).parents('div.form-item')
        var select = jQuery(parent).find('select')
        var input = jQuery(parent).find('input')
        
        
        if(jQuery(parent).next().is('div.form-item')){
            var option = jQuery(select).find('option:selected').clone().removeAttr('selected')
            var el = jQuery(parent)
            var txt = option.text()
            var val = option.val()
            
            while(jQuery(el).next().is('div.form-item')){                
                
                el = jQuery(el).next('div.form-item')
                jQuery(el).find('select').prepend('<option value="'+val+'">'+txt+'</option>')

            }
        }
        else {
            opt.lastSelect = jQuery(parent).prev('div.form-item').find('select')            
        }
        //console.log(opt.lastSelect)
        
        jQuery(opt.lastSelect).removeAttr('disabled')
        
        jQuery(input).rules('remove')
        jQuery(parent).remove()
        
        
    }
    this.setValidator = function(input){
        //console.log(input)

        jQuery(input).rules('add', opt.validation[jQuery(input).attr('alias')])        

    }
    this.changeFieldType = function(elem){
        var input = jQuery(elem).parents('div.select_box').next('input')
        var val = jQuery(elem).val()
        var span = jQuery(elem).prev('span')
        var txt = jQuery(elem).find('option:selected').text()
        var a = jQuery(elem).parents('div.messager-div').prev('a')
         
        if(val !== 'none'){
            jQuery(a).show()
            jQuery(input).removeAttr('disabled').val('').attr('alias', txt.toLowerCase()).attr('name', val).attr('id', val)
            jQuery(input).rules('remove')
            messanger.setValidator(input)
        }
        else {
            jQuery(a).hide()
            jQuery(input).rules('remove')
            jQuery(input).val('-').attr('disabled', 'disabled')            
        }
        
        jQuery(input).next('label').remove()
        jQuery(span).text(txt)
        
    }
    this.addValidationTypes = function(){
        jQuery.validator.addMethod("testAim", function(value, element) {
				reg = /^[a-zA-Z0-9]+$/;
				result = reg.test(value);
				return result;
        });
        jQuery.validator.addMethod("testSkype", function(value, element) {
				reg = /^[a-zA-Z][\w.]+$/;
				result = reg.test(value);
				return result;
			});
    }
}