/*------------ [ LOADING DEFAULT TAGS ] ------------- */
<mailup-subscribe>
    <h3 show="{!sending && (!subscribed && !error_msg)}">{lexico[lng].title}</h3>

    <div if="{subscribed || error_msg}" class="thanks {error: error_msg}">
        <span class="clear" tabindex="-1" data-for="name" onclick="{ closeResponse}">X</span>
        <h4>{subscribed ? lexico[lng].thanks : error_msg}</h4>
    </div>

    <form if="{!sending}" id="_form" action="{ opts.action }" onsend="{ beforeSend }" method="POST" enctype="multipart/form-data">
        <input type="hidden" name="service" value="MailUp"/>
        <input type="hidden" name="subscribe" value="1"/>
        <input type="hidden" name="retcode" value="{opts.retcode || 1}"/>
        <input type="hidden" name="confirm" value="{opts.confirm || 1}" />
        <input type="hidden" name="source" value="{location.hostname}"/>
        <input if="{glistID}" type="hidden" name="list" value="{opts.list || null}"/>
        <input if="{groupID}" type="hidden" name="group" value="{opts.group || null}"/>

        <div class="row name_r { focus: prefill['name'] }">
            <span class="clear" tabindex="-1" data-for="name" onclick="{onClearInput}">X</span>
            <span class="placeholder" tabindex="-1" data-for="name" onfocus="{ onFocusInput}">{ lexico[lng].name }</span>
            <input autocomplete="off"  value="{ prefill['name'] || ''}" name="name" type="text" data-check="notempty" onchange="{ checkInput}" onblur="{onBlurInput}" onfocus="{onFocusInput}">
        </div>

        <div class="row surname_r { focus: prefill['surname'] }">
            <span class="clear" tabindex="-1" data-for="surname" onclick="{onClearInput}">X</span>
            <span class="placeholder" tabindex="-1" data-for="surname" onfocus="{onFocusInput}">{ lexico[lng].surname }</span>
            <input autocomplete="off"  value="{ prefill['surname'] || ''}" name="surname" type="text" data-check="notempty" onchange="{checkInput}" onblur="{onBlurInput}" onfocus="{onFocusInput}">
        </div>


        <div class="row email_r { focus: prefill['email'] }">
            <span class="clear" tabindex="-1" data-for="email" onclick="{onClearInput}">X</span>
            <span class="placeholder" tabindex="-1" data-for="email" onfocus="{onFocusInput}">{ lexico[lng].email }</span>
            <input autocomplete="off" value="{ prefill['email'] || ''}" name="email" data-check="email" type="text" required="" onchange="{checkInput }" onblur="{ onBlurInput}" onfocus="{onFocusInput}">
        </div>


        <div class="row privacy_r">
            <input name="privacy" value="1" type="checkbox" required="" data-check="privacy" onchange="{checkInput}"/>
            <label for="privacy"> { lexico[lng].privacy  } </label>
            <a class="privacy-info" href="{opts.privacy || '#'}" target="_blank"> { lexico[lng].privacy_info  }</a>
        </div>
        <button onclick="{validateForm}" name="send">{ lexico[lng].send }</button>
    </form>

    <div show="{sending && (!subscribed && !error_msg)}" class="loader_wrapper" id="_loader">
        <div class="loader">Loading...</div>

    </div>


    <script>
        var _isValid = 0,
            _isIE = document.documentMode,
            _requireds = [],
            _data = opts.prefill || {},
            _getAllElementsWithAttribute = function (attribute, ele)
            {
                var matchingElements = [],
                    allElements = (ele || document).getElementsByTagName('*');
                for (var i = 0, n = allElements.length; i < n; i++)
                {
                    if (allElements[i].getAttribute(attribute) !== null)
                    {
                        // Element exists with attribute. Add to array.
                        matchingElements.push(allElements[i]);
                    }
                }
                return matchingElements;
            },
            _validateForm = function () {
                _isValid = 1;
                _requireds.map(function (prop) {
                    if (!_data.hasOwnProperty(prop))
                        _isValid = 0;
                });
                this.send.disabled = (_isValid) ? false : true;
            },
            _isNotEmpty = function (val, min) {
                if (!min)
                    min = 2;
                var r = new RegExp("\\w{" + min + ",}", 'i');
                return val.trim().match(r);
            },
            _isValidEmail = function (email) {
                //var _rex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
                var _rex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9]{2,61}\.(?:[a-zA-Z0-9]{2,61}\.)?[a-zA-Z]{2,61}$/;
                return email.match(_rex);
            },
            _isValidTelephone = function (val) {
                return val.trim().match(/^\s*\(?\+?\d{2,4}\s*\)?\s*\d{3,4}[ \-/]*\d{4,}/);
            },
            _isValidRecipiend = function (val, list) {
                var valid = 0;
                if (list.map) {
                    list.forEach(function (ele) {
                        if (val === ele)
                            valid = 1;
                    });
                } else {
                    for (var p in list) {
                        if (list.hasOwnProperty(p) && p === val)
                            valid = 1;
                    }
                }
                return valid;
            },
            _validateInput = function (ele, checkType, required) {
                if (required !== null)
                    required = 1;

                var isValid = 0;
                switch (checkType) {
                    case 'company':
                        isValid = (_isNotEmpty(ele.value, 3) || !required);
                        break;
                    case 'notempty':
                        isValid = (_isNotEmpty(ele.value) || !required);
                        break;
                    case 'email':
                        isValid = (_isValidEmail(ele.value) || !required);
                        break;
                    case 'telephone':
                        isValid = (_isValidTelephone(ele.value) || !required);
                        break;
                    case 'recipient':
                        isValid = (_isValidRecipiend(ele.value, this.recipients) || !required);
                        break;
                    case 'privacy':
                        isValid = ele.checked;
                        break;
                }
                return isValid;

            },
            _clearInput = function (ele, e) {
                switch (ele.tagName.toLowerCase()) {
                    case 'textarea':
                    case 'input':
                        ele.value = '';
                        //ele.onchange(e);
                        break;
                    case 'select':
                        ele.selectedIndex = 0;
                        //ele.onchange(e);
                        break;
                }
                delete _data[ele.name];
                _validateForm.call(this);
            },
            _sendData = function () {
                var self = this,
                    post_string = '',
                    xhr = new XMLHttpRequest();

                _data['service'] = this.service.value;
                _data['subscribe'] = Number(this.subscribe.value);
                _data['retcode'] = Number(this.retcode.value);
                _data['confirm'] = Number(this.confirm.value);
                _data['list'] = Number(this.list.value);
                _data['group'] = Number(this.group.value);

                xhr.open("POST", opts.action, true);
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

                /*xhr.onprogress = function () {
                 // console.log('LOADING', xhr.readyState); // readyState will be 3
                 };*/

                xhr.onreadystatechange = function () {
                    if(xhr.readyState === 4 && xhr.status === 200) {
                        console.log(xhr.responseText);
                        var r = JSON.parse(xhr.responseText);
                        if(!r.error){
                            self.subscribed = 1;
                            self.error_msg = '';
                        }else{
                            self.subscribed = 0;
                            self.error_msg = r.message;
                        }
                        self.update();
                    }
                };

                for (var p in _data) {
                    if (_data.hasOwnProperty(p)) {
                        post_string += "&" + p + "=" + encodeURIComponent(_data[p]);
                    }
                }
                xhr.send(post_string);
            },
            _validateSurname = function (name) {
                var _rex = /^[a-zA-Z]{2,}$/;
                return name.match(_rex);
            };
        this.sending = 0;
        this.enabled = 0;
        //this.error_msg = 'test';
        this.lexico = {
            'it': {
                'title': 'Iscriviti alla  Newsletter',
                'thanks': 'Registrazione avvenuta con successo. A breve riceverete un\'email per la conferma dell\'iscrizione. Grazie.',
                'file': '* Curriculum (pdf)',
                'email': 'Email (*)',
                'name': 'Nome',
                'surname': 'Cognome',
                'company': '* Azienda',
                'telephone': 'Telefono es. (+39) 123 456789',
                'recipient': '* Destinatario',
                'subject': '* Oggetto',
                'message': '* Messaggio',
                'select_default': 'Seleziona...',
                'send': 'Invia',
                'privacy': "INFORMATIVA sul trattamento dei dati personali (D.Lgs. n. 196/2003)",
                'privacy_info': "Dichiaro di aver letto l'informativa sulla privacy e di acconsentire al trattamento dei mie dati personali."
            },
            'en': {
                'title': 'Subscribe to our Newsletter',
                'thanks': 'You are now subscribed! Soon you will receive an email to confirm your subscription. Thanks.',
                'file': '* Curriculum (pdf)',
                'email': 'Email (*)',
                'name': 'Name',
                'surname': 'Surname',
                'company': '* Company',
                'telephone': 'Telephone ex. (+39) 123 456789',
                'recipient': '* Recipient',
                'subject': '* Subject',
                'message': '* Message',
                'select_default': 'Select...',
                'send': 'Send',
                'privacy': "INFORMATION on the processing of personal data (D.Lgs. n. 196/2003)",
                'privacy_info': "I have read the privacy policy notice and I give my consent to the processing of my personal data."
            }
        };
        this.prefill = opts.prefill || {};
        this.lng = opts['locale'] && this.lexico[opts['locale']] ? opts['locale'] : 'it';


        this.checkRecipient = function (e) {
            if(e.stopPropagation){
                e.stopPropagation();
                e.preventDefault();
            }else{
                e.returnValue = false;
            }
            if (_jobs.indexOf(e.target.value) !== -1) {
                e.target.parentNode.classList.remove('invalid');
                e.target.parentNode.classList.add('valid');
                _data.job = e.target.value;
            } else {
                _data.job = null;
                e.target.parentNode.classList.remove('valid');
                e.target.parentNode.classList.add('invalid');
                if (console.error)
                    console.error('job "%s" is not valid!', e.target.value);
            }
            _validateForm.call(this);
        };

        this.closeResponse = function (e){
            if(e.stopPropagation){
                e.stopPropagation();
                e.preventDefault();
            }else{
                e.returnValue = false;
            }
            if(this.subscribed){
                var inp = ['email', 'name', 'surname'];
                for(var i=0, max=inp.length; i<max; i++){
                    this[inp[i]].value = '';
                    this[inp[i]].parentNode.classList.remove('valid');
                    this[inp[i]].parentNode.classList.remove('invalid');
                    this[inp[i]].parentNode.classList.remove('focus');
                }
                _data = {};
                _validateForm.call(this);
            }
            this.sending = 0;
            this.subscribed = 0;
            this.error_msg = '';
        };

        this.checkInput = function (e) {
            if(e.stopPropagation){
                e.stopPropagation();
                e.preventDefault();
            }else{
                e.returnValue = false;
            }
            var prop = e.currentTarget.name,
                val = e.currentTarget.value,
                checkType = e.currentTarget.getAttribute('data-check'),
                required = e.currentTarget.getAttribute('required') || 0,
                isValid = _validateInput.call(this, e.currentTarget, checkType, required);

            if (isValid) {
                _data[prop] = val;
                e.target.parentNode.classList.remove('invalid');
                e.target.parentNode.classList.add('valid');
            } else {
                delete  _data[prop];
                e.target.parentNode.classList.remove('valid');
                e.target.parentNode.classList.add('invalid');
            }
            _validateForm.call(this);
        };


        this.onFocusInput = function (e) {
            if(e.stopPropagation){
                e.stopPropagation();
                e.preventDefault();
            }else{
                e.returnValue = false;
            }
            e.currentTarget.parentNode.classList.add('focus');
            if (['input', 'select', 'textarea'].indexOf(e.currentTarget.tagName.toLowerCase()) === -1) {
                var inp = e.currentTarget.getAttribute('data-for');
                if (this[inp])
                    this[inp].focus(e);
            }
        };


        this.onClearInput = function (e) {
            if(e.stopPropagation){
                e.stopPropagation();
                e.preventDefault();
            }else{
                e.returnValue = false;
            }
            var inp = e.currentTarget.getAttribute('data-for');
            _clearInput.call(this, this[inp], e);
            if (this[inp]) {
                this[inp].parentNode.classList.remove('valid');
                this[inp].parentNode.classList.remove('invalid');
                this[inp].focus(e);
            }
        };

        this.onBlurInput = function (e) {
            if(e.stopPropagation){
                e.stopPropagation();
                e.preventDefault();
            }else{
                e.returnValue = false;
            }
            var prop = e.currentTarget.name;
            if (_requireds.indexOf(prop) !== -1 && !_data.hasOwnProperty(prop))
                e.currentTarget.parentNode.classList.add('invalid');
            if (e.currentTarget.value === '')
                e.currentTarget.parentNode.classList.remove('focus');
        };

        this.preventInput = function (e) {
            if (e.which !== 9) {
                if(e.stopPropagation){
                    e.stopPropagation();
                    e.preventDefault();
                }else{
                    e.returnValue = false;
                }
                return false;
            }
            return true;
        };

        this.on('mount', function () {
            this.send.disabled = true;

            if (!NodeList.prototype.forEach)
                NodeList.prototype.forEach = Array.prototype.forEach;

            if (opts.style)
                this._form.setAttribute('style', opts.style);

            // Collect reqireds and disable send...
            var fields = (this.root.querySelectorAll) ? this.root.querySelectorAll('[required]') : _getAllElementsWithAttribute('required');
            //var fields = this.root.querySelectorAll('[required]')
            [].forEach.call(fields, function (ele, i) {
                _requireds[i] = ele.name;
                var checkType = ele.getAttribute('data-check'),
                    required = ele.getAttribute('required') || 0,
                    isValid = _validateInput.call(this, ele, checkType, required);
                if (isValid) {
                    _data[ele.name] = ele.value;
                    ele.parentNode.classList.remove('invalid');
                    ele.parentNode.classList.add('valid');
                }
            }, this);


            //console.log(_requireds);

            _validateForm.call(this);
        });

        this.beforeSend = function (e) {
            if(e.stopPropagation){
                e.stopPropagation();
                e.preventDefault();
            }else{
                e.returnValue = false;
            }
            this.validateForm(e);
            return false;
            //this._form.submit();
            return _isValid;
        };

        this.validateForm = function (e) {
            _validateForm.call(this);
            if (_isValid) {
                this.sending = 1;
                _sendData.call(this);
            } else {
                if(e.stopPropagation){
                    e.stopPropagation();
                    e.preventDefault();
                }else{
                    e.returnValue = false;
                }
                this.send.disabled = true;
            }
            return _isValid;
        };

    </script>

