	var _width = 340,
		_height = 25,
		_colorRange = [ "#89e1ff", "#c800ff", "#85ff3b", "#ffff17", "#ff2f7e" ];
    $(document).ready(function () {
    	var _k = 0;
        $('.graph_annotation').each(function(_i) {
            var _values = _medias[_i].stats,
                _nb = _values.length,
                _max = _values.reduce(function(_a,_b) {
                    return Math.max(_a,_b);
                }, 1),
                _x = function(_p) {
                    return _p * _width / _nb;
                },
                _y = function(_p) {
                    return _height * ( 1 - _p / _max );
                },
                _d = _values.map(function(_v,_k) {
                    return ( _k == 0 ?
                        "M" + _x(_k) + " " + _y(_v) :
                        "C" + _x(_k-.5) + " " + _y(_values[_k - 1])
                        + " " + + _x(_k-.5) + " " + _y(_v)
                        + " " + + _x(_k) + " " + _y(_v)
                        ) ;
                }).join("") + "L" + _width + " " + _height + "L0 " + _height;
            this.innerHTML = '';
            var _paper = new Raphael(this,_width,_height);
            _paper.path(_d).attr({
                "fill" : "#adadad",
                "stroke" : "none"
            });
            var _x = function(_p) {
                return _p * 340 / _medias[_i].duration;
            };
            for (var _j = 0; _j < _medias[_i].segments.length; _j++) {
                var _s = _medias[_i].segments[_j],
                	_coul = _colorRange[_k % _colorRange.length],
                	_rect = _paper.rect(_x(_s.begin),0,Math.max(1,_x(_s.duration)),25).attr({
	                    "fill" : _coul,
	                    "opacity" : .5,
	                    "stroke" : "none",
	                });
	                _rect.node.id = "re_" + _s.id;
                $("#li_" + _s.id + " .color_zone").css({
                	"background" : _coul,
                	"opacity" : .5,
               	});
            	_k ++;
            }
        });
        $("li.li_segment, .graph_annotation rect").mouseover(function() {
            var _id = this.id.substr(3);
            $(".graph_annotation rect").css({
                "opacity" : ".2",
            });
            $("#re_" + _id + ", #li_" + _id + " .color_zone").css({
            	"opacity" : ".9",
            });
            $("#re_" + _id).attr({
            	"opacity" : ".9",
            });
            $("li.li_segment").removeClass("selected");
            $("#li_" + _id).addClass("selected");
            $("#result_preview")
                .show()
                .html($("#li_" + _id + " div.hidden_preview").html());
            $("#result_preview .result_taglist")
                .html(
                    $("#result_preview .result_taglist").html()
                        .split(";")
                        .map(function(t) { return t.replace(/(^[\s]+|[\s]+$)/g,"") })
                        .filter(function(t) { return t.length; })
                        .map(function(t) { return '<span class="under pink">' + t + '</span>'; })
                        .join(', ')
                    )
        }).mouseout(function() {
            var _id = this.id.substr(3);
            $("#li_" + _id + " .color_zone").css({
            	"opacity" : ".5",
            });
            $(".graph_annotation rect").attr({
            	"opacity" : ".5",
            }).css({
                "opacity" : ".5",
            });
        });
        $(document).scroll(function() {
            $("#result_preview").css({
                    "padding-top": Math.max(30,$(document).scrollTop()-20) + 'px',
                })
        })
    });