jQuery('document').ready(function() {

    jQuery('.validation-failed,.validation-error').live('focus',function() {
        jQuery('#'+jQuery(this).attr('aria-describedby')).hide();
        Validation.validate(jQuery(this));
    });
    jQuery('.validation-failed,.validation-error').live('blur',function() {
        jQuery('#'+jQuery(this).attr('aria-describedby')).show();
        Validation.validate(jQuery(this));
    });
    /*
     * Fix for radios buttons
     * Given that we encapsulate our radios under 2 levels of <div>, the tooltip goes on the top parent
     * So we remove it with our parent().parent() selector
     *  */
    jQuery('input:radio').live('click', function() {
        jQuery(this).parent('div').parent('div').find('.validate-one-required-by-name').val(jQuery(this).val());
        if (jQuery(this).parent('div').parent('div').find('.validate-one-required-by-name').hasClass('validation-failed')){
           jQuery(this).parent('div').parent('div').find('.validate-one-required-by-name').removeClass('validation-failed');
           jQuery('#'+jQuery(this).parent().parent().attr('aria-describedby')).hide();
        }
        
        // Hide tooltip for radio buttons
        var tooltipId = null;
        if (jQuery(this).parent().parent().find('.choice:first').attr('aria-describedby') != null) {
            tooltipId = jQuery(this).parent().parent().find('.choice:first').attr('aria-describedby');
        } else if (jQuery(this).parent().parent().find('.choice:first input:first').attr('aria-describedby') != null) {
            tooltipId = jQuery(this).parent().parent().find('.choice:first input:first').attr('aria-describedby');
        }
        
        if (tooltipId != null) {
            jQuery('#' + tooltipId).hide();
        }
        
    });
});


/**
 * Function used to build our Qtips
 *
 * Qtips on contact page must have a different class so we added a parameter
 **/
function fleuranceRenderQtip(message, myPos) {

    /* corners */
    var topLeftCorner = "<td class='top-left-corner'></td>";
    var topRightCorner = "<td class='top-right-corner'></td>";
    var bottomLeftCorner = "<td class='bottom-left-corner'></td>";
    var bottomRightCorner = "<td class='bottom-right-corner'></td>";

    /* borders */
    var borderLeft = "<td class='border-left'></td>";
    var borderRight = "<td class='border-right'></td>";
    var borderTop = "<td class='border-top'></td>";
    var borderBottom = "<td class='border-bottom'></td>";

    /** We tweak on arrow position **/
    
    if(myPos.my == "bottom right") { bottomRightCorner = "<td class='bottom-right-corner'><span class='bottom-right'></span></td>"; }
    if(myPos.my == "bottom center") { borderBottom = "<td class='border-bottom'><span class='bottom-center'></span></td>"; }
    if(myPos.my == "bottom left") { bottomLeftCorner = "<td class='bottom-left-corner'><span class='bottom-left'></span></td>"; }
    if(myPos.my == "left bottom") { bottomLeftCorner = "<td class='bottom-left-corner'><span class='left-bottom'></span></td>"; }
    if(myPos.my == "left center") { borderLeft = "<td class='border-left'><span class='left-center'></span></td>"; }
    if(myPos.my == "left top") { topLeftCorner = "<td class='top-left-corner'><span class='left-top'></span></td>"; }
    if(myPos.my == "top left") { topLeftCorner = "<td class='top-left-corner'><span class='top-left'></span></td>"; }
    if(myPos.my == "top center") { borderTop = "<td class='border-top'><span class='top-center'></span></td>"; }
    if(myPos.my == "top right") { topRightCorner = "<td class='top-right-corner'><span class='top-right'></span></td>"; }
    if(myPos.my == "right top") { topRightCorner = "<td class='top-right-corner'><span class='right-top'></span></td>"; }
    if(myPos.my == "right center") { borderRight = "<td class='border-right'><span class='right-center'></span></td>"; }
    if(myPos.my == "right bottom") { bottomRightCorner = "<td class='bottom-right-corner'><span class='right-bottom'></span></td>"; }
    
    /* content */
    var content = "<td class=\'content\'><div class=\'tooltip-wrapper\'>" + message + "</div></td>";
    var toolTip = "<div class=\'fleurance-tooltip\'><table class=\'tooltip-container\' cellpadding=0 cellspacing=0 > <tbody>"
        +"<tr>"   + topLeftCorner + borderTop + topRightCorner + "</tr>"
        +"<tr>"   + borderLeft + content + borderRight + "</tr>"
        +"<tr>"   + bottomLeftCorner + borderBottom + bottomRightCorner + "</tr>"
        +"</tbody> </table> </div>";

    return toolTip;
}



/** Overriding the Validation class in validation.js **/

Object.extend(Validation, {
    oldShowAdvice: Validation.showAdvice,
    oldHideAdvice: Validation.hideAdvice,
    
    hideAdvice: function(elm, advice, adviceName) {
        this.oldHideAdvice(elm, advice, adviceName);
        jQuery(elm).qtip('hide');
    },
    
    showAdvice: function(elm, advice, adviceName) {
        this.oldShowAdvice(elm, advice, adviceName);

        var myPos;
        
        myPos = {
            at : 'left center',
            my : 'right bottom',
            adjust : { screen : true }
        }

        if (!advice.hasClassName('validation-passed')) {
            var message = advice.innerHTML;

            /* behaviour is different for radios
                we have to put the qtip on parent()
            */
            if ((elm.hasClassName('validate-rating')) || (elm.hasClassName('validate-gender')) || (elm.hasClassName('validate-right'))) {

                myPos = {
                    at : 'right center',
                    my : 'bottom left',
                    adjust : { screen : true }
                }
                jQuery(elm).parent().qtip({
                    content: fleuranceRenderQtip(message,myPos),
                    position: myPos,
                    show: {
                      event: false,
                      ready: true
                           },
                    hide: false
                });
            }
            else
            {   
                jQuery(elm).qtip({
                    content: fleuranceRenderQtip(message,myPos),
                    position: myPos,
                    show: {
                      event: false,
                      ready: true
                           },
                    hide: false
                    
                });
            }

        }
    }
});

Validation.defaultOptions.onFormValidate = function(result, form) {
    
    if(!result) {
        try{
            var firstElem = Form.getElements(form).findAll(function(elm){return $(elm).hasClassName('validation-failed')}).first();
            jQuery(window).scrollTop(jQuery(firstElem).offset().top - 50);
        }
        catch(e){
        }
    }
    
    return result;
}