<!DOCTYPE html>
<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"}
                    }
                },
	            "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
	            		}
	            	}
	            }
            }
        </script>
	</head>
	<body>
    
		<div id="layer" class="container-layer">
			<div class="label-layer">
				<span class="collapsible-label" id="layer-label-text" spellcheck="false">Label</span>
				<span class="collapsible-clicker collapsible-collapsed"></span>
				<div class="cssbutton button-lock"></div>
				<div class="cssbutton button-visible"></div>
			</div>
			<div class="collapsible-content content-layer collapsible-collapsed">
				<div class="label-position">
					<span class="collapsible-label">Position</span>
					<span class="collapsible-clicker clicker-position"></span>
				</div>
				<div class="content-position collapsible-content">
					<div class="layout-table">
						<div class="layout-row">
							<div class="layout-cell">X</div>
							<div class="layout-cell">100px</div>
						</div>
						<div class="layout-row">
							<div class="layout-cell">Y</div>
							<div class="layout-cell">100px</div>
						</div>
						<div class="layout-row">
							<div class="layout-cell">Z</div>
							<div class="layout-cell">100px</div>
						</div>
					</div>
				</div>
				<div class="label-transform">
					<span class="collapsible-label">Transform</span>
					<span class="clicker-transform collapsible-clicker"></span>
				</div>
				<div class="content-transform collapsible-content">
					<div class="layout-table">
						<div class="layout-row">
							<div class="layout-cell">Scale X</div>
							<div class="layout-cell">100px</div>
						</div>
						<div class="layout-row">
							<div class="layout-cell">Scale Y</div>
							<div class="layout-cell">100px</div>
						</div>
						<div class="layout-row">
							<div class="layout-cell">Skew X</div>
							<div class="layout-cell">100px</div>
						</div>
						<div class="layout-row">
							<div class="layout-cell">Skew Y</div>
							<div class="layout-cell">100px</div>
						</div>
						<div class="layout-row">
							<div class="layout-cell">Rotation</div>
							<div class="layout-cell">100px</div>
						</div>
					</div>
					
				</div>
				<div class="label-style">
					<span class="collapsible-label">Style</span>
					<span class="clicker-style collapsible-clicker"></span>
					<div class="cssbutton button-delete disabled"></div>
					<div class="cssbutton button-add"></div>
				</div>
				<div class="content-style collapsible-content">
					<div class="" id="style-container">
						<div class="style-row" id="layer-style">
						</div>
					</div>
				</div>
			</div>
		</div>
    </body>
</html>