var comp_1;
var main_2;
var data = {};

function createLayout_heardable(){
        
        var dateFormat = pv.Format.date("%d-%b-%y");
        
        var w = 640,
            h = 160,
            x = pv.Scale.linear(data.chart_heardable.xaxis_array, function(d){return dateFormat.parse(d.date2);}).range(0, w),
            y = pv.Scale.linear(0, 1000).range(0, h);

        comp_1 = new pv.Panel()
            .canvas("div_chart_heardable")
            .width(w)
            .height(h)
            .margin(20);
        
        comp_1.add(pv.Rule)
             .data(x.ticks(5))
             .left(x)
             .strokeStyle("#cccccc")
           .anchor("bottom").add(pv.Label)
             .textStyle("#555555")
             .text(x.tickFormat);
            
        comp_1.add(pv.Label)
            .top(106)
            .left(-10)
            .text("max = 1000 >")
            .textBaseline("middle")
            .textAngle(-Math.PI / 2)		    
            .textStyle("#555555");
            
        comp_1.add(pv.Rule)
            .data(y.ticks(10))
            .bottom(y)
            .strokeStyle("#cccccc");
            
        comp_1.add(pv.Area)
            .data(data.chart_top_score.chart_high)
            .bottom(0)
            .left(function(d){return x(dateFormat.parse(d.date2));})
            .height(function(d){return y(d.score);})
            .interpolate("basis")
            .fillStyle("#cccccc");
            
        //comp_1.add(pv.Dot)
          //  .data(data.chart_top_score.chart_top_score_detail)
            //.left(function(d){return x(dateFormat.parse(d.last_scan_date_high_formatted));})
            //.bottom(function(d){return y(d.last_score_high);})
            //.size(36)
            //.strokeStyle("#cccccc")
            //.fillStyle("#ffffff");
            
        comp_1.add(pv.Area)
            .data(data.chart_heardable.chart_hero)
            .bottom(0)
            .left(function(d){return x(dateFormat.parse(d.date2));})
            .height(function(d){return y(d.score);})
            .interpolate("basis")
	    .lineWidth(0.1)
	    .strokeStyle("#ff6600")
	    .fillStyle(function(){return this.strokeStyle().alpha(.15);});
	    
	comp_1.add(pv.Line)
	    .data(data.chart_heardable.chart_hero)
	    .interpolate("basis")
	    .left(function(d){return x(dateFormat.parse(d.date2));})
	    .bottom(function(d){return  y(d.score);})
	    .strokeStyle("#ff6600")
	    .lineWidth(2.5);	    
            
        comp_1.add(pv.Dot)
            .data(data.chart_heardable.current_score)
            .left(function(d){return x(dateFormat.parse(d.last_scan_date_formatted));})
            .bottom(function(d){return y(d.current_heardable);})
            .size(36)
            .strokeStyle("#ff6600")
            .fillStyle("#ffffff")
            .text(function(d){return d.tiptext;})
            .event("mouseover", pv.Behavior.tipsy({gravity: "e", fade: true}));					    
            
        comp_1.add(pv.Label)
            .data(data.chart_heardable.current_score)
            .bottom(15)
            .left(10)
            .font("96px sans-serif")
            .text(function(d){return d.current_heardable;})		    
            .textStyle("#ff6600");				    
          
        comp_1.render();

}

var comp_1;
var main_2;
var data = {};

function createLayout_heardable_alt(){
        
        var dateFormat = pv.Format.date("%d-%b-%y");
        
        var w = 640,
            h = 160,
            x = pv.Scale.linear(data.chart_heardable.xaxis_array, function(d){return dateFormat.parse(d.date2);}).range(0, w),
            y = pv.Scale.linear(0, 1000).range(0, h);

        comp_1 = new pv.Panel()
            .canvas("div_chart_heardable")
            .width(w)
            .height(h)
            .margin(20);
        
        comp_1.add(pv.Rule)
             .data(x.ticks(5))
             .left(x)
             .strokeStyle("#cccccc")
           .anchor("bottom").add(pv.Label)
             .textStyle("#555555")
             .text(x.tickFormat);
            
        comp_1.add(pv.Label)
            .top(106)
            .left(-10)
            .text("max = 1000 >")
            .textBaseline("middle")
            .textAngle(-Math.PI / 2)		    
            .textStyle("#555555");
            
        comp_1.add(pv.Rule)
            .data(y.ticks(10))
            .bottom(y)
            .strokeStyle("#cccccc");
            
        comp_1.add(pv.Area)
            .data(data.chart_heardable.chart_hero)
            .bottom(0)
            .left(function(d){return x(dateFormat.parse(d.date2));})
            .height(function(d){return y(d.score);})
            .interpolate("basis")
	    .lineWidth(0.1)
	    .strokeStyle("#ff6600")
	    .fillStyle(function(){return this.strokeStyle().alpha(.15);});
	    
	comp_1.add(pv.Line)
	    .data(data.chart_heardable.chart_hero)
	    .interpolate("basis")
	    .left(function(d){return x(dateFormat.parse(d.date2));})
	    .bottom(function(d){return  y(d.score);})
	    .strokeStyle("#ff6600")
	    .lineWidth(2.5);				    
            
        comp_1.add(pv.Dot)
            .data(data.chart_heardable.current_score)
            .left(function(d){return x(dateFormat.parse(d.last_scan_date_formatted));})
            .bottom(function(d){return y(d.current_heardable);})
            .size(36)
            .strokeStyle("#ff6600")
            .fillStyle("#ffffff")
            .text(function(d){return d.tiptext;})
            .event("mouseover", pv.Behavior.tipsy({gravity: "e", fade: true}));					    
            
        comp_1.add(pv.Label)
            .data(data.chart_heardable.current_score)
            .bottom(15)
            .left(10)
            .font("96px sans-serif")
            .text(function(d){return d.current_heardable;})		    
            .textStyle("#ff6600");				    
          
        comp_1.render();

}

