/**
 *  Copyright 2006 - Programaria - Software per a Tothom       
 *  http://www.programaria.com    
 *   
 *  author: drh (dani@programaria.com)
 */

var mybox = new Object();



/******************************************************************************
 * Utils
 ******************************************************************************/
/**
 * Return the escaped text of the attribute value from a component. The parameter name
 * identifies this component; if the parameter component is undefined, name must 
 * be the complete id otherwise name must be a parent or brother component id sufix.
 */
mybox.escapeTextValue = function(name, component) {
    var input;
    if (component == undefined) {
        input = mybox.getElement(name)
    } else {
        input = mybox.findJSFComponent(name, component);
    }
    var aname = input.value;
    aname.replace("'", "\\'");
    aname.replace('"', '\\"');
    return aname;
}

mybox.trim = function(s) {
    return s.replace(/^\s+|\s+$/, '');
}

mybox.getWindowInnerWidth = function() {
    if (window.innerWidth) {
        return window.innerWidth;
    } else {
        return document.documentElement.offsetWidth;
    }
}

mybox.getWindowInnerHeight = function() {
    if (window.innerHeight) {
        return window.innerHeight;
    } else {
        return document.documentElement.offsetHeight;
    }
}

mybox.centerInWindow = function(el, elementWidth, elementHeight) {
    var width = mybox.getWindowInnerWidth();
    //var height = mybox.getWindowInnerHeight(); 
    var height = mybox.getWindowHeight(); 
    var s;
    if (elementWidth == undefined) {
        elementWidth = el.clientWidth;
        if (elementWidth == undefined) {
            s = el.style.width;
            s = s.substring(0, s.length - 2);
            elementWidth = parseInt(s);
        }
    }
    var left = width / 2 - elementWidth / 2;
    
    if (elementHeight == undefined) {
        elementHeight = el.clientHeight;
        if (elementHeight == undefined) {
            s = el.style.height;
            s = s.substring(0, s.length - 2);
            elementHeight = parseInt(s);
        }
    }
    var top = height / 2 - elementHeight / 2;
    
    top += mybox.getScrollXY()[1];
    el.style.top = top + 'px';
    el.style.left = left + 'px';
}

mybox.getScrollXY = function() {  
    var scrOfX = 0, scrOfY = 0;
    if( typeof( window.pageYOffset ) == 'number' ) {
        //Netscape compliant
        scrOfY = window.pageYOffset;
        scrOfX = window.pageXOffset;
    } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
        //DOM compliant
        scrOfY = document.body.scrollTop;
        scrOfX = document.body.scrollLeft;
    } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
        //IE6 standards compliant mode
        scrOfY = document.documentElement.scrollTop;
        scrOfX = document.documentElement.scrollLeft;
    }
    return [ scrOfX, scrOfY ];
}

mybox.getWindowHeight = function() {
  var windowHeight=0;
  if (typeof(window.innerHeight)=='number') {
    windowHeight=window.innerHeight;
  }
  else {
    if (document.documentElement&&
      document.documentElement.clientHeight) {
        windowHeight=
          document.documentElement.clientHeight;
    }
    else {
      if (document.body&&document.body.clientHeight) {
        windowHeight=document.body.clientHeight;
      }
    }
  }
  return windowHeight;
}

mybox.stopPropagation = function(e) {
    if (window.event && window.event.cancelBubble == false) {
        window.event.cancelBubble = true;
    }
    if (e && e.stopPropagation) {
        e.stopPropagation();
    }
}

/**
 * Find a JSF component. Similar to the UIComponent.findComponent jsf method. 
 * Param 'component' can be a help if are in the same o parent NamingContainer.
 */
mybox.findJSFComponent = function(name, component) {
    var c = mybox.getElement(name);
    if (c != undefined) {
        return c;
    } else if (component != undefined) {
        var id = component.id;
        var i = id.lastIndexOf(':'); 
        while (i != -1 && id.length > 0) {
            id = id.substring(0, i);
            c = mybox.getElement(id + ':' + name);
            if (c != undefined)
                return c;
            else if (id.length > 0)  
                i = id.lastIndexOf(':');
        }
        return null; 
    } else {
        return null;
    }
}

