id = 'clone_url';

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

	  	        YUD.get('clone_url').select();

	  	    })

	  	})

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

  		var total = 0;

  		var no_data = true;

  		for (k in data){

  		    total += data[k];

  		    no_data = false;

  		} 

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

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

		var cnt =0;

  		for (k in data){

  			cnt+=1;

  			var hide = cnt>2;

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

	  		if (hide){

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

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

	  		}

	  		var percentage = Math.round((data[k]/total*100),2);

			var value = data[k];

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

	  		td1.width=150;

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

	  		trending_language_label.innerHTML = 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 = value+" ${_('files')}";

  		    trending_language.title = k+" "+nr_files;

  		    if (percentage>20){

  		    	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 == 2){

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

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

  		    	lnk = document.createElement('a');

  		    	lnk.href='#';

  		    	lnk.innerHTML = "${_("show more")}";

  		    	lnk.id='code_stats_show_more';

  		        td.appendChild(lnk);

  		    	show_more.appendChild(td);

  		    	show_more.appendChild(document.createElement('td'));

  		    	tbl.appendChild(show_more);

  		    }

  		}

  		if(no_data){

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

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

  			td1.innerHTML = "${c.no_data_msg}";

  			tr.appendChild(td1);

  			tbl.appendChild(tr);

		}

  		YUD.get('lang_stats').appendChild(tbl);

  		YUE.on('code_stats_show_more','click',function(){

  			l = YUD.getElementsByClassName('stats_hidden')

  			for (e in l){

  			    YUD.setStyle(l[e],'display','');

  			};

  			YUD.setStyle(YUD.get('code_stats_show_more'),

  					'display','none');

  		})

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

                 var new_cs = e.target.options[e.target.selectedIndex];

                 var tmpl_links = {}

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

                	 tmpl_links['${archive['type']}'] = '${h.link_to(archive['type'],

                        h.url('files_archive_home',repo_name=c.dbrepo.repo_name,

                        fname='__CS__'+archive['extension']),class_="archive_icon")}';

                 %endfor

                 for(k in tmpl_links){

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

                	 s.innerHTML = tmpl_links[k].replace('__CS__',new_cs.value);

                 }

             })

  	</script>    				

</div>

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

    <!-- box / title -->

    <div class="title">

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

    </div>

    <div class="table">

         <div style="padding:0 10px 10px 15px;font-size: 1.2em;">

         %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))}]

           %endif         

        %else:

            ${_('Loaded in')} ${c.stats_percentage} %

        %endif

        </div>  

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

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

        <div id="overview" style="width:460px;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" style="font-size:smaller;color:#545454"></table>

	    	</div>

    	</div>

		<script type="text/javascript">

		/**

		 * Plots summary graph

		 *

		 * @class SummaryPlot

		 * @param {from} initial from for detailed graph

		 * @param {to} initial to for detailed graph

		 * @param {dataset}

		 * @param {overview_dataset}

		 */

		function SummaryPlot(from,to,dataset,overview_dataset) {

			var initial_ranges = {

			    "xaxis":{

				    "from":from,

				   	"to":to,

				},

			};

		    var dataset = dataset;

		    var overview_dataset = [overview_dataset];

		    var choiceContainer = YUD.get("legend_choices");

		    var choiceContainerTable = YUD.get("legend_choices_tables");

		    var plotContainer = YUD.get('commit_history');

		    var overviewContainer = YUD.get('overview');

		    var plot_options = {

				bars: {show:true,align:'center',lineWidth:4},

				legend: {show:true, container:"legend_container"},

				points: {show:true,radius:0,fill:false},

				yaxis: {tickDecimals:0,},

				xaxis: {

					mode: "time", 

					timeformat: "%d/%m",

				    min:from,

				    max:to,	

				}, 

				grid: {

					hoverable: true, 

				    clickable: true,

				    autoHighlight:true,

				    color: "#999"

				},

				//selection: {mode: "x"}

		    };

		    var overview_options = {

				legend:{show:false},

			    bars: {show:true,barWidth: 2,},

			    shadowSize: 0,

			    xaxis: {mode: "time", timeformat: "%d/%m/%y",},

			    yaxis: {ticks: 3, min: 0,tickDecimals:0,},

			    grid: {color: "#999",},

			    selection: {mode: "x"}

			};

			/**

			*get dummy data needed in few places

			*/

		    function getDummyData(label){

		    	return {"label":label,

               	 "data":[{"time":0,

               		 "commits":0,