/*
   SiteComponents version:
   Id: ctformlightbox.js,v 1.1 2009/05/08 13:28:17 kurt Exp 
   Name: SC_6_6_0 
   
   Disclaimer
   
   While we make every effort to ensure that this code is fit for its intended
   purpose, we make no guarantees as to its functionality. CoreTrek AS will
   accept no responsibility for the loss of data or any other damage or
   financial loss caused by use of this code.
   
   Copyright
   
   This programming code is copyright of CoreTrek AS. Permission to run this
   code is given to approved users of CoreTrek's publishing system CorePublish.
   
   This source code may not be copied, modified or otherwise repurposed for use
   by a third party without the written permission of CoreTrek AS.
   
   Contact webmaster@coretrek.com for information.
  
*/

/*

    ============================================================================
    IMPORTANT! This javascript is dependent on Prototype and Scriptaculous.
    ============================================================================
    
    CtForm Ajax rewrite for Lightbox
    
    Rewrites forms from the CtForm framework (also CtWebForm module) to submit
    using Ajax when displayed inside a lightbox.
    
    This is a simple rewrite, and is currently meant as a working example of
    how CtForm's in can be handled in the lightbox.
    
*/

// When lightbox content is updated
document.observe('lightbox:contentUpdated', function(event) {
    
    // Find all forms in content with class ctform. This is all forms created
    // by the CtForm framework or the CtWebForm module
    lightbox.content.select('form.ctform').each(function(form) {
        
        // Lets submit these form using Ajax
        form.observe('submit', function(event) {
            
            // Stop the original submit
            event.stop();
            
            var form = event.element();
            
            // Do an Ajax post to the forms action using the defined method
            new Ajax.Request(form.readAttribute('action'), {
                method: form.readAttribute('method'),
                parameters: form.serialize(),
                onSuccess: function(res) {
                    // If form was submitted, we output the form saved message
                    // from the form handler, and hide the lightbox
                    alert(res.responseText.evalJSON());
                    lightbox.hide();
                },
                onFailure: function(res) {
                    var status = res.responseText.evalJSON();
                    for(i in status) {
                        // i contains the element name that has an error, lets
                        // get the actual element from DOM
                        var el = $('ctwebform-element-' + i);
                        
                        // Here we add the error handling for this element
                        
                        // Lets pulase the element that did not validate, just
                        // to draw user attention
                        new Effect.Pulsate(el, { pulses: 2, duration: 0.75 });
                        
                        // If the form is not tagged with an validation error
                        // we add the validation error span, and set the message
                        var err = el.select('.ctwebform-element-validationerror');
                        if(err.size() == 0) {
                            el.insert({ bottom: '<span class="ctwebform-element-validationerror">' + status[i] + '</span>' });
                        }
                        // If the element has a validation error span, we update
                        // the validation error string
                        else if(err.size() == 1) {
                            err.first().update(status[i]);
                        }
                    }
                }
            });
        });
    });
});