﻿//<using>
//  nui/nui.js
//  nui/prototype.js
//  nui/lang.js
//  nui/util.js
//  nui/widget.js
//</using>

/**
 * All kinds of buttons in NUI
 * Copyright 2007, NetRanking.cn
 */

NUI.Widget.Button = {
    ButtonStatus : {
        mouseout : 0,
        mouseover : 1,
        mousedown : 2
    },
    ImageButton : function(vAttributes) {},
    SpanButton : function(vImageInfo, vAttributes) {}
};
 
/**
 * Image Button
 * @class NUI.Widget.ImageButton
 * @param vAttributes {object} The attributes of button. Refer to the Base class for more information.
 */
NUI.Widget.Button.ImageButton = (function(){
    var g_dom = NUI.Util.DomService;
    
    // private and static methods
    function _onmouseover() {
        this.src = this.src.replace(/_[02]\./g, "_1.");
    }
    function _onmouseout() {
        this.src = this.src.replace(/_[12]\./g, "_0.");
    }
    function _onmousedown() {
        this.src = this.src.replace(/_[01]\./g, "_2.");
    }
    function _onmouseup() {
        this.src = this.src.replace(/_[12]\./g, "_0.");
    }
    
    return function(vAttributes){
        // private variables
        var m_attributes = vAttributes || {};
        var m_secret = {
            id : m_attributes.id
        };
        
        var that = NUI.Widget.Base(m_secret);
        
        m_attributes.id = m_secret.id;
        m_attributes.src = m_attributes.src || m_attributes.image || "radio";
        m_attributes.src = NUI.Util.WindowService.Path.imagePath( m_attributes.src+"_0.gif" );
        m_attributes.onmouseover = _onmouseover;
        m_attributes.onmouseout = _onmouseout;
        m_attributes.onmousedown = _onmousedown;
        m_attributes.onmouseup = _onmouseup;
                
        NUI.Util.ObjectService.annex(that, { 
            nodeEntity : (function() {
                return g_dom.createNode("img", m_attributes);
            })()
        });
        
        return that;
    };
})();

/**
 * Span Button.
 * @class NUI.Widget.SpanButton
 * @param vImageInfo {object} The information of background image. Format:
 *      vImageInfo = {
 *          index : 0,              The index of current spanmenu's image
 *          width : 24,             The width of every cell image
 *          height : 24,            The height of every cell image
 *          xCount : 3,             The count of x-dimension image, always be 3
 *          yCount : 15,            The count of y-dimension image, not used yet
 *          image : "image.gif",    The background image
 *      }
 * @param vAttributes {object} The attributes of button. Refer to the Base class for more information.
 */
NUI.Widget.Button.SpanButton = (function() {
    var g_dom = NUI.Util.DomService,
        g_status = NUI.Widget.Button.ButtonStatus;
        
    return function(vImageInfo, vAttributes) {
        var m_index = 0,
            m_width = 24,
            m_height = 24,
            m_image = "widget/buttons.gif",
            m_attributes = vAttributes || {},
            m_secret = {
                id : m_attributes.id
            },
            m_status = g_status.mouseout,
            m_locked = false;           // If locked, the mouse moving event will not affect the button's bgimage.
        if(vImageInfo) {
            if(vImageInfo.index!=null) {
                m_index = vImageInfo.index;
            }
            if(vImageInfo.width!=null) {
                m_width = vImageInfo.width;
            }
            if(vImageInfo.height!=null) {
                m_height = vImageInfo.height;
            }
            if(vImageInfo.image!=null) {
                m_image = vImageInfo.image;
            }
        }
        
        var that = NUI.Widget.Base(m_secret);
        
        function __getX(vXIndex) {
            return (-1) * vXIndex * m_width;
        }
        function __getY(vYIndex) {
            return (-1) * vYIndex * m_height;
        }
        
        m_attributes.id = m_secret.id;
        m_attributes.className = "inlineBlock";
        m_attributes.style = m_attributes.style || {};
        NUI.Util.ObjectService.annex(m_attributes.style, {
//            display : NUI.Util.EnvService.browser.ie ? "inline-block" : "-moz-inline-box",
            width : m_width + "px",
            height : m_height + "px",
            backgroundImage : "url(" + NUI.Util.WindowService.Path.imagePath(m_image) + ")",
            backgroundPosition : "0px " + __getY(m_index) + "px"
        });
        
        /**
         * Get the background image style
         */
        function __getBgPosition(vXIndex, vYIndex) {
            
            var x = __getX(vXIndex),
                y = __getY(vYIndex);
            return x + "px " + y + "px";
        }
        function _setStatusBgimage(vObj, vStatus) {
            if(!m_locked) {
                m_status = vStatus;
                vObj.style.backgroundPosition = __getBgPosition(vStatus, m_index);
            }
        }
        
        m_attributes.onmouseover = m_attributes.onmouseover || function() {
            _setStatusBgimage(this, g_status.mouseover);
        };
        m_attributes.onmouseout = m_attributes.onmouseout || function() {
            _setStatusBgimage(this, g_status.mouseout);
        };
        m_attributes.onmousedown = m_attributes.onmousedown || function() {
            _setStatusBgimage(this, g_status.mousedown);
        };
        m_attributes.onmouseup = m_attributes.onmouseup || function() {
            _setStatusBgimage(this, g_status.mouseover);
        };
        
        var m_node = g_dom.createNode("span", m_attributes);
                
        NUI.Util.ObjectService.annex(that, { 
            nodeEntity : m_node,
            
            /**
             * Lock  and unlock the status of the button. Change the outlook of the button
             * @param vStatus {NUI.Widget.Button.ButtonStatus}
             */
            lockStatus : function(vStatus) {
                if(!NUI.Util.ObjectService.hasValue(g_status, vStatus)) {
                    return;
                }
                m_node.style.backgroundPosition = __getBgPosition(vStatus, m_index);
                m_locked = true;
            },
            unlockStatus : function() {
                m_node.style.backgroundPosition = __getBgPosition(m_status, m_index);
                m_locked = false;
            }
        });
        
        return that;
    };
})();