</mailup-subscribe>

<alk-sharepage>
    <div class="icon" onclick="{ open }" title="{ !opened ? lexico.titles.icon : lexico.titles.close}">
        <svg class="clopen-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 333.324 333.324" style="enable-background:new 0 0 333.324 333.324;" xml:space="preserve">
                <path style="fill:currentColor;" d="M125.255,59.513l33.907-33.907v149.451c0,4.143,3.358,7.5,7.5,7.5s7.5-3.357,7.5-7.5V25.606
		l33.907,33.907c1.464,1.464,3.384,2.196,5.303,2.196s3.839-0.732,5.303-2.196c2.929-2.93,2.929-7.678,0-10.607l-46.71-46.71
		c-2.929-2.928-7.678-2.928-10.606,0l-46.71,46.71c-2.929,2.93-2.929,7.678,0,10.607C117.577,62.441,122.326,62.441,125.255,59.513z
		"/>
            <path style="fill:currentColor;" d="M263.328,87.557h-61.645c-4.142,0-7.5,3.357-7.5,7.5s3.358,7.5,7.5,7.5h54.145v215.767H77.495
                    V102.557h54.145c4.142,0,7.5-3.357,7.5-7.5s-3.358-7.5-7.5-7.5H69.995c-4.142,0-7.5,3.357-7.5,7.5v230.767
                    c0,4.143,3.358,7.5,7.5,7.5h193.333c4.142,0,7.5-3.357,7.5-7.5V95.057C270.828,90.915,267.47,87.557,263.328,87.557z"/>
        </svg>
        <span>{ lexico.labels.icon }</span>
        <!--<svg if="{ opened }" class="close-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 52 52" style="enable-background:new 0 0 52 52;" xml:space="preserve">
                <path style="fill:currentColor;" d="M26,0C11.664,0,0,11.663,0,26s11.664,26,26,26s26-11.663,26-26S40.336,0,26,0z M26,50C12.767,50,2,39.233,2,26
		S12.767,2,26,2s24,10.767,24,24S39.233,50,26,50z"/>
                <path style="fill:currentColor;" d="M35.707,16.293c-0.391-0.391-1.023-0.391-1.414,0L26,24.586l-8.293-8.293c-0.391-0.391-1.023-0.391-1.414,0
                        s-0.391,1.023,0,1.414L24.586,26l-8.293,8.293c-0.391,0.391-0.391,1.023,0,1.414C16.488,35.902,16.744,36,17,36
                        s0.512-0.098,0.707-0.293L26,27.414l8.293,8.293C34.488,35.902,34.744,36,35,36s0.512-0.098,0.707-0.293
                        c0.391-0.391,0.391-1.023,0-1.414L27.414,26l8.293-8.293C36.098,17.316,36.098,16.684,35.707,16.293z"/>
        </svg>-->
    </div>

    <div data-type="share-panel" if="{ opened }" onclick="{ preventClose }" >
        <button class="close" onclick="{ open }">X</button>
        <div class="row">
            <label for="from"><sup>*</sup>{ lexico.labels.from } </label>
            <input title="{ lexico.titles.from }" type="text" name="from" value="" placeholder="{ lexico.placeholders.from }" onclick="{ preventClose }" onchange="{ setFrom }" onblur="{ setFrom }"/>
        </div>

        <div class="row">
            <label for="to"><sup>*</sup>{ lexico.labels.to }</label>
            <input title="{ lexico.titles.to }" type="text" name="to" value="" placeholder="{ lexico.placeholders.to }" onclick="{ preventClose }" onchange="{ setRecipient }" onblur="{ setRecipient }"/>
        </div>

        <div class="row">
            <label for="message">{ lexico.labels.message }</label>
            <textarea  title="{ lexico.titles.message }" name="message" value="" placeholder="{ lexico.placeholders.message }" onclick="{ preventClose }" onchange="{ setMessage }" onblur="{ setMessage }"></textarea>
        </div>

        <div class="row">
            <button data-type="clear" onclick="{ clearForm }">{ lexico.buttons.clear }</button>
            <button data-type="send" disabled="{ !isValid ? 'disabled' : '' }" onclick="{ send }">{ lexico.buttons.send }</button>
        </div>
        <div class="row disclaymer">
            <h3>{ lexico.info.privacy_title }</h3>
            <p class="info">{ lexico.info.privacy }</p>
            <br>
            <b class="evidence">{ lexico.info.required_fields }</b>

        </div>

        <div if="{ sending }" class="sending">
            <div class="spinner"></div>

        </div>

        <div if="{ shared || error }" class="result { shared ? 'success' : 'error' }">
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
                <g if="{ shared }" id="done">
                        <polygon style="fill: currentColor;" points="142.8,323.85 35.7,216.75 0,252.45 142.8,395.25 448.8,89.25 413.1,53.55 "/>
                </g>
                <g if="{ error }" id="error">
                    <path style="fill: currentColor;" d="M243.225,333.382c-13.6,0-25,11.4-25,25s11.4,25,25,25c13.1,0,25-11.4,24.4-24.4
                            C268.225,344.682,256.925,333.382,243.225,333.382z"/>
                    <path style="fill: currentColor;" d="M474.625,421.982c15.7-27.1,15.8-59.4,0.2-86.4l-156.6-271.2c-15.5-27.3-43.5-43.5-74.9-43.5s-59.4,16.3-74.9,43.4
                            l-156.8,271.5c-15.6,27.3-15.5,59.8,0.3,86.9c15.6,26.8,43.5,42.9,74.7,42.9h312.8
                            C430.725,465.582,458.825,449.282,474.625,421.982z M440.625,402.382c-8.7,15-24.1,23.9-41.3,23.9h-312.8
                            c-17,0-32.3-8.7-40.8-23.4c-8.6-14.9-8.7-32.7-0.1-47.7l156.8-271.4c8.5-14.9,23.7-23.7,40.9-23.7c17.1,0,32.4,8.9,40.9,23.8
                            l156.7,271.4C449.325,369.882,449.225,387.482,440.625,402.382z"/>
                    <path style="fill: currentColor;" d="M237.025,157.882c-11.9,3.4-19.3,14.2-19.3,27.3c0.6,7.9,1.1,15.9,1.7,23.8c1.7,30.1,3.4,59.6,5.1,89.7
                            c0.6,10.2,8.5,17.6,18.7,17.6c10.2,0,18.2-7.9,18.7-18.2c0-6.2,0-11.9,0.6-18.2c1.1-19.3,2.3-38.6,3.4-57.9
                            c0.6-12.5,1.7-25,2.3-37.5c0-4.5-0.6-8.5-2.3-12.5C260.825,160.782,248.925,155.082,237.025,157.882z"/>
                </g>

            </svg>
            { shared ? lexico.info.shared : lexico.info.error }
        </div>
    </div>

        <script>
            var self = this,
                _data = {},
                _validateForm = function (){
                    var isInvalid,
                        search = ['from', 'to'];
                    isInvalid = search.some(function(p){
                        return (!_data[p]);
                    });

                    this.isValid = !isInvalid;
                    return !isInvalid;
                },
                _isValidEmail = function (email){
                    //var _rex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
                    var _rex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9]{2,61}\.(?:[a-zA-Z0-9]{2,61}\.)?[a-zA-Z0-9]{2,61}$/;
                    return email.match(_rex);
                },
                _locale = {
                    'it-IT' : {
                        'titles' : {
                            'icon' : 'Condividi questa pagina con in tuo amico....',
                            'close' : 'Chiudi pannello di condivisione',
                            'email': 'Scrivete qui l\'email del destinatario....',
                            'from': 'Aggiungete qui la vostro indirizzo email....',
                            'message': 'Scrivete un commento per la vostra email di condivisione....'
                        },
                        'labels' : {
                            'icon' : 'condividi',
                            'to' : 'Condividi con:',
                            'from' : 'La tua email:',
                            'message' : 'Messaggio'
                        },

                        'buttons' : {
                            'send' : 'Condividi',
                            'clear' : 'Cancella'
                        },

                        'placeholders' : {
                            'to' : 'email@destinatario.qui',
                            'from' : 'tua@email.qui',
                            'message' : 'Un vostro commento o messaggio....'
                        },
                        'info' : {
                            'privacy_title': 'Informativa sulla privacy',
                            'privacy' : 'Useremo i dati inseriti solo per espletare il servizio richiesto. Nessun dato (indirizzi email o messaggio) sarà salvato sui nostri server!',
                            'error' : 'Impossibile condividere la pagina. Vi preghiamo di riprovare più tardi.',
                            'shared' : 'Pagina condivisa con successo!',
                            'required_fields': '(*) Campo obbligatoro'
                        }
                    },
                    'en-EN':{
                        'titles' : {
                            'icon' : 'Share this page with your friends....',
                            'close' : 'Close share pannel',
                            'email': 'Write here the email of your friend....',
                            'to': 'Add here your email address, this will be email that we use to share this page with the recipient....',
                            'message': 'Write here a commento to your share operation....'
                        },
                        'labels' : {
                            'icon' : 'Share',
                            'to' : 'Share with:',
                            'from' : 'Your email:',
                            'message' : 'Message:'
                        },

                        'buttons' : {
                            'send' : 'Send',
                            'clear' : 'Clear'
                        },

                        'placeholders' : {
                            'to' : 'destination@email.here',
                            'from' : 'your@email.here',
                            'message' : 'Your message for the selected recipient....'
                        },
                        'info' : {
                            'privacy_title': 'Privacy disclaymer',
                            'privacy' : 'We will use your data only for the share service. No data (email addresse or message) will be stored on our servers!',
                            'error' : 'Unable to share this page. Please try back later.',
                            'shared' : 'Page shared sucessfully!',
                            'required_fields': '(*) Required field'
                        }
                    }
                },
                _submitShareRequest = function(){
                    var params,
                        xhr = new XMLHttpRequest();
                    this.sending = 1;
                    _data.url = opts.url;
                    xhr.open('POST', opts.action);
                    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
                    xhr.addEventListener('load', function(e){
                        try{
                            var r = JSON.parse(e.target.response);
                        }catch(err){
                            r = {'done' : 0}
                        }
                        this.sending = 0;
                        if(r.done){
                            this.error = 0;
                            this.shared = 1;
                            this.to.value = '';
                            this.to.classList.remove('error');
                            this.to.classList.remove('valid');
                            delete _data.to;

                        }else{
                            this.error = 1;
                        }
                        _validateForm();
                        this.update();
                    }.bind(this));
                    xhr.addEventListener('error', function(e){
                        this.sending = 0;
                        this.shared = 0;
                        this.error = 1;
                        this.update();
                    }.bind(this));
                    xhr.send('share='+JSON.stringify(_data));
                };

            this.opened = 0;
            this.isValid = 0;
            this.shared = this.error = 0;
            this.lexico = opts.locale && _locale[opts.locale] ? _locale[opts.locale] : _locale['en-EN'];
            this.open = function (e){
                var ev;
                e.stopPropagation();
                this.opened = !this.opened ? 1 : 0;
                ev = (this.opened) ? 'addEventListener' : 'removeEventListener';
                window[ev]('click', function(e){
                    this.opened = 0;
                    this.update();
                }.bind(this));

            };

            this.preventClose = function (e){
                e.stopPropagation();
                return false;
            };

            this.setFrom = function (e){
                e.stopPropagation();
                var email = e.target.value;
                if(_isValidEmail(email)){
                    _data.from = email;
                    e.target.classList.remove('error');
                    e.target.classList.add('valid');
                }else{
                    e.target.classList.remove('valid');
                    e.target.classList.add('error');
                    delete _data.from;
                }
                _validateForm.call(this);
            };

            this.setRecipient = function (e){
                e.stopPropagation();
                var email = e.target.value;
                if(_isValidEmail(email)){
                    e.target.classList.remove('error');
                    e.target.classList.add('valid');
                    _data.to = email;
                }else{
                    e.target.classList.remove('valid');
                    e.target.classList.add('error');
                    delete _data.to;
                }
                _validateForm.call(this);
            };

            this.setMessage = function (e){
                e.stopPropagation();
                _data.message = e.target.value;
                _validateForm.call(this);
            };

            this.clearForm = function (e){
                e.stopPropagation();
                this.from.value = '';
                this.to.value = '';
                this.message.value = '';
                this.from.classList.remove('error');
                this.from.classList.remove('valid');
                this.to.classList.remove('error');
                this.to.classList.remove('valid');
                _data = {};
                _validateForm.call(this);
            };

            this.send = function (e){
                e.stopPropagation();
                if(this.sending) return;
                if( _validateForm.call(this)){
                    //e.target.disabled = true;
                    _submitShareRequest.call(this);
                }
            };

        </script>
</alk-sharepage>