// Register a new Namespace
Type.registerNamespace("MyServices");

// Define the constructor of the Loca class
MyServices.loca = function(uiElement, uiBody, uiProgress) {
    // Call base class just for completeness
MyServices.loca.initializeBase(this);

    this._uiElement = uiElement;
    this._uiBody = uiBody;
    this._uiProgress = uiProgress;
    this._xAxis = 0;
    this._yAxis = 0;
}

// Define the properties and methods of the Loca class
// using the Prototype Design Pattern
MyServices.loca.prototype = {

    // Define UIElement Loca
    get_uiElement: function() {
        // Get
        return this._uiElement;
    },
    set_uiElement: function(value) {
        // Set
        this._uiElement = value;
    },

    // Define UIBody Loca
    get_uiBody: function() {
        // Get
        return this._uiBody;
    },
    set_uiBody: function(value) {
        // Set
        this._uiBody = value;
    },

    // Define UIProgress Loca
    get_uiProgress: function() {
        // Get
        return this._uiProgress;
    },
    set_uiProgress: function(value) {
        // Set
        this._uiProgress = value;
    },

    // Define ShowPopupInfo method that is responsible
    // for calling the webservice, and setting the Loca
    // of the popup window.
    ShowPopupinfo: function(event, areaName) {
        // Call the AJAX Service
        MyServices.LocaService.GetAreaInfo(
            areaName,                                         // Parameter
            Function.createDelegate(this, this.OnCompleted),  // Success Callback
            this.OnError,                                     // Failure Callback
            this.OnTimeOut);    // TimeOut Callback

        // Set the Loca of the popup window
        this._xAxis = event.clientX;
        this._yAxis = event.clientY;

        // Show the Progress Bar
        var progress = $get(this.get_uiProgress());
        if (progress != null) {
            progress.style.visibility = "visible";
            progress.style.display = "block";
        }
    },

    // Define HidePopupInfo method that is used to hide
    // the UI popup window
    HidePopupInfo: function() {
        var uiElement = $get(this.get_uiElement());
        if (uiElement != null) {
            uiElement.style.visibility = "hidden";
            uiElement.style.display = "none";
        }

        // Hide the progress bar
        this.hideProgressBar();
    },

    // Define success callback function that will update the UI
    // with the data coming frmo the AJAX Service
    OnCompleted: function(result, userContext, methodName) {
        var uiElement = $get(this.get_uiElement());
        var uiBody = $get(this.get_uiBody());

        //uiBody.innerHTML = result;

        if (uiBody != null) {
            // Set the text inside the UI element
            // by creating a TextNode DOm object rather than
            // using innerHTML, innerText, or textContent, since
            // this is more standard compliant.
            var textNode = uiBody.firstChild;
            if (!textNode) {
                textNode = document.createTextNode(result);
                uiBody.appendChild(textNode);
            }
            else {
                textNode.nodeValue = result;
            }

            uiElement.children[1].innerHTML = result;

            // Show the UI element
            if (uiElement != null) {
                uiElement.style.visibility = "visible";
                uiElement.style.display = "inline";
                uiElement.style.left = this._xAxis + "px";
                uiElement.style.top = this._yAxis + "px";
            }
        }

        // Hide the progress bar
        this.hideProgressBar();
    },

    // Error callback function to alert
    // the user that some exceptions were thrown
    // during the asynchronous processing
    onError: function(result, userContext, methodName) {
        // Hide the progress bar
        this.hideProgressBar();

        var msg = result.get_exceptionType() + "\r\n";
        msg += result.get_message() + "\r\n";
        msg += result.get_stackTrace();
        alert(msg);
    },

    // Timeout callabck function called
    // when the current asynchronous request
    // times out
    onTimeOut: function(result, userContext, methodName) {
        // Hide the progress bar
        this.hideProgressBar();

        alert("Request Timeout :" + result);
    },

    hideProgressBar: function() {
        // Hide the Progress Bar
        var progress = $get(this.get_uiProgress());
        if (progress != null) {
            progress.style.visibility = "hidden";
            progress.style.display = "none";
        }
    }
}

// Register the class
MyServices.loca.registerClass("MyServices.loca");




var loca = null;
function pageLoad(sender, args) {
    // Create a new instance of the class
    loca = new MyServices.loca("modal", "modalBody", "updateProgress");

    // Hide the popup div
    loca.HidePopupInfo();
}

// Method called by the page controls
// to update the UI with the information
// from the ajax service
function GetAreaInfo(event, args) {
    loca.ShowPopupinfo(event, args);
}

function HidePopup() {
    // Hide the popup div
    loca.HidePopupInfo();
}