var comp_1;
var main_2;
var data = {};

function createLayout_heardable_new(){
        
        var dateFormat = pv.Format.date("%d-%b-%y");
        
        var w = 420,
            h = 160,
            x = pv.Scale.linear(data.chart_heardable.xaxis_array, function(d){return dateFormat.parse(d.date2);}).range(0, w),
            y = pv.Scale.linear(0, 1000).range(0, h);

        comp_1 = new pv.Panel()
            .canvas("div_chart_heardable")
            .width(w)
            .height(h)
            .margin(20);
        
        comp_1.add(pv.Rule)
             .data(x.ticks(5))
             .left(x)
             .strokeStyle("#cccccc")
           .anchor("bottom").add(pv.Label)
             .textStyle("#555555")
             .text(x.tickFormat);
            
        comp_1.add(pv.Label)
            .top(106)
            .left(-10)
            .text("max = 1000 >")
            .textBaseline("middle")
            .textAngle(-Math.PI / 2)		    
            .textStyle("#555555");
            
        comp_1.add(pv.Rule)
            .data(y.ticks(10))
            .bottom(y)
            .strokeStyle("#cccccc");
            
        comp_1.add(pv.Area)
            .data(data.chart_top_score.chart_high)
            .bottom(0)
            .left(function(d){return x(dateFormat.parse(d.date2));})
            .height(function(d){return y(d.score);})
            .interpolate("basis")
            .fillStyle("#cccccc");
            
        //comp_1.add(pv.Dot)
          //  .data(data.chart_top_score.chart_top_score_detail)
            //.left(function(d){return x(dateFormat.parse(d.last_scan_date_high_formatted));})
            //.bottom(function(d){return y(d.last_score_high);})
            //.size(36)
            //.strokeStyle("#cccccc")
            //.fillStyle("#ffffff");
            
        comp_1.add(pv.Area)
            .data(data.chart_heardable.chart_hero)
            .bottom(0)
            .left(function(d){return x(dateFormat.parse(d.date2));})
            .height(function(d){return y(d.score);})
            .interpolate("basis")
	    .lineWidth(0.1)
	    .strokeStyle("#ff6600")
	    .fillStyle(function(){return this.strokeStyle().alpha(.15);});
	    
	comp_1.add(pv.Line)
	    .data(data.chart_heardable.chart_hero)
	    .interpolate("basis")
	    .left(function(d){return x(dateFormat.parse(d.date2));})
	    .bottom(function(d){return  y(d.score);})
	    .strokeStyle("#ff6600")
	    .lineWidth(2.5);	    
            
        comp_1.add(pv.Dot)
            .data(data.chart_heardable.current_score)
            .left(function(d){return x(dateFormat.parse(d.last_scan_date_formatted));})
            .bottom(function(d){return y(d.current_heardable);})
            .size(36)
            .strokeStyle("#ff6600")
            .fillStyle("#ffffff")
            .text(function(d){return d.tiptext;})
            .event("mouseover", pv.Behavior.tipsy({gravity: "e", fade: true}));					    
            
        comp_1.add(pv.Label)
            .data(data.chart_heardable.current_score)
            .bottom(15)
            .left(10)
            .font("96px sans-serif")
            .text(function(d){return d.current_heardable;})		    
            .textStyle("#ff6600");				    
          
        comp_1.render();

}

var comp_1;
var main_2;
var data = {};

function createLayout_heardable_new_alt(){
        
        var dateFormat = pv.Format.date("%d-%b-%y");
        
        var w = 420,
            h = 160,
            x = pv.Scale.linear(data.chart_heardable.xaxis_array, function(d){return dateFormat.parse(d.date2);}).range(0, w),
            y = pv.Scale.linear(0, 1000).range(0, h);

        comp_1 = new pv.Panel()
            .canvas("div_chart_heardable")
            .width(w)
            .height(h)
            .margin(20);
        
        comp_1.add(pv.Rule)
             .data(x.ticks(5))
             .left(x)
             .strokeStyle("#cccccc")
           .anchor("bottom").add(pv.Label)
             .textStyle("#555555")
             .text(x.tickFormat);
            
        comp_1.add(pv.Label)
            .top(106)
            .left(-10)
            .text("max = 1000 >")
            .textBaseline("middle")
            .textAngle(-Math.PI / 2)		    
            .textStyle("#555555");
            
        comp_1.add(pv.Rule)
            .data(y.ticks(10))
            .bottom(y)
            .strokeStyle("#cccccc");
            
        comp_1.add(pv.Area)
            .data(data.chart_heardable.chart_hero)
            .bottom(0)
            .left(function(d){return x(dateFormat.parse(d.date2));})
            .height(function(d){return y(d.score);})
            .interpolate("basis")
	    .lineWidth(0.1)
	    .strokeStyle("#ff6600")
	    .fillStyle(function(){return this.strokeStyle().alpha(.15);});
	    
	comp_1.add(pv.Line)
	    .data(data.chart_heardable.chart_hero)
	    .interpolate("basis")
	    .left(function(d){return x(dateFormat.parse(d.date2));})
	    .bottom(function(d){return  y(d.score);})
	    .strokeStyle("#ff6600")
	    .lineWidth(2.5);				    
            
        comp_1.add(pv.Dot)
            .data(data.chart_heardable.current_score)
            .left(function(d){return x(dateFormat.parse(d.last_scan_date_formatted));})
            .bottom(function(d){return y(d.current_heardable);})
            .size(36)
            .strokeStyle("#ff6600")
            .fillStyle("#ffffff")
            .text(function(d){return d.tiptext;})
            .event("mouseover", pv.Behavior.tipsy({gravity: "e", fade: true}));					    
            
        comp_1.add(pv.Label)
            .data(data.chart_heardable.current_score)
            .bottom(15)
            .left(10)
            .font("96px sans-serif")
            .text(function(d){return d.current_heardable;})		    
            .textStyle("#ff6600");				    
          
        comp_1.render();

}

