## -*- coding: utf-8 -*-

<%inherit file="/base/base.html"/>

<%def name="title()">

${_('%s Changelog') % c.repo_name} - ${c.rhodecode_name}

</%def>

<%def name="breadcrumbs_links()">

    <% size = c.size if c.size <= c.total_cs else c.total_cs %>

    ${_('Changelog')} - ${ungettext('showing %d out of %d revision', 'showing %d out of %d revisions', size) % (size, c.total_cs)}

</%def>

<%def name="page_nav()">

    ${self.menu('changelog')}

</%def>

<%def name="main()">

${self.context_bar('changelog')}

<div class="box">

    <!-- box / title -->

    <div class="title">

        ${self.breadcrumbs()}

    </div>

    <div class="table">

        % if c.pagination:

            <div id="graph">

                    <div class="info_box" style="clear: both;padding: 10px 6px;min-height: 12px;text-align: right;">

                    <a href="#" class="ui-btn small" id="rev_range_container" style="display:none"></a>

                    <a href="#" class="ui-btn small" id="rev_range_clear" style="display:none">${_('Clear selection')}</a>

                    %if c.rhodecode_db_repo.fork:

                        <a id="compare_fork" title="${_('Compare fork with %s' % c.rhodecode_db_repo.fork.repo_name)}" href="${h.url('compare_url',repo_name=c.rhodecode_db_repo.fork.repo_name,org_ref_type='branch',org_ref='default',other_repo=c.repo_name,other_ref_type='branch',other_ref=request.GET.get('branch') or 'default',merge=1)}" class="ui-btn small">${_('Compare fork with parent')}</a>

                    %endif

                    %if h.is_hg(c.rhodecode_repo):

                    <a id="open_new_pr" href="${h.url('pullrequest_home',repo_name=c.repo_name)}" class="ui-btn small">${_('Open new pull request')}</a>

                    %endif

                </div>

                <div class="container_header">

                    ${h.form(h.url.current(),method='get')}

                    <div style="float:left">

                        ${h.submit('set',_('Show'),class_="ui-btn")}

                        ${h.text('size',size=1,value=c.size)}

                        ${_('revisions')}

                    </div>

                    ${h.end_form()}

                    <div style="float:right">${h.select('branch_filter',c.branch_name,c.branch_filters)}</div>

                </div>

                <div id="graph_nodes">

                    <canvas id="graph_canvas"></canvas>

                </div>

                <div id="graph_content">

                <table id="changesets">

                <tbody>

                %for cnt,cs in enumerate(c.pagination):

                    <tr id="chg_${cnt+1}" class="container ${'tablerow%s' % (cnt%2)}">

                        <td class="checkbox">

                            ${h.checkbox(cs.raw_id,class_="changeset_range")}

                        </td>

                        <td class="author">

                            <img alt="gravatar" src="${h.gravatar_url(h.email_or_none(cs.author),16)}"/>

                            <span title="${cs.author}" class="user">${h.shorter(h.person(cs.author),22)}</span>

                        </td>

                        <td class="hash">

                            <a href="${h.url('changeset_home',repo_name=c.repo_name,revision=cs.raw_id)}">

                                <span class="changeset_hash">${h.short_id(cs.raw_id)}</span>

                            </a>

                        </td>

                        <td class="date">

                            <div class="date">${h.age(cs.date,True)}</div>

                        </td>

                        <td class="mid">

                            <div class="log-container">

                                <div class="message">${h.urlify_commit(cs.message, c.repo_name,h.url('changeset_home',repo_name=c.repo_name,revision=cs.raw_id))}</div>

                                <div class="expand"><span class="expandtext">&darr; ${_('Show more')} &darr;</span></div>

                                <div class="extra-container">

                                    %if c.comments.get(cs.raw_id,[]):

                                        <div class="comments-container">

                                            <div class="comments-cnt" title="${('comments')}">

                                                <a href="${h.url('changeset_home',repo_name=c.repo_name,revision=cs.raw_id,anchor='comment-%s' % c.comments[cs.raw_id][0].comment_id)}">

                                                    ${len(c.comments[cs.raw_id])}

                                                </a>

                                            </div>

                                        </div>

                                    %endif

                                    %for book in cs.bookmarks:

                                        <div class="bookbook" title="${'%s %s' % (_('bookmark'),book)}">

                                            ${h.link_to(h.shorter(book),h.url('files_home',repo_name=c.repo_name,revision=cs.raw_id))}

                                        </div>

                                    %endfor

                                    %for tag in cs.tags:

                                        <div class="tagtag"  title="${'%s %s' % (_('tag'),tag)}">

                                            ${h.link_to(h.shorter(tag),h.url('files_home',repo_name=c.repo_name,revision=cs.raw_id))}

                                        </div>

                                    %endfor

                                    %if (not c.branch_name) and cs.branch:

                                        <div class="branchtag" title="${'%s %s' % (_('branch'),cs.branch)}">

                                            ${h.link_to(h.shorter(cs.branch),h.url('changelog_home',repo_name=c.repo_name,branch=cs.branch))}

                                        </div>

                                    %endif

                                </div>

                            </div>

                        </td>

                    </tr>

                %endfor

                </tbody>

                </table>

                <div class="pagination-wh pagination-left">

                    ${c.pagination.pager('$link_previous ~2~ $link_next')}

                </div>

            </div>

        </div>

        <script type="text/javascript" src="${h.url('/js/graph.js')}"></script>

        <script type="text/javascript">

            YAHOO.util.Event.onDOMReady(function(){

                //Monitor range checkboxes and build a link to changesets

                //ranges

                var checkboxes = YUD.getElementsByClassName('changeset_range');

                var url_tmpl = "${h.url('changeset_home',repo_name=c.repo_name,revision='__REVRANGE__')}";

                var pr_tmpl = "${h.url('pullrequest_home',repo_name=c.repo_name)}";

                    var checkbox_checker = function(e){

                    var checked_checkboxes = [];

                    for (pos in checkboxes){

                        if(checkboxes[pos].checked){

                            checked_checkboxes.push(checkboxes[pos]);

                        }

                    }

                    if(YUD.get('open_new_pr')){

                            if(checked_checkboxes.length>1){

                              YUD.setStyle('open_new_pr','display','none');

                            } else {

                               YUD.setStyle('open_new_pr','display','');

                            if(checked_checkboxes.length>0){

                              YUD.get('open_new_pr').innerHTML = _TM['Open new pull request for selected changesets'];

                            }else{

                              YUD.get('open_new_pr').innerHTML = _TM['Open new pull request'];

                            }

                          }

                        }

                    if(checked_checkboxes.length>0){

                        var rev_end = checked_checkboxes[0].name;

                        var rev_start = checked_checkboxes[checked_checkboxes.length-1].name;

                        var url = url_tmpl.replace('__REVRANGE__',

                                rev_start+'...'+rev_end);

                        var link = (rev_start == rev_end)

                            ? _TM['Show selected change __S']

                            : _TM['Show selected changes __S -> __E'];

                        link = link.replace('__S',rev_start.substr(0,6));

                        link = link.replace('__E',rev_end.substr(0,6));

                        YUD.get('rev_range_container').href = url;

                        YUD.get('rev_range_container').innerHTML = link;

                        YUD.setStyle('rev_range_container','display','');

                        YUD.setStyle('rev_range_clear','display','');

                        YUD.get('open_new_pr').href = pr_tmpl + '?rev_start={0}&rev_end={1}'.format(rev_start,rev_end);

                            YUD.setStyle('compare_fork','display','none');

                    } else{

                        YUD.setStyle('rev_range_container','display','none');

                        YUD.setStyle('rev_range_clear','display','none');

                            if (checkboxes){

                                YUD.get('open_new_pr').href = pr_tmpl + '?rev_end={0}'.format(checkboxes[0].name);

                            }

                            YUD.setStyle('compare_fork','display','');

                        }

                    };

                    YUE.onDOMReady(checkbox_checker);

                    YUE.on(checkboxes,'click', checkbox_checker);

                YUE.on('rev_range_clear','click',function(e){

                    for (var i=0; i<checkboxes.length; i++){

                        var cb = checkboxes[i];

                        cb.checked = false;

                    }

                        checkbox_checker();

                    YUE.preventDefault(e);

                });

                var msgs = YUQ('.message');

                // get first element height

                var el = YUQ('#graph_content .container')[0];

                var row_h = el.clientHeight;

                for(var i=0;i<msgs.length;i++){

                    var m = msgs[i];

                    var h = m.clientHeight;

                    var pad = YUD.getStyle(m,'padding');

                    if(h > row_h){

                        var offset = row_h - (h+12);

                        YUD.setStyle(m.nextElementSibling,'display','block');

                        YUD.setStyle(m.nextElementSibling,'margin-top',offset+'px');

                    };

                }

                YUE.on(YUQ('.expand'),'click',function(e){

                    var elem = e.currentTarget.parentNode.parentNode;

                    YUD.setStyle(e.currentTarget,'display','none');

                    YUD.setStyle(elem,'height','auto');

                    //redraw the graph, line_count and jsdata are global vars

                    set_canvas(100);

                    var r = new BranchRenderer();

                    r.render(jsdata,100,line_count);

                });

                // change branch filter

                YUE.on(YUD.get('branch_filter'),'change',function(e){

                    var selected_branch = e.currentTarget.options[e.currentTarget.selectedIndex].value;

                    var url_main = "${h.url('changelog_home',repo_name=c.repo_name)}";

                    var url = "${h.url('changelog_home',repo_name=c.repo_name,branch='__BRANCH__')}";

                    var url = url.replace('__BRANCH__',selected_branch);

                    if(selected_branch != ''){

                        window.location = url;

                    }else{

                        window.location = url_main;

                    }

                });

                function set_canvas(width) {

                    var c = document.getElementById('graph_nodes');

                    var t = document.getElementById('graph_content');

                    canvas = document.getElementById('graph_canvas');

                    var div_h = t.clientHeight;

                    //c.style.height=div_h+'px';

                    canvas.setAttribute('height',div_h);

                    //c.style.height=width+'px';

                    canvas.setAttribute('width',width);

                };

                var heads = 1;

                var line_count = 0;

                var jsdata = ${c.jsdata|n};

                for (var i=0;i<jsdata.length;i++) {

                    var in_l = jsdata[i][2];

                    for (var j in in_l) {

                        var m = in_l[j][1];

                        if (m > line_count)

                            line_count = m;

                    }

                }

                set_canvas(100);

                var r = new BranchRenderer();

                r.render(jsdata,100,line_count);

            });

        </script>

        %else:

            ${_('There are no changes yet')}

        %endif

    </div>

