// globals
depth = 0;
baseURL = 'http://mac-matt.perforce.com/cgi-bin/serverData.rb';
function getServerURL( nodeId, level )
{
var url = baseURL;
var index = $( "serverMenu" ).selectedIndex;
var server = $( "serverMenu" ).options[ index ].value;
url = url + '?server=' + server;
index = $( "shadingMenu" ).selectedIndex;
var shadingType = $( "shadingMenu" ).options[ index ].value;
url = url + '&shadingType=' + shadingType;
index = $( "areaMenu" ).selectedIndex;
var areaType = $( "areaMenu" ).options[ index ].value;
url = url + '&areaType=' + areaType;
if( nodeId )
{
url = url + '&id=' + nodeId;
}
return url;
}
function getXMLhttp() {
var xmlhttp=false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
// JScript gives us Conditional compilation, we can cope with old IE versions.
// and security blocked creation of the objects.
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@end @*/
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp=false;
}
}
if (!xmlhttp && window.createRequest) {
try {
xmlhttp = window.createRequest();
} catch (e) {
xmlhttp=false;
}
}
return xmlhttp;
}
function buildDataOptions( sdata )
{
for( var i = 0; i < sdata["areaTypes"].length; i++ )
{
var o = document.createElement('option');
o.text = sdata["prettyAreaTypes"][i];
o.value = sdata["areaTypes"][i];
if( navigator.appName == "Microsoft Internet Explorer" )
{
$( "areaMenu" ).add( o, -1 );
}
else
{
$( "areaMenu" ).add( o, null );
}
}
for ( var i = 0; i < sdata["shadingTypes"].length; i++ ) {
var o = document.createElement('option');
o.text = sdata["prettyShadingTypes"][i];
o.value = sdata["shadingTypes"][i];
if( navigator.appName == "Microsoft Internet Explorer" )
{
$( "shadingMenu" ).add( o, -1 );
}
else
{
$( "shadingMenu" ).add( o, null );
}
}
for ( var i = 0; i < sdata["servers"].length; i++ ) {
var o = document.createElement('option');
o.text = sdata["prettyServers"][i];
o.value = sdata["servers"][i];
if( navigator.appName == "Microsoft Internet Explorer" )
{
$( "serverMenu" ).add( o, -1 );
}
else
{
$( "serverMenu" ).add( o, null );
}
}
}
function buildTreemap( jsonData, json )
{
tm = new TM.Squarified( {
rootId: 'infovis',
orientation: "v",
tips: true,
levelsToShow: depth,
Color: {
allow: true,
minValue: 0,
maxValue: json["data"][1]["value"],
minColorValue: [160, 160, 160],
maxColorValue: [176, 18, 32]
},
request: function(nodeId, level, onComplete) {
var xmlhttp = getXMLhttp();
var url = getServerURL( nodeId, level );
xmlhttp.open('GET', url, false);
xmlhttp.send(null);
var j = eval('(' + xmlhttp.responseText + ')');
onComplete.onComplete(nodeId, j);
},
onAfterCompute: function() {
var that = this, parent;
$$('#infovis .leaf', '#infovis .head').each(function(elem, i) {
//get the JSON tree node element having the same id
//as the dom element queried and makeTip.
if(p = elem.getParent()) {
var sTree = TreeUtil.getSubtree(tm.tree, p.id);
if(sTree) that.makeTip(elem, sTree);
}
});
},
//Tooltip content is set by setting the *title* of the element to be *tooltiped*.
//Read the mootools docs for further understanding.
makeTip: function(elem, json) {
var title = json.name;
var html = this.makeHTMLFromData(json.data);
elem.store('tip:title', title).store('tip:text', html);
},
//Take each dataset object key and value and make an HTML from it.
makeHTMLFromData: function(data) {
var html = '';
for(var i=0; i<data.length; i++) {
html += jsonData["tooltipText"][i] + ': ' + data[i].value + '<br />';
}
return html;
}
} );
tm.loadFromJSON(json);
}
function handleSelectChange()
{
var xmlhttp = getXMLhttp();
if( !xmlhttp ) {
return;
}
var url = getServerURL();
xmlhttp.open('GET', url, false);
xmlhttp.send(null);
var json = eval('(' + xmlhttp.responseText + ')');
url = url + '&data=1'
xmlhttp.open('GET', url, false);
xmlhttp.send(null);
var jsonData = eval('(' + xmlhttp.responseText + ')');
$$( '.tool-tip' ).dispose();
buildTreemap( jsonData, json );
}
function init() {
var xmlhttp = getXMLhttp();
if( !xmlhttp ) {
return;
}
xmlhttp.open('GET', baseURL, false);
xmlhttp.send(null);
serverData = eval('(' + xmlhttp.responseText + ')');
buildDataOptions( serverData );
var url = getServerURL();
xmlhttp.open('GET', url, false);
xmlhttp.send(null);
var json = eval('(' + xmlhttp.responseText + ')');
url = url + '&data=1'
xmlhttp.open('GET', url, false);
xmlhttp.send(null);
var jsonData = eval('(' + xmlhttp.responseText + ')');
buildTreemap( jsonData, json );
$( "areaMenu" ).onchange = handleSelectChange;
$( "serverMenu" ).onchange = handleSelectChange;
$( "shadingMenu" ).onchange = handleSelectChange;
var hdr = document.getElementById( "header" )
hdr.innerHTML = hdr.innerHTML + " for " + jsonData["server"];
var up = document.getElementById( 'up_button' );
if( up.addEvent )
{
up.addEvent('click', function() { tm.out(); });
}
else if( up.attachEvent )
{
up.attachEvent( 'onclick', function() { tm.out(); });
}
var rb = document.getElementById( 'root_button' );
if( rb.addEvent )
{
rb.addEvent('click', function() { tm.out(); tm.out(); tm.out(); tm.out(); tm.out(); tm.out(); tm.out(); tm.out(); tm.out(); });
}
else if( rb.attachEvent )
{
rb.attachEvent( 'onclick', function() { tm.out(); tm.out(); tm.out(); tm.out(); tm.out(); tm.out(); tm.out(); tm.out(); tm.out(); });
}
}