mybox.doClick = function(e, buttonName) {
    try {
        var keycode;
        var target; 
        if (window.event) {
            keycode = window.event.keyCode;
            target = window.event.srcElement;
        } else if (e) {
            keycode = e.which;
            target = e.target;
        } else 
            return true; 
 
        if (keycode == 13) {
            mybox.cancelEvent(e);
            var el = mybox.getElement(buttonName);
            if (el == undefined) {
                el = mybox.findJSFComponent(buttonName, target);
            }
            if (el != undefined) {
                if (el.click != null && el.click != undefined)
                    el.click();
                else
                    el.onclick();
            } else {
                alert('element not found ' + buttonName)
            }
            return false;
        } else
            return true;
   } catch (err) {
        alert(err);
   }
}

mybox.insertAtCursor = function(myField, myValue) {
    //IE support
    if (document.selection) {
        myField.focus();
        sel = document.selection.createRange();
        sel.text = myValue;
        sel.moveStart('character', -myValue.length);
        //sel.select();
    }
    //MOZILLA/NETSCAPE support
    else if (myField.selectionStart || myField.selectionStart == '0') {
        var startPos = myField.selectionStart;
        var endPos = myField.selectionEnd;
        myField.value =
        myField.value.substring(0, startPos)
        + myValue
        + myField.value.substring(endPos, myField.value.length);
        //myField.selectionStart = startPos;
        myField.selectionStart = startPos + myValue.length;
        myField.selectionEnd = startPos + myValue.length;
    }
}

/******************************************************************************
 * Class Point
 ******************************************************************************/

mybox.Point = function(x, y) {
    this.x = x;
    this.y = y;
}

mybox.Point.prototype = {
}



/*******************************************************************************
 * Class DragLayer
 *******************************************************************************/

mybox.DragElement = function(srcName, tgtName) {
    this.elementName = srcName;
    if (tgtName == undefined) {
        tgtName = srcName;
    }
    this.targetElementName = tgtName;
    this.dx = 0;
    this.dy = 0;
    this.mouseDown = false;
    this.init();
}

mybox.DragElement.prototype = {
    init : function() {
        var ctx = this;
        
        var mouseDown = function(mouseEvent) {
            var e = mybox.getEvent(mouseEvent);
            var element = mybox.getElement(ctx.elementName);
            var target = mybox.getTarget(e);
            // evict inputs, selects, etc..
            if (!target.name) {
                if (target.id != null && target.id.length > 0 && target.id != ctx.targetElementName) {
                } else {                    
                    ctx.mousedown = true;
                    ctx.dx = e.clientX - element.offsetLeft;
                    ctx.dy = e.clientY - element.offsetTop; 
                }
            }
        }
        
        var mouseMove = function(mouseEvent) {
            var e = mybox.getEvent(mouseEvent);
            if (ctx.mousedown) {
                var element = mybox.getElement(ctx.elementName);
                element.style.cursor = 'move';
                element.style.left = (e.clientX - ctx.dx) + 'px';
                element.style.top = (e.clientY - ctx.dy) + 'px';
            }
        }
        
        var mouseUp = function(mouseEvent) {
            ctx.mousedown = false;
            var element = mybox.getElement(ctx.elementName);
            element.style.cursor = 'auto';
        }
        
        var element = mybox.getElement(ctx.targetElementName);
        mybox.addEvent(element, 'mousedown', mouseDown, true);
        mybox.addEvent(element, 'mousemove', mouseMove, true);
        mybox.addEvent(element, 'mouseup', mouseUp, true);
    },     
    
    centerInWindow : function() {
        var element = mybox.getElement(this.elementName);
        mybox.centerInWindow(element);
    },
    
    getElement : function() {
        return mybox.getElement(this.elementName);
    }
}


/******************************************************************************
 * Class AjaxRequest
 ******************************************************************************/

mybox.AjaxRequest = function(httpMethod, url, params, onComplete, asynchronously) {
    this.httpMethod = httpMethod;
    this.url = url;
    this.params = params;
    this.onComplete = onComplete;
    this.req = null;
    if (asynchronously != undefined) {
        this.asynchronously = asynchronously;
    } else {
        this.asynchronously = true;
    }
}

