webcall.js

// Custom transition for Scriptaculous
Effect.Transitions.easeInBack = function(pos) {
    var x = 1.618;
    return Math.pow(pos, 2) * ((x + 1) * pos - x);
};

var WebcallPlugin = {
    actionInProcess   : false,
    validateResult    : false,
    interval          : null,
    webcall_id        : null,

    // Initialize plugin
    initialize: function(options) {
        this.defaults = options;

        // Action button handling
        this.defaults.actionButton.observe('mouseup', function() {

            if (this.actionInProcess) return;
            this.actionInProcess    = true;

            // Making validation
            this.validate();

            if (this.validateResult) {
                this.doCall();

                $('webcall-calling').setStyle({
                    'display' : this.defaults.haveMoney ? 'block' : 'none'
                });

                $('webcall-no-money').setStyle({
                    'display' : this.defaults.haveMoney ? 'none' : 'block'
                });

                this.slideTo(-this.defaults.frameWidth);
                this.defaults.actionButton.addClassName('form-submit-disabled');
            }
        }.bind(this));


        // Back to main screen
        [$$('#webcall-calling a')[0], $$('#webcall-no-money a')[0]].each(function(a, i) {
            a.observe('mouseup', function() {
                if (this.actionInProcess) return;
                this.actionInProcess = true;
                this.slideTo(0, function() {
                    this.defaults.actionButton.removeClassName('form-submit-disabled')
                    clearInterval(this.interval);
                }.bind(this));
            }.bind(this));
        }.bind(this));

        // Select element handling
        $$('.webcall-selectbox').each(this.change.bind(this));

        // Input handling
        /*$$('.webcall-input input').each(function(input) {
            input.observe('keyup', this.setDescription.bind(this, input));
        }.bind(this));
        */
        $$('.webcall-destin input')[0].observe('keyup',
            this.setRatePerMin.bind(this));
    },

    // Set rate per min (when no money)
    setRatePerMin: function() {
        // Make AJAX request here
        var phone = $$('.webcall-destin input')[0].value;
        new Ajax.Request('/webcalls/single_cost', {parameters: {number: phone}});
        //$$('.webcall-rate input')[0].value = '0.777';
    },

    // Set description under input
    setDescription: function(input) {
        // Make AJAX request here
        input.next('p').update('text')
    },

    // Input fields validation
    validate: function() {
        this.validateResult = true;

        $$('#webcall-main .form-row').each(function(row) {
            var valid  = true;
            var select = row.select('select')[0];
            var input  = row.select('input')[0];
            var option = select.options[select.selectedIndex];

            // Validate phone num
            if (option.hasClassName('webcall-phone-icon')) {
                if (!/^\+{0,1}[\d ]+$/.test(input.value))
                    valid = false
            }
            // Validate sip address
            else if (option.hasClassName('webcall-sip-icon')) {
                if (!/^[_a-zA-Z0-9-]+(\.[_a-zA-Z0-9-]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.(([0-9]{1,3})|([a-zA-Z]{2,3})|(aero|coop|info|museum|name))$/i.test(input.value))
                    valid = false
            }
            // Validate skype name
            else if (option.hasClassName('webcall-skype-icon')) {
                if (!/^.+$/.test(input.value))
                    valid = false
            }

            if (!valid) {
                new Effect.Highlight(input, {
                    startcolor : '#ff2c2c',
                    endcolor   : '#ffffff',
                    duration   : 1,
                    afterFinish : function() {
                        this.actionInProcess = false;
                    }.bind(this)
                })

                this.validateResult = false;

            }
        }.bind(this));
    },

    // Calling
    doCall: function() {
        if (!this.defaults.haveMoney) {
            return;
        }

        $('webcall_form').onsubmit();

        var callFrom          = $$('#webcall-calling .phonenum')[0];
        var callStatusFrom    = $$('#webcall-calling .phonenum-from')[0];
        var callStatusTo      = $$('#webcall-calling .phonenum-to')[0];
        var callAnsStatusFrom = $$('#webcall-calling .call-status-from')[0];
        var callAnsStatusTo   = $$('#webcall-calling .call-status-to')[0];
        var callFromIcons     = $$('#webcall-calling .call-from-icon');
        var callToIcons       = $$('#webcall-calling .call-to-icon');

        // Update values
        callFrom.update( $('webcall-from').value );
        callStatusFrom.update( $('webcall-from').value );
        callStatusTo.update( $('webcall-to').value );

        // Update icons
        [callFromIcons, callToIcons].each(function(icons) {
            icons.each(function(icon) {
                var classNames = icon.classNames().toArray();

                // For each element className
                classNames.each(function(className) {
                    if (className != 'call-from-icon' && className != 'call-to-icon') {
                        icon.removeClassName(className);
                    }
                });

                var select = icon.hasClassName('call-from-icon')
                    ? $('webcall-selectbox-1')
                    : $('webcall-selectbox-2');

                var option = select.options[select.selectedIndex];
                icon.addClassName(option.className);
            });
        });

        // Make periodical AJAX request and update call statuses
        this.updateCallStatus(function(callStatuses) {
            callStatuses.each(function(status, statusIndex) {
                [callAnsStatusFrom, callAnsStatusTo].each(function(container, containerIndex) {
                    if (statusIndex != containerIndex) return;

                    switch (status) {
                        case 0: // Calling 0
                            container.addClassName('success-calling').update('Calling...');
                            break;
                        case 1: // Answered 1
                            container.addClassName('success-calling').update('Answered');
                            break;
                        case 2: // Not Answered 2
                            container.addClassName('fail-calling').update('Not answered');
                            break;
                    }
                });
            });
        });
    },

    // Set webcall ID
    setWebcallId : function(webcall_id) {
        this.webcall_id = webcall_id;
    },

    // Try to get call status
    updateCallStatus: function(callback) {
        var scope = this;
        this.interval = setInterval(function() {
            if (scope.webcall_id == null) return;
            var url = '/webcalls/' + scope.webcall_id + '/status';
            new Ajax.Request(url, {
                onSuccess: function(transport) {
                    var result = transport.responseText.evalJSON();

                    if ((result[0] == 1 && result[1] == 1)
                        || (result[0] == 2 || result[1] == 2)) {
                        clearInterval(scope.interval);
                    }

                    callback(result);
                }, method: 'get'
            });
        }.bind(this), 500);
    },

    // Slide to pos
    slideTo: function(pos, afterFinishCallback) {
        afterFinishCallback = typeof afterFinishCallback == 'undefined'
            ? function() {}
            : afterFinishCallback;

        return this.defaults.frameContainer.morph({ marginLeft : pos + 'px'}, {
            duration    : 0.45,
            transition  : Effect.Transitions.easeInBack,
            afterFinish : function() {
                afterFinishCallback();
                this.actionInProcess = false;
            }.bind(this)
        });
    },

    // Change select
    change: function(el) {
        var span    = el.previous('h3').select('span')[0];
        var select  = el.select('select')[0];
        var handler = function() {
            var option = select.options[select.selectedIndex];
            var input = el.next('div').select('input')[0];
            var i     = el.next('div').select('i')[0];

            i.setStyle({ display : 'none' });
            input.setStyle({ padding : '0' });

            if (option.hasClassName('webcall-phone-icon')) {
                span.update(this.defaults.captions.phone);
                i.setStyle({ display : 'block' });
                input.setStyle({ padding : '0 0 0 18px' });
            } else if (option.hasClassName('webcall-sip-icon')) {
                span.update(this.defaults.captions.sip);
            } else if (option.hasClassName('webcall-skype-icon')) {
                span.update(this.defaults.captions.skype);
            }
        }.bind(this);

        handler();
        select.observe('change', handler);
    }
};