</div>

</%def>

</%def>

<%def name="breadcrumbs_links()">

    ${_('Summary')}

</%def>

<%def name="page_nav()">

    ${self.menu('summary')}

</%def>

<%def name="head_extra()">

<link href="${h.url('atom_feed_home',repo_name=c.dbrepo.repo_name,api_key=c.rhodecode_user.api_key)}" rel="alternate" title="${_('repo %s ATOM feed') % c.repo_name}" type="application/atom+xml" />

<link href="${h.url('rss_feed_home',repo_name=c.dbrepo.repo_name,api_key=c.rhodecode_user.api_key)}" rel="alternate" title="${_('repo %s RSS feed') % c.repo_name}" type="application/rss+xml" />

</%def>

<%def name="main()">

    ${self.context_bar('summary')}

    <%

    summary = lambda n:{False:'summary-short'}.get(n)

    %>

    %if c.show_stats:

        <div class="box box-left">

    %else:

        <div class="box">

    %endif

    <!-- box / title -->

    <div class="title">

        ${self.breadcrumbs()}

    </div>

    <!-- end box / title -->

    <div class="form">

      <div id="summary" class="fields">

             <div class="field">

              <div class="label-summary">

                  <label>${_('Name')}:</label>

              </div>

              <div class="input ${summary(c.show_stats)}">

                   ## locking icon

                    %if c.rhodecode_db_repo.enable_locking:

                      %if c.rhodecode_db_repo.locked[0]:

                        <span class="locking_locked tooltip" title="${_('Repository locked by %s') % h.person_by_id(c.rhodecode_db_repo.locked[0])}"></span>

                      %else:

                        <span class="locking_unlocked tooltip" title="${_('Repository unlocked')}"></span>

                      %endif

                    %endif

                 ##REPO TYPE

                 %if h.is_hg(c.dbrepo):

                   <img style="margin-bottom:2px" class="icon" title="${_('Mercurial repository')}" alt="${_('Mercurial repository')}" src="${h.url('/images/icons/hgicon.png')}"/>

                 %endif

                 %if h.is_git(c.dbrepo):

                   <img style="margin-bottom:2px" class="icon" title="${_('Git repository')}" alt="${_('Git repository')}" src="${h.url('/images/icons/giticon.png')}"/>

                 %endif

                 ##PUBLIC/PRIVATE

                 %if c.dbrepo.private:

                    <img style="margin-bottom:2px" class="icon" title="${_('private repository')}" alt="${_('private repository')}" src="${h.url('/images/icons/lock.png')}"/>

                 %else:

                    <img style="margin-bottom:2px" class="icon" title="${_('public repository')}" alt="${_('public repository')}" src="${h.url('/images/icons/lock_open.png')}"/>

                 %endif

                  ##REPO NAME

                  <span class="repo_name" title="${_('Non changable ID %s') % c.dbrepo.repo_id}">${h.repo_link(c.dbrepo.groups_and_repo)}</span>

                  ##FORK

                  %if c.dbrepo.fork:

                    <div style="margin-top:5px;clear:both">

                    <a href="${h.url('summary_home',repo_name=c.dbrepo.fork.repo_name)}"><img class="icon" alt="${_('public')}" title="${_('Fork of')} ${c.dbrepo.fork.repo_name}" src="${h.url('/images/icons/arrow_divide.png')}"/>

                        ${_('Fork of')} ${c.dbrepo.fork.repo_name}

                    </a>

                    </div>

                  %endif

                  ##REMOTE

                  %if c.dbrepo.clone_uri:

                    <div style="margin-top:5px;clear:both">

                    <a href="${h.url(str(h.hide_credentials(c.dbrepo.clone_uri)))}"><img class="icon" alt="${_('remote clone')}" title="${_('Clone from')} ${h.hide_credentials(c.dbrepo.clone_uri)}" src="${h.url('/images/icons/connect.png')}"/>

                        ${_('Clone from')} ${h.hide_credentials(c.dbrepo.clone_uri)}

                    </a>

                    </div>

                  %endif

              </div>

             </div>

             <div class="field">

              <div class="label-summary">

                  <label>${_('Description')}:</label>

              </div>

              %if c.visual.stylify_metatags:

                <div class="input ${summary(c.show_stats)} desc">${h.urlify_text(h.desc_stylize(c.dbrepo.description))}</div>

              %else:

                <div class="input ${summary(c.show_stats)} desc">${h.urlify_text(c.dbrepo.description)}</div>

              %endif

             </div>

             <div class="field">

              <div class="label-summary">

                  <label>${_('Contact')}:</label>

              </div>

              <div class="input ${summary(c.show_stats)}">

                  <div class="gravatar">

                      <img alt="gravatar" src="${h.gravatar_url(c.dbrepo.user.email)}"/>

                  </div>

                      ${_('Username')}: ${c.dbrepo.user.username}<br/>

                      ${_('Name')}: ${c.dbrepo.user.name} ${c.dbrepo.user.lastname}<br/>

                      ${_('Email')}: <a href="mailto:${c.dbrepo.user.email}">${c.dbrepo.user.email}</a>

              </div>

             </div>

             <div class="field">

              <div class="label-summary">

                  <label>${_('Clone url')}:</label>

              </div>

              <div class="input ${summary(c.show_stats)}">

                  <input style="width:80%" type="text" id="clone_url" readonly="readonly" value="${c.clone_repo_url}"/>

                  <input style="display:none;width:80%" type="text" id="clone_url_id" readonly="readonly" value="${c.clone_repo_url_id}"/>

                  <div style="display:none" id="clone_by_name" class="ui-btn clone">${_('Show by Name')}</div>

                  <div id="clone_by_id" class="ui-btn clone">${_('Show by ID')}</div>

              </div>

             </div>

             <div class="field">

              <div class="label-summary">

                  <label>${_('Trending files')}:</label>

              </div>

              <div class="input ${summary(c.show_stats)}">

                %if c.show_stats:

                <div id="lang_stats"></div>

                %else:

                   ${_('Statistics are disabled for this repository')}

                   %if h.HasPermissionAll('hg.admin')('enable stats on from summary'):

                        ${h.link_to(_('enable'),h.url('edit_repo',repo_name=c.repo_name),class_="ui-btn")}

                   %endif

                %endif

              </div>

             </div>

             <div class="field">

              <div class="label-summary">

                  <label>${_('Download')}:</label>

              </div>

              <div class="input ${summary(c.show_stats)}">

                %if len(c.rhodecode_repo.revisions) == 0:

                  ${_('There are no downloads yet')}

                %elif c.enable_downloads is False:

                  ${_('Downloads are disabled for this repository')}

                    %if h.HasPermissionAll('hg.admin')('enable downloads on from summary'):

                        ${h.link_to(_('enable'),h.url('edit_repo',repo_name=c.repo_name),class_="ui-btn")}

                    %endif

                %else:

                    ${h.select('download_options',c.rhodecode_repo.get_changeset().raw_id,c.download_options)}

                         <span id="${'zip_link'}">${h.link_to(_('Download as zip'), h.url('files_archive_home',repo_name=c.dbrepo.repo_name,fname='tip.zip'),class_="archive_icon ui-btn")}</span>

                    <span style="vertical-align: bottom">

                        <input id="archive_subrepos" type="checkbox" name="subrepos" />

                        <label for="archive_subrepos" class="tooltip" title="${h.tooltip(_('Check this to download archive with subrepos'))}" >${_('with subrepos')}</label>

                    </span>

                %endif

              </div>

             </div>

        </div>

        <div id="summary-menu-stats">

          <ul>

            <li>

               <a class="followers" title="${_('Followers')}" href="${h.url('repo_followers_home',repo_name=c.repo_name)}">

                ${_('Followers')}

                <span id="current_followers_count">${c.repository_followers}</span>

              </a>

            </li>

            <li>

              <a class="forks" title="${_('Forks')}" href="${h.url('repo_forks_home',repo_name=c.repo_name)}">

                ${_('Forks')}

                <span>${c.repository_forks}</span>

              </a>

            </li>

            <li>

              %if h.HasRepoPermissionAll('repository.admin')(c.repo_name):

               %if h.HasPermissionAll('hg.admin')('access settings on repository'):

                   ${h.link_to(_('Settings'),h.url('edit_repo',repo_name=c.repo_name),class_='settings')}

               %else:

                   ${h.link_to(_('Settings'),h.url('repo_settings_home',repo_name=c.repo_name),class_='settings')}

               %endif

             %endif

            </li>

            <li>

              %if c.rhodecode_user.username != 'default':

                ${h.link_to(_('Feed'),h.url('atom_feed_home',repo_name=c.dbrepo.repo_name,api_key=c.rhodecode_user.api_key),class_='feed')}

              %else:

                ${h.link_to(_('Feed'),h.url('atom_feed_home',repo_name=c.dbrepo.repo_name),class_='feed')}

              %endif

            </li>

            %if c.rhodecode_user.username != 'default':

            <li class="repo_size">

              <span id="repo_size_2"></span>

            </li>

            %endif

          </ul>

        </div>

    </div>

