<!--DEBUG:--><!--DEBUG:--><style>
/* spinner */
html {
  box-sizing: border-box;
  /*font-family: "Lato, sans-serif";*/
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  width: 100%;
  height: 100%;
  font-size: 62.5%;
  /*font-family: 'Lato', sans-serif;*/
  color: #4d4d4d;
}

body {
  width: 100%;
  height: 100%;
  font-size: 1.6em;
}

.wrapper {
  font-size: 1.6rem;
  /*background: #dad8d2;*/
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.clearfix:before,
.clearfix:after {
  content: ' ';
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1;
}

html, body {
  width: 100%;
  background: #dad8d2;
}

.hourglass {
  display: block;
  background: #dad8d2;
  margin: 3em auto;
  width: 2em;
  height: 4em;
  box-shadow: inset #dad8d2 0 0 0 0, inset #337ab7 0 2em 0 0, inset #dad8d2 0 0 4em 0;
  -webkit-animation: hourglass 1s linear infinite;
          animation: hourglass 1s linear infinite;
}

.outer {
  fill: #337ab7;
}

.middle {
  fill: #ffffff;
}

@-webkit-keyframes hourglass {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    box-shadow: inset #dad8d2 0 0 0 0, inset #337ab7 0 2em 0 0, inset #dad8d2 0 4em 0 0, inset #337ab7 0 4em 0 0;
  }
  80% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    box-shadow: inset #dad8d2 0 2em 0 0, inset #337ab7 0 2em 0 0, inset #dad8d2 0 2em 0 0, inset #337ab7 0 4em 0 0;
  }
  100% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
    box-shadow: inset #dad8d2 0 2em 0 0, inset #337ab7 0 2em 0 0, inset #dad8d2 0 2em 0 0, inset #337ab7 0 4em 0 0;
  }
}

@keyframes hourglass {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    box-shadow: inset #dad8d2 0 0 0 0, inset #337ab7 0 2em 0 0, inset #dad8d2 0 4em 0 0, inset #337ab7 0 4em 0 0;
  }
  80% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    box-shadow: inset #dad8d2 0 2em 0 0, inset #337ab7 0 2em 0 0, inset #dad8d2 0 2em 0 0, inset #337ab7 0 4em 0 0;
  }
  100% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
    box-shadow: inset #dad8d2 0 2em 0 0, inset #337ab7 0 2em 0 0, inset #dad8d2 0 2em 0 0, inset #337ab7 0 4em 0 0;
  }
}

/* other fix */
.topwords24-modal-social {
    padding-bottom: 0px;
}
.topwords24-modal-social .topwords24-word-facebook {
    float: left;
}
.topwords24-modal-social .topwords24-modal-content {
    width: 100%;
}

</style>

<!--link href='//fonts.googleapis.com/css?family=Lato:900,400' rel='stylesheet' type='text/css'-->

<div class="col-md-12" id="compare_container">
<div id="request_noactivity" style="opacity: 0.5; position: absolute; z-index: 1; background: rgb(243, 243, 243); width: 1170px; height: 359px; display: none;"></div>

