<!DOCTYPE HTML>
<!-- <copyright>
 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> -->
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="text-properties.css">

        <script type="text/montage-serialization">
        {

            "owner": {
                "prototype": "js/components/tools-properties/text-properties.reel",
                "properties": {
                    "element": {"#": "textProperties"},
                    "className": {"@": "className"},
                    "tagType": {"@": "tagType"},
                    "fontSelection": {"@": "fontSelection"},
                    "fontSettings": {"@": "fontSettings"},
                    "fontSize": {"@": "fontSize"},
                    "btnBold": {"@": "btnBold"},
                    "btnItalic": {"@": "btnItalic"},
                    "btnUnderline": {"@": "btnUnderline"},
                    "btnStrikethrough": {"@": "btnStrikethrough"},
                    "alignLeft": {"@": "alignLeft"},
                    "alignCenter": {"@": "alignCenter"},
                    "alignRight": {"@": "alignRight"},
                    "alignJustify": {"@": "alignJustify"},
                    "indent": {"@": "indent"},
                    "outdent": {"@": "outdent"},
                    "numberedList": {"@": "numberedList"},
                    "bulletedList": {"@": "bulletedList"}
                }
            },
            "className": {
                "prototype": "js/components/textfield.reel[TextField]",
                "properties": {
                    "element": {"#": "className"}
                }
            },
            "tagType": {
                "prototype": "js/components/combobox.reel",
                "properties": {
                    "element": {"#": "tagType"}
                }
            },
            "fontSelection": {
                "prototype": "js/components/combobox.reel",
                "properties": {
                    "element": {"#": "fontSelection"},
                    "identifier": "fontSelection"
                },
                "listeners": [
                    {
                        "type": "change",
                        "listener": {"@": "owner"}
                    }
                ]

            },
            "fontSettings": {
                "prototype": "montage/ui/button.reel",
                "properties": {
                    "element": {"#": "fontSettings"}
                }
            },

            "fontSize": {
                "prototype": "js/components/combobox.reel",
                "properties": {
                    "element": {"#": "fontSize"},
                    "identifier": "fontSize"
                },
                "listeners": [
                    {
                        "type": "change",
                        "listener": {"@": "owner"}
                    }
                ]

            },
        
            "btnBold": {
                "prototype": "montage/ui/toggle-button.reel",
                "properties": {
                    "element": {"#": "btnBold"},
                    "pressedClass": "active",
                    "preventFocus": true,
                    "identifier": "btnBold",
                    "pressedLabel": "B",
                    "unpressedLabel": "B"
                },
                "listeners": [
                    {
                        "type": "action",
                        "listener": {"@": "owner"}
                    }
                ]
            },
            "btnItalic": {
                "prototype": "montage/ui/toggle-button.reel",
                "properties": {
                    "element": {"#": "btnItalic"},
                    "pressedClass": "active",
                    "preventFocus": true,
                    "identifier": "btnItalic",
                    "pressedLabel": "I",
                    "unpressedLabel": "I"
                },
                "listeners": [
                    {
                        "type": "action",
                        "listener": {"@": "owner"}
                    }
                ]
            },
            "btnUnderline": {
                "prototype": "montage/ui/toggle-button.reel",
                "properties": {
                    "element": {"#": "btnUnderline"},
                    "pressedClass": "active",
                    "preventFocus": true,
                    "identifier": "btnUnderline",
                    "pressedLabel": "U",
                    "unpressedLabel": "U"
                },
                "listeners": [
                    {
                        "type": "action",
                        "listener": {"@": "owner"}
                    }
                ]
            },
            "btnStrikethrough": {
                "prototype": "montage/ui/toggle-button.reel",
                "properties": {
                    "element": {"#": "btnStrikethrough"},
                    "pressedClass": "active",
                    "preventFocus": true,
                    "identifier": "btnStrikethrough",
                    "pressedLabel": "S",
                    "unpressedLabel": "S"
                },
                "listeners": [
                    {
                        "type": "action",
                        "listener": {"@": "owner"}
                    }
                ]
            },
            
            "alignLeft": {
                "prototype": "montage/ui/toggle-button.reel",
                "properties": {
                    "element": {"#": "alignLeft"},
                    "pressedClass": "active",
                    "preventFocus": true,
                    "identifier": "alignLeft",
                    "pressedLabel": "Left",
                    "unpressedLabel": "Left"
                },
                "listeners": [
                    {
                        "type": "action",
                        "listener": {"@": "owner"}
                    }
                ]
            },
            "alignCenter": {
                "prototype": "montage/ui/toggle-button.reel",
                "properties": {
                    "element": {"#": "alignCenter"},
                    "pressedClass": "active",
                    "preventFocus": true,
                    "identifier": "alignCenter",
                    "pressedLabel": "Center",
                    "unpressedLabel": "Center"
                },
                "listeners": [
                    {
                        "type": "action",
                        "listener": {"@": "owner"}
                    }
                ]
            },
            "alignRight": {
                "prototype": "montage/ui/toggle-button.reel",
                "properties": {
                    "element": {"#": "alignRight"},
                    "pressedClass": "active",
                    "preventFocus": true,
                    "identifier": "alignRight",
                    "pressedLabel": "Right",
                    "unpressedLabel": "Right"
                },
                "listeners": [
                    {
                        "type": "action",
                        "listener": {"@": "owner"}
                    }
                ]
            },
            "alignJustify": {
                "prototype": "montage/ui/toggle-button.reel",
                "properties": {
                    "element": {"#": "alignJustify"},
                    "pressedClass": "active",
                    "preventFocus": true,
                    "identifier": "alignJustify",
                    "pressedLabel": "Justify",
                    "unpressedLabel": "Justify"
                },
                "listeners": [
                    {
                        "type": "action",
                        "listener": {"@": "owner"}
                    }
                ]
            },
            "indent": {
                "prototype": "montage/ui/button.reel",
                "properties": {
                    "element": {"#": "indent"},
                    "pressedClass": "active",
                    "preventFocus": true,
                    "identifier": "indent",
                    "label": ">>"
                },
                "listeners": [
                    {
                        "type": "action",
                        "listener": {"@": "owner"}
                    }
                ]
            },
            "outdent": {
                "prototype": "montage/ui/button.reel",
                "properties": {
                    "element": {"#": "outdent"},
                    "pressedClass": "active",
                    "preventFocus": true,
                    "identifier": "outdent",
                    "label": "<<"
                },
                "listeners": [
                    {
                        "type": "action",
                        "listener": {"@": "owner"}
                    }
                ]
            },
            "bulletedList": {
                "prototype": "montage/ui/toggle-button.reel",
                "properties": {
                    "element": {"#": "bulletedList"},
                    "pressedClass": "active",
                    "preventFocus": true,
                    "identifier": "bulletedList",
                    "pressedLabel": "• • •",
                    "unpressedLabel": "• • •"
                },
                "listeners": [
                    {
                        "type": "action",
                        "listener": {"@": "owner"}
                    }
                ]
            },
            "numberedList": {
                "prototype": "montage/ui/toggle-button.reel",
                "properties": {
                    "element": {"#": "numberedList"},
                    "pressedClass": "active",
                    "preventFocus": true,
                    "identifier": "numberedList",
                    "pressedLabel": "1 2 3",
                    "unpressedLabel": "1 2 3"
                },
                "listeners": [
                    {
                        "type": "action",
                        "listener": {"@": "owner"}
                    }
                ]
            }

    	}
	    </script>

    </head>

    <body>
        <div data-montage-id="textProperties" class="subToolHolderPanel optionsTextTool">
            <label class="label" style="display: none">Class:</label>
            <input data-montage-id="className" style="display: none" />
            <label class="label" style="display: none">Tag:</label>
            <select data-montage-id="tagType" style="display: none"></select>
            <label class="label">Font:</label>
            <select data-montage-id="fontSelection" class="nj-skinned fontSelection"></select>
            <button data-montage-id="fontSettings" style="display: none"></button>
            <label class="label">Size:</label>
            <select data-montage-id="fontSize" class="nj-skinned"></select>
            <div class="fontColor"></div>
            <div class="btnGroup">
                <button data-montage-id="btnBold" class="btnBold nj-skinned" style="font-weight:bold"></button>
                <button data-montage-id="btnItalic" class="btnItalic nj-skinned" style="font-style: italic;"></button>
                <button data-montage-id="btnUnderline" class="btnUnderline nj-skinned" style="text-decoration: underline;"></button>
                <button data-montage-id="btnStrikethrough" class="btnStriketrough nj-skinned" style="text-decoration: line-through;"></button>
            </div>
            <div class="btnGroup">
                <button data-montage-id="alignLeft" class="nj-skinned"></button>
                <button data-montage-id="alignCenter" class="nj-skinned"></button>
                <button data-montage-id="alignRight" class="nj-skinned"></button>
                <button data-montage-id="alignJustify" class="nj-skinned"></button>
            </div>
            <div class="btnGroup">
                <button data-montage-id="indent" class="nj-skinned"></button>
                <button data-montage-id="outdent" class="nj-skinned"></button>
            </div>
            <div class="btnGroup">
                <button data-montage-id="bulletedList" class="nj-skinned"></button>
                <button data-montage-id="numberedList" class="nj-skinned"></button>
            </div>
        </div>
    </body>

</html>