CKEDITOR 4 Paypal Insert Plugin Multibutton.js

(function()
{
    var paypalButtonData = {};

    var returnDropdownPaypalButton = function( buttonData )
    {
        var costLength = Object.keys(buttonData.cost).length;

        var priceOptions = '<select name="amount" value="0">';

        for (var i = 0; i < costLength; i++)
        {
            priceOptions += '<option value="' + buttonData.cost[i].cost + '">' + buttonData.cost[i].description + '</option>';
        };

        priceOptions += '</select>';

        return '<form method="post" action="https://www.paypal.com/cgi-bin/webscr" class="paypal-button" target="_top" style="opacity: 1;">' +
                    '<input type="hidden" name="button" value="buynow">' +
                    '<input type="hidden" name="business" value="'+ buttonData.account +'">' +
                    '<input type="hidden" name="item_name" value="'+ buttonData.itemName +'">' +
                    '<input type="hidden" name="quantity" value="1">' +
                    priceOptions +
                    '<input type="hidden" name="currency_code" value="'+ buttonData.currency +'">' +
                    '<input type="hidden" name="no_shipping" value="' + buttonData.shipping + '">' +
                    '<input type="hidden" name="shipping" value="'+ buttonData.shippingRate +'">' +
                    '<input type="hidden" name="tax" value="">' +
                    '<input type="hidden" name="return" value="http://' + window.location.hostname + '/paypal/checkout' + '">' +
                    '<input type="hidden" name="cancel_return" value="http://' + window.location.hostname + '/paypal/checkout' + '">' +
                    '<input type="hidden" name="notify_url" value="http://' + window.location.hostname + '/paypal/ipn' + '">' +
                    '<input type="hidden" name="cmd" value="_xclick">' +
                    '<input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHosted">' +
                    '<input type="image" src="https://www.paypalobjects.com/en_US/GB/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online.">' +
                    '<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">' +
                '</form>';
    };

    var returnPaymentInputs = function( numberOfInputs )
    {
        var returnString = '';

        for (var i = 0; i < numberOfInputs; i++)
        {
            returnString += '<input data-key="'+i+'" data-property="description" class="cke_dialog_ui_input_text" type="text" placeholder="Item '+ (i + 1) +' Description" style="margin-right:10px;width:60% !important;"><input data-key="'+i+'" data-property="cost" class="cke_dialog_ui_input_text input-xsmall" type="text" placeholder="Item' + (i + 1) +' Price" style="margin-right:10px;width:30% !important;"><br>';
        };

        return returnString;
    };

    CKEDITOR.dialog.add( 'paypalCreateMultiButton', function( editor )
    {
        var lang = editor.lang.paypal;

        return {
            title     : CKEDITOR.env.ie ? lang.dlgTitle : lang.title,
            minWidth  : 300,
            minHeight : 250,
            contents: [
                {
                    id: 'paypal1',
                    label: '',
                    title: '',
                    expand: false,
                    padding: 0,
                    elements: [
                        {
                            type: 'text',
                            id: 'CKpaypal-merchantEmail',
                            label: lang.labelMerchantEmail + ' *',
                            validate: function()
                            {
                                if( !this.getValue() )
                                {
                                    document.getElementById( 'CKpaypal-validationMessages' ).innerHTML = lang.validateMerchantEmail;
                                    return false;
                                };
                            },
                            commit: function()
                            {
                                paypalButtonData.account = this.getValue();
                            }
                        },
                        {
                            type: 'text',
                            id: 'CKpaypal-itemName',
                            label: lang.labelitemName + ' *',
                            commit: function()
                            {
                                paypalButtonData.itemName = this.getValue();
                            }
                        },
                        {
                            type: 'select',
                            id: 'CKpaypal-currency',
                            label: lang.labelcurrency + ' *',
                            items: [ ['Please select one:'],['CAD'],['EUR'],['GBP'],['NZD'],['USD'] ],
                            validate: function()
                            {
                                if( this.getValue() === 'Please select one:' )
                                {
                                    document.getElementById( 'CKpaypal-validationMessages' ).innerHTML = lang.validatecurrency;
                                    return false;
                                };
                            },
                            commit: function()
                            {
                                paypalButtonData.currency = this.getValue();
                            }
                        },
                        {
                            type: 'select',
                            id: 'CKpaypal-priceOptions',
                            label: lang.labelpriceoptions + ' *',
                            labelStyle: 'margin-top:10px;float:left;',
                            inputStyle: 'margin-top:5px;float:left;width:100%;',
                            items: [ ['Please select the number of price options'], ['1'], ['2'], ['3'], ['4'], ['5'] ],
                            onChange: function( api )
                            {
                                var value = this.getValue(),
                                    priceOptions = '';

                                if( value === '' || value === 'Please select the number of price options this item has' )
                                {
                                    return false;
                                };

                                value = parseInt( value );

                                priceOptions = returnPaymentInputs( value );

                                document.getElementById( 'CKpaypal-priceOptionsContainer' ).innerHTML = priceOptions;
                                return;
                            },
                            commit: function()
                            {
                                paypalButtonData.cost = {};

                                var div    = document.getElementById( 'CKpaypal-priceOptionsContainer' );
                                var inputs = div.getElementsByTagName( 'input' );

                                for (var i = 0; i < inputs.length; i++)
                                {
                                    var key      = inputs[i].getAttribute( 'data-key' ),
                                        property = inputs[i].getAttribute( 'data-property' ),
                                        value    = inputs[i].value ? inputs[i].value : '0';

                                    if( !paypalButtonData.cost.hasOwnProperty(key)  )
                                    {
                                        paypalButtonData.cost[key] = {};
                                    };

                                    paypalButtonData.cost[key][property] = value;
                                };
                            }
                        },
                        {
                            type: 'html',
                            html: '<div id="CKpaypal-priceOptionsContainerOuter" style="min-height:50px;width:100%;float:left;margin:10px 0;">' +
                                    '<div style="width:60%;margin-right:10%;float:left;">Item Description</div><div style="width:30%;float:left;">Item Cost</div>' +
                                    '<div id="CKpaypal-priceOptionsContainer" style="width:100%;float:left;">' +
                                    '</div>' +
                                  '</div>'
                        },
                        {
                            type: 'select',
                            id: 'CKpaypal-shipping',
                            label: lang.labelshipping + '*',
                            items: [ ['Please select one:'],['yes'],['no'] ],
                            validate: function()
                            {
                                if( this.getValue() === 'Please select one:' )
                                {
                                    document.getElementById( 'CKpaypal-validationMessages' ).innerHTML = lang.validateshipping;
                                    return false;
                                };
                            },
                            commit: function()
                            {
                                var shippingValue = this.getValue();
                                paypalButtonData.shipping = ( this.getValue() === 'yes' ? 2 : 1 );
                            }
                        },
                        {
                            type: 'text',
                            id: 'CKpaypal-shippingRate',
                            label: lang.labelshippingRate + ' *',
                            labelStyle: 'margin-top:10px;float:left',
                            inputStyle: 'float:left',
                            commit: function()
                            {
                                paypalButtonData.shippingRate = ( this.getValue() ? this.getValue() : 0 );
                            }
                        },
                        {
                            type: 'html',
                            html: '<div id="CKpaypal-validationMessages" style="color:red;font-weight:bold;margin-top:20px;"></div>'
                        }
                    ]
                }
            ],
            onOk: function()
            {
                this.commitContent();

                var paypalButton = returnDropdownPaypalButton( paypalButtonData );

                editor.insertHtml(paypalButton);
                return;
            }
        }

    });

})();