<div class="col-md-12">
    <!--div class="col-md-1">&nbsp;</div-->
    <div class="col-md-12" id="search">

        <div class="panel panel-primary">
            <div class="panel-heading">Compare trends, words, text by social networks</div>
            <div class="panel-body">
                <div class="col-md-12">
                    <div class="col-md-2">
                    <select id="lang" class="form-control">
                      <option value="en" selected>en</option>
                      <option value="ja">ja</option>
                      <option value="ru">ru</option>
                      <option value="pl">pl</option>
                      <option value="ukr">ukr</option>
                    </select>
                    </div>
                    <div class="col-md-10">
                    <select id="social_list" multiple="multiple">
                        <option value="tw" selected>Twitter</option>
                        <option value="fb">Facebook</option>
                        <option value="gplus">Google+</option>
                    </select>
                    </div>
                </div>

                <div class="col-md-12">&nbsp;</div>


                <div class="col-md-12">
                <div class="col-md-11" id="line1_container">
                    <div class="input-group">
                        <span class="input-group-addon">Compare line 1</span>
                        <input id="lines[]" type="text" class="form-control" placeholder="Enter text or URL">
                    </div>
                </div>
                <div class="col-md-1">
                <button type="submit" class="btn btn-default" id="add_line_btn">Add line</button>
                </div>
                </div>


                <div class="col-md-12">&nbsp;</div>
                
                <div class="col-md-12">
                <div class="col-md-4">
                    <button type="submit" class="btn btn-default" id="request_submit" style="display:none">Compare</button>
                    <script src='https://www.google.com/recaptcha/api.js'></script>
                    <div class="g-recaptcha" data-sitekey="6Ld6RwsTAAAAAJqIAe9GnyGS9UxwYspRJA5RGxYj" data-callback="recaptchaCallback" style="transform: scale(0.75);transform-origin: 0 0;" data-size=""></div>
                    <!--input id="request_cancel" name="request_cancel" class="ts-style-button small captcha" type="submit" value="Cancel" style="z-index:2;position:relative;display:none;" onclick="progressBar.init().hide();return false;"-->
                </div>
                
                <div class="col-md-8">
                    <button type="submit" class="btn btn-default captcha" id="request_cancel" onclick="progressBar.init().hide();return false;" style="z-index:2;position:relative;display:none">Cancel</button>
                    <span id="request_progressbar"></span>
                    <span id="error_message"></span>
                </div>

                </div>

            </div>

            <div class="panel-footer" style="background: #ffffff;">
                <div id="compare_result"></div>
                <div class="wrapper" style="display:none" id="request_spinner">
                    <svg class="hourglass" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 206" preserveAspectRatio="none">
                        <path class="middle" d="M120 0H0v206h120V0zM77.1 133.2C87.5 140.9 92 145 92 152.6V178H28v-25.4c0-7.6 4.5-11.7 14.9-19.4 6-4.5 13-9.6 17.1-17 4.1 7.4 11.1 12.6 17.1 17zM60 89.7c-4.1-7.3-11.1-12.5-17.1-17C32.5 65.1 28 61 28 53.4V28h64v25.4c0 7.6-4.5 11.7-14.9 19.4-6 4.4-13 9.6-17.1 16.9z"/>
                        <path class="outer" d="M93.7 95.3c10.5-7.7 26.3-19.4 26.3-41.9V0H0v53.4c0 22.5 15.8 34.2 26.3 41.9 3 2.2 7.9 5.8 9 7.7-1.1 1.9-6 5.5-9 7.7C15.8 118.4 0 130.1 0 152.6V206h120v-53.4c0-22.5-15.8-34.2-26.3-41.9-3-2.2-7.9-5.8-9-7.7 1.1-2 6-5.5 9-7.7zM70.6 103c0 18 35.4 21.8 35.4 49.6V192H14v-39.4c0-27.9 35.4-31.6 35.4-49.6S14 81.2 14 53.4V14h92v39.4C106 81.2 70.6 85 70.6 103z"/>
                    </svg>
                </div>
            </div>

        </div>

    </div>

    <!--div class="col-md-1">&nbsp;</div-->
</div>

