// ajax method
    // new ajax() will create a new instance
    // If a placeholder (div tag) possibly be updated by many ajax calls, then create a request as req = new ajax() and use this req for all the shared ajax calls
    // Eg : tabs
    // To make a ajax call - We have two flavours using request() and update()
    // Use update method when you are sure to get only text response and your request doesn't require any pre-processing logic
    // eg: ajax.update("update.jsp","records_updated"); - This means "records_updated" id will be updated by the response of update.jsp.
    // Sample Response : Rows updated : 3

    // Use request() method when the response needs to be marshalled, when response is an XML , when the request requires pre-processing logic.
    // eg: ajax.request("checkRow.jsp", {onSuccess  : function(request) { //To do ...}

    function ajax () {
        // Members of the ajax object.
        this.instance = null; // Holds the actual xmlHttpInstance
        this.method = 'GET'; // Default method is GET
        this.url = ""; // URL to be called
        this.options = null; // Options in JSON format - like method, parameters, onSucess, OnLoading, etc.
        this.parameters = ""; // Formated Parameters are Query String like param1=v1&param2=v2

        // This parses the JSON format parameters into QueryString format
        this.parseParameters = function() {
            // If the options has parameters specified
            paramObject = this.options.parameters;
            paramArray = [];
            if (paramObject != null && paramObject != "undefined") {
                for (var param in paramObject) {
                    paramArray.push(param + "=" + encodeURIComponent(paramObject[param]));
                }
                for(var i=0;i<paramArray.length-1;i++) {
                    this.parameters = this.parameters + paramArray[i] + "&";
                }
                return this.parameters + paramArray[paramArray.length-1];
            } else {
                return this.parameters;
            }
        };
        //Returns the Response Text
        this.getResponseText = function() {
            return this.instance.responseText;
        };
        //Returns the DOM object
        this.getResponseXML = function() {
            return this.instance.responseXML.documentElement;
        };
        //Returns the XMLHttpRequest Instance
        this.getInstance = function() {
            if (window.XMLHttpRequest) { // Mozilla, Safari, ...
                this.instance = new XMLHttpRequest();
                //Some versions of some Mozilla browsers won't work properly if the response from the
                //server doesn't have an XML mime-type header. To satisfy this, you can use an extra method
                //call to override the header sent by the server, just in case it's not text/xml.
                if (this.instance.overrideMimeType) {
                    this.instance.overrideMimeType('text/xml');
                }
            }
            else if (window.ActiveXObject) { // IE
                try {
                    this.instance = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch (e) {
                    try {
                        this.instance = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    catch (e) {}
                }
            }
            // Return the instance
            return this.instance;
        };

        //request - makes a request to the url via xmlHttpRequest (XHR)
        // Eg 1 : new ajax().request("url.jsp","image_result",{method : 'POST' , parameters:{param1:value1}, onSucess : myResponse) - The simplest version
        // Define your function myResponse(request) { // Do your stuff here...Make use of either request.getResponseText() or request.getResponseXML()  }

        this.request = function(url,options) {
           // 1. Get the Instance of the XMLHttpRequest
           this.getInstance();
           // 2. Know the URL to be invoked
           this.url = url;
           // 3. Parameters to be passed to the URL
           var params = null;
           // 4. Options for the call - such as method, parameters, onSuccess, onLoading, onError, etc..
           this.options = options;
           // If options is available and if options.method is specified then take it. Else default is GET eg: {method:'POST'}
           if (options != null && options.method != null && options.method != 'undefined') {
               this.method = options.method;
           }
           // If options is available and if options.method is specified then take it and parse them in queryString {parameters:{param1:value1, param}
           if (options != null && options.parameters != null && options.parameters != 'undefined') {
               this.options.parameters = options.parameters;
               // If POST, then the url should not be appended with the queryString.
               // If GET, then the url should be url + '?' + queryString
               if (this.method == 'POST') {
                    var parsedParams = this.parseParameters();
                    if (parsedParams != null && parsedParams.length > 0) {
                        params = parsedParams;
                    }
               } else {
                   var parsedParams = this.parseParameters();
                   if (parsedParams != null && parsedParams.length > 0) {
                    url = url + '?' + parsedParams;
                   }
               }
           }
           // If we have xmlHttpRequest and it has not be used or it is completed, then send request
           if (this.instance != null && (this.instance.readyState == 4 || this.instance.readyState == 0)) {
	       this.instance.open(this.method, url, true);
               if (this.method == "POST") {
                    this.instance.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
               }
               var _this = this;
               // onreadystatechange called for each readystate change of the request i.e when readyState moves from 0-1,1-2, 2-3, 2-3, 3-4
               this.instance.onreadystatechange = function() { _this.readyStateChange() ; }
	       this.instance.send(params);
           }
         };

        //Updates the placeholder with the responseText from the XmlHttpRequest
        //This is a easy to use method when we want to update a particular div tag with the responsText
        //If no option provided for OnSuccess, this will default update the placeholder with responseText.
        //You can even overrride this onSuccess - Its flexible
        // Eg 1 : new ajax().update("url.jsp","image_result") - The simplest version
        // eg 2 : new ajax().update("url.jsp","image_result", {onSuccess : function(request) {// Do whatever you want here...}})
        this.update = function(url,placeholder,options) {
			var _this = this;
            if (options == null || typeof options == "undefined") {
                options = [];
            }
            if (options.onSuccess == null || options.onSuccess == "undefined") {
                options.onSuccess = function(_this) {
			        var _placeholder = getElementById(placeholder);
                    if (_placeholder != null) {
                        // For IE, if the id's node is either TBODY, TR, TD, then different (dirty) handling.
                        // Firefox works cool irrespective of the node type
                        if (window.ActiveXObject && (_placeholder.nodeName == 'TBODY' || _placeholder.nodeName == 'TR' || _placeholder.nodeName == 'TD')) {
							
                            var div = document.createElement('div');
                            switch (_placeholder.nodeName) {
                                case 'TBODY':
                                  div.innerHTML = '<table><tbody>' +  _this.getResponseText() + '</tbody></table>';
                                  depth = 2;
                                  break;
                                case 'TR':
                                  div.innerHTML = '<table><tbody><tr>' +  _this.getResponseText() + '</tr></tbody></table>';
                                  depth = 3;
                                  break;
                                case 'TD':
                                  div.innerHTML = '<table><tbody><tr><td>' +  _this.getResponseText() + '</td></tr></tbody></table>';
                                  depth = 4;
                            }
                            // Remove all the children of the placeholder
                            while (_placeholder.hasChildNodes()) {
                                _placeholder.removeChild(_placeholder.firstChild);
                            }

                            for (var i=0; i<depth; i++) {
                                div = div.firstChild;
                            }
                            while (div.hasChildNodes()) {
                                _placeholder.appendChild(div.firstChild);
                             }
                        } else {
                            _placeholder.innerHTML = _this.getResponseText();
                        }
                    } else {
                        // We leave the option to the developer to handle the error..Typically it could be due to missing id..So gracefully handle it
                        _this.options.onError(_this);
                    }
                    
                    if(options.onPostSuccess != null && options.onPostSuccess != "undefined") {
                        _this.options.onPostSuccess(_this);
                    }
                };
            }

            // There we go, making the actual request.
            this.request(url,options);
        }; // this.update - end

         //Callback Method - Called when the state of XHR changes - 1 - onLoading / 2 - onLoaded / 3 - onInteractive / 4 - onSuccess
         this.readyStateChange = function() {
            // Call the respective registered callback as per the states
             if(this.instance.readyState == 0 && this.options.onUninitialized != null && this.options.onUninitialized != "undefined") {
                this.options.onUninitialized(this);
             } else if(this.instance.readyState == 1 && this.options.onLoading != null && this.options.onLoading != "undefined") {
                this.options.onLoading(this);
             } else if( this.instance.readyState == 2 && this.options.onLoaded != null && this.options.onLoaded != "undefined") {
               this.options.onLoaded(this);
             } else if( this.instance.readyState == 3 && this.options.onInteractive != null && this.options.onInteractive != "undefined") {
               this.options.onInteractive(this);
             } else if( this.instance.readyState == 4 && this.options.onSuccess != null && this.options.onSuccess != "undefined") {
                if( this.instance.status == 200 && (this.instance.statusText == "OK" || this.instance.statusText == "Ok" || this.instance.statusText == "ok")  ) {
                    this.options.onSuccess(this);
                } else {
                    this.options.onError(this);
                }                
             }

         } // this.readyStateChange - end
    }

    /**************** Shortcut methods *******************/

    function getElementById(id) {
        if (typeof id == 'string') {
            return document.getElementById(id);
        }
        return eval(id);
    }

    function getElementsByTagName(name) {
        if (typeof name == 'string') {
            return document.getElementsByTagName(name);
        }
        return eval(name);
    }


    function hide(id) {
        getElementById(id).style.display = 'none'
    }

    function show(id) {
        getElementById(id).style.display = ''	;
    }

    function toggle(id) {
        eval((getElementById(id).style.display != 'none') ? 'hide(id)' : 'show(id)');
    }

    function landTo(id) {
        window.scrollTo(getElementById(id).offsetLeft,getElementById(id).offsetTop);
    }

    //Returns the value of the Select Element with the specified id
    function getSelectValue(id) {
        var selectElement = getElementById(id);
        var selectElements;
        if (selectElement == null || selectElement == "undefined") {
        selectElements = getElementsByTagName("select");
            for (var i=0;i<selectElements.length;i++) {
                if (selectElements[i].getAttribute("name") == id) {
                selectElement = selectElements[i];
                break;
                }
            }
        }
        var options = selectElement.getElementsByTagName("option");
        for(var i=0;i<options.length;i++) {
            if (options[i].selected) {
                alert(options[i].value);
            }
        }
    }

    //Returns the value of the Radio Element with the specified id
    function getRadioValue(id) {

        var inputElements = getElementsByTagName("input");
        var radioElement;
        for (var i=0;i<inputElements.length;i++) {
            if (inputElements[i].getAttribute("name") == id && inputElements[i].getAttribute("type")== "radio") {
                radioElement = inputElements[i];
                if (radioElement.checked) {
                alert(radioElement.value);
                }
            }
        }
        return;
    }