Ext.define('CustomButtonClass15', {
    extend: 'DisplayableAction',
    constructor: function (cfgXML, o, actionSequence) {
        this.IsChecked = false;
        this.IsMasked = false;
        this.IsMouseOver = false;
        this.IsMouseDown = false;
        this.Picture = null;
        this.PictureBoxLayout = {
            Left: 0,
            Top: 0,
            Width: 0,
            Height: 0
        };
        this.PictureBoxWidth = 0;
        this.PictureBoxHeight = 0;
        this.TextBoxLayout = {
            Left: 0,
            Top: 0,
            Width: 0,
            Height: 0
        };
        this.Key1 = null;
        this.Key2 = null;
        this.ToolTipVisual = null;
        this.ToolTip = null;
        this.Cursor = CursorTypes.Default;
        this.TextBlock = null;
        this.Text = "";
        this.TextMoveX = 0;
        this.TextMoveY = 0;
        this.TextMoveXMouseOver = 0;
        this.TextMoveYMouseOver = 0;
        this.TextPosition = ButtonTextPosition.Over;
        this.TextAlignment = AuthorAlignment.MiddleCenter;
        this.TextX = 0;
        this.TextY = 0;

        this.ImageAlignment = AuthorAlignment.MiddleCenter;
        this.ImageX = 0;
        this.ImageY = 0;

        this.ImageMoveX = 0;
        this.ImageMoveY = 0;
        this.ImageMoveXMouseOver = 0;
        this.ImageMoveYMouseOver = 0;
        this.FontFamily = 'Arial';
        this.FontSize = 14;
        this.FontWeight = 'Normal';
        this.FontStyle = 'Normal';
        this.TextDecoration = 'none';
        this.IsToggleButton = false;
        this.ResetNamePrefix = null;
        this.ButtonType = ButtonFunctions.NormalButton;
        this.NormalTextColor = "#000000";
        this.NormalBackgroundColor = "#cccccc";
        this.NormalStartColor = "#cccccc";
        this.NormalEndColor = "#cccccc";
        this.NormalImage = {
            Src: null,
            Width: 0,
            Height: 0
        };
        this.NormalTextColorMouseOver = "#000000";
        this.NormalBackgroundColorMouseOver = "#cccccc";
        this.NormalStartColorMouseOver = "#cccccc";
        this.NormalEndColorMouseOver = "#cccccc";
        this.NormalImageMouseOver = {
            Src: null,
            Width: 0,
            Height: 0
        };
        this.NormalTextColorMouseDown = "#000000";
        this.NormalBackgroundColorMouseDown = "#cccccc";
        this.NormalStartColorMouseDown = "#cccccc";
        this.NormalEndColorMouseDown = "#cccccc";
        this.NormalImageMouseDown = {
            Src: null,
            Width: 0,
            Height: 0
        };
        this.ToggledTextColor = "#000000";
        this.ToggledBackgroundColor = "#cccccc";
        this.ToggledStartColor = "#cccccc";
        this.ToggledEndColor = "#cccccc";
        this.ToggledImage = {
            Src: null,
            Width: 0,
            Height: 0
        };
        this.ToggledTextColorMouseOver = "#000000";
        this.ToggledBackgroundColorMouseOver = "#cccccc";
        this.ToggledStartColorMouseOver = "#cccccc";
        this.ToggledEndColorMouseOver = "#cccccc";
        this.ToggledImageMouseOver = {
            Src: null,
            Width: 0,
            Height: 0
        };
        this.ToggledTextColorMouseDown = "#000000";
        this.ToggledBackgroundColorMouseDown = "#cccccc";
        this.ToggledStartColorMouseDown = "#cccccc";
        this.ToggledEndColorMouseDown = "#cccccc";
        this.ToggledImageMouseDown = {
            Src: null,
            Width: 0,
            Height: 0
        };
        this.MarkedTextColor = "#000000";
        this.MarkedBackgroundColor = "#cccccc";
        this.MarkedStartColor = "#cccccc";
        this.MarkedEndColor = "#cccccc";
        this.MarkedImage = {
            Src: null,
            Width: 0,
            Height: 0
        };
        this.MarkedTextColorMouseOver = "#000000";
        this.MarkedBackgroundColorMouseOver = "#cccccc";
        this.MarkedStartColorMouseOver = "#cccccc";
        this.MarkedEndColorMouseOver = "#cccccc";
        this.MarkedImageMouseOver = {
            Src: null,
            Width: 0,
            Height: 0
        };
        this.MarkedTextColorMouseDown = "#000000";
        this.MarkedBackgroundColorMouseDown = "#cccccc";
        this.MarkedStartColorMouseDown = "#cccccc";
        this.MarkedEndColorMouseDown = "#cccccc";
        this.MarkedImageMouseDown = {
            Src: null,
            Width: 0,
            Height: 0
        };
        this.ValueOnShiftClick = null;
        this.ValueOnCtrlClick = null;

        this.callParent([ cfgXML, o, actionSequence]);
        this.Text = XmlHelper.getString(cfgXML, "text");
        this.FontFamily = XmlHelper.getString(cfgXML, "fontFamily");
        this.FontSize = XmlHelper.getFloat(cfgXML, "fontSize");
        this.TextDecoration = XmlHelper.getString(cfgXML, "textDecoration");
        this.FontStyle = XmlHelper.getString(cfgXML, "fontStyle");
        this.FontWeight = XmlHelper.getString(cfgXML, "fontWeight");

        this.TextPosition = XmlHelper.getInteger(cfgXML, "textPosition");
        this.TextMoveX = XmlHelper.getInteger(cfgXML, "textMoveX");
        this.TextMoveY = XmlHelper.getInteger(cfgXML, "textMoveY");

        this.TextAlignment = XmlHelper.getInteger(cfgXML, "textAlignment");
        this.TextX = XmlHelper.getInteger(cfgXML, "textX");
        this.TextY = XmlHelper.getInteger(cfgXML, "textY");

        this.ImageAlignment = XmlHelper.getInteger(cfgXML, "imageAlignment");
        this.ImageX = XmlHelper.getInteger(cfgXML, "imageX");
        this.ImageY = XmlHelper.getInteger(cfgXML, "imageY");

        this.TextMoveXMouseOver = XmlHelper.getInteger(cfgXML, "textMoveXMouseOver");
        this.TextMoveYMouseOver = XmlHelper.getInteger(cfgXML, "textMoveYMouseOver");
        this.ImageMoveX = XmlHelper.getInteger(cfgXML, "imageMoveX");
        this.ImageMoveY = XmlHelper.getInteger(cfgXML, "imageMoveY");
        this.ImageMoveXMouseOver = XmlHelper.getInteger(cfgXML, "imageMoveXMouseOver");
        this.ImageMoveYMouseOver = XmlHelper.getInteger(cfgXML, "imageMoveYMouseOver");
        //Normal status
        this.NormalTextColor = XmlHelper.getString(cfgXML, "normalTextColor");
        this.NormalBackgroundColor = XmlHelper.getString(cfgXML, "normalBackgroundColor");
        this.NormalStartColor = XmlHelper.getString(cfgXML, "normalStartColor");
        this.NormalEndColor = XmlHelper.getString(cfgXML, "normalEndColor");
        var normalImageNode = cfgXML.getElementsByTagName("normalImage")[0];
        try {
            this.NormalImage = {
                Width: parseInt(normalImageNode.getAttribute('width')),
                Height: parseInt(normalImageNode.getAttribute('height')),
                Src: normalImageNode.childNodes[0].nodeValue
            }
        }
        catch (err) {
        }
        this.NormalTextColorMouseOver = XmlHelper.getString(cfgXML, "normalTextColorMouseOver");
        this.NormalBackgroundColorMouseOver = XmlHelper.getString(cfgXML, "normalBackgroundColorMouseOver");
        this.NormalStartColorMouseOver = XmlHelper.getString(cfgXML, "normalStartColorMouseOver");
        this.NormalEndColorMouseOver = XmlHelper.getString(cfgXML, "normalEndColorMouseOver");
        var normalImageMouseOverNode = cfgXML.getElementsByTagName("normalImageMouseOver")[0];
        try {
            this.NormalImageMouseOver = {
                Width: parseInt(normalImageMouseOverNode.getAttribute('width')),
                Height: parseInt(normalImageMouseOverNode.getAttribute('height')),
                Src: normalImageMouseOverNode.childNodes[0].nodeValue
            }
        }
        catch (err) {
        }
        this.NormalTextColorMouseDown = XmlHelper.getString(cfgXML, "normalTextColorMouseDown");
        this.NormalBackgroundColorMouseDown = XmlHelper.getString(cfgXML, "normalBackgroundColorMouseDown");
        this.NormalStartColorMouseDown = XmlHelper.getString(cfgXML, "normalStartColorMouseDown");
        this.NormalEndColorMouseDown = XmlHelper.getString(cfgXML, "normalEndColorMouseDown");
        var normalImageMouseDownNode = cfgXML.getElementsByTagName("normalImageMouseDown")[0];
        try {
            this.NormalImageMouseDown = {
                Width: parseInt(normalImageMouseDownNode.getAttribute('width')),
                Height: parseInt(normalImageMouseDownNode.getAttribute('height')),
                Src: normalImageMouseDownNode.childNodes[0].nodeValue
            }
        }
        catch (err) {
        }
        //Toggled Status
        this.ToggledTextColor = XmlHelper.getString(cfgXML, "toggledTextColor");
        this.ToggledBackgroundColor = XmlHelper.getString(cfgXML, "toggledBackgroundColor");
        this.ToggledStartColor = XmlHelper.getString(cfgXML, "toggledStartColor");
        this.ToggledEndColor = XmlHelper.getString(cfgXML, "toggledEndColor");
        var toggledImageNode = cfgXML.getElementsByTagName("toggledImage")[0];
        try {
            this.ToggledImage = {
                Width: parseInt(toggledImageNode.getAttribute('width')),
                Height: parseInt(toggledImageNode.getAttribute('height')),
                Src: toggledImageNode.childNodes[0].nodeValue
            }
        }
        catch (err) {
        }
        this.ToggledTextColorMouseOver = XmlHelper.getString(cfgXML, "toggledTextColorMouseOver");
        this.ToggledBackgroundColorMouseOver = XmlHelper.getString(cfgXML, "toggledBackgroundColorMouseOver");
        this.ToggledStartColorMouseOver = XmlHelper.getString(cfgXML, "toggledStartColorMouseOver");
        this.ToggledEndColorMouseOver = XmlHelper.getString(cfgXML, "toggledEndColorMouseOver");
        var toggledImageMouseOverNode = cfgXML.getElementsByTagName("toggledImageMouseOver")[0];
        try {
            this.ToggledImageMouseOver = {
                Width: parseInt(toggledImageMouseOverNode.getAttribute('width')),
                Height: parseInt(toggledImageMouseOverNode.getAttribute('height')),
                Src: toggledImageMouseOverNode.childNodes[0].nodeValue
            }
        }
        catch (err) {
        }
        this.ToggledTextColorMouseDown = XmlHelper.getString(cfgXML, "toggledTextColorMouseDown");
        this.ToggledBackgroundColorMouseDown = XmlHelper.getString(cfgXML, "toggledBackgroundColorMouseDown");
        this.ToggledStartColorMouseDown = XmlHelper.getString(cfgXML, "toggledStartColorMouseDown");
        this.ToggledEndColorMouseDown = XmlHelper.getString(cfgXML, "toggledEndColorMouseDown");
        var toggledImageMouseDownNode = cfgXML.getElementsByTagName("toggledImageMouseDown")[0];
        try {
            this.ToggledImageMouseDown = {
                Width: parseInt(toggledImageMouseDownNode.getAttribute('width')),
                Height: parseInt(toggledImageMouseDownNode.getAttribute('height')),
                Src: toggledImageMouseDownNode.childNodes[0].nodeValue
            }
        }
        catch (err) {
        }
        //Marked Status
        this.MarkedTextColor = XmlHelper.getString(cfgXML, "markedTextColor");
        this.MarkedBackgroundColor = XmlHelper.getString(cfgXML, "markedBackgroundColor");
        this.MarkedStartColor = XmlHelper.getString(cfgXML, "markedStartColor");
        this.MarkedEndColor = XmlHelper.getString(cfgXML, "markedEndColor");
        var markedImageNode = cfgXML.getElementsByTagName("markedImage")[0];
        try {
            this.MarkedImage = {
                Width: parseInt(markedImageNode.getAttribute('width')),
                Height: parseInt(markedImageNode.getAttribute('height')),
                Src: markedImageNode.childNodes[0].nodeValue
            }
        }
        catch (err) {
        }
        this.MarkedTextColorMouseOver = XmlHelper.getString(cfgXML, "markedTextColorMouseOver");
        this.MarkedBackgroundColorMouseOver = XmlHelper.getString(cfgXML, "markedBackgroundColorMouseOver");
        this.MarkedStartColorMouseOver = XmlHelper.getString(cfgXML, "markedStartColorMouseOver");
        this.MarkedEndColorMouseOver = XmlHelper.getString(cfgXML, "markedEndColorMouseOver");
        var markedImageMouseOverNode = cfgXML.getElementsByTagName("markedImageMouseOver")[0];
        try {
            this.MarkedImageMouseOver = {
                Width: parseInt(markedImageMouseOverNode.getAttribute('width')),
                Height: parseInt(markedImageMouseOverNode.getAttribute('height')),
                Src: markedImageMouseOverNode.childNodes[0].nodeValue
            }
        }
        catch (err) {
        }
        this.MarkedTextColorMouseDown = XmlHelper.getString(cfgXML, "markedTextColorMouseDown");
        this.MarkedBackgroundColorMouseDown = XmlHelper.getString(cfgXML, "markedBackgroundColorMouseDown");
        this.MarkedStartColorMouseDown = XmlHelper.getString(cfgXML, "markedStartColorMouseDown");
        this.MarkedEndColorMouseDown = XmlHelper.getString(cfgXML, "markedEndColorMouseDown");
        var markedImageMouseDownNode = cfgXML.getElementsByTagName("markedImageMouseDown")[0];
        try {
            this.MarkedImageMouseDown = {
                Width: parseInt(markedImageMouseDownNode.getAttribute('width')),
                Height: parseInt(markedImageMouseDownNode.getAttribute('height')),
                Src: markedImageMouseDownNode.childNodes[0].nodeValue
            }
        }
        catch (err) {
        }
        this.Key1 = XmlHelper.tryGetValue(cfgXML, "key1", TryGetValueOption.Normal, null);
        this.Key2 = XmlHelper.tryGetValue(cfgXML, "key2", TryGetValueOption.Normal, null);
        this.ToolTip = XmlHelper.tryGetValue(cfgXML, "tooltips", TryGetValueOption.Normal, null);
        this.Cursor = XmlHelper.tryGetValue(cfgXML, "cursor", TryGetValueOption.Integer, CursorTypes.Default);
        this.PictureBoxWidth = XmlHelper.getInteger(cfgXML, "pictureBoxWidth");
        this.PictureBoxHeight = XmlHelper.getInteger(cfgXML, "pictureBoxHeight");
        this.IsToggleButton = XmlHelper.getBoolean(cfgXML, "isToggledButton");
        this.ResetNamePrefix = XmlHelper.tryGetValue(cfgXML, "resetNamePrefix", TryGetValueOption.Normal, null);
        this.ButtonType = XmlHelper.getInteger(cfgXML, "buttonType");
        this.NavigationAction = XmlHelper.tryGetValue(cfgXML, "navigationAction", TryGetValueOption.Integer, 0);
        this.MenuOptionID = XmlHelper.tryGetValue(cfgXML, "menuOptionID", TryGetValueOption.Integer, -1);
        this.MarkOptionComplete = XmlHelper.tryGetValue(cfgXML, "markOptionComplete", TryGetValueOption.Boolean, false);
        this.Value = XmlHelper.tryGetValue(cfgXML, "value", TryGetValueOption.Normal, this.IsToggleButton ? '' : this.Name);
        this.IsRespondToClick = XmlHelper.getBoolean(cfgXML, 'isRespondToClick');
        this.IsRespondToMouseOver = XmlHelper.getBoolean(cfgXML, 'isRespondToMouseOver');
        this.ValueOnMouseOver = XmlHelper.tryGetValue(cfgXML, "valueOnMouseOver", TryGetValueOption.Normal, this.Value);
        this.IsRespondToMouseLeave = XmlHelper.getBoolean(cfgXML, 'isRespondToMouseLeave');
        this.ValueOnMouseLeave = XmlHelper.tryGetValue(cfgXML, "valueOnMouseLeave", TryGetValueOption.Normal, this.Value);
        this.ValueOnShiftClick = XmlHelper.tryGetValue(cfgXML, "valueOnShiftClick", TryGetValueOption.Normal, this.Value);
        this.ValueOnCtrlClick = XmlHelper.tryGetValue(cfgXML, "valueOnCtrlClick", TryGetValueOption.Normal, this.Value);

        this.MouseInButton = false;

    },
    calculateTextBoxLayout: function () {
        var l = 0;
        var t = 0;
        var w = 0;
        var h = 0;
        /* switch (this.TextPosition) {
         case ButtonTextPosition.Bottom:
         t = this.PictureBoxHeight;
         w = this.ContentContainerWidth;
         h = this.ContentContainerHeight - this.PictureBoxHeight;
         break;
         case ButtonTextPosition.Top:
         w = this.ContentContainerWidth;
         h = this.ContentContainerHeight - this.PictureBoxHeight;
         break;
         case ButtonTextPosition.Left:
         w = this.ContentContainerWidth - this.PictureBoxWidth;
         h = this.ContentContainerHeight;
         break;
         case ButtonTextPosition.Right:
         l = this.PictureBoxWidth;
         w = this.ContentContainerWidth - this.PictureBoxWidth;
         h = this.ContentContainerHeight;
         break;
         case ButtonTextPosition.Over:
         w = this.ContentContainerWidth;
         h = this.ContentContainerHeight;
         break;
         }*/
        w = this.ContentContainerWidth;
        h = this.ContentContainerHeight;
        this.TextBoxLayout = {
            Width: w,
            Height: h,
            Left: l,
            Top: t
        };
        //alert("TextBoxLayout: ("+l+", "+t+", "+w+", "+h+")");
    },
    calculatePictureBoxLayout: function () {
        var l = 0, t = 0, w = 0, h = 0;
        /*switch (this.TextPosition) {
         case ButtonTextPosition.Bottom:
         w = this.ContentContainerWidth;
         h = this.PictureBoxHeight;
         break;
         case ButtonTextPosition.Top:
         t = this.ContentContainerHeight - this.PictureBoxHeight;
         w = this.ContentContainerWidth;
         h = this.PictureBoxHeight;
         break;
         case ButtonTextPosition.Left:
         l = this.ContentContainerWidth - this.PictureBoxWidth;
         w = this.PictureBoxWidth;
         h = this.ContentContainerHeight;
         break;
         case ButtonTextPosition.Right:
         w = this.PictureBoxWidth;
         h = this.ContentContainerHeight;
         break;
         case ButtonTextPosition.Over:
         w = this.ContentContainerWidth;
         h = this.ContentContainerHeight;
         break;
         }*/
        w = this.ContentContainerWidth;
        h = this.ContentContainerHeight;
        this.PictureBoxLayout = {
            Width: w,
            Height: h,
            Left: l,
            Top: t
        };
        //alert("PictureBox: ("+l+", "+t+", "+w+", "+h+")");
    },
    setButtonAppearanceBaseOnStatus: function () {

        //Normal
        var tx = 0;
        var ty = 0;
        var ix = 0;
        var iy = 0;
        var textColor = this.NormalTextColor;
        var backgroundColor = this.NormalBackgroundColor;
        var startColor = this.NormalStartColor;
        var endColor = this.NormalEndColor;
        var image = this.NormalImage;
        if (this.IsMouseOver) {
            textColor = this.NormalTextColorMouseOver;
            backgroundColor = this.NormalBackgroundColorMouseOver;
            startColor = this.NormalStartColorMouseOver;
            endColor = this.NormalEndColorMouseOver;
            image = this.NormalImageMouseOver;
            tx = this.TextMoveXMouseOver;
            ty = this.TextMoveYMouseOver;
            ix = this.ImageMoveXMouseOver;
            iy = this.ImageMoveYMouseOver;
        }
        if (this.IsMouseDown) {
            textColor = this.NormalTextColorMouseDown;
            backgroundColor = this.NormalBackgroundColorMouseDown;
            startColor = this.NormalStartColorMouseDown;
            endColor = this.NormalEndColorMouseDown;
            image = this.NormalImageMouseDown;
            tx = this.TextMoveX;
            ty = this.TextMoveY;
            ix = this.ImageMoveX;
            iy = this.ImageMoveY;
        }
        if (this.IsChecked) {
            tx = this.TextMoveX;
            ty = this.TextMoveY;
            ix = this.ImageMoveX;
            iy = this.ImageMoveY;
            textColor = this.ToggledTextColor;
            backgroundColor = this.ToggledBackgroundColor;
            startColor = this.ToggledStartColor;
            endColor = this.ToggledEndColor;
            image = this.ToggledImage;
            if (this.IsMouseOver) {
                textColor = this.ToggledTextColorMouseOver;
                backgroundColor = this.ToggledBackgroundColorMouseOver;
                startColor = this.ToggledStartColorMouseOver;
                endColor = this.ToggledEndColorMouseOver;
                image = this.ToggledImageMouseOver;
            }
            if (this.IsMouseDown) {
                textColor = this.ToggledTextColorMouseDown;
                backgroundColor = this.ToggledBackgroundColorMouseDown;
                startColor = this.ToggledStartColorMouseDown;
                endColor = this.ToggledEndColorMouseDown;
                image = this.ToggledImageMouseDown;
            }
        }
        if (this.IsMasked) {
            textColor = this.MarkedTextColor;
            backgroundColor = this.MarkedBackgroundColor;
            startColor = this.MarkedStartColor;
            endColor = this.MarkedEndColor;
            image = this.MarkedImage;
            if (this.IsMouseOver) {
                textColor = this.MarkedTextColorMouseOver;
                backgroundColor = this.MarkedBackgroundColorMouseOver;
                startColor = this.MarkedStartColorMouseOver;
                endColor = this.MarkedEndColorMouseOver;
                image = this.MarkedImageMouseOver;
            }
            if (this.IsMouseDown) {
                textColor = this.MarkedTextColorMouseDown;
                backgroundColor = this.MarkedBackgroundColorMouseDown;
                startColor = this.MarkedStartColorMouseDown;
                endColor = this.MarkedEndColorMouseDown;
                image = this.MarkedImageMouseDown;
            }
        }
        this.ContentContainer.setStyle("background-color", 'transparent');
        this.fillBackground(backgroundColor, startColor, endColor);
        this.TextBlock.setStyle("color", textColor);
        this.setTextBlock();
        // Author.log(print(image));
        this.setPicture(image, ix, iy);
    },
    setPicture: function (pic, ix, iy) {
        //ix,iy now means the button movement;
        var newLeft = this.Left + ix;
        var newTop = this.Top + iy;
        this.moveTo(newLeft, newTop, true);

        //   alert(this.NormalImage.Src+"\n"+this.NormalImageMouseOver.Src+"\n"+this.NormalImageMouseDown.Src);
        if (typeof(pic) == 'undefined')
            return;
        if (pic.Src == null) {
            this.Picture.dom.src = BlankImageUrl;
            this.Picture.applyStyles("position:absolute;left:-5px;top:-5px;");
            return;
        }
        if (this.Picture == null) {
            return;
        }
        this.Picture.dom.src = Author.resourcePath + pic.Src;

        var pLeft = this.PictureBoxLayout.Left + (this.PictureBoxLayout.Width - pic.Width) / 2;// + ix;
        var pTop = this.PictureBoxLayout.Top + (this.PictureBoxLayout.Height - pic.Height) / 2;// + iy;
        switch (this.ImageAlignment) {
            case AuthorAlignment.TopLeft:
                pLeft = 0;
                pTop = 0;
                break;
            case AuthorAlignment.TopCenter:
                pLeft = this.PictureBoxLayout.Left + (this.PictureBoxLayout.Width - pic.Width) / 2;
                pTop = 0;
                break;
            case AuthorAlignment.TopRight:
                pLeft = this.PictureBoxLayout.Left + (this.PictureBoxLayout.Width - pic.Width);
                pTop = 0;
                break;
            case AuthorAlignment.MiddleLeft:
                pLeft = 0;
                pTop = this.PictureBoxLayout.Top + (this.PictureBoxLayout.Height - pic.Height) / 2;
                break;
            case AuthorAlignment.MiddleCenter:
                pLeft = this.PictureBoxLayout.Left + (this.PictureBoxLayout.Width - pic.Width) / 2;
                pTop = this.PictureBoxLayout.Top + (this.PictureBoxLayout.Height - pic.Height) / 2;
                break;
            case AuthorAlignment.MiddleRight:
                pLeft = this.PictureBoxLayout.Left + (this.PictureBoxLayout.Width - pic.Width);
                pTop = this.PictureBoxLayout.Top + (this.PictureBoxLayout.Height - pic.Height) / 2;
                break;
            case AuthorAlignment.BottomLeft:
                pLeft = 0;
                pTop = this.PictureBoxLayout.Top + (this.PictureBoxLayout.Height - pic.Height);
                break;
            case AuthorAlignment.BottomCenter:
                pLeft = this.PictureBoxLayout.Left + (this.PictureBoxLayout.Width - pic.Width) / 2;
                pTop = this.PictureBoxLayout.Top + (this.PictureBoxLayout.Height - pic.Height);
                break;
            case AuthorAlignment.BottomRight:
                pLeft = this.PictureBoxLayout.Left + (this.PictureBoxLayout.Width - pic.Width);
                pTop = this.PictureBoxLayout.Top + (this.PictureBoxLayout.Height - pic.Height);
                break;
        }
        pLeft += this.ImageX;
        pTop += this.ImageY;

        var pStyle = "left:" + pLeft + "px;top:" + pTop + "px;width:" + pic.Width + "px;height:" + pic.Height + "px;";
        this.Picture.applyStyles(pStyle);


    },
    getTextStyle: function () {
        var textStyle = "position:absolute;width:" + this.TextBoxLayout.Width + "px;text-align:" + this.TextAlignmentH + ";";
        textStyle += "font-family:" + this.FontFamily + ";";
        textStyle += "font-size:" + this.FontSize + "px;";
        textStyle += "font-style:" + this.FontStyle + ";";
        textStyle += "font-weight:" + this.FontWeight + ";";
        textStyle += "text-decoration:" + this.TextDecoration + ";";
        textStyle += "white-space:pre-wrap;"

        return textStyle;
    },
    getTextBlockPosition: function (tbW, tbH) {
        var textPositionStyle = "left:0px;top:0px";
        var xR = this.TextBoxLayout.Width - tbW;
        var vB = this.TextBoxLayout.Height - tbH;
        //   Author.log(Ext.String.format("{0}, {1}\n{2}, {3}",tbW,tbH,this.ContentContainerWidth, this.ContentContainerHeight));
        var xC = xR / 2;
        var vC = vB / 2;
        var left = 0;
        var top = 0;
        var align = 'left';
        switch (this.TextAlignment) {
            case AuthorAlignment.TopLeft:
                left = 0;
                top = 0;
                break;
            case AuthorAlignment.TopCenter:
                left = xC;
                top = 0;
                align = 'center';
                break;
            case AuthorAlignment.TopRight:
                left = xR;
                top = 0;
                align = 'right';
                break;
            case AuthorAlignment.MiddleLeft:
                left = 0;
                top = vC;
                break;
            case AuthorAlignment.MiddleCenter:
                left = xC;
                top = vC;
                align = 'center';
                break;
            case AuthorAlignment.MiddleRight:
                left = xR;
                top = vC;
                align = 'right';
                break;
            case AuthorAlignment.BottomLeft:
                left = 0;
                top = vB;
                break;
            case AuthorAlignment.BottomCenter:
                left = xC;
                top = vB;
                align = 'center';
                break;
            case AuthorAlignment.BottomRight:
                left = xR;
                top = vB;
                align = 'right';
                break;
        }

        textPositionStyle = "left:" + (this.TextBoxLayout.Left + left + this.TextX) + "px;top:" + (this.TextBoxLayout.Top + top + this.TextY) + "px;text-align:" + align + ";";
        return {
            'Left': left,
            'Top': top,
            'TextBlockPositionStyle': textPositionStyle
        };
    },
    setTextBlock: function () {
        // Author.log(Ext.String.format("TextAlignment: {0}, TextX: {1}, TextY: {2}", this.TextAlignment,this.TextX,this.TextY));
        var tbW = this.TextBlock.getWidth();
        var tbH = this.TextBlock.getHeight();
        var textBlockPosition = this.getTextBlockPosition(tbW, tbH);
        this.TextBlock.applyStyles(textBlockPosition.TextBlockPositionStyle);
    },
    initializeDC: function (bg) {
        this.initializeDisplayComponent(bg);
        this.calculateTextBoxLayout();
        this.calculatePictureBoxLayout();
        //initialize the pictureBox first
        this.Picture = this.ContentContainer.createChild({
            tag: 'img',
            id: this.ObjectType + "-" + this.id + "-Picture",
            src: "lib/images/blank.gif",
            style: "position:absolute;left:-5px;top:-5px;",
            width: 0,
            height: 0

        });
        this.TextBlock = this.ContentContainer.createChild({
            tag: 'div',
            id: this.ObjectType + "-" + this.id + "-TextBlock",
            style: this.getTextStyle(),
            html: this.Text
        });
        this.setTextBlock();
        //this.TextBlock.setStyle('top', ((this.TextBoxLayout.Top + (this.TextBoxLayout.Height - tH) / 2)) + "px");

        this.setButtonAppearanceBaseOnStatus();
        if (this.ToolTip != null) {
            this.ToolTipVisual = Ext.create("Ext.tip.ToolTip", {
                target: this.ContentContainer,
                html: this.ToolTip,
                dismissDelay: 1000,
                showDelay: 200
            });
        }
        this.setCursor(CursorTypes.Pointer);
        // alert((this.TextBoxLayout.Top+(this.TextBoxLayout.Height - tH) / 2) + "px");
        this.setupEventListeners();
    },
    setupEventListeners: function () {
        this.ContentContainer.addListener("mouseenter", this.onMouseEnter, this);
        this.ContentContainer.addListener("mouseleave", this.onMouseLeave, this);
        this.ContentContainer.addListener("mousedown", this.onMouseDown, this);
        this.ContentContainer.addListener("mouseup", this.onMouseUp, this);
        this.ContentContainer.addListener("click", this.onClick, this);
    },
    setInitialCheckState: function () {
        if (this.IsToggleButton) {
            var value = ExpressionEngine.evalExpression(this.Value);
            if (value === 'False' || value === this.Value) {
                value = false;
            }
            this.IsChecked = new Boolean(value).valueOf();  //0,null,"",false,undefined,NaN is false, otherwise is true
        }
    },
    reset: function () {
        this.setInitialCheckState();
    },
    getInteractionValue: function () {
        return this.IsToggleButton ? this.IsChecked : this.Value;
    },
    onClick: function (evt, el, o) {
        if (evt)  evt.stopPropagation();

        switch (this.ButtonType) {
            case ButtonFunctions.NavigationButton:
                Author.DisplayManager.doNavigationAction(this.NavigationAction, this);
                break;
            case ButtonFunctions.MenuButton:
                Author.DisplayManager.gotoLessonNode(this.MenuOptionID);
                break;
            case ButtonFunctions.NormalButton:

                if (this.IsRespondToClick || !this.IsToggleButton) {
                    var btnValue = this.Value;
                    if (evt) {
                        if (evt.ctrlKey) {
                            btnValue = this.ValueOnCtrlClick;
                        }
                        if (evt.shiftKey) {
                            btnValue = this.ValueOnShiftClick;
                        }
                        if (evt.ctrlKey && evt.shiftKey) {
                            btnValue = this.ValueOnShiftClick + "+" + this.ValueOnCtrlClick;
                        }
                    }
                    Author.DisplayManager.tryToTriggerResponse(this.Name, btnValue, btnValue);
                }
                break;
        }
    },
    isValidMouseEnter: function (from, to) {

        if (!from || !to) {
            return false;
        }
        var fromActionInfo = AuthorCommons.getActionInfoFromElementID(from.id);
        if (fromActionInfo) {
            if (fromActionInfo.ActionID != this.id) {
                return true;
            } else {
                return (!from.contains || from.contains(to) || from.id.search(/BACKGROUND/) >= 0) && (from.id != this.ContentContainerID);
            }
        } else {
            return true;
        }
    },
    onMouseEnter: function (evt, el, o) {
        this.IsMouseOver = true;
        this.setButtonAppearanceBaseOnStatus();

        if (this.ToolTipVisual != null) {
            //  this.ToolTipVisual.show();
        }
        if (this.MouseInButton) {
            return;
        }
        this.MouseInButton = true;
        if (this.isValidMouseEnter(evt.getRelatedTarget(), evt.getTarget())) {
            if (this.IsRespondToMouseOver) {
                Author.DisplayManager.tryToTriggerResponse(this.Name, this.ValueOnMouseOver, this.ValueOnMouseOver);
            }
        }
    },
    isValidMouseLeave: function (from, to) {
        if (!from || !to) {
            return false;
        }
        var toActionInfo = AuthorCommons.getActionInfoFromElementID(to.id);
        if (toActionInfo) {
            if (toActionInfo.ActionID != this.id) {
                return true;
            } else {
                return (!to.contains || to.contains(from) || to.id.search(/BACKGROUND/) >= 0) && (to.id != this.ContentContainerID);
            }
        } else {
            return true;
        }
    },
    onMouseLeave: function (evt, el, o) {
        //Author.log(Ext.String.format('MouseLeave: from: {0} to {1}', evt.getTarget().id,  evt.getRelatedTarget().id));
        this.IsMouseOver = false;
        this.IsMouseDown = false;
        this.MouseInButton = false;
        this.setButtonAppearanceBaseOnStatus();
        if (this.ToolTipVisual != null) {
            this.ToolTipVisual.hide();
        }
        if (this.isValidMouseLeave(evt.getTarget(), evt.getRelatedTarget())) {
            if (this.IsRespondToMouseLeave) {
                Author.DisplayManager.tryToTriggerResponse(this.Name, this.ValueOnMouseLeave, this.ValueOnMouseLeave);
            }
        }
    },
    checkReset: function () {
        Author.CurrentStateManager.CurrentActionList.each(function (item, index, length) {
            if (item.ObjectType == "CUSTOMBUTTON" && item.IsToggleButton) {
                var regex = new RegExp(this.ResetNamePrefix + '.*', 'i');
                if (regex.test(item.Name) && item.id != this.id) {
                    item.IsChecked = false;
                    item.setButtonAppearanceBaseOnStatus();
                }
            }
        }, this);
    },
    onMouseDown: function (evt, el, o) {
        if (this.IsToggleButton) {
            this.IsChecked = !this.IsChecked;
            if (this.IsChecked && this.ResetNamePrefix != null) {
                this.checkReset();
            }
        }
        else {
            this.IsChecked = false;
        }
        this.IsMouseDown = true;
        this.setButtonAppearanceBaseOnStatus();
        evt.stopEvent();
    },
    onMouseUp: function (evt, el, o) {
        this.IsMouseDown = false;
        this.setButtonAppearanceBaseOnStatus();
        evt.stopEvent();
    },
    triggeredByKey: function (keyCodeStr) {
        // Author.log("CustomButton " + this.id + " is triggered by key :" + keyCodeStr);
        this.onClick();
    },
    registerKeyMap: function () {
        if (this.Key1 != null) {
            Author.LessonManager.registerActionKeyMap(this.Key1, this.id);
        }
        if (this.Key2 != null) {
            Author.LessonManager.registerActionKeyMap(this.Key2, this.id);
        }
    },
    processAction: function (bg) {
        if (this.IsChangeAction) {
            Author.DisplayManager.changeAction(this);
        }
        this.initializeDC(bg);
        this.IsMouseOver = false;
        this.IsMouseDown = false;

        if (this.ButtonType == ButtonFunctions.MenuButton && this.MarkOptionComplete) {
            this.IsMasked = Author.LessonManager.AuthorLesson.getLessonNodeByID(this.MenuOptionID).isCompleted();
        }

        this.setButtonAppearanceBaseOnStatus();
        this.setInitialVisibility();
        this.applyEffect();
        this.registerKeyMap();
        return {MoveOn: true, Interval: 0};
    },
    remove: function () {
        this.callParent([]);
    }
});