<div class="col-md-12">
<!--div class="col-md-1">&nbsp;</div-->
<div class="col-md-12">
<div class="panel panel-primary">
    <div class="panel-heading">Examples of comparison</div>
    <div class="panel-body">
        <div class="row">
          <div class="col-md-3">
            <div class="thumbnail">
              <a href="javascript:void(0)" onclick="examplesComparasion('Android', 'iOS')">
                <img src="/wp-content/plugins/social-networks-echo-widget/images/1.png" class="img-circle" alt="Compare 'Android vs iOS'" style="width:100%">
                <div class="caption">
                  Android vs iOS
                </div>
              </a>
            </div>
          </div>
          <div class="col-md-3">
            <div class="thumbnail">
              <a href="javascript:void(0)" onclick="examplesComparasion('Donald Trump', 'Angela Merkel')">
                <img src="/wp-content/plugins/social-networks-echo-widget/images/2.jpg" class="img-circle" alt="Compare 'Donald Trump vs Angela Merkel'" style="width:100%">
                <div class="caption">
                  Donald Trump vs Angela Merkel
                </div>
              </a>
            </div>
          </div>
          <div class="col-md-3">
            <div class="thumbnail">
              <a href="javascript:void(0)" onclick="examplesComparasion('Serena Williams', 'Angelique Kerber')">
                <img src="/wp-content/plugins/social-networks-echo-widget/images/3.jpg" class="img-circle" alt="Compare 'Serena Williams vs Angelique Kerber'" style="width:100%">
                <div class="caption">
                  Serena Williams vs Angelique Kerber
                </div>
              </a>
            </div>
          </div>
          <div class="col-md-3">
            <div class="thumbnail">
              <a href="javascript:void(0)" onclick="examplesComparasion('Rihanna', 'Beyonce')">
                <img src="/wp-content/plugins/social-networks-echo-widget/images/4.jpg" class="img-circle" alt="Compare 'Rihanna vs Beyonce'" style="width:100%">
                <div class="caption">
                  Rihanna vs Beyonce
                </div>
              </a>
            </div>
          </div>
        </div>
    </div>
</div>
</div>
<!--div class="col-md-1">&nbsp;</div-->
</div>

</div>


<script>
jQuery(function() {
    var lineXContainerIndex = 1;
    jQuery('#add_line_btn').on('click', function() {
        var line1ContainerId = 'line1_container';
        if (jQuery('#' + line1ContainerId + ' .input-group').length >= 5) {
            return false;
        }
        var lineXContainerObj = jQuery('#' + line1ContainerId + ' .input-group:first').clone();
        jQuery('#' + line1ContainerId + ' .input-group:last').after(lineXContainerObj);
        lineXContainerObj
            .find('.input-group-addon')
            .html('Compare line ' + (++lineXContainerIndex));
        lineXContainerObj
            .find('input')
            .val('');
    });
    
    jQuery('#request_submit').on('click', function() {
        //jQuery('.wrapper').show();
        jQuery('#compare_result').html('');
        jQuery('#error_message').html('');


        // progressbar update
        progressBar
            .init({
                progress: 1,
                operator: 'asc'
            })
            .show();


        var lines = jQuery('input[id*="lines"]');
        var linesArray = [];
        jQuery.each(lines, function(lineIndex) {
            var lineData = {};
            lineData.value = jQuery(lines[lineIndex]).val();
            linesArray.push(lineData);
        });
        jQuery.ajax({
            url: '/wp-admin/admin-ajax.php?action=SNE_compareAPI',
            method: 'post',
            data: {
                lines: linesArray, 
                lang: jQuery('#lang').val(),
                socialList: jQuery('#social_list').val(),
                recaptcha: jQuery('.g-recaptcha-response').val()
            },
            success: function (data) {
                if (!data) {
                    return false;
                }
                data = JSON.parse(data);
                console.info(data);
                if (data.status == true) {
                    jQuery('#compare_result').html(data.data);
                } else {
                    jQuery('#error_message').html(data.message);
                }
                
                jQuery('#request_cancel').click();
                //jQuery('.wrapper').hide();
            }
        });
    });
    jQuery('#social_list').multiselect({
        allSelectedText: false
    });
});
function examplesComparasion(line1value, line2value) {
    var line1Obj = jQuery('#line1_container').find('input:eq(0)');
    var line2Obj = jQuery('#line1_container').find('input:eq(1)');
    if (!line2Obj.length) {
        jQuery('#add_line_btn').click();
        var line2Obj = jQuery('#line1_container').find('input:eq(1)');
    }
    line1Obj.val(line1value);
    line2Obj.val(line2value);
    jQuery('#error_message').html('');
    //jQuery('#request_submit').click();
}
/* Ajax controler */
var ajaxControler = {
    xhrPool: [],
    init: function() {
        if (this.xhrPool.length) {
            return this;
        }
        var ajaxControler = this;
        jQuery(document).ajaxSend(function(e, jqXHR, options){
            ajaxControler.xhrPool.push(jqXHR);
        });
        jQuery(document).ajaxComplete(function(e, jqXHR, options) {
            ajaxControler.xhrPool = $.grep(ajaxControler.xhrPool, function(x){return x!=jqXHR});
        });
        return this;
    },
    abort: function() {
        $.each(this.xhrPool, function(idx, jqXHR) {
            jqXHR.abort();
        });
    }
}

