$(document).ready(function() {
	
	var colors = '#316989';
	var margins = [55, 30, 30, 95];
	var sourceTxt = 'Frequency of Use';
	var sourceUrl = 'http://www.paloaltonetworks.com/';
	
	
	// Browser-Based Filesharing
	var bb_filesharing = {
		chart: {
			renderTo: 'bb_filesharing',
			defaultSeriesType: 'bar',
			margin: margins,
			events: {
				click: function(event) {
					$.colorbox({open:true, href:'/appstats/pages/bb_filesharing.html', iframe:true, transition:"none", width:"90%", height:"90%"});
				}
			}
		},
		title: {
			text: 'Browser-Based Filesharing'
		},
		subtitle: {
			text: sourceTxt,
			style: {
				fontSize: '10px', color: '#999'
			}
		},
		xAxis: {
			categories: []
		},
		yAxis: {
			title: {
				text: null
			},
			labels: {
				formatter: function() {
					return this.value +'%';
				}
			},
			max: 100
		},
		plotOptions: {
			series: {
				animation: false,
				shadow: false,
				pointPadding: 0.1,
				groupPadding: 0
			},
			bar: {
				events: {
					click: function(event) {
						$.colorbox({open:true, href:'/appstats/pages/bb_filesharing.html', iframe:true, transition:"none", width:"90%", height:"90%"});
					}
				}
			}
		},
		series: [],
		colors: [colors],
		credits: {enabled: false},
		legend: {enabled: false},
		tooltip: {
			formatter: function() {
				return '<b>' + this.x + '</b> is <b>' + this.y + '%</b>';
			}
		}
	};

	$.getJSON('/appstats/data/bb_filesharing.json', function(data) {
		var percentage = [];
		$.each(data.apps, function(i,app) {
			bb_filesharing.xAxis.categories.push(app.name);
			percentage.push(app.percentage);
			if(i==data.apps.length) return false;
		});
		bb_filesharing.series.push({data: percentage});
		var build01 = new Highcharts.Chart(bb_filesharing);
	});

	// Circumventors
	var circumventors = {
		chart: {
			renderTo: 'circumventors',
			defaultSeriesType: 'bar',
			margin: margins,
			events: {
				click: function(event) {
					$.colorbox({open:true, href:'/appstats/pages/circumventors.html', iframe:true, transition:"none", width:"90%", height:"90%"});
				}
			}
		},
		title: {
			text: 'Circumventors'
		},
		subtitle: {
			text: sourceTxt,
			style: {
				fontSize: '10px', color: '#999'
			}
		},
		xAxis: {
			categories: []
		},
		yAxis: {
			title: {
				text: null
			},
			labels: {
				formatter: function() {
					return this.value +'%';
				}
			},
			max: 100
		},
		plotOptions: {
			series: {
				animation: false,
				shadow: false,
				pointPadding: 0.1,
				groupPadding: 0
			},
			bar: {
				events: {
					click: function(event) {
						$.colorbox({open:true, href:'/appstats/pages/circumventors.html', iframe:true, transition:"none", width:"90%", height:"90%"});
					}
				}
			}
		},
		series: [],
		colors: [colors],
		credits: {enabled:false},
		legend: {enabled: false},
		tooltip: {
			formatter: function() {
				return '<b>' + this.x + '</b> is <b>' + this.y + '%</b>';
			}
		}
	};

	$.getJSON('/appstats/data/circumventors.json', function(data) {
		var percentage = [];
		$.each(data.apps, function(i,app) {
			circumventors.xAxis.categories.push(app.name);
			percentage.push(app.percentage);
			if(i==data.apps.length) return false;
		});
		circumventors.series.push({data: percentage});
		var build02 = new Highcharts.Chart(circumventors);
	});
	
	// External Proxies
	var external_proxies = {
		chart: {
			renderTo: 'external_proxies',
			defaultSeriesType: 'bar',
			margin: margins,
			events: {
				click: function(event) {
					$.colorbox({open:true, href:'/appstats/pages/external_proxies.html', iframe:true, transition:"none", width:"90%", height:"90%"});
				}
			}
		},
		title: {
			text: 'External Proxies'
		},
		subtitle: {
			text: sourceTxt,
			style: {
				fontSize: '10px', color: '#999'
			}
		},
		xAxis: {
			categories: []
		},
		yAxis: {
			title: {
				text: null
			},
			labels: {
				formatter: function() {
					return this.value +'%';
				}
			},
			max: 100
		},
		plotOptions: {
			series: {
				animation: false,
				shadow: false,
				pointPadding: 0.1,
				groupPadding: 0
			},
			bar: {
				events: {
					click: function(event) {
						$.colorbox({open:true, href:'/appstats/pages/external_proxies.html', iframe:true, transition:"none", width:"90%", height:"90%"});
					}
				}
			}
		},
		series: [],
		colors: [colors],
		credits: {enabled:false},
		legend: {enabled: false},
		tooltip: {
			formatter: function() {
				return '<b>' + this.x + '</b> is <b>' + this.y + '%</b>';
			}
		}
	};

	$.getJSON('/appstats/data/external_proxies.json', function(data) {
		var percentage = [];
		$.each(data.apps, function(i,app) {
			external_proxies.xAxis.categories.push(app.name);
			percentage.push(app.percentage);
			if(i==data.apps.length) return false;
		});
		external_proxies.series.push({data: percentage});
		var build03 = new Highcharts.Chart(external_proxies);
	});
	
	// P2P Filesharing
	var p2p_filesharing = {
		chart: {
			renderTo: 'p2p_filesharing',
			defaultSeriesType: 'bar',
			margin: margins,
			events: {
				click: function(event) {
					$.colorbox({open:true, href:'/appstats/pages/p2p_filesharing.html', iframe:true, transition:"none", width:"90%", height:"90%"});
				}
			}
		},
		title: {
			text: 'P2P Filesharing'
		},
		subtitle: {
			text: sourceTxt,
			style: {
				fontSize: '10px', color: '#999'
			}
		},
		xAxis: {
			categories: []
		},
		yAxis: {
			title: {
				text: null
			},
			labels: {
				formatter: function() {
					return this.value +'%';
				}
			},
			max: 100
		},
		plotOptions: {
			series: {
				animation: false,
				shadow: false,
				pointPadding: 0.1,
				groupPadding: 0
			},
			bar: {
				events: {
					click: function(event) {
						$.colorbox({open:true, href:'/appstats/pages/p2p_filesharing.html', iframe:true, transition:"none", width:"90%", height:"90%"});
					}
				}
			}
		},
		series: [],
		colors: [colors],
		credits: {enabled:false},
		legend: {enabled: false},
		tooltip: {
			formatter: function() {
				return '<b>' + this.x + '</b> is <b>' + this.y + '%</b>';
			}
		}
	};

	$.getJSON('/appstats/data/p2p_filesharing.json', function(data) {
		var percentage = [];
		$.each(data.apps, function(i,app) {
			p2p_filesharing.xAxis.categories.push(app.name);
			percentage.push(app.percentage);
			if(i==data.apps.length) return false;
		});
		p2p_filesharing.series.push({data: percentage});
		var build04 = new Highcharts.Chart(p2p_filesharing);
	});
	
	// Photo & Video
	var photo_video = {
		chart: {
			renderTo: 'photo_video',
			defaultSeriesType: 'bar',
			margin: margins,
			events: {
				click: function(event) {
					$.colorbox({open:true, href:'/appstats/pages/photo_video.html', iframe:true, transition:"none", width:"90%", height:"90%"});
				}
			}
		},
		title: {
			text: 'Photo & Video'
		},
		subtitle: {
			text: sourceTxt,
			style: {
				fontSize: '10px', color: '#999'
			}
		},
		xAxis: {
			categories: []
		},
		yAxis: {
			title: {
				text: null
			},
			labels: {
				formatter: function() {
					return this.value +'%';
				}
			},
			max: 100
		},
		plotOptions: {
			series: {
				animation: false,
				shadow: false,
				pointPadding: 0.1,
				groupPadding: 0
			},
			bar: {
				events: {
					click: function(event) {
						$.colorbox({open:true, href:'/appstats/pages/photo_video.html', iframe:true, transition:"none", width:"90%", height:"90%"});
					}
				}
			}
		},
		series: [],
		colors: [colors],
		credits: {enabled:false},
		legend: {enabled: false},
		tooltip: {
			formatter: function() {
				return '<b>' + this.x + '</b> is <b>' + this.y + '%</b>';
			}
		}
	};

	$.getJSON('/appstats/data/photo_video.json', function(data) {
		var percentage = [];
		$.each(data.apps, function(i,app) {
			photo_video.xAxis.categories.push(app.name);
			percentage.push(app.percentage);
			if(i==data.apps.length) return false;
		});
		photo_video.series.push({data: percentage});
		var build05 = new Highcharts.Chart(photo_video);
	});
	
	// Remote Access
	var remote_access = {
		chart: {
			renderTo: 'remote_access',
			defaultSeriesType: 'bar',
			margin: margins,
			events: {
				click: function(event) {
					$.colorbox({open:true, href:'/appstats/pages/remote_access.html', iframe:true, transition:"none", width:"90%", height:"90%"});
				}
			}
		},
		title: {
			text: 'Remote Access'
		},
		subtitle: {
			text: sourceTxt,
			style: {
				fontSize: '10px', color: '#999'
			}
		},
		xAxis: {
			categories: []
		},
		yAxis: {
			title: {
				text: null
			},
			labels: {
				formatter: function() {
					return this.value +'%';
				}
			},
			max: 100
		},
		plotOptions: {
			series: {
				animation: false,
				shadow: false,
				pointPadding: 0.1,
				groupPadding: 0
			},
			bar: {
				events: {
					click: function(event) {
						$.colorbox({open:true, href:'/appstats/pages/remote_access.html', iframe:true, transition:"none", width:"90%", height:"90%"});
					}
				}
			}
		},
		series: [],
		colors: [colors],
		credits: {enabled:false},
		legend: {enabled: false},
		tooltip: {
			formatter: function() {
				return '<b>' + this.x + '</b> is <b>' + this.y + '%</b>';
			}
		}
	};

	$.getJSON('/appstats/data/remote_access.json', function(data) {
		var percentage = [];
		$.each(data.apps, function(i,app) {
			remote_access.xAxis.categories.push(app.name);
			percentage.push(app.percentage);
			if(i==data.apps.length) return false;
		});
		remote_access.series.push({data: percentage});
		var build06 = new Highcharts.Chart(remote_access);
	});
	
	// Social Networking
	var social_networking = {
		chart: {
			renderTo: 'social_networking',
			defaultSeriesType: 'bar',
			margin: [55, 30, 30, 140],
			events: {
				click: function(event) {
					$.colorbox({open:true, href:'/appstats/pages/social_networking.html', iframe:true, transition:"none", width:"90%", height:"90%"});
				}
			}
		},
		title: {
			text: 'Social Networking'
		},
		subtitle: {
			text: sourceTxt,
			style: {
				fontSize: '10px', color: '#999'
			}
		},
		xAxis: {
			categories: []
		},
		yAxis: {
			title: {
				text: null
			},
			labels: {
				formatter: function() {
					return this.value +'%';
				}
			},
			max: 100
		},
		plotOptions: {
			series: {
				animation: false,
				shadow: false,
				pointPadding: 0.1,
				groupPadding: 0
			},
			bar: {
				events: {
					click: function(event) {
						$.colorbox({open:true, href:'/appstats/pages/social_networking.html', iframe:true, transition:"none", width:"90%", height:"90%"});
					}
				}
			}
		},
		series: [],
		colors: [colors],
		credits: {enabled:false},
		legend: {enabled: false},
		tooltip: {
			formatter: function() {
				return '<b>' + this.x + '</b> is <b>' + this.y + '%</b>';
			}
		}
	};

	$.getJSON('/appstats/data/social_networking.json', function(data) {
		var percentage = [];
		$.each(data.apps, function(i,app) {
			social_networking.xAxis.categories.push(app.name);
			percentage.push(app.percentage);
			if(i==data.apps.length) return false;
		});
		social_networking.series.push({data: percentage});
		var build07 = new Highcharts.Chart(social_networking);
	});
	
	// Webmail
	var webmail = {
		chart: {
			renderTo: 'webmail',
			defaultSeriesType: 'bar',
			margin: margins,
			events: {
				click: function(event) {
					$.colorbox({open:true, href:'/appstats/pages/webmail.html', iframe:true, transition:"none", width:"90%", height:"90%"});
				}
			}
		},
		title: {
			text: 'Webmail'
		},
		subtitle: {
			text: sourceTxt,
			style: {
				fontSize: '10px', color: '#999'
			}
		},
		xAxis: {
			categories: []
		},
		yAxis: {
			title: {
				text: null
			},
			labels: {
				formatter: function() {
					return this.value +'%';
				}
			},
			max: 100
		},
		plotOptions: {
			series: {
				animation: false,
				shadow: false,
				pointPadding: 0.1,
				groupPadding: 0
			},
			bar: {
				events: {
					click: function(event) {
						$.colorbox({open:true, href:'/appstats/pages/webmail.html', iframe:true, transition:"none", width:"90%", height:"90%"});
					}
				}
			}
		},
		series: [],
		colors: [colors],
		credits: {enabled:false},
		legend: {enabled: false},
		tooltip: {
			formatter: function() {
				return '<b>' + this.x + '</b> is <b>' + this.y + '%</b>';
			}
		}
	};

	$.getJSON('/appstats/data/webmail.json', function(data) {
		var percentage = [];
		$.each(data.apps, function(i,app) {
			webmail.xAxis.categories.push(app.name);
			percentage.push(app.percentage);
			if(i==data.apps.length) return false;
		});
		webmail.series.push({data: percentage});
		var build09 = new Highcharts.Chart(webmail);
	});

});