</div>

%if c.show_stats:

<div class="box box-right"  style="min-height:455px">

    <!-- box / title -->

    <div class="title">

        <h5>${_('Commit activity by day / author')}</h5>

    </div>

    <div class="graph">

         <div style="padding:0 10px 10px 17px;">

         %if c.no_data:

           ${c.no_data_msg}

           %if h.HasPermissionAll('hg.admin')('enable stats on from summary'):

                ${h.link_to(_('enable'),h.url('edit_repo',repo_name=c.repo_name),class_="ui-btn")}

           %endif

        %else:

            ${_('Stats gathered: ')} ${c.stats_percentage}%

        %endif

        </div>

        <div id="commit_history" style="width:450px;height:300px;float:left"></div>

        <div style="clear: both;height: 10px"></div>

        <div id="overview" style="width:450px;height:100px;float:left"></div>

        <div id="legend_data" style="clear:both;margin-top:10px;">

            <div id="legend_container"></div>

            <div id="legend_choices">

                <table id="legend_choices_tables" class="noborder" style="font-size:smaller;color:#545454"></table>

            </div>

        </div>

    </div>

</div>

%endif

<div class="box">

    <div class="title">

        <div class="breadcrumbs">

        %if c.repo_changesets:

            ${h.link_to(_('Latest changes'),h.url('changelog_home',repo_name=c.repo_name))}

        %else:

            ${_('Quick start')}

         %endif

        </div>

    </div>

    <div class="table">

        <div id="shortlog_data">

            <%include file='../shortlog/shortlog_data.html'/>

        </div>

    </div>