function createLayout_heardable_pro(){
        
        var dateFormat = pv.Format.date("%d-%b-%y");
        
        var w = 640,
            h = 160,
            x = pv.Scale.linear(data.chart_heardable_pro.xaxis_array, function(d){return dateFormat.parse(d.date2);}).range(0, w),
            y = pv.Scale.linear(0, 1000).range(0, h);

        comp_1 = new pv.Panel()
            .canvas("div_chart_heardable_pro")
            .width(w)
            .height(h)
            .margin(20);
        
        comp_1.add(pv.Rule)
             .data(x.ticks(5))
             .left(x)
             .strokeStyle("#cccccc")
           .anchor("bottom").add(pv.Label)
             .textStyle("#555555")
             .text(x.tickFormat);
            
        comp_1.add(pv.Label)
            .top(106)
            .left(-10)
            .text("max = 1000 >")
            .textBaseline("middle")
            .textAngle(-Math.PI / 2)		    
            .textStyle("#555555");
            
        comp_1.add(pv.Rule)
            .data(y.ticks(10))
            .bottom(y)
            .strokeStyle("#cccccc");
            
        comp_1.add(pv.Area)
            .data(data.chart_top_score.chart_high)
            .bottom(0)
            .left(function(d){return x(dateFormat.parse(d.date2));})
            .height(function(d){return y(d.score);})
            .interpolate("basis")
            .fillStyle("#cccccc");
            
        comp_1.add(pv.Dot)
            .data(data.chart_top_score.chart_top_score_detail)
            .left(function(d){return x(dateFormat.parse(d.last_scan_date_high_formatted));})
            .bottom(function(d){return y(d.last_score_high);})
            .size(36)
            .strokeStyle("#cccccc")
            .fillStyle("#ffffff");
            
        comp_1.add(pv.Area)
            .data(data.chart_heardable.chart_hero)
            .bottom(0)
            .left(function(d){return x(dateFormat.parse(d.date2));})
            .height(function(d){return y(d.score);})
            .interpolate("basis")
            .fillStyle("#234B6F");				    
            
        comp_1.add(pv.Dot)
            .data(data.chart_heardable.current_score)
            .left(function(d){return x(dateFormat.parse(d.last_scan_date_formatted));})
            .bottom(function(d){return y(d.current_heardable);})
            .size(36)
            .strokeStyle("#234B6F")
            .fillStyle("#ffffff")
            .text(function(d){return d.tiptext;})
            .event("mouseover", pv.Behavior.tipsy({gravity: "e", fade: true}));					    
            
        comp_1.add(pv.Label)
            .data(data.chart_heardable.current_score)
            .bottom(15)
            .left(10)
            .font("96px sans-serif")
            .text(function(d){return d.current_heardable;})		    
            .textStyle("#ff6600");				    
          
        comp_1.render();

}
					
var scatter_facebook;

function createLayout_facebook(){
        
        var w = 160,
            h = 160,
            dotsize = 10,
            max_x = data.chart_facebook_max.x * .001,
            max_y = data.chart_facebook_max.y * .001,				    
            x = pv.Scale.linear(0, 100).range(0, w),
            y = pv.Scale.linear(0, 100).range(0, h);
            
        scatter_facebook = new pv.Panel()
            .width(w)
            .height(h)
            .canvas("div_facebook_comparison")						    
            .margin(20);				    

        scatter_facebook.add(pv.Rule)
            .data(x.ticks())
            .strokeStyle("#cccccc")
            .left(x);
         
        scatter_facebook.add(pv.Label)
            .bottom(-16)
            .left(80)
            .text("daily mentions >")
            .textAlign("center")
            .textStyle("#555555");
            
        scatter_facebook.add(pv.Label)
            .top(106)
            .left(-10)
            .text("likes >")
            .textBaseline("middle")
            .textAngle(-Math.PI / 2)		    
            .textStyle("#555555");		    
        
        scatter_facebook.add(pv.Rule)
            .data(y.ticks())
            .strokeStyle("#cccccc")
            .bottom(y);
            
        scatter_facebook.add(pv.Dot)
            .data(data.chart_facebook)
            .left(function(d){return d.mentions * max_x;})
            .bottom(function(d){return d.likes * max_y;})
            .size(function(d){return d.dotsize * dotsize;})
            .strokeStyle("#cccccc")
            .fillStyle("#cccccc")
            .text(function(d){return d.tiptext;})
            .event("mouseover", pv.Behavior.tipsy({gravity: "w", fade: true}));
            
        scatter_facebook.add(pv.Dot)
            .data(data.chart_facebook_hero)
            .left(function(d){return d.mentions * max_x;})
            .bottom(function(d){return d.likes * max_y;})
            .size(function(d){return d.dotsize * dotsize;})
            .strokeStyle("#234B6F")
            .fillStyle("#234B6F")
            .text(function(d){return d.tiptext;})
            .event("mouseover", pv.Behavior.tipsy({gravity: "w", fade: true}));				    
          
        scatter_facebook.render();				   					    
    
}

var scatter_twitter;

