$(function(){
    var data = [],
        startcolor = [ 0, 0, 255 ],
        endcolor = [ 255, 255, 0 ]
        elementcount = 8;

    for (var i = 0; i < elementcount; i++) {
        var r = i/elementcount,
            col = _(endcolor).map(function(e,i) {
                var s = startcolor[i]
                return Math.floor(r*e + (1-r)*s)
            });
        data.push({
            label: "Cluster " + (1+i),
            i: i+1,
            color: "rgb("+col.join(",")+")",
            value: 1+Math.pow(Math.random(),2)*5
        });
    }

    /* Génération du Treemap */

    data = _(data).sortBy(function(d) { return -d.value; });

    var IDEALRATIO = 1.25;

    function cuttree(data, x, y, w, h, cut, ratio, callback) {
        
        function f(subdata, subx, suby, subw, subh) {
            if (subdata.length == 1) {
                subdata[0].x = subx;
                subdata[0].y = suby;
                subdata[0].w = subw;
                subdata[0].h = subh;
            } else {
                callback(subdata, subx, suby, subw, subh)
            }
        }
        
        var first = _(data).first(cut), rest = _(data).rest(cut);
        if (!first.length || !rest.length) {
            return;
        }
        if (w/h > IDEALRATIO) {
            var leftw = w * ratio;
            f(first, x, y, leftw, h);
            f(rest, x + leftw, y, w - leftw, h);
        } else {
            var toph = h * ratio;
            f(first, x, y, w, toph);
            f(rest, x, y + toph, w, h - toph);
        }
    }

    function pivot(data, x, y, w, h) {
        var cut = 1, cumul = 0, bestcumul = 0, total = _(data).reduce(function(a,b){return a+b.value},0), bestcut = Infinity;
        for (var i = 0; i < data.length - 1; i++) {
            cumul += data[i].value;
            var delta = Math.abs(cumul - total/2);
            if (delta < bestcut) {
                bestcut = delta;
                bestcumul = cumul;
                cut = i+1;
            } else {
                break;
            }
        }
        cuttree(data, x, y, w, h, cut, bestcumul / total, pivot);
    }

    function squarify(data, x, y, w, h) {
        var cut = 1, cumul = 0, bestcumul = 0, total = _(data).reduce(function(a,b){return a+b.value},0), bestcut = Infinity;
        for (var i = 0; i < data.length - 1; i++) {
            cumul += data[i].value;
            cuttree(data, x, y, w, h, i+1, cumul / total, pivot);
            var ratio = Math.abs(Math.log(IDEALRATIO*data[0].h/data[0].w));
            if (ratio < bestcut) {
                bestcut = ratio;
                bestcumul = cumul;
                cut = i+1;
            } else {
                break;
            }
        }
        cuttree(data, x, y, w, h, cut, bestcumul / total, squarify);
    }

    /* Template des éléments à insérer */
    var actu = 
        '<div class="actu" style="left: <%=x%>px; top: <%=y%>px; width: <%=w%>px; height: <%=h%>px; background: <%=color%>">'+
            '<a href="#">'+
                '<img src="img/home-visuel-<%-i%>.jpg" alt="" />'+
            '<div class="voile"></div>'+
            '</a>'+
            '<div class="inner-actu">'+
                '<h2><a href="#"><%-label%></a></h2>'+
                '<div class="links">'+
                    '<ul>'+
                        '<li><a href="#" title="Supprimer le cluster" class="trash"></a></li>'+
                        '<li><a href="#" title="317 Annotations sur ce cluster" class="file"><span>317</span></a></li>'+
                        '<li><a href="#" title="Ajouter une annotation au cluster" class="comment"></a></li>'+
                    '</ul>'+
                '</div>'+
            '</div>'+
        '</div>';



    //treemap
    var tmpl = _.template(actu);
    var hTreemap = 800;//à définir
    $('#treemap').height(hTreemap);
    squarify(data,0,0,760,hTreemap);
    var treemapHtml = _(data).reduce(function(mem, d) {
        return mem + tmpl(d);
    },"");
    $('#treemap #actus').html(treemapHtml);


    //redimensionnement d'image
    $(".actu").each(function(k,v){
        var wActu = $(this).width();
        var hActu = $(this).height();
        var img = $(this).find('img');

        img.load(function(){
            var img = $(this);

            var wImg = img.width();
            var hImg = img.height();

            var ratioImg = wImg/hImg;
            img.css('height',hActu);
            img.css('width',hActu*ratioImg);
            wImg = img.width();
            hImg = img.height();

            if(wActu>wImg){
                var ratioImg = hImg/wImg;
                img.css('width', wActu);
                img.css('height',wActu*ratioImg);
                wImg = img.width();
                hImg = img.height();
            }

            if (wImg<wActu) {
                img.css('margin-left',(wActu-wImg)/2);
            }else{
                img.css('margin-left',-(wImg-wActu)/2);
            }

            if (hImg<hActu) {
                img.css('margin-top',(hActu-hImg)/2);
            }else{
                img.css('margin-top',-(hImg-hActu)/2);
            }
        });
    });

    $("#liste").hide();
})