	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_" + _id).addClass("selected");
        }).mouseout(function() {
            var _id = this.id.substr(3);
            $("#li_" + _id).removeClass("selected");
            $("#li_" + _id + " .color_zone").css({
            	"opacity" : ".5",
            });
            $(".graph_annotation rect").attr({
            	"opacity" : ".5",
            }).css({
                "opacity" : ".5",
            });
        }).click(function() {
        	var url = annot_preview_url.replace('__CONTENT_IRI_ID__', "ctt_iri_id");
        	url = url.replace('__PROJECT_ID__', "project_id");
        	url = url.replace('__CUTTING_ID__', "cutting_id");
        	url = url.replace('__ANNOT_ID__', "annot_id");
        	$.ajax({
                url: url,
                type: 'GET',
                data: {csrfmiddlewaretoken:global_csrf_token},
                // bug with jquery >= 1.5, "json" adds a callback so we don't specify dataType
                //dataType: 'json',
                success: function(data, status, request) {
                	$("#result_preview").html(data);
                }
            });
        });
    });