function createLayout_twitter(){
        
        var w = 160,
            h = 160,
            dotsize = 10,
            max_x = data.chart_twitter_max.x * .001,
            max_y = data.chart_twitter_max.y * .001,				    
            x = pv.Scale.linear(0, 100).range(0, w),
            y = pv.Scale.linear(0, 100).range(0, h);
            
        scatter_twitter = new pv.Panel()
            .width(w)
            .height(h)
            .canvas("div_twitter_comparison")						    
            .margin(20);				    

        scatter_twitter.add(pv.Rule)
            .data(x.ticks())
            .strokeStyle("#cccccc")
            .left(x);
         
        scatter_twitter.add(pv.Label)
            .bottom(-16)
            .left(80)
            .text("daily mentions >")
            .textAlign("center")
            .textStyle("#555555");
            
        scatter_twitter.add(pv.Label)
            .top(106)
            .left(-10)
            .text("followers >")
            .textBaseline("middle")
            .textAngle(-Math.PI / 2)		    
            .textStyle("#555555");		    
        
        scatter_twitter.add(pv.Rule)
            .data(y.ticks())
            .strokeStyle("#cccccc")
            .bottom(y);
            
        scatter_twitter.add(pv.Dot)
            .data(data.chart_twitter)
            .left(function(d){return d.mentions * max_x;})
            .bottom(function(d){return d.likes * max_y;})
            .size(function(d){return d.dotsize * dotsize;})
            .strokeStyle("#cccccc")
            .fillStyle("#cccccc")
            .text(function(d){return d.tiptext;})
            .event("mouseover", pv.Behavior.tipsy({gravity: "w", fade: true}));
            
        scatter_twitter.add(pv.Dot)
            .data(data.chart_twitter_hero)
            .left(function(d){return d.mentions * max_x;})
            .bottom(function(d){return d.likes * max_y;})
            .size(function(d){return d.dotsize * dotsize;})
            .strokeStyle("#234B6F")
            .fillStyle("#234B6F")
            .text(function(d){return d.tiptext;})
            .event("mouseover", pv.Behavior.tipsy({gravity: "w", fade: true}));				    
          
        scatter_twitter.render();				   					    
    
}

var scatter_youtube;

function createLayout_youtube(){
        
        var w = 160,
            h = 160,
            dotsize = 10,
            max_x = data.chart_youtube_max.x * .001,
            max_y = data.chart_youtube_max.y * .001,				    
            x = pv.Scale.linear(0, 100).range(0, w),
            y = pv.Scale.linear(0, 100).range(0, h);
            
        scatter_youtube = new pv.Panel()
            .width(w)
            .height(h)
            .canvas("div_youtube_comparison")						    
            .margin(20);				    

        scatter_youtube.add(pv.Rule)
            .data(x.ticks())
            .strokeStyle("#cccccc")
            .left(x);
         
        scatter_youtube.add(pv.Label)
            .bottom(-16)
            .left(80)
            .text("views >")
            .textAlign("center")
            .textStyle("#555555");
            
        scatter_youtube.add(pv.Label)
            .top(106)
            .left(-10)
            .text("subscribers >")
            .textBaseline("middle")
            .textAngle(-Math.PI / 2)		    
            .textStyle("#555555");		    
        
        scatter_youtube.add(pv.Rule)
            .data(y.ticks())
            .strokeStyle("#cccccc")
            .bottom(y);
            
        scatter_youtube.add(pv.Dot)
            .data(data.chart_youtube)
            .left(function(d){return d.mentions * max_x;})
            .bottom(function(d){return d.likes * max_y;})
            .size(function(d){return d.dotsize * dotsize;})
            .strokeStyle("#cccccc")
            .fillStyle("#cccccc")
            .text(function(d){return d.tiptext;})
            .event("mouseover", pv.Behavior.tipsy({gravity: "w", fade: true}));
            
        scatter_youtube.add(pv.Dot)
            .data(data.chart_youtube_hero)
            .left(function(d){return d.mentions * max_x;})
            .bottom(function(d){return d.likes * max_y;})
            .size(function(d){return d.dotsize * dotsize;})
            .strokeStyle("#234B6F")
            .fillStyle("#234B6F")
            .text(function(d){return d.tiptext;})
            .event("mouseover", pv.Behavior.tipsy({gravity: "w", fade: true}));				    
          
        scatter_youtube.render();				   					    
    
}

var sub_sociable;

function createLayout_sociable_subscore(){
        var w = 160,
            h = 160,
            x = pv.Scale.linear(data.chart_sociable, function(d){return d.date;}).range(0, w),
            y = pv.Scale.linear(0, 200).range(0, h);

        sub_sociable = new pv.Panel()
            .canvas("div_sub_sociable")
            .width(w)
            .height(h)
            .margin(20);
        
        sub_sociable.add(pv.Label)
            .bottom(-16)
            .left(80)
            .text("most recent scan >")
            .textAlign("center")
            .textStyle("#555555");
            
        sub_sociable.add(pv.Label)
            .top(106)
            .left(-10)
            .text("max = 200 >")
            .textBaseline("middle")
            .textAngle(-Math.PI / 2)		    
            .textStyle("#555555");
            
        sub_sociable.add(pv.Rule)
            .data(y.ticks(10))
            .bottom(y)
            .strokeStyle("#cccccc");
            
        sub_sociable.add(pv.Area)
            .data(data.chart_sociable)
            .interpolate("basis")
            .bottom(1)
            .left(function(d){return  x(d.date);})
            .height(function(d){return  y(d.score);})
            .fillStyle("#234B6F");				    
            
        sub_sociable.add(pv.Dot)
            .data(data.current_score)
            .right(0)
            .bottom(function(d){return y(d.current_sociable);})
            .size(36)
            .strokeStyle("#234B6F")
            .fillStyle("#ffffff")
            .text(function(d){return d.tiptext_sociable;})
            .event("mouseover", pv.Behavior.tipsy({gravity: "e", fade: true}));					    
          
        sub_sociable.render();
}

var recact;