</div>

%if c.readme_data:

<div id="readme" class="anchor">

<div class="box" style="background-color: #FAFAFA">

    <div class="title" title="${_("Readme file at revision '%s'" % c.rhodecode_db_repo.landing_rev)}">

        <div class="breadcrumbs">

            <a href="${h.url('files_home',repo_name=c.repo_name,revision='tip',f_path=c.readme_file)}">${c.readme_file}</a>

            <a class="permalink" href="#readme" title="${_('Permalink to this readme')}">&para;</a>

        </div>

    </div>

    <div class="readme">

      <div class="readme_box">

        ${c.readme_data|n}

      </div>

    </div>

</div>

</div>

%endif

<script type="text/javascript">

var clone_url = 'clone_url';

YUE.on(clone_url,'click',function(e){

    if(YUD.hasClass(clone_url,'selected')){

        return

    }

    else{

        YUD.addClass(clone_url,'selected');

        YUD.get(clone_url).select();

    }

})

YUE.on('clone_by_name','click',function(e){

    // show url by name and hide name button

    YUD.setStyle('clone_url','display','');

    YUD.setStyle('clone_by_name','display','none');

    // hide url by id and show name button

    YUD.setStyle('clone_by_id','display','');

    YUD.setStyle('clone_url_id','display','none');

})

