/// <reference name="MicrosoftAjax.js"/>

/*global

    $addHandlers            $clearHandlers          $get
    NeighborhoodPreviews    Sys                     Type
    Website

*/

Type.registerNamespace("Website");

// The constructor for this control.
Website.DynamicWebContentControl = function( element ) 
{
    // Initialize some of our variables.
    this._dbContentID = -1;
    this._allowEdit = false;
    this._originalText = "";
    this._loginToken = null;
    this._emptyContentText = null;
    
    this._editButtonID = "";
    this._displayAreaID = "";
    this._editAreaID = "";
    this._cancelButtonID = "";
    this._saveButtonID = "";
    this._textBoxID = "";
    this._textContainerID = "";
    
    // Required event handlers.
    this._originalBorder = null;
    this._mouseOverHandler = null;
    this._mouseOutHandler = null;
    this._clickHandler = null;

    // Call the base class' constructor.
    Website.DynamicWebContentControl.initializeBase(this, [element]);
};

// The control's prototype.
Website.DynamicWebContentControl.prototype = 
{
    // Get and set for login token.
    get_loginToken : function()
    {
        return this._loginToken;
    },
    
    set_loginToken : function( value )
    {
        this._loginToken = value;
    },
    
    // Get and set for empty content text.
    get_emptyContentText : function()
    {
        return this._emptyContentText;
    },
    
    set_emptyContentText : function( value )
    {
        this._emptyContentText = value;
    },

    // Get and set for original text.
    get_originalText : function()
    {
        return this._originalText;
    },
    
    set_originalText : function( value )
    {
        this._originalText = value;
    },
    
    // Get and set for DB content ID.
    get_dbContentID : function()
    {
        return this._dbContentID;
    },
    
    set_dbContentID : function( value )
    {
        this._dbContentID = value;
    },
    
    // Get and set for save button ID.
    get_saveButtonID : function()
    {
        return this._saveButtonID;
    },
    
    set_saveButtonID : function( value )
    {
        this._saveButtonID = value;
    },
    
    // Get and set for cancel button ID.
    get_cancelButtonID : function()
    {
        return this._cancelButtonID;
    },
    
    set_cancelButtonID : function( value )
    {
        this._cancelButtonID = value;
    },
    
    // Get and set for edit button ID.
    get_editButtonID : function()
    {
        return this._editButtonID;
    },
    
    set_editButtonID : function( value )
    {
        this._editButtonID = value;
    },
    
    // Get and set for display area ID.
    get_displayAreaID : function()
    {
        return this._displayAreaID;
    },
    
    set_displayAreaID : function( value )
    {
        this._displayAreaID = value;
    },
    
    // Get and set for edit area ID.
    get_editAreaID : function()
    {
        return this._editAreaID;
    },
    
    set_editAreaID : function( value )
    {
        this._editAreaID = value;
    },
    
    // Get and set for text area ID.
    get_textBoxID : function()
    {
        return this._textBoxID;
    },
    
    set_textBoxID : function( value )
    {
        this._textBoxID = value;
    },
    
    // Get and set for text container ID
    get_textContainerID : function()
    {
        return this._textContainerID;
    },
    
    set_textContainerID : function( value )
    {
        this._textContainerID = value;
    },
    
    // Get and set for allow edit
    get_allowEdit : function()
    {
        return this._allowEdit;
    },
    
    set_allowEdit : function( value )
    {
        this._allowEdit = value;
    },

    // Initializes the control.
    initialize: function() 
    {
        // Let the base class initialize.
        Website.DynamicWebContentControl.callBaseMethod(this, 'initialize');
        
        var target = this.get_element();
        
        // Remember some initial settings.
        this._originalBorder = target.style.border;   
        
        // Attach to events.
        if( this._allowEdit )
        {
            this._mouseOverHandler = Function.createDelegate( this, this._onMouseOver );
            this._mouseOutHandler = Function.createDelegate( this, this._onMouseOut );
            this._clickHandler = Function.createDelegate( this, this._onClick );
            
            $addHandlers(
                target,
                {
                    'mouseover':    this._mouseOverHandler,
                    'mouseout':     this._mouseOutHandler,
                    'click':        this._clickHandler
                },
                this
                );
        }
    },
    
    // Cleans up the control.
    dispose: function() 
    {        
        // Detatch all event handlers.
        $clearHandlers( this.get_element() );
        
        delete this._mouseOverHandler;
        delete this._mouseOutHandler;
        delete this._clickHandler;
    
        // Let the base class shut down.
        Website.DynamicWebContentControl.callBaseMethod(this, 'dispose');
    },
    
    // Positions the edit button.
    positionEditButton : function()
    {
        var editButton = $get( this._editButtonID );
        var display = $get( this._displayAreaID );
        
        var buttonWidth = editButton.offsetWidth;
        var buttonHeight = editButton.offsetHeight;
        
        var displayWidth = display.offsetWidth;
        var displayHeight = display.offsetHeight;
        
        editButton.style.left = (displayWidth/2 - buttonWidth/2) + "px";
        editButton.style.top = (displayHeight/2 - buttonHeight/2) + "px";
    },
    
    // Provides some mouse-over and mouse-out handling logic.
    _onMouseOver : function( e )
    {
        this.get_element().style.border = '1px dotted black';
        
        $get( this._editButtonID ).style.display = "";
        this.positionEditButton();
    },
    
    _onMouseOut : function( e )
    {
        this.get_element().style.border = this._originalBorder;
        $get( this._editButtonID ).style.display = "none";
    },
    
    // Handles button clicks.
    _onClick : function( e )
    {
        if( e.target === $get( this._editButtonID ) )
        {
            // Enter edit mode.
            $get( this._displayAreaID ).style.display = "none";
            $get( this._editAreaID ).style.display = "";
            
            $get( this._textBoxID ).value = this._originalText;
        }
        
        else if( e.target === $get( this._cancelButtonID ) )
        {
            // Cancel edit mode. First, reset the text.
            $get( this._textBoxID ).value = this._originalText;
            
            // Next, close edit mode.
            $get( this._displayAreaID ).style.display = "";
            $get( this._editAreaID ).style.display = "none";
        }
        
        else if( e.target === $get( this._saveButtonID ) )
        {
            // Save the value to the DB.
            var service = new NeighborhoodPreviews.Services.EditService();
            service.EditWebContent(
                this._loginToken,                   // Login token
                this._dbContentID,                  // The ID of the web content.
                $get( this._textBoxID ).value,      // The new value
                this._onEditSuccess,                // Method to call on success.
                null,                               // Method to call on failure.
                this                                // Context
                );
        }
    },
    
    // Handles calls to the edit service.
    _onEditSuccess : function( result, userContext, methodName )
    {
        if( result === null )
        {
            // Uh-oh!
            alert(
                "Sorry, but the website is currently experiencing " +
                "problems, and is unable to process your request.  " +
                "Please try again at a later time."
                );
        }       
        else
        {
            // It worked!
            if( result === "" && userContext._emptyContentText != null )
                $get( userContext._textContainerID ).innerHTML = userContext._emptyContentText;
            else
                $get( userContext._textContainerID ).innerHTML = result;
                
            userContext._originalText = $get( userContext._textBoxID ).value;
            
            // Close edit mode.
            $get( userContext._displayAreaID ).style.display = "";
            $get( userContext._editAreaID ).style.display = "none";
        }
    }
};

// Register the control.
Website.DynamicWebContentControl.registerClass('Website.DynamicWebContentControl', Sys.UI.Control);
if (typeof(Sys) !== 'undefined') { Sys.Application.notifyScriptLoaded(); }