function createLayoutRecentActivity(followers){

        var w = 500,
            h = 240
            
        var vis = d3.select("#netviz").append("svg:svg")
            .attr("width", w)
            .attr("height", h);
        
        var force = self.force = d3.layout.force()
            .nodes(followers.nodes)
            .links(followers.links)
            .distance(80)
            .charge(-80)      
            .size([500, 240])
            .start();     
        
        var link = vis.selectAll("line.link")  
            .data(followers.links)
            .enter().append("svg:line")
            .attr("class", "link")
            .attr("x1", function(d) { return d.source.x; })
            .attr("y1", function(d) { return d.source.y; })
                .attr("x2", function(d) { return d.target.x; })
                .attr("y2", function(d) { return d.target.y; });
                
        var node = vis.selectAll("g.node")
                .data(followers.nodes)
              .enter().append("svg:g")
                .attr("class", "node")
                .call(force.drag)
              
            node.append("svg:circle")
                .attr("r", 6) 
                .style("fill", function(d) { return d.dotfill; });
              
            node.append("svg:text")
              .attr("fill", "#555")
              .attr("font-size", "11px")
              .attr("dx", "8")
              .attr("dy", ".35em")
              .text(function(d) { return "@" + d.nodeName; });       
              
            node.append("svg:title")
              .text(function(d) { return "@" + d.nodeName; });    
        
            force.on("tick", function() {
                
              link.attr("x1", function(d) { return d.source.x; })
                  .attr("y1", function(d) { return d.source.y; })
                  .attr("x2", function(d) { return d.target.x; })
                  .attr("y2", function(d) { return d.target.y; });
        
              node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
                
        });

}

var sub_actionable;

function createLayout_momentum(){
        var w = 640,
            h = 160,
            x = pv.Scale.linear(data.twitter_mentions, function(d){return d.date_added;}).range(0, w),
            y = pv.Scale.linear(0, data.max_mentions).range(0, h);

        sub_actionable = new pv.Panel()
            .canvas("div_chart_velocity")
            .width(w)
            .height(h)
            .margin(20);
        
        sub_actionable.add(pv.Label)
            .bottom(-16)
            .left(320)
            .text("past 30 days")
            .textAlign("center")
            .textStyle("#555555");
            
        sub_actionable.add(pv.Label)
            .top(106)
            .left(-10)
            .text("daily mentions")
            .textBaseline("middle")
            .textAngle(-Math.PI / 2)		    
            .textStyle("#555555");
            
        sub_actionable.add(pv.Rule)
            .data(y.ticks(10))
            .bottom(y)
            .strokeStyle("#cccccc");
            
        sub_actionable.add(pv.Area)
            .data(data.twitter_mentions)
            .bottom(1)
            .interpolate("basis")
            .left(function(d){return  x(d.date_added);})
            .height(function(d){return  y(d.mentions);})
            .fillStyle("#234B6F");
            
        sub_actionable.add(pv.Dot)
            .data(data.twitter_current_score)
            .right(0)
            .bottom(function(d){return y(d.current_score);})
            .size(36)
            .strokeStyle("#234B6F")
            .fillStyle("#ffffff")
            .text(function(d){return d.tiptext;})
            .event("mouseover", pv.Behavior.tipsy({gravity: "e", fade: true}));				    
          
        sub_actionable.render();
}

var pie_foc;
var data_foc = {};

function createLayout_sentiment(){
        var w = 160,
        h = 160,
        sum = 100;

        var pie_foc = new pv.Panel()
            .width(w)
            .height(h)
            .margin(20);
            
        pie_foc.add(pv.Label)
            .bottom(-16)
            .left(80)
            .text("social sentiment")
            .textAlign("center")
            .textStyle("#555555");
            
        var wedge = pie_foc.add(pv.Wedge)
            .data(data.sentiment)
            .left(80)
            .bottom(80)
            .fillStyle(function(d){return d.fill;})
            .strokeStyle("white")
            .lineWidth(4)			    
            .outerRadius(75)
            .innerRadius(0)
            .angle(function(d){return d.score * 0.02 * Math.PI;})
            .text(function(d){return d.name;})
            .event("mouseover", pv.Behavior.tipsy({gravity: "s", fade: true}));
            
        pie_foc.add(pv.Label)
            .data(data.sentiment)
            .top(100)
            .right(145)
            .font("48px sans-serif")
            .text(function(d){return d.max;})		    
            .textStyle("#ff6600");				    
          
        pie_foc.render();
        
}

//helper functions 
var log = function(v){
	
    try{
	console.log(v);
    }catch(e){}
    
};

function isset(v) {
	
	if (typeof(v) !== 'undefined') {
	    return true;
	} else {
	    return false;
	}
	
}

