/*****************
 * 按钮
 *****************/
var Button = React.createClass({
    style:function(){
        var style={
            padding:"0 16px",
            backgroundColor:"#fff",
            height: "30px",
            lineHeight: "30px",
            border: "1px solid #ddd",
            borderRadius: "2px",
            cursor: "pointer"
        }
        if (this.state.hovered) {
            style = Object.assign(style,{boxShadow:"0 1px 3px rgba(0,0,0,.2)"})
        }
        if (this.props.type=="back"){
            style = Object.assign(style,{margin: "3px 5px"})
        }else{
            style = Object.assign(style,{position:"absolute",
                                    bottom: "60px",
                                    right: "60px",
                                    color: "white",
                                    backgroundColor:"#fd5e51"
                                })
        }
        return style
    }
    ,
    onMouseOver : function () {
      this.setState({ hovered:true });
    }
    ,
    onMouseOut : function () {
      this.setState({ hovered:false });
    }
    ,
    getInitialState : function() {
      return { hovered: false }
    }
    ,
    render(){
        return (
            <button className={"btn btn_"+this.props.type}
                onClick={this.props.handleClick}
                onMouseOver={this.onMouseOver}
                onMouseOut={this.onMouseOut}
                style={this.style()}
            >
                {Data.KVMapping.button[this.props.type]}
            </button>
        )
    }
})