mybox.AjaxRequest.prototype = {   
    
    run : function() {
        var loader = this;
        this.req = this.getXMLHttpRequest();
        this.req.onreadystatechange = function() {
            loader.onReadyState.call(loader);
        };
        if (this.httpMethod == null)
            this.httpMethod = 'GET';
        
        if ('GET' == this.httpMethod) {            
            var s = this.url;
            if (this.params != null)
                s += '?' + this.params;
            this.req.open("GET", s, this.asynchronously);
        } else {
            this.req.open("POST", this.url, this.asynchronously);
            this.req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        }
        this.req.send(this.params);            
    },
    
    onReadyState : function() {
        var req = this.req;
        if (req.readyState == 4) {
            if (req.status && req.status == 200) {
                if (this.onComplete && this.onComplete != null)
                    this.onComplete.call(this);
            } else {
                //alert('status: ' + req.status);
            }
        }        
    }
    ,
    getXMLHttpRequest : function() {
        if (window.XMLHttpRequest) {
            return new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            isIE = true;
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
}

/*******************************************************************************
 * Event
 ******************************************************************************/

mybox.getElement = function(id) {
    if (id)
        return document.getElementById(id);
}

mybox.addEvent = function(obj, type, fn) {
    if (obj != undefined) {
        if (obj.attachEvent) {
            obj['e' + type + fn] = fn;
            obj[type + fn] = function() { obj['e' + type + fn] ( window.event ); }
            obj.attachEvent('on' + type, obj[type+fn]);
        } else {
            try {
                obj.addEventListener(type, fn, false);
            } catch (e) { }
        }
    }
}

mybox.removeEvent = function( obj, type, fn ) {
    if ( obj.detachEvent ) {
        obj.detachEvent( 'on'+type, obj[type+fn] );
        obj[type+fn] = null;
    } else
        obj.removeEventListener( type, fn, false );
} 

mybox.cancelEvent = function(e) {
    if (window.event) {
        window.event.cancelBubble = true;
        window.event.returnValue = false;
    }
    if (e && e.stopPropagation) {
        e.stopPropagation();
    }
    if (e && e.preventDefault) {
        e.preventDefault();
    }
}

mybox.getTarget = function(e) {
    return e.target ? e.target : e.srcElement;    
}

mybox.getEvent = function(e) {
    return window.event ? window.event : e;
}

mybox.getLocation = function(el) {
    var p = new mybox.Point(0, 0);
    if (el.offsetParent) {
        do {
            p.x += el.offsetLeft;
            p.y += el.offsetTop;
            el = el.offsetParent;
        } while (el != null);
    } else if (el.x) {
        if (el.x) 
            p.x += el.x;
        if (el.y)
            p.y += el.y;
    } else if (el.clientX) {
        p.x += el.clientX;
        p.y += el.clientY;
    }
    return p;
}

mybox.isIE = function() {
    return !window.opera && navigator.userAgent.indexOf('MSIE') != -1;
}

mybox.getMouseLocation = function(mouseEvent) {
    var e = mybox.getEvent(mouseEvent);
    var p = new mybox.Point(0, 0);
    
    if (e.pageX && e.pageY) {
        p.x = e.pageX;
        p.y = e.pageY;
    } else if (e.clientX && e.clientY) {
        p.x = e.clientX;
        p.y = e.clientY;
        if (mybox.isIE()) {            
            p.x += document.body.scrollLeft + document.documentElement.scrollLeft;
            p.y += document.body.scrollTop + document.documentElement.scrollTop;
        }
    }    
    return p;
}

mybox.getKeyCode = function(keyEvent) {
    return window.event ? keyEvent.keyCode : keyEvent.which;
}

mybox.cancelTimer = function(timerId) {
    clearTimeout(timerId);
}

mybox.disableSubmitOnEnter = function(el) {
    var ft = function(e) {
        var key = mybox.getKeyCode(e);
        if (key == 13) {
            mybox.cancelEvent(e);
            return false;
        } else
            return true;
    };
    mybox.addEvent(el, 'keypress', ft, true);
}

mybox.isOver = function(p, el) {
    var p0 = mybox.getLocation(el);
    var p1 = new mybox.Point(p0.x + el.offsetWidth, p0.y + el.offsetHeight);
    var b = p.x >= p0.x && p.y >= p0.y && p.x <= p1.x && p.y <= p1.y;
    return b;
}

/******************************************************************************
 * Iframes
 ******************************************************************************/

mybox.getIFrameDocument = function(iframe) {    
    var doc = iframe.contentDocument;
    if (doc == undefined || doc == null)
        doc = iframe.contentWindow.document;
    
    return doc;
}

/******************************************************************************
 * AjaxTypeAhead Class
 ******************************************************************************/

mybox.AjaxTypeAhead = function(onchange, timeVisible, inputHidden, input, div, forceSameWidth, url, paramName, useOptionValue) {
    this.inputHidden = inputHidden;
    this.input = input;
    this.input.setAttribute("autocomplete","off"); 
    this.url = url;
    this.paramName = paramName;
    this.div = div;
    this.forceSameWidth = forceSameWidth;
    this.onchange = onchange;
    this.useOptionValue = useOptionValue;
    
    this.timerId = null;
    this.keyTimerId = null;
    this.timeVisible = timeVisible;
    this.iframe = null;
    this.zIndex = 101;
    this.text = null;
    this.selected = -1;
    this.values = null;    
    this.request = null;
    this.keyEvent = null;
    this.mouseEvent = null;
    this.inputColor = this.input.style.color;
    
    mybox.disableSubmitOnEnter(this.input);
    
    var ctx = this;
    var keypressFt = function(e) {
        ctx.keyEvent = e;
        ctx.keypress.call(ctx);
    }
    mybox.addEvent(this.input, 'keydown', keypressFt, false);
    
    var mouseClickFt = function(e) {
        ctx.input.value = '';
        ctx.inputHidden.value = '';        
        ctx.update.call(ctx, true);
    }
    mybox.addEvent(this.input, 'dblclick', mouseClickFt, false);
    mybox.addEvent(this.input, 'click', mouseClickFt, false);
}

mybox.AjaxTypeAhead.prototype = {
    
    startTimeout : function() {        
        if (this.timerId == null) {
            var el = this;
            var ft = function() {
                el.hide.call(el);
            };
            this.timerId = setTimeout(ft, this.timeVisible);
        }
    },
    
    cancelTimeout : function() {
        if (this.timerId != null) {
            mybox.cancelTimer(this.timerId);
            this.timerId = null;
        }
        if (this.keyTimerId != null) {
            mybox.cancelTimer(this.keyTimerId);
            this.keyTimerId = null;
        }         
    },
    
    mouseOver : function() {        
        var p = mybox.getMouseLocation(this.mouseEvent);  
        p.y = p.y + this.div.scrollTop; // rech
        
        var table = this.div.firstChild;
        var tbody = table.firstChild;        
        if (tbody) {            
            var trs = tbody.getElementsByTagName('tr');
            if (trs) {
                for (var i = 0; i < trs.length; i++) {
                    if (mybox.isOver(p, trs[i])) {
                        this.select(i);
                        return true;
                    }
                }
            }
        }    
        return true;
    },
    
    keypress : function() {
        if (this.timerId != null)
            this.cancelTimeout();
        
        var key = mybox.getKeyCode(this.keyEvent);
        
        if (key != 13 && key != 9) {           
            this.startTimeout();
        }
        
        if (key == 13 || key == 9) {  // enter, tab
            /*
            if (key == 13) {
                this.saveSelected();
            } else {
                this.hide();
            }
             */
            this.saveSelected();
            return true;
        } else if (key == 38) {   // up
            this.move(-1);
            return false;
        } else if (key == 40) {   // down
            this.move(1);
            return false;   
        } else if (key == 27) { // esc
            this.hide();
        } else {
            if (this.keyTimerId != null) {
                mybox.cancelTimer(this.keyTimerId);
            }
            this.input.style.color = '#a0a0a0';
            this.inputHidden.value = '';                
            var ctx = this;
            var ft = function() {
                ctx.update.call(ctx);
            };
            this.keyTimerId = setTimeout(ft, 500);
        }        
    },
    
    saveSelected : function() {
        if (this.selected == null || this.selected == -1) {
            this.inputHidden.value = '';
        } else {
            if (this.values != null && this.values[this.selected]) {
                this.input.style.color = this.inputColor;
                
                if (this.inputHidden.value != this.values[this.selected][1]) {
                    this.inputHidden.value = this.values[this.selected][1]; 
                    if (this.useOptionValue) {
                        this.input.value = this.values[this.selected][1];
                    } else {
                        this.input.value = this.values[this.selected][0];
                    }
                    if (this.onchange != null) {
                        try {
                            eval(this.onchange);
                        } catch (e) {
                            alert(e);
                        }
                    }
                }
                
            }
        }
        this.hide();
    },
    
    update : function(force) {        
        if (force != true && this.text != null && this.text == this.input.value) {
            this.show();
            return false;
        }
        
        this.text = this.input.value;
        if (force != true && this.text == '')
            return;
        
        var ctx = this;
        var fillFt = function() {            
            ctx.fill.call(ctx);
        }
        this.request = new mybox.AjaxRequest('GET', this.url, 
                this.paramName + '=' + encodeURIComponent(this.text), fillFt);
        this.request.run();        
    },    
    
    move : function(delta) {
        if (this.selected != -1) {
            this.select(this.selected + delta);
            this.moveCaretToEnd();
        }
        this.cancelTimeout();
        /*
        if (this.keyTimerId != null) {
            mybox.cancelTimer(this.keyTimerId);
        } 
        */
    },
    
    moveCaretToEnd : function() {
        var pos = this.input.value.length;        
        if (this.input.setSelectionRange) {
            var ctx = this;
            var ft = function() {
                ctx.input.setSelectionRange(pos, pos);
            }
            setTimeout(ft, 1);
            //this.input.setSelectionRange(0, pos);
        } else if (this.input.createTextRange) {
            var m = this.input.createTextRange();
            m.moveStart('character', pos),
            m.collapse();
            m.select();
        }         
    },
    
    select : function(index) {
        var table = this.div.firstChild;
        var tbody = table.firstChild;        
        if (tbody) {            
            var trs = tbody.getElementsByTagName('tr');
            if (trs) {
                if (this.selected != -1 && this.selected < trs.length)
                    trs[this.selected].className = '';
                
                index = Math.max(0, Math.min(index, trs.length - 1));
                var tr = trs[index];
                tr.className = 'selected';
                this.selected = index;
                
                this.cancelTimeout();
                
            }
        }
    },
    
    validate : function() {
        var width = this.input.offsetWidth;        
        var p = mybox.getLocation(this.input);
        
        if (this.iframe != null) {
            this.iframe.style.top = (p.y + this.input.offsetHeight) + 'px';
            this.iframe.style.left = p.x + 'px';
            this.iframe.style.display = 'none';
            if (this.forceSameWidth == true || width > this.div.offsetWidth)
                this.iframe.style.width = width + 'px';        
        } 
        this.div.style.top = (p.y + this.input.offsetHeight) + 'px';
        //this.div.style.top = p.y + 'px';
        this.div.style.left = p.x + 'px';
        if (this.forceSameWidth == true && width > this.div.offsetWidth)
            this.div.style.width = width + 'px';
    },
    
    fixIE: function() {        
        if (document.all) {
            if (this.iframe == null) {
                this.iframe = document.createElement("<iframe id='" 
                + this.div.id + "_IFRAME' name='" + this.div.id 
                + "_IFRAME' style='visibility:hidden; display: none; position: absolute; top:0px;left:0px;'/>");
                
                document.body.insertBefore(this.iframe);
            }
            
            var popup = this.div;
            if (popup.style.display == 'block') {
                popup.style.zIndex = this.zIndex;
                this.iframe.style.zIndex = popup.style.zIndex - 1;                
                this.iframe.style.width = popup.offsetWidth;
                this.iframe.style.height = popup.offsetHeight;
                this.iframe.style.top = popup.style.top;
                this.iframe.style.left = popup.style.left;
                
                this.iframe.style.marginTop = popup.style.marginTop;
                this.iframe.style.marginLeft = popup.style.marginLeft;
                this.iframe.style.marginRight = popup.style.marginRight;
                this.iframe.style.marginBottom = popup.style.marginBottom;
                this.iframe.style.background = 'yellow';
                this.iframe.style.display = "block";
                this.iframe.style.visibility = "visible";                 
            } else {
                this.iframe.style.display = 'none';
            }
        }
        return false;
    },
    
    show : function() {
        this.validate();
        this.div.style.display = 'block';   
        this.fixIE();
        var ctx = this;
        
        var startFt = function() {
            ctx.startTimeout.call(ctx);
        };
        
        var mouseOverFt = function(e) {
            ctx.mouseEvent = e;
            ctx.cancelTimeout.call(ctx);
            ctx.mouseOver.call(ctx);
        }
        
        var clickFt = function(e) {
            ctx.mouseEvent = e;
            ctx.saveSelected.call(ctx);
        }
        
        mybox.addEvent(this.div, 'mouseover', mouseOverFt, false);
        mybox.addEvent(this.div, 'mouseout', startFt, false);
        mybox.addEvent(this.div, 'click', clickFt, false);
    },
    
    hide : function() {
        this.div.style.display = 'none';
        this.fixIE();
    },
    
    fill : function() {
        try {
            if (this.request == null)
                return false;
            
            var responseXML = this.request.req.responseXML;
            
            if (!responseXML)
                return false;
            
            var root = responseXML.getElementsByTagName('options')[0];
            var options = root.getElementsByTagName('option');
            if (!options || options.length == 0) {
                this.div.innerHTML = '';
                return true;
            }
            
            this.values = new Array(options.length);
            var s = "<table width='100%' cellspacing='0' cellpadding='2'><tbody>";
            
            for (var i = 0; i < options.length; i++) {
                var textNode = options[i].childNodes[0];
                var valueNode = options[i].childNodes[1];
                
                var opt = new Array(2);                
                var text = "?";
                if (textNode.firstChild) {
                    text = textNode.firstChild.nodeValue;
                }
                opt[0] = text;
                opt[1] = valueNode.firstChild.nodeValue;                        
                this.values[i] = opt;

                s += "<tr num='" + i + "' width='100%'><td width='100%'>";
                s += this.formatText(text);
                s += "</td></tr>";                
            }
            s += "</tbody></table>";
            this.div.innerHTML = s;
            this.show();
            this.select(0);  
        } catch (e) {
            alert(e);
        }
    },
    
    formatText : function(s) { 
        // rech
        /*
        this.text = mybox.trim(this.text);        
        if (this.text.length > 0) {
            var regex = new RegExp('(' + mybox.escapeRegExp(this.text) + ')', 'gi');                
            s = s.replace(regex, "<span class='match'>$1</span>");        
        }
        */
        return s;
    }
    
}

mybox.fadeEffect = function(element, className, time, nivell) {
    this.element = element;
    this.className = className;
    this.time = time;
    this.nivell = nivell;
    this.limit = 0;
    this.inc = 1;  
    this.index = 0;
}

mybox.fadeEffect.prototype = {
    
    fadeIn: function() {
        this.index = this.nivell;
        this.limit = 0;
        this.inc = -1;
        this.fade0();
    },
    
    fadeOut: function() {
        this.index = 0;
        this.limit = this.nivell;
        this.inc = 1;
        this.fade0();
    },
    
    fade0 : function() {
        var ctx = this;
        this.element.className = this.className + this.index;        
        if (this.index != this.limit) {
            this.index = this.index + this.inc;
            var ft = function() {
                ctx.fade0.call(ctx);
            };            
            setTimeout(ft, this.time); 
        }
    }
}

/*******************************************************************************
 *                    Grafico Class
 ******************************************************************************/

mybox.Grafico = function (json) {
    this.dataTable = new google.visualization.DataTable(json.dataTable);
    this.options = json.options;
    
    if (json.numberFormaters != null) {
        for (ixform in json.numberFormaters) {
            var formater = new google.visualization.NumberFormat(json.numberFormaters[ixform].opciones);
            for (ixcol in json.numberFormaters[ixform].columnas) {                        
                formater.format(this.dataTable, json.numberFormaters[ixform].columnas[ixcol]);
           }
        }
    }
}

mybox.Grafico.prototype = {
    
    getDataTable : function (){
        return this.dataTable;
    },
    
    visualizeTable : function(element){
        this.chart = new google.visualization.Table(element);
        this.chart.draw(this.dataTable, this.options);
        return this.chart;
    },
    
    visualizeImageChart: function(element) {
        this.chart = new google.visualization.ImageChart(element);
        this.chart.draw(this.dataTable, this.options);
        return this.chart;
    },
    
    visualizePieChart: function(element) {
        this.chart = new google.visualization.PieChart(element);
        this.chart.draw(this.dataTable, this.options);
        return this.chart;        
    }
    
}


/*******************************************************************************
 *                    Util regexp
 ******************************************************************************/
 
mybox.escapeRegExp = function(text) {
  if (!arguments.callee.sRE) {
    var specials = [
      '/', '.', '*', '+', '?', '|',
      '(', ')', '[', ']', '{', '}', '\\'
    ];
    arguments.callee.sRE = new RegExp(
      '(\\' + specials.join('|\\') + ')', 'g'
    );
  }
  return text.replace(arguments.callee.sRE, '\\$1');
}