function D3Pie(options) {

        var self = this;
        this.data = options.data;
        this.width = isset(options.width) ? options.width : 200;
        this.height = isset(options.height) ? options.height : 200;
        this.r = isset(options.outerRadius) ? options.outerRadius : Math.floor((self.width>self.height ? self.height*.35 : self.width*.35));
        this.innerRadius = isset(options.innerRadius) ? options.innerRadius : 0;
        this.innerData = isset(options.innerData) ? options.innerData : false;
        
        this.selector = isset(options.selector) ? options.selector : "#pie-chart";
        this.title = isset(options.title) ? options.title : '';
        this.overlay = isset(options.overlay) ? options.overlay : false;
        this.label = isset(options.label) ? options.label : true;
        this.labelColor = isset(options.labelColor) ? options.labelColor : '#ffffff';

        this.svg = null;
        this.arc = null;
        this.innerArc = null;
        this.pie = null;
        this.arcs = null;
        this.stroke = 4;
        this.maxValue = 0;
        this.minValue = 0;

        this.maxIndex = 0;
        this.minIndex = 0;

        (function(){
            for (var i=0; i < self.data.length; i++) {
               if (self.data[i].score  > self.maxValue) { 
                   self.maxValue = self.data[i].score;
                   self.maxIndex = i;
               }
            }
        })();

        (function(){
            self.minValue = self.maxValue;
            for (var i=0; i < self.data.length; i++) {
                if (self.minValue > self.data[i].score) {
                    self.minValue = self.data[i].score;
                    self.minIndex = i;
                }
            }
        })();


        this.init = function(){
            $(self.selector).empty();
            self.svg = d3.select(self.selector)
            .append('svg:svg')
            .data([self.data])
            .attr('width', self.width)
            .attr('height', self.height)
            .append('svg:g')
            .attr('transform', 'translate('+(self.width/2)+', '+(self.height/2)+')');

            self.arc = d3.svg.arc()
            .outerRadius(self.r)
            .innerRadius(self.innerRadius);

            self.pie = d3.layout.pie()
            .value(function(d){return d.score});
            
            self.arcs = self.svg.selectAll('g.slice')
            .data(self.pie)
            .enter()
            .append('svg:g')
            .attr('class', 'slice');
            
              if (self.innerRadius > 0 && self.innerData) {
                  self.innerArc = d3.svg.arc()
                  .outerRadius(self.innerRadius - (self.stroke/2))
                  .innerRadius(0);
                  
                  self.svg.append('svg:g')
                  .data([self.innerData])                              
                  .selectAll('g.inner-slice')
                  .data(self.pie)
                  .enter()
                  .append('svg:g')
                  .attr('class', 'inner-slice')
                  .append('svg:path')
                  .attr("fill", function(d) {return d.data.fill })
                  .attr('d', self.innerArc)
                  .attr('stroke', 'rgb(255,255,255)')
                  .attr('stroke-width', self.stroke)
                  .append("svg:title")
                  .text(function(d) {return d.data.title;});
              }


            self.arcs.append('svg:path')
            .attr("fill", function(d) {return d.data.fill })
            .attr('d', self.arc)
            .attr('stroke', 'rgb(255,255,255)')
            .attr('stroke-width', self.stroke);

            self.arcs.append("svg:title").text(function(d) {return d.data.title;});

            self.svg.append('svg:text')
            .attr('y', self.r*1.2)
            .attr('pointer-events', 'none')
            .attr('fill', 'rgb(85,85,85)')
            .attr('text-anchor', 'middle')
            .text(self.title);

            if (self.overlay == true) {

                self.svg
                .append('svg:text')
                .attr('transform', "translate(0,"+(self.r*.25)+")")
                .attr("text-anchor", "middle")
                .attr('fill', self.labelColor)
                .attr('font-size', (self.r - self.innerRadius)-20)
                .text(self.data[self.maxIndex].score+"%");

            }

        };

}