YUE.on('clone_by_id','click',function(e){

    // show url by id and hide id button

    YUD.setStyle('clone_by_id','display','none');

    YUD.setStyle('clone_url_id','display','');

    // hide url by name and show id button

    YUD.setStyle('clone_by_name','display','');

    YUD.setStyle('clone_url','display','none');

})

var tmpl_links = {};

%for cnt,archive in enumerate(c.rhodecode_repo._get_archives()):

  tmpl_links["${archive['type']}"] = '${h.link_to('__NAME__', h.url('files_archive_home',repo_name=c.dbrepo.repo_name, fname='__CS__'+archive['extension'],subrepos='__SUB__'),class_='archive_icon ui-btn')}';

%endfor

YUE.on(['download_options','archive_subrepos'],'change',function(e){

   var sm = YUD.get('download_options');

   var new_cs = sm.options[sm.selectedIndex];

   for(k in tmpl_links){

       var s = YUD.get(k+'_link');

       if(s){

         var title_tmpl = "${_('Download %s as %s') % ('__CS_NAME__','__CS_EXT__')}";

         title_tmpl= title_tmpl.replace('__CS_NAME__',new_cs.text);

         title_tmpl = title_tmpl.replace('__CS_EXT__',k);

         var url = tmpl_links[k].replace('__CS__',new_cs.value);

         var subrepos = YUD.get('archive_subrepos').checked;

         url = url.replace('__SUB__',subrepos);

         url = url.replace('__NAME__',title_tmpl);

         s.innerHTML = url

       }

   }

});