/* Progress bar for spinner */
var progressBar = {
    intervalId: false,
    params: {},
    init: function(params) {
        // console.info('progressBar-init');
        if (this.intervalId) {
            return this;
        }
        params = params || {};
        
        defaultParams = {
            progress: 0,
            progressMax: 60 * 30,
            progressMin: 0,
            container: jQuery("#request_progressbar"),
            operator: 'desc'
        }

        this.params = $.extend(defaultParams, params);
        
        return this;
    },
    show: function() {
        //console.info('progressBar-show');
        var progressBar = this;

        // show progress
        this.params.container
            .html(this.params.progress)
            .show();

        // hide / show buttons
        jQuery('#request_submit').hide();
        jQuery('#request_cancel').show();

        jQuery('#request_spinner').show();
        var w = jQuery('#compare_container').width();
        var h = jQuery('#compare_container').height();
        jQuery('#request_noactivity')
            .css({
                width: w,
                height: h
            })
            .show();

        if (!this.intervalId) {
            this.intervalId = setInterval(function() {
                progressBar[progressBar.params.operator]();
            }, 1000);
        }
    },
    asc: function() {
        progressBar.params.progress++;
        progressBar.show();
        
        /*if (progressBar.params.progress >= progressBar.params.progressMax) {
            progressBar.hide();
        }*/
    },
    desc: function() {
        progressBar.params.progress--;
        progressBar.show();
        
        if (progressBar.params.progress <= progressBar.params.progressMin) {
            progressBar.hide();
        }
    },
    hide: function() {
        //console.info('progressBar-hide');
        // hide progress
        this.params.container
            .html('')
            .hide();

        // hide / show buttons
        jQuery('#request_cancel').hide();
        //jQuery('#request_submit').show();

        jQuery('#request_spinner').hide();
        jQuery('#request_noactivity').hide();

        if (this.intervalId) {
            clearInterval(this.intervalId);
            this.intervalId = false;
            ajaxControler.init().abort();
        }

        grecaptcha.reset();
    }
}
/* Recaptcha callback */
function recaptchaCallback() {
    $('#request_submit').click();
}
</script><!--DEBUG:--><!--DEBUG:--><!--DEBUG-spv--><style>
/* spinner */
html {
  box-sizing: border-box;
  /*font-family: "Lato, sans-serif";*/
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

html {
  width: 100%;
  height: 100%;
  font-size: 62.5%;
  /*font-family: 'Lato', sans-serif;*/
  color: #4d4d4d;
}

body {
  width: 100%;
  height: 100%;
  font-size: 1.6em;
}

.wrapper {
  font-size: 1.6rem;
  /*background: #dad8d2;*/
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.clearfix:before,
.clearfix:after {
  content: ' ';
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1;
}

html, body {
  width: 100%;
  background: #dad8d2;
}

.hourglass {
  display: block;
  background: #dad8d2;
  margin: 3em auto;
  width: 2em;
  height: 4em;
  box-shadow: inset #dad8d2 0 0 0 0, inset #337ab7 0 2em 0 0, inset #dad8d2 0 0 4em 0;
  -webkit-animation: hourglass 1s linear infinite;
          animation: hourglass 1s linear infinite;
}

.outer {
  fill: #337ab7;
}

.middle {
  fill: #ffffff;
}

@-webkit-keyframes hourglass {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    box-shadow: inset #dad8d2 0 0 0 0, inset #337ab7 0 2em 0 0, inset #dad8d2 0 4em 0 0, inset #337ab7 0 4em 0 0;
  }
  80% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    box-shadow: inset #dad8d2 0 2em 0 0, inset #337ab7 0 2em 0 0, inset #dad8d2 0 2em 0 0, inset #337ab7 0 4em 0 0;
  }
  100% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
    box-shadow: inset #dad8d2 0 2em 0 0, inset #337ab7 0 2em 0 0, inset #dad8d2 0 2em 0 0, inset #337ab7 0 4em 0 0;
  }
}

