<!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/TimelinePanel.css">
   		

        <script type="text/montage-serialization">
            {
                "owner": {
                    "prototype": "js/panels/Timeline/TimelinePanel.reel",
                    "properties": {
                        "element": {"#": "timeline_panel"},
                        "user_layers": {"#": "user_layers"},
                        "track_container": {"#": "right_inside"},
                        "timeline_leftpane" : {"#" : "leftpane_inside"},
                        "layer_tracks": {"#": "layer_tracks"},
                        "layout_tracks": {"#": "layout_tracks"},
                        "master_track": {"#": "master_track"},
                        "time_markers" : {"#": "timeline_markers"},
                        "layerRepetition" : {"@": "repetition1"},
                        "trackRepetition" : {"@" : "repetition2"},
                        "playhead": {"#": "playhead"},
                        "playheadmarker": {"#": "playhead_marker"},
                        "timetext" : {"#": "time_text"},
                        "timebar" : {"#": "time_bar"},
                        "container_tracks" : {"#" : "container-tracks"},
                        "end_hottext" : {"@" : "endHottext"},
                        "container_layers" : {"#" : "container-layers"},
                        "container_tracks" : {"#" : "container-tracks"},
                        "timeline_disabler" : {"#" : "timeline-disabler"},
                        "checkable_animated" : {"#" : "checkable_animated"},
                        "tl_configbutton" : {"#" : "tl-configbutton"},
                        "checkable_lock" : {"#" : "checkable_lock"},
                        "checkable_visible":{"#" : "checkable_visible"},
                        "play_button" : {"#" : "play_button"}
                    }
                },

                "timelineResize" : {
                    "prototype": "js/panels/Resizer",
                    "properties": {
                        "element": {"#": "layer_resizer"},
                        "panel" : {"#" : "timeline_leftpane"},
                        "isVertical" : false,
                        "isInversed" : false,
                        "isPanel"    : false
                    }
                },

                
	            "repetition1": {
	                "prototype": "montage/ui/repetition.reel",
	                "properties": {
	                    "element": {"#": "container-layers"},
	                    "isSelectionEnabled" : true
	                },
	                "bindings": {
	                    "objects": {
	                        "boundObject": {"@": "owner"},
	                        "boundObjectPropertyPath": "arrLayers",
	                        "oneway": false
	                    }
	                }
	            },
	            "layer" : {
	            	"prototype" : "js/panels/Timeline/Layer.reel",
	            	"properties" : {
	            		"element": {"#": "container-layer"}
	            	},
	            	"bindings" : {
                        "layerData" : {
                        	"boundObject" : {"@" : "repetition1"},
                        	"boundObjectPropertyPath" : "objectAtCurrentIteration.layerData",
                        	"oneway" : false
                        },
                        "bindingPoint" : {
            	            "boundObject" : {"@" : "repetition1"},
            	            "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData.triggerBinding",
            	            "oneway" : false
            	        }
	            	}
	            },
	            
	            "repetition2" : {
	                "prototype": "montage/ui/repetition.reel",
	                "properties": {
	                    "element": {"#": "container-tracks"},
	                    "isSelectionEnabled" : false
	                },
	                "bindings": {
	                    "objects": {
	                        "boundObject": {"@": "owner"},
	                        "boundObjectPropertyPath": "arrLayers",
	                        "oneway": false
	                    }
	                }
	            },
	            "track" : {
	            	"prototype" : "js/panels/Timeline/TimelineTrack.reel",
	            	"properties" : {
	            		"element": {"#": "container-track"}
	            	},
	            	"bindings" : {
                        "trackData" : {
            	            "boundObject" : {"@" : "repetition2"},
            	            "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData",
            	            "oneway" : false
            	        },
                        "bindingPoint" : {
            	            "boundObject" : {"@" : "repetition2"},
            	            "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData.triggerBinding",
            	            "oneway" : false
            	        }
            	        
	            	}
	            },

                "timelineZoomSlider":{
                    "prototype":"js/components/slider.reel",
                    "properties":{
                        "element":{"#":"tl_slider"},
                        "maxValue" : 10000,
                        "minValue" : 1000
                    },
                    "bindings": {
                        "value": {
                            "boundObject": {"@": "owner"},
                            "boundObjectPropertyPath": "millisecondsOffset",
                            "oneway": false
                        }
                    }
                },

                "endHottext" : {
                    "prototype": "js/components/hottextunit.reel[HotTextUnit]",
            	    "properties": {
            	        "element": {"#": "end_hottext"},
            	        "maxValue" : 100000,
                        "minValue" : 1,
                        "acceptableUnits" : "sec",
                        "units" : "sec",
                        "value" : 25
            	    }
                }
            }
        </script>

	</head>
	<body>
    
    	<div data-montage-id="timeline_panel" class="tl_container">

            <div data-montage-id="bread_crumb"></div>

            <div data-montage-id="main_timeline" class="maintimeline">


                <div data-montage-id="timeline_leftpane" class="tl_leftpane">
                    <div data-montage-id="leftpane_inside" class="leftinside">
                        <div data-montage-id="timeline_controller" class="timelinecontroller">
                            <div data-montage-id="timeline_controls" class="timelinecontrols">
                                <div data-montage-id="play_button" class="playbutton"></div>
                                <div data-montage-id="time_text" class="timetext">00:00:00</div>
                            </div>
                        </div>


                        
                        <div data-montage-id="user_layers" class="userlayers">
                            <div data-montage-id="master_layer" class="masterlayer">
                                <div class="layer-master">Master Layer
	                                <div class="tl-configbutton" data-montage-id="tl-configbutton">
	                                	<div class="tl-dropdown">
	                                		<div class="checkable" data-montage-id="checkable_animated">Show only animated layers</div>
                                            <div class="checkable" data-montage-id="checkable_lock">Lock Layers</div>
                                            <div class="checkable" data-montage-id="checkable_visible">Visibility of Layers</div>
	                                	</div>
	                                </div>
                                
                                </div>

                            </div>
                            <div data-montage-id="container-layers" style="position: relative;" class="container-layers">
                            	<div data-montage-id="container-layer"></div>
                            </div>
                        </div>

                        <div data-montage-id="timeline_gutter" class="timelinegutter">
                            <div data-montage-id="tl_slider" class="tl_slider"></div>
                            <input data-montage-id="end_hottext" class="endhottext">
                        </div>
                    </div>
                </div>

                <div data-montage-id="layer_resizer" class="layerresizer"></div>

                <div data-montage-id="timeline_rightpane" class="tl_rightpane">
                    <div data-montage-id="right_inside" class="rightinside">
                    	<div class="layout_markers">
                            <div data-montage-id="playhead" class="playhead"></div>
	                        <div data-montage-id="timeline_markers" class="timelinemarkers"></div>
                    	</div>


                        <div data-montage-id="layer_tracks" class="tl_layertracks">
                        	<div class="layout-tracks" data-montage-id="layout_tracks">
	                            <div data-montage-id="playhead_marker" class="playheadmarker"></div>
	                            <div data-montage-id="master_track" class="mastertrack">
                                    <div data-montage-id="time_bar" class="timebar"></div>
	                            </div>
	                            <div data-montage-id="container-tracks" class="container-tracks">
	                            	<div data-montage-id="container-track"></div>
	                            </div>
                        	</div>

                        </div>
                    </div>
                </div>

				<div class="timeline-disabled" data-montage-id="timeline-disabler"></div>
                
            </div>
    	</div>

    </body>
</html>