<!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 lang="en">
	<head>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    	<link rel="stylesheet" type="text/css" href="css/Layer.css">
   		<script type="text/montage-serialization">
            {
                "owner": {
                    "module": "js/panels/Timeline/Layer.reel",
                    "name": "Layer",
                    "properties": {
                        "element": {"#": "layer"},
						"styleRepetition" : {"@":"repetition1"},
						"dynamicLayerName" : {"@":"dtext1"},
						"slotStyle" : {"@":"slot1"},
						"mainCollapser" : {"@" : "mainCollapser"},
						"positionCollapser" : {"@" : "positionCollapser"},
						"transformCollapser" : {"@" : "transformCollapser"},
						"styleCollapser" : {"@" : "styleCollapser"},
						"clickerMain" : {"#" : "clicker-main"}
                    }
                },
	            "dtext1" : {
	            	"module" : "montage/ui/dynamic-text.reel",
	            	"name" : "DynamicText",
	            	"properties" : {
	            		"element" : {"#" : "layer-label-text"}
	            	},
	            	"bindings" : {
	            		"value" : {
	            			"boundObject" : {"@": "owner"},
	            			"boundObjectPropertyPath" : "layerName",
	            			"oneway" : false
	            		}
	            	}
	            },
	            "repetition1": {
	                "module": "montage/ui/repetition.reel",
	                "name": "Repetition",
	                "properties": {
	                    "element": {"#": "style-container"},
	                    "isSelectionEnabled" : true
	                },
	                "bindings": {
	                    "objects": {
	                        "boundObject": {"@": "owner"},
	                        "boundObjectPropertyPath": "arrLayerStyles",
	                        "oneway": false
	                    }
	                }
	            },
	            "style" : {
	            	"module" : "js/panels/Timeline/Style.reel",
	            	"name" : "LayerStyle",
	            	"properties" : {
	            		"element" : {"#" : "layer-style"}
	            	},
	            	"bindings" : {
	            		"styleID" : {
	            			"boundObject" : {"@": "repetition1"},
	            			"boundObjectPropertyPath" : "objectAtCurrentIteration.styleID",
	            			"oneway" : false
	            		},
	            		"whichView" : {
	            			"boundObject" : {"@": "repetition1"},
	            			"boundObjectPropertyPath" : "objectAtCurrentIteration.whichView",
	            			"oneway" : false
	            		},
	            		"editorProperty" : {
	            			"boundObject" : {"@": "repetition1"},
	            			"boundObjectPropertyPath" : "objectAtCurrentIteration.editorProperty",
	            			"oneway" : false
	            		},
	            		"isSelected" : {
	            			"boundObject" : {"@": "repetition1"},
	            			"boundObjectPropertyPath" : "objectAtCurrentIteration.isSelected",
	            			"oneway" : false
	            		},
	            		"isActive" : {
	            			"boundObject" : {"@": "repetition1"},
	            			"boundObjectPropertyPath" : "objectAtCurrentIteration.isActive",
	            			"oneway" : false
	            		},
	            		"editorValue" : {
	            			"boundObject" : {"@": "repetition1"},
	            			"boundObjectPropertyPath" : "objectAtCurrentIteration.editorValue",
	            			"oneway" : false
	            		},
	            		"ruleTweener" : {
	            			"boundObject" : {"@": "repetition1"},
	            			"boundObjectPropertyPath" : "objectAtCurrentIteration.ruleTweener",
	            			"oneway" : false
	            		}
	            	}
	            },
				"dtext_position_x" : {
                    "module": "js/components/hottextunit.reel",
            	    "name": "HotTextUnit",
            	    "properties": {
            	        "element": {"#": "position-x"},
            	        "maxValue" : 100000,
                        "minValue" : -100000,
                        "acceptableUnits" : "px",
                        "units" : "px",
                        "value" : 0
            	    },
	                "bindings": {
	                    "value": {
	                        "boundObject": {"@": "owner"},
	                        "boundObjectPropertyPath": "dtextPositionX",
	                        "oneway": false
	                    }
	                }
				},
				"dtext_position_y" : {
                    "module": "js/components/hottextunit.reel",
            	    "name": "HotTextUnit",
            	    "properties": {
            	        "element": {"#": "position-y"},
            	        "maxValue" : 100000,
                        "minValue" : -100000,
                        "acceptableUnits" : "px",
                        "units" : "px",
                        "value" : 0
            	    },
	                "bindings": {
	                    "value": {
	                        "boundObject": {"@": "owner"},
	                        "boundObjectPropertyPath": "dtextPositionY",
	                        "oneway": false
	                    }
	                }
				},
				"dtext_scale_x" : {
                    "module": "js/components/hottextunit.reel",
            	    "name": "HotTextUnit",
            	    "properties": {
            	        "element": {"#": "scale-x"},
            	        "maxValue" : 100,
                        "minValue" : 0,
                        "acceptableUnits" : "%",
                        "units" : "%",
                        "value" : 0
            	    },
	                "bindings": {
	                    "value": {
	                        "boundObject": {"@": "owner"},
	                        "boundObjectPropertyPath": "dtextScaleX",
	                        "oneway": false
	                    }
	                }
				},
				"dtext_scale_y" : {
                    "module": "js/components/hottextunit.reel",
            	    "name": "HotTextUnit",
            	    "properties": {
            	        "element": {"#": "scale-y"},
            	        "maxValue" : 100,
                        "minValue" : 0,
                        "acceptableUnits" : "%",
                        "units" : "%",
                        "value" : 0
            	    },
	                "bindings": {
	                    "value": {
	                        "boundObject": {"@": "owner"},
	                        "boundObjectPropertyPath": "dtextScaleY",
	                        "oneway": false
	                    }
	                }
				},
				"dtext_skew_x" : {
                    "module": "js/components/hottextunit.reel",
            	    "name": "HotTextUnit",
            	    "properties": {
            	        "element": {"#": "skew-x"},
            	        "maxValue" : 100,
                        "minValue" : 0,
                        "acceptableUnits" : "%",
                        "units" : "%",
                        "value" : 0
            	    },
	                "bindings": {
	                    "value": {
	                        "boundObject": {"@": "owner"},
	                        "boundObjectPropertyPath": "dtextSkewX",
	                        "oneway": false
	                    }
	                }
				},
				"dtext_skew_y" : {
                    "module": "js/components/hottextunit.reel",
            	    "name": "HotTextUnit",
            	    "properties": {
            	        "element": {"#": "skew-y"},
            	        "maxValue" : 100,
                        "minValue" : 0,
                        "acceptableUnits" : "%",
                        "units" : "%",
                        "value" : 0
            	    },
	                "bindings": {
	                    "value": {
	                        "boundObject": {"@": "owner"},
	                        "boundObjectPropertyPath": "dtextSkewY",
	                        "oneway": false
	                    }
	                }
				},
				"dtext_rotate" : {
                    "module": "js/components/hottextunit.reel",
            	    "name": "HotTextUnit",
            	    "properties": {
            	        "element": {"#": "rotation"},
            	        "maxValue" : 360,
                        "minValue" : -360,
                        "acceptableUnits" : "degrees",
                        "units" : "degrees",
                        "value" : 0
            	    },
	                "bindings": {
	                    "value": {
	                        "boundObject": {"@": "owner"},
	                        "boundObjectPropertyPath": "dtextRotate",
	                        "oneway": false
	                    }
	                }
				},
					
				"mainCollapser" : {
					"module" : "js/panels/timeline/Collapser.js",
					"name" : "Collapser",
					"properties" : {
						"element" : {"#" : "content-main"},
						"myContent" : {"#" : "content-main"},
						"contentHeight" : 60,
						"isLabelClickable" : true,
						"clicker" : {"#" : "clicker-main"},
						"isCollapsed" : true,
						"isAnimated" : true	
					},
					"bindings" : {
						"isToggling" : {
							"boundObject" : {"@" : "owner" },
							"boundObjectPropertyPath" : "isMainCollapsed",
							"oneway" : false
						}
					}
				},
					
				"positionCollapser" : {
					"module" : "js/panels/timeline/Collapser.js",
					"name" : "Collapser",
					"properties" : {
						"element" : {"#" : "content-position"},
						"myContent" : {"#":"content-position"},
						"contentHeight" : 60,
						"isLabelClickable" : true,
						"clicker" : {"#" : "clicker-position"},
						"isCollapsed" : true,
						"isAnimated" : true	
					},
					"bindings" : {
						"isToggling" : {
							"boundObject" : {"@" : "owner" },
							"boundObjectPropertyPath" : "isPositionCollapsed",
							"oneway" : false
						}
					}
				},
					
				"transformCollapser" : {
					"module" : "js/panels/timeline/Collapser.js",
					"name" : "Collapser",
					"properties" : {
						"element" : {"#" : "content-transform"},
						"myContent" : {"#":"content-transform"},
						"contentHeight" : 60,
						"isLabelClickable" : true,
						"clicker" : {"#" : "clicker-transform"},
						"isCollapsed" : true,
						"isAnimated" : true	
					},
					"bindings" : {
						"isToggling" : {
							"boundObject" : {"@" : "owner" },
							"boundObjectPropertyPath" : "isTransformCollapsed",
							"oneway" : false
						}
					}
				},
					
				"styleCollapser" : {
					"module" : "js/panels/timeline/Collapser.js",
					"name" : "Collapser",
					"properties" : {
						"element" : {"#" : "content-style"},
						"myContent" : {"#":"content-style"},
						"contentHeight" : 60,
						"isLabelClickable" : true,
						"clicker" : {"#" : "clicker-style"},
						"isCollapsed" : true,
						"isAnimated" : true	
					},
					"bindings" : {
						"isToggling" : {
							"boundObject" : {"@" : "owner" },
							"boundObjectPropertyPath" : "isStyleCollapsed",
							"oneway" : false
						}
					}
				}
				
				
            }
        </script>
	</head>
	<body>
    
		<div data-montage-id="layer" class="container-layer">
			<div class="label-layer">
				<span class="collapsible-label" data-montage-id="layer-label-text" spellcheck="false">Label</span>
				<span class="collapsible-clicker collapsible-collapsed" data-montage-id="clicker-main"></span>
				<div class="cssbutton button-lock"></div>
				<div class="cssbutton button-visible"></div>
			</div>
			<div class="collapsible-content content-layer collapsible-collapsed" data-montage-id="content-main">
				<div class="label-position">
					<span class="collapsible-label">Position</span>
					<span class="collapsible-clicker clicker-position collapsible-collapsed" data-montage-id="clicker-position"></span>
				</div>
				<div class="content-position collapsible-content collapsible-collapsed" data-montage-id="content-position">
					<div class="layout-table">
						<div class="layout-row">
							<div class="layout-cell">X</div>
							<div class="layout-cell"><div data-montage-id="position-x"></div></div>
						</div>
						<div class="layout-row">
							<div class="layout-cell">Y</div>
							<div class="layout-cell"><div data-montage-id="position-y"></div></div>
						</div>
					</div>
				</div>
				<div class="label-transform">
					<span class="collapsible-label">Transform</span>
					<span class="clicker-transform collapsible-clicker collapsible-collapsed" data-montage-id="clicker-transform"></span>
				</div>
				<div class="content-transform collapsible-content collapsible-collapsed" data-montage-id="content-transform">
					<div class="layout-table">
						<div class="layout-row">
							<div class="layout-cell">Scale X</div>
							<div class="layout-cell"><div data-montage-id="scale-x"></div></div>
						</div>
						<div class="layout-row">
							<div class="layout-cell">Scale Y</div>
							<div class="layout-cell"><div data-montage-id="scale-y"></div></div>
						</div>
						<div class="layout-row">
							<div class="layout-cell">Skew X</div>
							<div class="layout-cell"><div data-montage-id="skew-x"></div></div>
						</div>
						<div class="layout-row">
							<div class="layout-cell">Skew Y</div>
							<div class="layout-cell"><div data-montage-id="skew-y"></div></div>
						</div>
						<div class="layout-row">
							<div class="layout-cell">Rotation</div>
							<div class="layout-cell"><div data-montage-id="rotation"></div></div>
						</div>
					</div>
					
				</div>
				<div class="label-style">
					<span class="collapsible-label">Style</span>
					<span class="clicker-style collapsible-clicker collapsible-collapsed" data-montage-id="clicker-style"></span>
					<div class="cssbutton button-delete disabled"></div>
					<div class="cssbutton button-add"></div>
				</div>
				<div class="content-style collapsible-content collapsible-collapsed" data-montage-id="content-style">
					<div class="" data-montage-id="style-container">
						<div class="style-row" data-montage-id="layer-style">
						</div>
					</div>
				</div>
			</div>
		</div>
    </body>
</html>