visage-app 2.0.5 → 2.1.0

data/lib/visage-app/profile.rb

@@ -9,6 +9,7 @@ require 'digest/md5'
 module Visage
   class Profile
     attr_reader :options, :selected_hosts, :hosts, :selected_metrics, :metrics,
+                :selected_percentiles, :percentiles,
                 :name, :errors
 
     def self.old_format?
@@ -33,7 +34,8 @@ module Visage
     def self.all(opts={})
       sort = opts[:sort]
       profiles = self.load
-      profiles = sort == "name" ? profiles.sort_by {|k,v| v[:profile_name]}.map {|i| i.last } : profiles.values
+      profiles = ((sort == "name") or not sort) ? profiles.sort_by {|k,v| v[:profile_name]}.map {|i| i.last } : profiles.values
+      # FIXME - to sort by creation time we need to save creation time on each profile
       profiles.map { |prof| self.new(prof) }
     end
 
@@ -41,8 +43,9 @@ module Visage
       @options = opts
       @options[:url] = @options[:profile_name] ? @options[:profile_name].downcase.gsub(/[^\w]+/, "+") : nil
       @errors = {}
-      @options[:hosts]   = @options[:hosts].values   if @options[:hosts].class   == Hash
-      @options[:metrics] = @options[:metrics].values if @options[:metrics].class == Hash
+      @options[:hosts]       = @options[:hosts].values       if @options[:hosts].class       == Hash
+      @options[:metrics]     = @options[:metrics].values     if @options[:metrics].class     == Hash
+      @options[:percentiles] = @options[:percentiles].values if @options[:percentiles].class == Hash
     end
 
     # Hashed based access to @options.
@@ -55,6 +58,7 @@ module Visage
         # Construct record.
         attrs = { :hosts        => @options[:hosts],
                   :metrics      => @options[:metrics],
+                  :percentiles  => @options[:percentiles],
                   :profile_name => @options[:profile_name],
                   :url          => @options[:profile_name].downcase.gsub(/[^\w]+/, "+") }
 
@@ -78,9 +82,10 @@ module Visage
     end
 
     def graphs
-      graphs  = []
-      hosts   = @options[:hosts]
-      metrics = @options[:metrics]
+      graphs      = []
+      hosts       = @options[:hosts]
+      metrics     = @options[:metrics]
+      percentiles = @options[:percentiles]
 
       hosts.each do |host|
         attrs = {}
@@ -96,7 +101,8 @@ module Visage
         attrs.each_pair do |plugin, instances|
           graphs << Visage::Graph.new(:host => host,
                                       :plugin => plugin,
-                                      :instances => instances)
+                                      :instances => instances,
+                                      :percentiles => percentiles)
         end
       end
 

data/lib/visage-app/public/javascripts/builder.js

