File: js/drasticCloud.js

/* DrasticTools version 0.6.16
 * DrasticTools is released under the GPL license: 
 * Copyright (C) 2007 email: info@drasticdata.nl
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License along
 * with this program; if not, write to the Free Software Foundation, Inc.,
 * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
 *
 * =========================================================================================
 * If you find this sofware useful, we appreciate your donation on http://www.drasticdata.nl
 * Suggestions for improvement can be sent to: info@drasticdata.nl
 * ========================================================================================= 
 */
var dscloud = {
"MSGREFRESHFAILED": "Failed to refresh cloud"
};
/*
 * drasticCloud
 */
var drasticCloud = new Class ({
    options: {
		path: location.pathname,		// path of the php file to call
		pathimg: "img/",				// path to images		
		nroffonts: 24,					// The number of different font sizes used in the cloud
		addparams: "",					// optional parameter string to pass to PHP GET requests, use "&var1=value1&var2=value2"
		
		namecol: null,					// name to show in the cloud
		sizecol: null,					// column to use to resize the items in the cloud
		log: true,						// use a logarithmic distribution (true) or linear (false) (default: true)
		colorcol: null,					// column which should be used to color items
		sortcol: null,					// name of column to sort on initially. Overrules the default of the data source
		sort: null,						// sort ascending (a) or descending (d)? Overrules the default of the data source		

		showmenu: true,					// Show the menu? (default: true)
		showmenufull: false,			// Show the menu opened (default: false)
		shownamecol: true,				// Show the name selector? (default: true)
		shownamecolumns: null,			// Array of columns that can actually be chosen by user
		showlog: true,					// Show the log/linear selector? (default: true)
		showsizecol: true,				// Show the column selector? (default: true)
		showsizecolumns: null,			// Array of columns that can actually be chosen by user
		showcolorcol: true, 			// Show the color column selector? (default: true)
		showcolorcolumns: null,			// Array of columns that can actually be chosen by user
		showsortcol: true,				// Show the sortcolumn selector? (default: true)
		showsortcolumns: null,			// Array of columns that can actually be chosen by user	
		showsort: true,					// Show the ascending / descendig sort selector? (default: true)
		
		onClick: function(id){this.DefaultOnClick(id);},	
		onMouseOver: function(id){this.DefaultOnMouseOver(id);}
    },	
	initialize: function(container, options){
		var t = this;
		t.container 	= $(container) || alert('container '+container+' not found...');
		t.fontsize = parseInt(t.container.getStyle('font-size').slice(0,-2));
		t.setOptions(options);		
		t.getMetaData();
		
		// gifs:
		t.ddPowered = t.options.pathimg+'DDPowered.png';
		t.ddPowered2 = t.options.pathimg+'DDPowered2.png';
		t.gifloading= t.options.pathimg+'loading.gif';		
	
		// Containers for the menu of the tag cloud:
		if (t.options.showmenu) {
			t.divmenu = new Element('div', {'class': 'drasticcloudmenu'}).inject(t.container);
			t.divmenutitle = new Element('div', {'class': 'drasticcloudmenutitle'}).inject(t.divmenu).appendText('Cloud Menu');
			t.divmenu.appendText('Show ');
			if (!t.options.namecol) t.options.namecol = t.cols[0];
			if (t.options.shownamecol) {
				var sel = new Element('select').inject(t.divmenu);
				if (t.options.shownamecolumns) {
					for (var i = 0; i < t.options.shownamecolumns.length; i++) {
						var opt = new Element('option', {'value': t.options.shownamecolumns[i]}).inject(sel);
						opt.set('text', t.options.shownamecolumns[i]);
						if (t.options.sizecol == t.options.shownamecolumns[i]) opt.setProperty('selected', 'selected');
					}
				}
				else {
					for (var i = 0; i < t.cols.length; i++) {
						if (t.cols[i] == t.idname) continue;
						var opt = new Element('option', {'value': t.cols[i]}).inject(sel);
						opt.set('text', t.cols[i]);
						if (t.options.namecol == t.cols[i]) opt.setProperty('selected', 'selected');
					}
				}
				sel.addEvent('change', function(){t.setnamecol(this)});
			}
			else {
				t.divmenu.appendText(t.options.namecol+' ');
			}
			if (!t.options.sizecol) t.options.sizecol = t.cols[0];
			if (t.options.showsizecol) {
				t.divmenu.appendText(' sized by ');
				var sel = new Element('select').inject(t.divmenu);
				if (t.options.showsizecolumns) {
					for (var i = 0; i < t.options.showsizecolumns.length; i++) {
						var opt = new Element('option', {'value': t.options.showsizecolumns[i]}).inject(sel);
						opt.set('text', t.options.showsizecolumns[i]);
						if (t.options.sizecol == t.options.showsizecolumns[i]) opt.setProperty('selected', 'selected');
					}			
				}
				else {
					for (var i = 0; i < t.cols_numeric.length; i++) {
						if (t.cols_numeric[i] == t.idname) continue;
						var opt = new Element('option', {'value': t.cols_numeric[i]}).inject(sel);
						opt.set('text', t.cols_numeric[i]);
						if (t.options.sizecol == t.cols_numeric[i]) opt.setProperty('selected', 'selected');
					}
				}
				sel.addEvent('change', function(){t.setsizecol(this)});
			}
			if (t.options.showlog) {
				t.divmenu.appendText(' scaled ');
				var sel = new Element('select').inject(t.divmenu);
				var opt1 = new Element('option', {'value': 'log'}).inject(sel);
				opt1.set('text', 'log');
				var opt2 = new Element('option', {'value': 'linear'}).inject(sel);
				opt2.set('text', 'linear');
				if (!t.options.log) opt2.setProperty('selected', 'selected'); 
				sel.addEvent('change', function(){t.setscale(this)});
			}			
			if (t.options.showcolorcol) {
				t.divmenu.appendText(' colored by ');
				var sel = new Element('select').inject(t.divmenu);
				if (t.options.showcolorcolumns) {
					for (var i = 0; i < t.options.showcolorcolumns.length; i++) {
						var opt = new Element('option', {'value': t.options.showcolorcolumns[i]}).inject(sel);
						opt.set('text', t.options.showcolorcolumns[i]);
						if (t.options.sizecol == t.options.showcolorcolumns[i]) opt.setProperty('selected', 'selected');
					}			
				}
				else {
					var opt = new Element('option', {'value': ' '}).inject(sel);
					opt.set('text', ' ');
					if (!t.options.colorcol) opt.setProperty('selected', 'selected');
					for (var i=0; i< t.cols.length; i++) {
						if (t.cols_numeric.contains(t.cols[i]) ||
							(t.flds.get(t.cols[i]).search("^enum") == 0)) {
							if (t.cols[i] == t.idname) continue;
							opt = new Element('option', {'value': t.cols[i]}).inject(sel);
							opt.set('text', t.cols[i]);
							if (t.options.colorcol == t.cols[i]) opt.setProperty('selected', 'selected');
						}
					}
				}
				sel.addEvent('change', function(){t.setcolorcol(this)});
			}		
			if (t.options.showsortcol) {
				t.divmenu.appendText(' sorted on ');
				var sel = new Element('select').inject(t.divmenu);
				if (t.options.showsortcolumns) {
					for (var i = 0; i < t.options.showsortcolumns.length; i++) {
						var opt = new Element('option', {'value': t.options.showsortcolumns[i]}).inject(sel);
						opt.set('text', t.options.showsortcolumns[i]);
						if (t.options.sizecol == t.options.showsortcolumns[i]) opt.setProperty('selected', 'selected');
					}			
				}
				else {
					for (var i=0; i< t.cols.length; i++) {
						if (t.cols[i] == t.idname) continue;
						var opt = new Element('option', {'value': t.cols[i]}).inject(sel);
						opt.set('text', t.cols[i]);
						if (t.options.sortcol == t.cols[i]) opt.setProperty('selected', 'selected');
					}
				}
				sel.addEvent('change', function(){t.setsortcol(this)});
			}
			if (t.options.showsort) {
				t.divmenu.appendText(' sorted ');
				var sel = new Element('select').inject(t.divmenu);
				var opt1 = new Element('option', {'value':'a'}).inject(sel);
				opt1.set('text', 'ascending');
				if (t.options.sort == 'a') opt1.setProperty('selected', 'selected'); 
				var opt2 = new Element('option', {'value':'d'}).inject(sel);
				opt2.set('text', 'descending');
				if (t.options.sort == 'd') opt2.setProperty('selected', 'selected'); 
				sel.addEvent('change', function(){t.setsort(this)});
			}
			t.divmenutoggle = new Element('div', {'class': 'drasticcloudmenutoggle1'}).inject(t.container);
			t.menuToggleSlide = new Fx.Slide(t.divmenu, {duration: 500});
			t.divmenutoggle.addEvent('click', function(){
				t.menuToggleSlide.toggle().chain(function(){
					t.divmenutoggle.toggleClass('drasticcloudmenutoggle2');
				});			
			});
			if (!t.options.showmenufull) {
				t.divmenutoggle.addClass('drasticcloudmenutoggle2');
				t.menuToggleSlide.hide();
			}
		}

		//Container for the tag cloud:
		t.div = new Element('div', {'class': 'drasticcloud'});
		t.div.inject(t.container);
		t.p = new Element('p', {'class': 'drasticcloud'});
		t.p.inject(t.div);
		
		//Load indicator:
		t.loading = new Element('div', {'styles': {'position': 'relative', 'z-index': '100'}}).inject(t.container);
		var img = new Element('img', {'src': t.gifloading}).inject(t.loading);
		var c = img.getCoordinates();
		t.loading.setStyles({'width': c.width, 'height': c.height});
		
		t.refresh(t.options.addparams, false);
	},
	setnamecol: function(obj) {
		var t = this;
		t.options.namecol = obj.value;
		t.refresh(t.options.addparams, false);
	},		
	setsizecol: function(obj) {
		var t = this;
		t.options.sizecol = obj.value;
		t.refresh(t.options.addparams, true);
	},
	setscale: function(obj) {
		var t = this;
		t.options.log = (obj.value == "log")? true: false;
		t.refresh(t.options.addparams, true);
	},
	setcolorcol: function(obj) {
		var t = this;
		t.options.colorcol = (obj.value == ' ')? null: obj.value;
		t.refresh(t.options.addparams, false);
	},		
	setsortcol: function(obj) {
		var t = this;
		t.options.sortcol = obj.value;
		t.refresh(t.options.addparams, false);
	},
	setsort: function(obj) {
		var t = this;
		t.options.sort = obj.value;
		t.refresh(t.options.addparams, false);
	},		
	getMetaData: function() {
		var t = this;
		var myajax = new Request({
			url: t.options.path+'?op=vm'+t.options.addparams,
			async: false,
			method: 'get',
			onFailure: function(){alert(dscloud["MSGREFRESHFAILED"]);},
			onSuccess : function(responseText){
				t.metadata = JSON.decode(responseText);
				t.num_rows			= t.metadata[0];
				t.num_fields		= t.metadata[1];
				t.idname			= t.metadata[2];
				t.idcolnr			= t.metadata[3];
				t.cols				= t.metadata[4];
				t.cols_numeric		= t.metadata[5];
				t.add_allowed		= t.metadata[6];
				t.delete_allowed	= t.metadata[7];
				t.editablecols		= t.metadata[8];
				t.defaultcols		= t.metadata[9];
				if (!t.options.sortcol) t.options.sortcol = t.metadata[10];
				if (!t.options.sort) t.options.sort = t.metadata[11];
				t.flds				= new Hash(t.metadata[12]);
			}
		}).send();
	},
	showLoading: function() {
		var t = this;
		var c = t.container.getCoordinates();
		t.loading.setStyles({
			'visibility': 'visible',
			'top': -(c.height/2) - 16,
			'left': (c.width/2) - 16
		    });
	},
	hideLoading: function() {
		var t = this;
		t.loading.setStyles({'visibility': 'hidden'});
	},

	//
	// Public functions which can be called from the browser:
	//
	refresh: function(addparams, animate_size) {
		var t = this;
		if ($defined(addparams)) t.options.addparams = addparams;		
		var url = t.options.path+'?op=v&cols='+t.options.sizecol+','+t.options.namecol+(t.options.colorcol?','+t.options.colorcol:'')+
											'&sortcol='+t.options.sortcol+'&sort='+t.options.sort+t.options.addparams;
		t.showLoading();
		var myajax = new Request({
			url: url,
			method: 'get',
			onFailure: function(){alert(dscloud["MSGREFRESHFAILED"]);},	
			onComplete: function(responseText){
				t.data = JSON.decode(responseText);
				var values = t.data[1];
				var min = Number.POSITIVE_INFINITY, max = Number.NEGATIVE_INFINITY;
				var mincolorcol = Number.POSITIVE_INFINITY, maxcolorcol = Number.NEGATIVE_INFINITY;
				for (var i=0; i < t.data[0].length; i++)  {
					var value = parseFloat(values[i][0]);
					min = Math.min(min, value);
					max = Math.max(max, value);
					if (t.options.colorcol) {
						var valuecolorcol = parseFloat(values[i][2]);
						mincolorcol = Math.min(mincolorcol, valuecolorcol);
						maxcolorcol = Math.max(maxcolorcol, valuecolorcol);
					}
				}
				var realmin = min;				
				if (t.options.log) {
					min = (realmin >=1)? Math.log(min): 0;
					max = (realmin >=1)? Math.log(max): Math.log(max+(1-realmin));
				}
				var interval = (max-min) /t.options.nroffonts;
				
				// create the real cloud:
				if (!animate_size) t.p.empty();
				for (var i=0; i < t.data[0].length; i++)  {
					var id = t.data[0][i];
					var name = values[i][1];
					var value = parseFloat(values[i][0]);
					if (isNaN(value)) continue;
					var div, a;
					if (animate_size) {
						div = $(t.container.id + 'div' + id);
						a = $(t.container.id + 'a' + id);
					}
					else {
						div = new Element('div', {'id': t.container.id + 'div' + id, 'class': 'drasticcloud-div'}).inject(t.p);
						a = new Element('a', {'id': t.container.id + 'a' + id, 'class': 'drasticcloud-a'}).inject(div);
						a.set('text', name);
						a.setProperty('title', t.options.sizecol+": "+value);
						a.addEvent('mouseover', function(){
							var id = this.id.slice(t.container.id.length + 1);
							this.addClass('drasticcloud-a-mouseover');
							t.fireEvent("onMouseOver", id);
						});
						a.addEvent('mouseout', function(){
							this.removeClass('drasticcloud-a-mouseover')
						});
						a.addEvent('click', function(){
							var id = this.id.slice(t.container.id.length + 1);
							t.fireEvent("onClick", id);
						});						
						if (i<t.data[0].length-1) t.p.appendText(' | ');				
					}
					if (!div) continue;
					if (t.options.log) value = (realmin >=1)? Math.log(value): Math.log(value+(1-realmin));
					var fontdiff = (value - min) / interval;
					var fs = t.fontsize + fontdiff;
					if (animate_size)
						new Fx.Tween(a, {duration: 500}).start('font-size', fs);
					else
						a.setStyle('font-size', fs);
					var opacity = ((value-min)/(max-min)*0.3)+0.7;
					a.setStyle('opacity', opacity);
					a.setStyle('filter', opacity*100); // for IE
					if (t.options.colorcol) {
						var fldtype = t.flds.get(t.options.colorcol);
						if (fldtype.search("^enum") == 0) {
							var intv = Math.floor(100/t.flds.getKeys().length);
							var arr = fldtype.split("'");
							for (var j=1; j<arr.length; j+=2) {if (values[i][2] == arr[j]) break;}
							div.setStyle('color', $HSB(j*intv,80,100));
						} else if (fldtype.search("^tinyint") == 0) {
							a.addClass((values[i][2] == 0)?'drasticcloud-a-false':'drasticcloud-a-true');
						} else {
							div.setStyle('color', $HSB(30,75+((values[i][2] - mincolorcol)/(maxcolorcol - mincolorcol)*150),100));
						}
					}
				}
				//t.tips = new Tips($$('.drasticcloud-a'), {className: 'drasticcloud-tip'});
				t.hideLoading();
			}
		}).send();
	},
	DefaultOnClick: function(id) {
		var t = this;
		$(t.container).getElements('a.drasticcloud-a-selected').removeClass('drasticcloud-a-selected');
		t.container.getElementById(t.container.id+'a'+id).addClass('drasticcloud-a-selected');			
	},
	DefaultOnMouseOver: function(id) {
		var t = this;
	}
});
drasticCloud.implement(new Options, new Events);