@keyframes hourglass {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    box-shadow: inset #dad8d2 0 0 0 0, inset #337ab7 0 2em 0 0, inset #dad8d2 0 4em 0 0, inset #337ab7 0 4em 0 0;
  }
  80% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    box-shadow: inset #dad8d2 0 2em 0 0, inset #337ab7 0 2em 0 0, inset #dad8d2 0 2em 0 0, inset #337ab7 0 4em 0 0;
  }
  100% {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
    box-shadow: inset #dad8d2 0 2em 0 0, inset #337ab7 0 2em 0 0, inset #dad8d2 0 2em 0 0, inset #337ab7 0 4em 0 0;
  }
}

/* other fix */
.topwords24-modal-social {
    padding-bottom: 0px;
}
.topwords24-modal-social .topwords24-word-facebook {
    float: left;
}
.topwords24-modal-social .topwords24-modal-content {
    width: 100%;
}

</style>

<!--link href='//fonts.googleapis.com/css?family=Lato:900,400' rel='stylesheet' type='text/css'-->

<div class="col-md-12" id="compare_container">
<div id="request_noactivity" style="opacity: 0.5; position: absolute; z-index: 1; background: rgb(243, 243, 243); width: 1170px; height: 359px; display: none;"></div>

<div class="col-md-12">
    <!--div class="col-md-1">&nbsp;</div-->
    <div class="col-md-12" id="search">

        <div class="panel panel-primary">
            <div class="panel-heading">Compare trends, words, text by social networks</div>
            <div class="panel-body">
                <div class="col-md-12">
                    <div class="col-md-2">
                    <select id="lang" class="form-control">
                      <option value="en" selected>en</option>
                      <option value="ja">ja</option>
                      <option value="ru">ru</option>
                      <option value="pl">pl</option>
                      <option value="ukr">ukr</option>
                    </select>
                    </div>
                    <div class="col-md-10">
                    <select id="social_list" multiple="multiple">
                        <option value="tw" selected>Twitter</option>
                        <option value="fb">Facebook</option>
                        <option value="gplus">Google+</option>
                    </select>
                    </div>
                </div>

                <div class="col-md-12">&nbsp;</div>


                <div class="col-md-12">
                <div class="col-md-11" id="line1_container">
                    <div class="input-group">
                        <span class="input-group-addon">Compare line 1</span>
                        <input id="lines[]" type="text" class="form-control" placeholder="Enter text or URL">
                    </div>
                </div>
                <div class="col-md-1">
                <button type="submit" class="btn btn-default" id="add_line_btn">Add line</button>
                </div>
                </div>


                <div class="col-md-12">&nbsp;</div>
                
                <div class="col-md-12">
                <div class="col-md-4">
                    <button type="submit" class="btn btn-default" id="request_submit" style="display:none">Compare</button>
                    <script src='https://www.google.com/recaptcha/api.js'></script>
                    <div class="g-recaptcha" data-sitekey="6Ld6RwsTAAAAAJqIAe9GnyGS9UxwYspRJA5RGxYj" data-callback="recaptchaCallback" style="transform: scale(0.75);transform-origin: 0 0;" data-size=""></div>
                    <!--input id="request_cancel" name="request_cancel" class="ts-style-button small captcha" type="submit" value="Cancel" style="z-index:2;position:relative;display:none;" onclick="progressBar.init().hide();return false;"-->
                </div>
                
                <div class="col-md-8">
                    <button type="submit" class="btn btn-default captcha" id="request_cancel" onclick="progressBar.init().hide();return false;" style="z-index:2;position:relative;display:none">Cancel</button>
                    <span id="request_progressbar"></span>
                    <span id="error_message"></span>
                </div>

                </div>

            </div>

            <div class="panel-footer" style="background: #ffffff;">
                <div id="compare_result"></div>
                <div class="wrapper" style="display:none" id="request_spinner">
                    <svg class="hourglass" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 206" preserveAspectRatio="none">
                        <path class="middle" d="M120 0H0v206h120V0zM77.1 133.2C87.5 140.9 92 145 92 152.6V178H28v-25.4c0-7.6 4.5-11.7 14.9-19.4 6-4.5 13-9.6 17.1-17 4.1 7.4 11.1 12.6 17.1 17zM60 89.7c-4.1-7.3-11.1-12.5-17.1-17C32.5 65.1 28 61 28 53.4V28h64v25.4c0 7.6-4.5 11.7-14.9 19.4-6 4.4-13 9.6-17.1 16.9z"/>
                        <path class="outer" d="M93.7 95.3c10.5-7.7 26.3-19.4 26.3-41.9V0H0v53.4c0 22.5 15.8 34.2 26.3 41.9 3 2.2 7.9 5.8 9 7.7-1.1 1.9-6 5.5-9 7.7C15.8 118.4 0 130.1 0 152.6V206h120v-53.4c0-22.5-15.8-34.2-26.3-41.9-3-2.2-7.9-5.8-9-7.7 1.1-2 6-5.5 9-7.7zM70.6 103c0 18 35.4 21.8 35.4 49.6V192H14v-39.4c0-27.9 35.4-31.6 35.4-49.6S14 81.2 14 53.4V14h92v39.4C106 81.2 70.6 85 70.6 103z"/>
                    </svg>
                </div>
            </div>

        </div>

    </div>

    <!--div class="col-md-1">&nbsp;</div-->