@@ -436,6 +436,7 @@ var ChartBuilder = new Class({
         this.searchers = new Object;
         this.setupHostSearch();
         this.setupMetricSearch();
+        this.setupPercentileSelection();
         this.setupShow();
 
         /* Display graphs if hosts + metrics have been selected */
@@ -460,6 +461,33 @@ var ChartBuilder = new Class({
             });
         this.searchers.metric = searcher;
     },
+    setupPercentileSelection: function() {
+        var container = this.builder.getElement("div#profile-options div.percentiles");
+        if (this.options.percentiles) {
+            if (this.options.percentiles.length > 0) {
+                this.options.percentile95 = true;
+            }
+        }
+        if (container) {
+            var percentileSelector = new Element('input', {
+                'type': 'checkbox',
+                'id':   this.parentElement + '-percentile95',
+                'name': 'percentile_95',
+                'checked': this.options.percentile95,
+                'events': {
+                    'click': function() {
+                        this.options.percentile95 = !this.options.percentile95
+                    }.bind(this)
+                },
+                'styles': {
+                    'margin-right': '4px',
+                    'cursor': 'pointer'
+                }
+            });
+            container.grab(percentileSelector);
+        }
+
+    },
     setupSave: function() {
         if (!this.save) {
             var profile_name = this.profile_name = new Element('input', {
@@ -479,7 +507,12 @@ var ChartBuilder = new Class({
                     'click': function() {
                         var hosts   = this.searchers.host.tokenValues(),
                             metrics = this.searchers.metric.tokenValues();
+                            percentiles   = [];
+                            percentile95 = this.options.percentile95;
 
+                        if (percentile95) {
+                            percentiles.push(95);
+                        }
                         var jsonRequest = new Request.JSON({
                             method:    'post',
                             url:       '/builder',
@@ -495,7 +528,8 @@ var ChartBuilder = new Class({
                         }).send({'data': {
                             'hosts':        hosts,
                             'metrics':      metrics,
-                            'profile_name': profile_name.get('value')
+                            'profile_name': profile_name.get('value'),
+                            'percentiles':  percentiles
                         }});
 
                     }.bind(this)
@@ -525,7 +559,14 @@ var ChartBuilder = new Class({
 
 
             var hosts   = $(this.searchers.host).getElements("div.token.finalized"),
-                metrics = $(this.searchers.metric).getElements("div.token.finalized");
+                metrics = $(this.searchers.metric).getElements("div.token.finalized"),
+                percentiles   = [];
+                percentile95 = this.options.percentile95;
+
+            if (percentile95) {
+                percentiles.push(95);
+            }
+            this.options.percentiles = percentiles;
 
             if (hosts.length > 0 && metrics.length > 0) {
                 this.showGraphs();
@@ -554,8 +595,9 @@ var ChartBuilder = new Class({
         var hosts   = hosts.map(function(el) { return el.get('text') }),
             metrics = metrics.map(function(el) { return el.get('text') }),
             graphs  = $('graphs'),
-            save    = this.save;
-            profile_name = this.profile_name;
+            save    = this.save,
+            profile_name = this.profile_name,
+            percentiles  = this.options.percentiles;
 
         graphs.empty();
         hosts.each(function(host) {
@@ -579,7 +621,8 @@ var ChartBuilder = new Class({
                 graphs.grab(element);
 
                 var graph = new VisageGraph(element, host, plugin, {
-                    pluginInstance: metrics.join(',')
+                    pluginInstance: metrics.join(','),
+                    percentiles: percentiles
                 });
 
                 window.Graphs.include(graph);

data/lib/visage-app/public/javascripts/graph.js

@@ -121,6 +121,7 @@ function formatValue(value, options) {
             break
     }
 
+    if (!(label)) { label = 0; }
     return label.format({decimals: precision, suffix: unit})
 }
 
@@ -168,6 +169,7 @@ var VisageBase = new Class({
     },
     dataURL: function() {
         var url = ['data', this.options.host, this.options.plugin];
+
         // if the data exists on another host (useful for embedding)
         if (this.options.baseurl) {
             url.unshift(this.options.baseurl.replace(/\/$/, ''))
@@ -180,7 +182,14 @@ var VisageBase = new Class({
         if (!url[0].match(/http\:\/\//)) {
             url[0] = '/' + url[0]
         }
-        return url.join('/')
+        var options = '';
+        if (this.options.percentiles) {
+            if (this.options.percentiles.length > 0) {
+                options = '?percentiles=true';
+                this.options.percentile95 = true;
+            }
+        }
+        return url.join('/') + options;
     },
     getData: function() {
         this.request = new Request.JSONP({
@@ -250,9 +259,11 @@ var VisageGraph = new Class({
                 });
 
                 this.chart.redraw();
+                this.drawPercentiles(this.chart)
                 break;
             default:
                 this.drawChart()
+                this.drawPercentiles(this.chart)
                 break;
         }
     },
@@ -264,8 +275,8 @@ var VisageGraph = new Class({
 
         $each(data[host][plugin], function(instance, instanceName) {
             $each(instance, function(metric, metricName) {
-                var start    = metric.start,
-                    finish   = metric.finish,
+                var start         = metric.start,
+                    finish        = metric.finish,
                     interval = (finish - start) / metric.data.length;
 
                 var data     = metric.data.map(function(value, index) {
@@ -278,12 +289,12 @@ var VisageGraph = new Class({
                 var set = {
                     name: [ host, plugin, instanceName, metricName ],
                     data: data,
+                    percentile95: metric.percentile_95
                 };
 
                 series.push(set)
             }, this);
         }, this);
-
         return series
     },
     getSeriesMinMax: function(series) {
@@ -313,7 +324,40 @@ var VisageGraph = new Class({
 
         return {'min': min, 'max': max};
     },
+    removePercentiles: function(chart) {
+
+        var series = this.series;
+
+        series.each(function(set) {
+            chart.yAxis[0].removePlotLine('95e_' + set.name[2] + set.name[3]);
+        });
+    },
+    drawPercentiles: function(chart) {
+        var series = this.series;
+
+        /* Get the maximum value across all sets.
+         * Used later on to determine the decimal place in the label. */
+        meta = this.getSeriesMinMax(series);
+        var min = meta.min,
+            max = meta.max;
+
+        series.each(function(set) {
+            formattedValue = formatValue(set.percentile95, { 'precision': 2, 'min': min, 'max': max });
+            chart.yAxis[0].removePlotLine('95e_' + set.name[2] + set.name[3]);
+            chart.yAxis[0].addPlotLine({
+                id: '95e_' + set.name[2] + set.name[3],
+                value: set.percentile95,
+                color: '#ff0000',
+                width: 1,
+                zIndex: 5,
+                label: {
+                    text: '95e ' + set.name[3] + ": " + formattedValue
+                }
+            })
+        });
+    },
     drawChart: function() {
+
         var series  = this.series,
             title   = this.title(),
             element = this.parentElement,
@@ -344,6 +388,9 @@ var VisageGraph = new Class({
                                              'finish': this.lastFinish / 1000 + 10,
                                              'live':   true };
                                 this.requestData = data;
+                                // FIXME: for 95e plotLines - need to update them each data retrieval
+                                // but perhaps 'live' just sends incremental data and so won't cause
+                                // a recalculation of the 95e figures on the server side?
                                 this.getData()
                             }
                         }.bind(this), 10000);
@@ -400,7 +447,7 @@ var VisageGraph = new Class({
                                         });
                         return value
                     }
-                }
+                },
             },
             plotOptions: {
                 series: {
@@ -447,8 +494,9 @@ var VisageGraph = new Class({
                 layout: 'horizontal',
                 align: 'center',
                 verticalAlign: 'top',
-                y: 275,
+                y: 255,
                 borderWidth: 0,
+                floating: true,
                 labelFormatter: function() {
                     return formatSeriesLabel(this.name)
                 },
@@ -522,7 +570,7 @@ var VisageGraph = new Class({
                                     '7 days':   168,
                                     '2 weeks':  336,
                                     '1 month':  774,
-                                    '3 month':  2322,
+                                    '3 months': 2322,
                                     '6 months': 4368,
                                     '1 year':   8760,
                                     '2 years':  17520 });
@@ -540,14 +588,45 @@ var VisageGraph = new Class({
             select.grab(option)
         });
 
-        var liveToggler = new Element('input', {
+        /* Calendar month timescales dropdown */
+        var monthlyTimescales = new Hash({ 'current month': 0,
+                                           'previous month': 1,
+                                           'two months ago': 2,
+                                           'three months ago': 3});
+
+        monthlyTimescales.each(function(monthsAgo, label) {
+            var current    = this.currentTimePeriod == label;
+            var value = "start=" + (new Date().decrement('month', monthsAgo).set('date', 1).set('hr', 0).set('min', 0).set('sec', 0).getTime() / 1000);
+            value += '&finish=' + (new Date().decrement('month', monthsAgo - 1).set('date', 1).set('hr', 0).set('min', 0).set('sec', 0).getTime() / 1000);
+
+            var option = new Element('option', {
+                'html':     label,
+                'value':    value,
+                'selected': (current ? 'selected' : ''),
+            });
+            select.grab(option)
+        });
+
+        var liveToggler = this.liveToggler = new Element('input', {
             'type': 'checkbox',
             'id':   this.parentElement + '-live',
             'name': 'live',
             'checked': this.options.live,
+            'disabled': this.options.percentile95,
             'events': {
-                'click': function() {
+                'click': function(e) {
                     this.options.live = !this.options.live
+                    if (this.options.live) {
+                        // tell percentiles95Toggler to be unchecked
+                        if (this.options.percentile95) {
+                            this.percentile95Toggler.fireEvent('click');
+                        }
+                        this.percentile95Toggler.set('disabled', true);
+                    } else {
+                        this.requestData.live = false;
+                        this.percentile95Toggler.set('disabled', false);
+                        e.target.form.fireEvent('submit', e)
+                    }
                 }.bind(this)
             },
             'styles': {
@@ -567,6 +646,60 @@ var VisageGraph = new Class({
             }
         });
 
+        var percentile95Toggler = this.percentile95Toggler = new Element('input', {
+            'type': 'checkbox',
+            'id':   this.parentElement + '-percentile95',
+            'name': 'percentile95',
+            'checked': this.options.percentile95,
+            'events': {
+                'click': function() {
+                    this.options.percentile95 = !this.options.percentile95;
+                    if (!(this.options.percentiles)) {
+                        this.options.percentiles = [];
+                    }
+                    if (this.options.percentile95) {
+                        this.options.percentiles.push('95');
+                        if ((this.chart) && (this.series[0].percentile95)) {
+                            this.drawPercentiles(this.chart);
+                        } else {
+                            this.getData();
+                        }
+                        // tell liveToggler to be unchecked
+                        if (this.options.live) {
+                            this.liveToggler.fireEvent('click');
+                        }
+                        this.liveToggler.set('disabled', true);
+                    } else {
+                        // FIXME - when adding support for 5th and 50th percentiles
+                        // etc we'll need to switch the options.percentiles array
+                        // to a hash for easy enabling / disabling of percentiles
+                        this.options.percentiles = [];
+                        if (this.chart) {
+                            this.removePercentiles(this.chart);
+                        } else {
+                            this.getData();
+                        }
+                        this.liveToggler.set('disabled', false);
+                    }
+                }.bind(this)
+            },
+            'styles': {
+                'margin-right': '4px',
+                'cursor': 'pointer'
+            }
+        });
+
+        var percentile95Label = new Element('label', {
+            'for': this.parentElement + '-percentile95',
+            'html': '95th Percentile',
+            'styles': {
+                'font-family': 'sans-serif',
+                'font-size':   '11px',
+                'margin-right': '8px',
+                'cursor': 'pointer'
+            }
+        });
+
         var exportLink = new Element('a', {
             'href': this.dataURL(),
             'html': 'Export data',
@@ -594,6 +727,8 @@ var VisageGraph = new Class({
         });
 
         form.grab(exportLink)
+        form.grab(percentile95Toggler)
+        form.grab(percentile95Label)
         form.grab(liveToggler)
         form.grab(liveLabel)
         form.grab(select)

data/lib/visage-app/public/javascripts/highcharts-mootools-adapter.js

@@ -0,0 +1,12 @@
+/*
+ Highcharts JS v2.2.1 (2012-03-15)
+ MooTools adapter
+
+ (c) 2010-2011 Torstein H?nsi
+
+ License: www.highcharts.com/license
+*/
+(function(){var e=window,i=document,f=e.MooTools.version.substring(0,3),g=f==="1.2"||f==="1.1",j=g||f==="1.3",h=e.$extend||function(){return Object.append.apply(Object,arguments)};e.HighchartsAdapter={init:function(a){var b=Fx.prototype,c=b.start,d=Fx.Morph.prototype,e=d.compute;b.start=function(b,d){var e=this.element;if(b.d)this.paths=a.init(e,e.d,this.toD);c.apply(this,arguments);return this};d.compute=function(b,c,d){var f=this.paths;if(f)this.element.attr("d",a.step(f[0],f[1],d,this.toD));else return e.apply(this,
+arguments)}},getScript:function(a,b){var c=i.getElementsByTagName("head")[0],d=i.createElement("script");d.type="text/javascript";d.src=a;d.onload=b;c.appendChild(d)},animate:function(a,b,c){var d=a.attr,f=c&&c.complete;if(d&&!a.setStyle)a.getStyle=a.attr,a.setStyle=function(){var b=arguments;a.attr.call(a,b[0],b[1][0])},a.$family=function(){return!0};e.HighchartsAdapter.stop(a);c=new Fx.Morph(d?a:$(a),h({transition:Fx.Transitions.Quad.easeInOut},c));if(d)c.element=a;if(b.d)c.toD=b.d;f&&c.addEvent("complete",
+f);c.start(b);a.fx=c},each:function(a,b){return g?$each(a,b):Array.each(a,b)},map:function(a,b){return a.map(b)},grep:function(a,b){return a.filter(b)},merge:function(){var a=arguments,b=[{}],c=a.length;if(g)a=$merge.apply(null,a);else{for(;c--;)typeof a[c]!=="boolean"&&(b[c+1]=a[c]);a=Object.merge.apply(Object,b)}return a},offset:function(a){a=$(a).getOffsets();return{left:a.x,top:a.y}},extendWithEvents:function(a){a.addEvent||(a.nodeName?$(a):h(a,new Events))},addEvent:function(a,b,c){typeof b===
+"string"&&(b==="unload"&&(b="beforeunload"),e.HighchartsAdapter.extendWithEvents(a),a.addEvent(b,c))},removeEvent:function(a,b,c){typeof a!=="string"&&(e.HighchartsAdapter.extendWithEvents(a),b?(b==="unload"&&(b="beforeunload"),c?a.removeEvent(b,c):a.removeEvents(b)):a.removeEvents())},fireEvent:function(a,b,c,d){b={type:b,target:a};b=j?new Event(b):new DOMEvent(b);b=h(b,c);b.preventDefault=function(){d=null};a.fireEvent&&a.fireEvent(b.type,b);d&&d(b)},stop:function(a){a.fx&&a.fx.cancel()}}})();

data/lib/visage-app/public/javascripts/highcharts-mootools-adapter.src.js

@@ -0,0 +1,298 @@
+/**
+ * @license Highcharts JS v2.2.1 (2012-03-15)
+ * MooTools adapter
+ *
+ * (c) 2010-2011 Torstein Hønsi
+ *
+ * License: www.highcharts.com/license
+ */
+
+// JSLint options:
+/*global Fx, $, $extend, $each, $merge, Events, Event, DOMEvent */
+
+(function () {
+
+var win = window,
+	doc = document,
+	mooVersion = win.MooTools.version.substring(0, 3), // Get the first three characters of the version number
+	legacy = mooVersion === '1.2' || mooVersion === '1.1', // 1.1 && 1.2 considered legacy, 1.3 is not.
+	legacyEvent = legacy || mooVersion === '1.3', // In versions 1.1 - 1.3 the event class is named Event, in newer versions it is named DOMEvent.
+	$extend = win.$extend || function () {
+		return Object.append.apply(Object, arguments);
+	};
+
+win.HighchartsAdapter = {
+	/**
+	 * Initialize the adapter. This is run once as Highcharts is first run.
+	 * @param {Object} pathAnim The helper object to do animations across adapters.
+	 */
+	init: function (pathAnim) {
+		var fxProto = Fx.prototype,
+			fxStart = fxProto.start,
+			morphProto = Fx.Morph.prototype,
+			morphCompute = morphProto.compute;
+
+		// override Fx.start to allow animation of SVG element wrappers
+		/*jslint unparam: true*//* allow unused parameters in fx functions */
+		fxProto.start = function (from, to) {
+			var fx = this,
+				elem = fx.element;
+
+			// special for animating paths
+			if (from.d) {
+				//this.fromD = this.element.d.split(' ');
+				fx.paths = pathAnim.init(
+					elem,
+					elem.d,
+					fx.toD
+				);
+			}
+			fxStart.apply(fx, arguments);
+
+			return this; // chainable
+		};
+
+		// override Fx.step to allow animation of SVG element wrappers
+		morphProto.compute = function (from, to, delta) {
+			var fx = this,
+				paths = fx.paths;
+
+			if (paths) {
+				fx.element.attr(
+					'd',
+					pathAnim.step(paths[0], paths[1], delta, fx.toD)
+				);
+			} else {
+				return morphCompute.apply(fx, arguments);
+			}
+		};
+		/*jslint unparam: false*/
+	},
+
+	/**
+	 * Downloads a script and executes a callback when done.
+	 * @param {String} scriptLocation
+	 * @param {Function} callback
+	 */
+	getScript: function (scriptLocation, callback) {
+		// We cannot assume that Assets class from mootools-more is available so instead insert a script tag to download script.
+		var head = doc.getElementsByTagName('head')[0];
+		var script = doc.createElement('script');
+
+		script.type = 'text/javascript';
+		script.src = scriptLocation;
+		script.onload = callback;
+
+		head.appendChild(script);
+	},
+
+	/**
+	 * Animate a HTML element or SVG element wrapper
+	 * @param {Object} el
+	 * @param {Object} params
+	 * @param {Object} options jQuery-like animation options: duration, easing, callback
+	 */
+	animate: function (el, params, options) {
+		var isSVGElement = el.attr,
+			effect,
+			complete = options && options.complete;
+
+		if (isSVGElement && !el.setStyle) {
+			// add setStyle and getStyle methods for internal use in Moo
+			el.getStyle = el.attr;
+			el.setStyle = function () { // property value is given as array in Moo - break it down
+				var args = arguments;
+				el.attr.call(el, args[0], args[1][0]);
+			};
+			// dirty hack to trick Moo into handling el as an element wrapper
+			el.$family = function () { return true; };
+		}
+
+		// stop running animations
+		win.HighchartsAdapter.stop(el);
+
+		// define and run the effect
+		effect = new Fx.Morph(
+			isSVGElement ? el : $(el),
+			$extend({
+				transition: Fx.Transitions.Quad.easeInOut
+			}, options)
+		);
+
+		// Make sure that the element reference is set when animating svg elements
+		if (isSVGElement) {
+			effect.element = el;
+		}
+
+		// special treatment for paths
+		if (params.d) {
+			effect.toD = params.d;
+		}
+
+		// jQuery-like events
+		if (complete) {
+			effect.addEvent('complete', complete);
+		}
+
+		// run
+		effect.start(params);
+
+		// record for use in stop method
+		el.fx = effect;
+	},
+
+	/**
+	 * MooTool's each function
+	 *
+	 */
+	each: function (arr, fn) {
+		return legacy ?
+			$each(arr, fn) :
+			Array.each(arr, fn);
+	},
+
+	/**
+	 * Map an array
+	 * @param {Array} arr
+	 * @param {Function} fn
+	 */
+	map: function (arr, fn) {
+		return arr.map(fn);
+	},
+
+	/**
+	 * Grep or filter an array
+	 * @param {Array} arr
+	 * @param {Function} fn
+	 */
+	grep: function (arr, fn) {
+		return arr.filter(fn);
+	},
+
+	/**
+	 * Deep merge two objects and return a third
+	 */
+	merge: function () {
+		var args = arguments,
+			args13 = [{}], // MooTools 1.3+
+			i = args.length,
+			ret;
+
+		if (legacy) {
+			ret = $merge.apply(null, args);
+		} else {
+			while (i--) {
+				// Boolean argumens should not be merged.
+				// JQuery explicitly skips this, so we do it here as well.
+				if (typeof args[i] !== 'boolean') {
+					args13[i + 1] = args[i];
+				}
+			}
+			ret = Object.merge.apply(Object, args13);
+		}
+
+		return ret;
+	},
+
+	/**
+	 * Get the offset of an element relative to the top left corner of the web page
+	 */
+	offset: function (el) {
+		var offsets = $(el).getOffsets();
+		return {
+			left: offsets.x,
+			top: offsets.y
+		};
+	},
+
+	/**
+	 * Extends an object with Events, if its not done
+	 */
+	extendWithEvents: function (el) {
+		// if the addEvent method is not defined, el is a custom Highcharts object
+		// like series or point
+		if (!el.addEvent) {
+			if (el.nodeName) {
+				el = $(el); // a dynamically generated node
+			} else {
+				$extend(el, new Events()); // a custom object
+			}
+		}
+	},
+
+	/**
+	 * Add an event listener
+	 * @param {Object} el HTML element or custom object
+	 * @param {String} type Event type
+	 * @param {Function} fn Event handler
+	 */
+	addEvent: function (el, type, fn) {
+		if (typeof type === 'string') { // chart broke due to el being string, type function
+
+			if (type === 'unload') { // Moo self destructs before custom unload events
+				type = 'beforeunload';
+			}
+
+			win.HighchartsAdapter.extendWithEvents(el);
+
+			el.addEvent(type, fn);
+		}
+	},
+
+	removeEvent: function (el, type, fn) {
+		if (typeof el === 'string') {
+			// el.removeEvents below apperantly calls this method again. Do not quite understand why, so for now just bail out.
+			return;
+		}
+		win.HighchartsAdapter.extendWithEvents(el);
+		if (type) {
+			if (type === 'unload') { // Moo self destructs before custom unload events
+				type = 'beforeunload';
+			}
+
+			if (fn) {
+				el.removeEvent(type, fn);
+			} else {
+				el.removeEvents(type);
+			}
+		} else {
+			el.removeEvents();
+		}
+	},
+
+	fireEvent: function (el, event, eventArguments, defaultFunction) {
+		var eventArgs = {
+			type: event,
+			target: el
+		};
+		// create an event object that keeps all functions
+		event = legacyEvent ? new Event(eventArgs) : new DOMEvent(eventArgs);
+		event = $extend(event, eventArguments);
+		// override the preventDefault function to be able to use
+		// this for custom events
+		event.preventDefault = function () {
+			defaultFunction = null;
+		};
+		// if fireEvent is not available on the object, there hasn't been added
+		// any events to it above
+		if (el.fireEvent) {
+			el.fireEvent(event.type, event);
+		}
+
+		// fire the default if it is passed and it is not prevented above
+		if (defaultFunction) {
+			defaultFunction(event);
+		}
+	},
+
+	/**
+	 * Stop running animations on the object
+	 */
+	stop: function (el) {
+		if (el.fx) {
+			el.fx.cancel();
+		}
+	}
+};
+
+}());