function stream_twitter_followers(options) {
	
	var self = this;
	this.data = options.data;
	this.width = isset(options.width) ? options.width : 700;
	this.height = isset(options.height) ? options.height : 200;
	
	this.selector = isset(options.selector) ? options.selector : "#chart";
	this.title = isset(options.title) ? options.title : '';
	this.fill = isset(options.fill) ? options.fill : '';
	this.markQuantity = 14;
	this.stroke = isset(options.stroke) ? options.stroke : 1;
	this.svg = null;
	this.area = null;
	this.ticks = null;
	this.maxY = parseInt(self.data.max_mentions);
	this.maxX = 0;
	this.minX = 0;
	this.interpolation = isset(options.interpolation) ? options.interpolation : 'basis';
	this.lastBubble = isset(options.lastBubble) ? options.lastBubble : false;
	self.heightCorrection = 10;
	this.enableBubble = isset(options.enableBubble) ? options.enableBubble : false;
	
	    (function(){
	    for (var i=0; i < self.data.twitter_followers.length; i++) {
		if (parseInt(self.data.twitter_followers[i].date_added) > self.maxX) {
		    self.maxX = parseInt(self.data.twitter_followers[i].date_added);
		}
	    }
	})();
	
	(function(){
		self.minX = self.maxX;
		for (var i=0; i < self.data.twitter_mentions.length; i++) {
		    if (self.minX > parseInt(self.data.twitter_followers[i].date_added)) {
			self.minX = parseInt(self.data.twitter_followers[i].date_added);
		    }
		}
	    })();
	
	
	this.yScale = d3.scale.linear().domain([0, self.maxY]).range([self.height-self.heightCorrection, self.heightCorrection]);                
	this.xScale = d3.scale.linear().domain([self.minX, self.maxX]).range([0, self.width]);
	
	
	this.xLabel = isset(options.xLabel) ? options.xLabel : '';
	this.yLabel = isset(options.yLabel) ? options.yLabel : '';
	
	this.maxLikes = 0;
	this.maxMention = 0;
	
	
	
	this.init = function(){
	    var y = d3.scale.linear().domain(d3.range(0, self.markQuantity)).range(d3.range(0, self.height, self.height/self.markQuantity));
	    
	    $(self.selector).empty();
	    self.svg = d3.select(self.selector)
	    .append('svg:svg')
	    .data([self.data.twitter_followers])
	    .attr('width', self.width)
	    .attr('height', self.height+self.heightCorrection)
	    .attr('id', 'chart-root')
	    .append('svg:g')
	    .attr('transform', 'translate('+(10)+', '+(0)+')');
    
	    self.svg.append('svg:g')
	    .attr('transform', 'translate('+(0)+', '+(25)+')')
	    .selectAll('line.x-lines')
	    .data(d3.range(0, self.markQuantity))
	    .enter()
	    .append('svg:line')
	    .attr('class', 'y-lines')
	    .attr('x1', function(d,i) {return 0})
	    .attr('y1', function(d,i) {return y(i)})
	    .attr('x2', function(d,i) {return self.width})
	    .attr('y2', function(d,i) {return y(i)})
	    .attr('stroke-width', self.stroke)
	    .attr('shape-rendering', 'crispEdges')
	    .attr('stroke', 'rgb(204,204,204)');
	    
	    var xContainer = [];
	    self.area = d3.svg.area()
	    .x(function(d, i){
		var x = self.xScale(d.date_added); xContainer[i] = {x:x}; return x;})
	    .y0(self.height)
	    .y1(function(d, i){var y = self.yScale(parseInt(d.mentions))+self.heightCorrection; xContainer[i].y = y; return y;});
	    self.area.interpolate(self.interpolation);
	    
	    self.svg.append('svg:g')
	    .attr('transform', 'translate('+(0)+', '+(0)+')')
	    .append('svg:path')
	    .style("fill", "#ff6600")
	    .attr('d', self.area);
	    
	    if (self.enableBubble) {
		
		self.svg.selectAll('rect.laps')
		.data(xContainer)
		.enter()
		.append('svg:rect')
		.attr('x', function(d, i){return d.x})
		.attr('y', 0)
		.attr('width', function(d, i){if(i < (xContainer.length-1))return (xContainer[i+1].x-d.x)})
		.attr('height', self.height)
		.attr('id', function(d, i){return 'rect-'+i})
		.attr('class', 'rect-stream')
    //                        .attr('fill', 'yellow')
		.attr('fill-opacity', 0);
		
		self.svg.append('svg:g')
		.selectAll('circle.bubble-point')
		.data(self.data['twitter_followers'])
		.enter()
		.append('svg:circle')
		.attr('class', 'bubble-point')
		.attr('cx', function(d, i){return xContainer[i].x;})
		.attr('cy', function(d, i){return xContainer[i].y;})
		.attr('r', 7)
		.attr("fill", 'white')
		.attr("stroke", '#ff6600')
		.attr("stroke-width", 2.0)
		.style("display", 'none')
		.attr('id', function(d, i){return 'bubble-'+i})
		.append("svg:title").text(function(d){return isset(d.title) ? d.title : "No data"});
		
		
		var hihglight = function(index){
		    self.svg.selectAll('circle.bubble-point').style("display", 'none');
		    var bubble = self.svg.select("#bubble-"+index);
		    bubble.style("display", 'block');
		};
		
		hihglight(xContainer.length-1);
		self.svg.selectAll('.rect-stream').on('mousemove', function(){
		    var e = d3.event;
		    var id = $(e.target).attr('id').split('-');
		    id = id[1];
		    hihglight(id);
		});
		
		self.svg.on('mouseout', function(){
		    if(d3.select(d3.event.relatedTarget).attr('class') != 'bubble-point') {
			hihglight(xContainer.length-1);
		    }
		    
		});
	    
	    }
	    
	    if (self.lastBubble) {
		self.svg.selectAll("circle.area")
		.data(self.data.twitter_current_score)
		.enter().append("svg:circle")
		.attr("class", "bubble-circle")
		.attr("cx", function(d) { return self.xScale(parseInt(self.maxX)); })
		.attr("cy", function(d) { return (self.height+self.heightCorrection) - self.yScale(parseInt(d.current_score)); })
		.attr("r", 7)
		.attr("stroke", '#ff6600')
		.attr("stroke-width", 2)
		.attr("fill", 'white')
		.append("svg:title").text(function(d){return d.tiptext});
	    }
	    
	    
	    self.svg
	    .append('svg:g')
	    .append('svg:text')
	    .style('font-size', '10px')
	    .attr('y', self.height-35)
	    .attr('x', -15)
	    .attr('dx', '.35em')
	    .attr('fill', 'rgb(85,85,85)')
	    .attr('pointer-events', 'none')
	    .attr('transform', function(d, i) {return 'rotate(-90, '+(-7)+', '+(self.height*.8)+')'})
	    .text(self.yLabel);
	    
	    
	    self.svg
	    .append('svg:g')
	    .append('svg:text')
	    .style('font-size', '10px')
	    .attr('y', self.height+5)
	    .attr('x', self.width*.4)
	    .attr('dy', '.35em')
	    .attr('fill', 'rgb(85,85,85)')
	    .attr('pointer-events', 'none')
	    .text(self.xLabel);
	    
	};
    
}