</script>

%if c.show_stats:

<script type="text/javascript">

var data = ${c.trending_languages|n};

var total = 0;

var no_data = true;

var tbl = document.createElement('table');

tbl.setAttribute('class','trending_language_tbl');

var cnt = 0;

for (var i=0;i<data.length;i++){

    total+= data[i][1].count;

}

for (var i=0;i<data.length;i++){

    cnt += 1;

    no_data = false;

    var hide = cnt>2;

    var tr = document.createElement('tr');

    if (hide){

        tr.setAttribute('style','display:none');

        tr.setAttribute('class','stats_hidden');

    }

    var k = data[i][0];

    var obj = data[i][1];

    var percentage = Math.round((obj.count/total*100),2);

    var td1 = document.createElement('td');

    td1.width = 150;

    var trending_language_label = document.createElement('div');

    trending_language_label.innerHTML = obj.desc+" ("+k+")";

    td1.appendChild(trending_language_label);

    var td2 = document.createElement('td');

    td2.setAttribute('style','padding-right:14px !important');

    var trending_language = document.createElement('div');

    var nr_files = obj.count+" ${_('files')}";

    trending_language.title = k+" "+nr_files;

    if (percentage>22){

        trending_language.innerHTML = "<b style='font-size:0.8em'>"+percentage+"% "+nr_files+ "</b>";

    }

    else{

        trending_language.innerHTML = "<b style='font-size:0.8em'>"+percentage+"%</b>";

    }

    trending_language.setAttribute("class", 'trending_language top-right-rounded-corner bottom-right-rounded-corner');

    trending_language.style.width=percentage+"%";

    td2.appendChild(trending_language);

    tr.appendChild(td1);

    tr.appendChild(td2);

    tbl.appendChild(tr);

    if(cnt == 3){

        var show_more = document.createElement('tr');

        var td = document.createElement('td');

        lnk = document.createElement('a');

        lnk.href='#';