</div>

<div class="col-md-12">
<!--div class="col-md-1">&nbsp;</div-->
<div class="col-md-12">
<div class="panel panel-primary">
    <div class="panel-heading">Examples of comparison</div>
    <div class="panel-body">
        <div class="row">
          <div class="col-md-3">
            <div class="thumbnail">
              <a href="javascript:void(0)" onclick="examplesComparasion('Android', 'iOS')">
                <img src="/wp-content/plugins/social-networks-echo-widget/images/1.png" class="img-circle" alt="Compare 'Android vs iOS'" style="width:100%">
                <div class="caption">
                  Android vs iOS
                </div>
              </a>
            </div>
          </div>
          <div class="col-md-3">
            <div class="thumbnail">
              <a href="javascript:void(0)" onclick="examplesComparasion('Donald Trump', 'Angela Merkel')">
                <img src="/wp-content/plugins/social-networks-echo-widget/images/2.jpg" class="img-circle" alt="Compare 'Donald Trump vs Angela Merkel'" style="width:100%">
                <div class="caption">
                  Donald Trump vs Angela Merkel
                </div>
              </a>
            </div>
          </div>
          <div class="col-md-3">
            <div class="thumbnail">
              <a href="javascript:void(0)" onclick="examplesComparasion('Serena Williams', 'Angelique Kerber')">
                <img src="/wp-content/plugins/social-networks-echo-widget/images/3.jpg" class="img-circle" alt="Compare 'Serena Williams vs Angelique Kerber'" style="width:100%">
                <div class="caption">
                  Serena Williams vs Angelique Kerber
                </div>
              </a>
            </div>
          </div>
          <div class="col-md-3">
            <div class="thumbnail">
              <a href="javascript:void(0)" onclick="examplesComparasion('Rihanna', 'Beyonce')">
                <img src="/wp-content/plugins/social-networks-echo-widget/images/4.jpg" class="img-circle" alt="Compare 'Rihanna vs Beyonce'" style="width:100%">
                <div class="caption">
                  Rihanna vs Beyonce
                </div>
              </a>
            </div>
          </div>
        </div>
    </div>