function D3Streaming(options) {
	
	var self = this;
	this.data = options.data;
	this.width = isset(options.width) ? options.width : 700;
	this.height = isset(options.height) ? options.height : 200;
	
	this.selector = isset(options.selector) ? options.selector : "#chart";
	this.title = isset(options.title) ? options.title : '';
	this.fill = isset(options.fill) ? options.fill : '';
	this.markQuantity = 14;
	this.stroke = isset(options.stroke) ? options.stroke : 1;
	this.svg = null;
	this.area = null;
	this.ticks = null;
	this.maxY = parseInt(self.data.max_mentions);
	this.maxX = 0;
	this.minX = 0;
	this.interpolation = isset(options.interpolation) ? options.interpolation : 'basis';
	this.lastBubble = isset(options.lastBubble) ? options.lastBubble : false;
	self.heightCorrection = 10;
	this.enableBubble = isset(options.enableBubble) ? options.enableBubble : false;
	
	    (function(){
	    for (var i=0; i < self.data.twitter_mentions.length; i++) {
		if (parseInt(self.data.twitter_mentions[i].date_added) > self.maxX) {
		    self.maxX = parseInt(self.data.twitter_mentions[i].date_added);
		}
	    }
	})();
	
	(function(){
		self.minX = self.maxX;
		for (var i=0; i < self.data.twitter_mentions.length; i++) {
		    if (self.minX > parseInt(self.data.twitter_mentions[i].date_added)) {
			self.minX = parseInt(self.data.twitter_mentions[i].date_added);
		    }
		}
	    })();
	
	
	this.yScale = d3.scale.linear().domain([0, self.maxY]).range([self.height-self.heightCorrection, self.heightCorrection]);                
	this.xScale = d3.scale.linear().domain([self.minX, self.maxX]).range([0, self.width]);
	
	
	this.xLabel = isset(options.xLabel) ? options.xLabel : '';
	this.yLabel = isset(options.yLabel) ? options.yLabel : '';
	
	this.maxLikes = 0;
	this.maxMention = 0;
	
	
	
	this.init = function(){
	    var y = d3.scale.linear().domain(d3.range(0, self.markQuantity)).range(d3.range(0, self.height, self.height/self.markQuantity));
	    
	    $(self.selector).empty();
	    self.svg = d3.select(self.selector)
	    .append('svg:svg')
	    .data([self.data.twitter_mentions])
	    .attr('width', self.width)
	    .attr('height', self.height+self.heightCorrection)
	    .attr('id', 'chart-root')
	    .append('svg:g')
	    .attr('transform', 'translate('+(10)+', '+(0)+')');
    
	    self.svg.append('svg:g')
	    .attr('transform', 'translate('+(0)+', '+(25)+')')
	    .selectAll('line.x-lines')
	    .data(d3.range(0, self.markQuantity))
	    .enter()
	    .append('svg:line')
	    .attr('class', 'y-lines')
	    .attr('x1', function(d,i) {return 0})
	    .attr('y1', function(d,i) {return y(i)})
	    .attr('x2', function(d,i) {return self.width})
	    .attr('y2', function(d,i) {return y(i)})
	    .attr('stroke-width', self.stroke)
	    .attr('shape-rendering', 'crispEdges')
	    .attr('stroke', 'rgb(204,204,204)');
	    
	    var xContainer = [];
	    self.area = d3.svg.area()
	    .x(function(d, i){
		var x = self.xScale(d.date_added); xContainer[i] = {x:x}; return x;})
	    .y0(self.height)
	    .y1(function(d, i){var y = self.yScale(parseInt(d.mentions))+self.heightCorrection; xContainer[i].y = y; return y;});
	    self.area.interpolate(self.interpolation);
	    
	    self.svg.append('svg:g')
	    .attr('transform', 'translate('+(0)+', '+(0)+')')
	    .append('svg:path')
	    .style("fill", "#ff6600")
	    .attr('d', self.area);
	    
	    if (self.enableBubble) {
		
		self.svg.selectAll('rect.laps')
		.data(xContainer)
		.enter()
		.append('svg:rect')
		.attr('x', function(d, i){return d.x})
		.attr('y', 0)
		.attr('width', function(d, i){if(i < (xContainer.length-1))return (xContainer[i+1].x-d.x)})
		.attr('height', self.height)
		.attr('id', function(d, i){return 'rect-'+i})
		.attr('class', 'rect-stream')
    //                        .attr('fill', 'yellow')
		.attr('fill-opacity', 0);
		
		self.svg.append('svg:g')
		.selectAll('circle.bubble-point')
		.data(self.data['twitter_mentions'])
		.enter()
		.append('svg:circle')
		.attr('class', 'bubble-point')
		.attr('cx', function(d, i){return xContainer[i].x;})
		.attr('cy', function(d, i){return xContainer[i].y;})
		.attr('r', 7)
		.attr("fill", 'white')
		.attr("stroke", '#ff6600')
		.attr("stroke-width", 2.0)
		.style("display", 'none')
		.attr('id', function(d, i){return 'bubble-'+i})
		.append("svg:title").text(function(d){return isset(d.title) ? d.title : "No data"});
		
		
		var hihglight = function(index){
		    self.svg.selectAll('circle.bubble-point').style("display", 'none');
		    var bubble = self.svg.select("#bubble-"+index);
		    bubble.style("display", 'block');
		};
		
		hihglight(xContainer.length-1);
		self.svg.selectAll('.rect-stream').on('mousemove', function(){
		    var e = d3.event;
		    var id = $(e.target).attr('id').split('-');
		    id = id[1];
		    hihglight(id);
		});
		
		self.svg.on('mouseout', function(){
		    if(d3.select(d3.event.relatedTarget).attr('class') != 'bubble-point') {
			hihglight(xContainer.length-1);
		    }
		    
		});
	    
	    }
	    
	    if (self.lastBubble) {
		self.svg.selectAll("circle.area")
		.data(self.data.twitter_current_score)
		.enter().append("svg:circle")
		.attr("class", "bubble-circle")
		.attr("cx", function(d) { return self.xScale(parseInt(self.maxX)); })
		.attr("cy", function(d) { return (self.height+self.heightCorrection) - self.yScale(parseInt(d.current_score)); })
		.attr("r", 7)
		.attr("stroke", '#ff6600')
		.attr("stroke-width", 2)
		.attr("fill", 'white')
		.append("svg:title").text(function(d){return d.tiptext});
	    }
	    
	    
	    self.svg
	    .append('svg:g')
	    .append('svg:text')
	    .style('font-size', '10px')
	    .attr('y', self.height-35)
	    .attr('x', -15)
	    .attr('dx', '.35em')
	    .attr('fill', 'rgb(85,85,85)')
	    .attr('pointer-events', 'none')
	    .attr('transform', function(d, i) {return 'rotate(-90, '+(-7)+', '+(self.height*.8)+')'})
	    .text(self.yLabel);
	    
	    
	    self.svg
	    .append('svg:g')
	    .append('svg:text')
	    .style('font-size', '10px')
	    .attr('y', self.height+5)
	    .attr('x', self.width*.4)
	    .attr('dy', '.35em')
	    .attr('fill', 'rgb(85,85,85)')
	    .attr('pointer-events', 'none')
	    .text(self.xLabel);
	    
	};
    
}