<%
# This is the maximum number of tags in the tag cloud. Javascript code will only show
# as many of them as will fit in the window.
tagcloud_number_of_keys = 300
tagcloud_number_of_tags = 30
tagcloud_number_of_relations = 30
keys = @db.select("SELECT key, scale1 FROM popular_keys ORDER BY scale1 DESC LIMIT #{ tagcloud_number_of_keys }").
    execute().
    each_with_index{ |tag, idx| tag['pos'] = (tagcloud_number_of_keys - idx) / tagcloud_number_of_keys.to_f }
tags = @db.select("SELECT skey, svalue FROM top_tags WHERE skey NOT IN ('source', 'source_ref', 'attribution') ORDER BY count_all DESC LIMIT #{ tagcloud_number_of_tags }").execute()
relations = @db.select("SELECT rtype FROM db.relation_types ORDER BY count DESC LIMIT #{ tagcloud_number_of_relations }").execute()
%>

var keys_data = <%= keys.map{ |tag| { :text => tag['key'], :size => tagcloud_size(tag) } }.to_json.gsub(/\},/, "},\n") %>,
    tags_data = <%= tags.map{ |entry| [ entry['skey'], entry['svalue'] ] }.to_json.gsub(/\],/, "],\n") %>,
    relations_data = <%= relations.map{ |row| row['rtype'] }.to_json.gsub(/\],/, "],\n") %>,
    width, height, font_family = 'Impact', font_weight = 'normal';

up = function() {};

function draw(words) {
    var fill = d3.scale.category20b();

    d3.select("div#tagcloud").append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
            .attr("transform", 'translate(' + width/2 + ',' + height/2 + ')')
            .selectAll("text")
                .data(words)
                .enter()
                .append('svg:a')
                    .attr('xlink:href', function(d) { return url_for_key(d.text); })
                    .append("text")
                    .style("font-size", function(d) { return d.size + "px"; })
                    .style("font-family", font_family)
                    .style("font-weight", font_weight)
                    .style('fill', function(d, i) { return d3.rgb(fill(i)).darker(0.5); })
                    .attr("text-anchor", "middle")
                    .attr("transform", function(d) {
                        return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
                    })
                    .text(function(d) { return d.text; });
}

function resize_home() {
    var tagcloud = jQuery('#tagcloud');
    tagcloud.empty();
    tagcloud.height(0);

    resize_box();

    fill_lists();

    height = tagcloud.parent().innerHeight();
    tagcloud.parent().children().each(function(index) {
        if (this.id != 'tagcloud') {
            height -= jQuery(this).outerHeight(true);
        }
    });
    height -= 50;
    tagcloud.height(height);

    width = tagcloud.parent().width();

    d3.layout.cloud().size([width, height])
        .words(keys_data)
        .timeInterval(10)
        .rotate(function() { return ~~(Math.random() * 5) * 30 - 60; })
        .font(font_family)
        .fontWeight(font_weight)
        .fontSize(function(d) { return d.size; })
        .on('end', draw)
        .start();
}

function fill_lists() {
    var key_list = jQuery('#key_list').empty(),
        tag_list = jQuery('#tag_list').empty(),
        relation_list = jQuery('#relation_list').empty(),
        title_td_height = 42,
        reserve_height = 64,
        max_height = jQuery('table').height() / 3 - title_td_height - reserve_height;
        i = 0;

    while (key_list.outerHeight() < max_height && keys_data[i]) {
        var d = keys_data[i];
        key_list.append(link_to_key(d.text));
        key_list.append(' &bull; ');
        i++;
    }
    key_list.append('...');

    i = 0;
    while (tag_list.outerHeight() < max_height && tags_data[i]) {
        var d = tags_data[i];
        tag_list.append(link_to_tag(d[0], d[1]));
        tag_list.append(' &bull; ');
        i++;
    }
    tag_list.append('...');

    i = 0;
    while (relation_list.outerHeight() < max_height && relations_data[i]) {
        var d = relations_data[i];
        relation_list.append(link_to_rtype(d));
        relation_list.append(' &bull; ');
        i++;
    }
    relation_list.append('...');
}

function page_init() {
    jQuery(window).resize(resize_home);
    resize_home();
}