</div>
</div>
<!--div class="col-md-1">&nbsp;</div-->
</div>

</div>


<script>
jQuery(function() {
    var lineXContainerIndex = 1;
    jQuery('#add_line_btn').on('click', function() {
        var line1ContainerId = 'line1_container';
        if (jQuery('#' + line1ContainerId + ' .input-group').length >= 5) {
            return false;
        }
        var lineXContainerObj = jQuery('#' + line1ContainerId + ' .input-group:first').clone();
        jQuery('#' + line1ContainerId + ' .input-group:last').after(lineXContainerObj);
        lineXContainerObj
            .find('.input-group-addon')
            .html('Compare line ' + (++lineXContainerIndex));
        lineXContainerObj
            .find('input')
            .val('');
    });
    
    jQuery('#request_submit').on('click', function() {
        //jQuery('.wrapper').show();
        jQuery('#compare_result').html('');
        jQuery('#error_message').html('');


        // progressbar update
        progressBar
            .init({
                progress: 1,
                operator: 'asc'
            })
            .show();


        var lines = jQuery('input[id*="lines"]');
        var linesArray = [];
        jQuery.each(lines, function(lineIndex) {
            var lineData = {};
            lineData.value = jQuery(lines[lineIndex]).val();
            linesArray.push(lineData);
        });
        jQuery.ajax({
            url: '/wp-admin/admin-ajax.php?action=SNE_compareAPI',
            method: 'post',
            data: {
                lines: linesArray, 
                lang: jQuery('#lang').val(),
                socialList: jQuery('#social_list').val(),
                recaptcha: jQuery('.g-recaptcha-response').val()
            },
            success: function (data) {
                if (!data) {
                    return false;
                }
                data = JSON.parse(data);
                console.info(data);
                if (data.status == true) {
                    jQuery('#compare_result').html(data.data);
                } else {
                    jQuery('#error_message').html(data.message);
                }
                
                jQuery('#request_cancel').click();
                //jQuery('.wrapper').hide();
            }
        });
    });
    jQuery('#social_list').multiselect({
        allSelectedText: false
    });
});
function examplesComparasion(line1value, line2value) {
    var line1Obj = jQuery('#line1_container').find('input:eq(0)');
    var line2Obj = jQuery('#line1_container').find('input:eq(1)');
    if (!line2Obj.length) {
        jQuery('#add_line_btn').click();
        var line2Obj = jQuery('#line1_container').find('input:eq(1)');
    }
    line1Obj.val(line1value);
    line2Obj.val(line2value);
    jQuery('#error_message').html('');
    //jQuery('#request_submit').click();
}
/* Ajax controler */
var ajaxControler = {
    xhrPool: [],
    init: function() {
        if (this.xhrPool.length) {
            return this;
        }
        var ajaxControler = this;
        jQuery(document).ajaxSend(function(e, jqXHR, options){
            ajaxControler.xhrPool.push(jqXHR);
        });
        jQuery(document).ajaxComplete(function(e, jqXHR, options) {
            ajaxControler.xhrPool = $.grep(ajaxControler.xhrPool, function(x){return x!=jqXHR});
        });
        return this;
    },
    abort: function() {
        $.each(this.xhrPool, function(idx, jqXHR) {
            jqXHR.abort();
        });
    }
}

