//Arrow box template
 
 arrowTemplateStopScroll=false;

   $.extend($.validator, {
	// http://docs.jquery.com/Plugins/Validation/Validator/setDefaults
	setArrowTemplate: function(confSettings)
        {
            
            var defaultSettings ={ cssBoxTop:13,cssBoxLeft:155,displayAllErrors:false,boxColor:"#fff",textColor:"#000",arrowPosition:"right",errorElemConf:"div",autoScroll:true,autoFocusError:true};          
            settings = jQuery.extend(defaultSettings,confSettings);
            
            this.setDefaults( {
            focusCleanup:true,focusInvalid:false,onkeyup:false,onfocusout:false,onclick:true,
                validClass:"formOK", errorClass:"formError",errorElement:settings.errorElemConf,
                showErrors: function( errorMap, errorList ) {
			$("div.formError").remove();
                        arrowTemplateStopScroll=false;
                        
                        if(!settings.displayAllErrors)
                        {
                            if( this.numberOfInvalids() > 0 ) { this.errorList = [ errorList[ 0 ] ]; this.defaultShowErrors(); }
                        }
                        else this.defaultShowErrors(); 
		}, 
                highlight: function( element, errorClass ) {
                    
                        //to avoid bad placement
			$( element ).removeClass( errorClass );
                        $( element ).addClass( "formErrorElem" );
		},
               
                unhighlight: function( element, errorClass ) {

                    if($(element).hasClass("formErrorElem") && $(".formErrorElem").length<=1) $(".formError").remove();
                    
                    
                    $( element ).removeClass("formErrorElem");
		},

		errorPlacement: function(error, element) {
			var p = element.position();
			error.insertBefore( element ).hide();
                        
                        arrows = '<div class="line10"></div><div class="line9"></div><div class="line8"></div><div class="line7"></div><div class="line6"></div><div class="line5"></div><div class="line4"></div><div class="line3"></div><div class="line2"></div><div class="line1"></div>';
                        
			error.wrapInner( "<div class=\"formErrorContent\" />" ).prepend('<div class="formErrorArrow">' + arrows + '</div>' );
			error.css( {
					top: ( parseInt( p.top ) - parseInt( error.height() ) - settings.cssBoxTop ) + "px", 
					left: ( parseInt( p.left ) -  settings.cssBoxLeft ) + "px" 
				} )
				.fadeIn( "fast" );
                        
                        if(settings.arrowPosition != "right")
                        {
                              if(confSettings.cssBoxLeft == undefined) error.css( {
					left: ( parseInt( p.left ) - 20 ) + "px" 
				});
                         
                             $(".formError .formErrorArrow").css({left: '30px'});
                        }
                        
                        
                        if(settings.autoScroll && !arrowTemplateStopScroll)
                        {
                              offset = element.offset();
                              $('html, body').animate({scrollTop: offset.top-100}, 'slow');
                              
                              if(settings.displayAllErrors) arrowTemplateStopScroll=true;
                              
                        }
                        
                        if(settings.autoFocusError)
                        {
                         $(".formErrorContent,.formError .formErrorArrow div").css({cursor: 'pointer'});
                         $(".formErrorContent,.formError .formErrorArrow div").click(function(){
                              
                              element.focus().change();
                              
                                                                                     
                                                                                     });
                        }
                        
                        $(".formErrorContent,.formError .formErrorArrow div").css({color: settings.textColor, backgroundColor: settings.boxColor});
                }
                /*
                submitHandler: function(form) {
                    // do other stuff for a valid form
                     //form.submit();
                     
                     alert("wa !!!");
                }
                */

            });
	}
   });