/* Progress bar for spinner */
var progressBar = {
    intervalId: false,
    params: {},
    init: function(params) {
        // console.info('progressBar-init');
        if (this.intervalId) {
            return this;
        }
        params = params || {};
        
        defaultParams = {
            progress: 0,
            progressMax: 60 * 30,
            progressMin: 0,
            container: jQuery("#request_progressbar"),
            operator: 'desc'
        }

        this.params = $.extend(defaultParams, params);
        
        return this;
    },
    show: function() {
        //console.info('progressBar-show');
        var progressBar = this;

        // show progress
        this.params.container
            .html(this.params.progress)
            .show();

        // hide / show buttons
        jQuery('#request_submit').hide();
        jQuery('#request_cancel').show();

        jQuery('#request_spinner').show();
        var w = jQuery('#compare_container').width();
        var h = jQuery('#compare_container').height();
        jQuery('#request_noactivity')
            .css({
                width: w,
                height: h
            })
            .show();

        if (!this.intervalId) {
            this.intervalId = setInterval(function() {
                progressBar[progressBar.params.operator]();
            }, 1000);
        }
    },
    asc: function() {
        progressBar.params.progress++;
        progressBar.show();
        
        /*if (progressBar.params.progress >= progressBar.params.progressMax) {
            progressBar.hide();
        }*/
    },
    desc: function() {
        progressBar.params.progress--;
        progressBar.show();
        
        if (progressBar.params.progress <= progressBar.params.progressMin) {
            progressBar.hide();
        }
    },
    hide: function() {
        //console.info('progressBar-hide');
        // hide progress
        this.params.container
            .html('')
            .hide();

        // hide / show buttons
        jQuery('#request_cancel').hide();
        //jQuery('#request_submit').show();

        jQuery('#request_spinner').hide();
        jQuery('#request_noactivity').hide();

        if (this.intervalId) {
            clearInterval(this.intervalId);
            this.intervalId = false;
            ajaxControler.init().abort();
        }

        grecaptcha.reset();
    }
}
/* Recaptcha callback */
function recaptchaCallback() {
    $('#request_submit').click();
}
</script><!--DEBUG-spv-->{"id":1268650,"date":"2018-11-20T16:24:54","date_gmt":"2018-11-20T14:24:54","guid":{"rendered":"http:\/\/nhub.news\/social_networks_echo-52\/"},"modified":"2018-11-20T16:24:54","modified_gmt":"2018-11-20T14:24:54","slug":"social_networks_echo-52","status":"publish","type":"page","link":"http:\/\/nhub.news\/de\/social_networks_echo-52\/","title":{"rendered":"Social Networks Echo"},"content":{"rendered":"\n<script>jQuery(function(){jQuery(\".vc_icon_element-icon\").css(\"top\", \"0px\");});<\/script><script>jQuery(function(){jQuery(\"#td_post_ranks\").css(\"height\", \"10px\");});<\/script><script>jQuery(function(){jQuery(\".td-post-content\").find(\"p\").find(\"img\").hide();});<\/script>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"http:\/\/nhub.news\/de\/wp-json\/wp\/v2\/pages\/1268650"}],"collection":[{"href":"http:\/\/nhub.news\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/nhub.news\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/nhub.news\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/nhub.news\/de\/wp-json\/wp\/v2\/comments?post=1268650"}],"version-history":[{"count":0,"href":"http:\/\/nhub.news\/de\/wp-json\/wp\/v2\/pages\/1268650\/revisions"}],"wp:attachment":[{"href":"http:\/\/nhub.news\/de\/wp-json\/wp\/v2\/media?parent=1268650"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}