<data>
    <timelineBanner>
        <autoPlayHandler jQuery='#multiSizeDemoHolder'/>
        <timeline repeat='-1' paused='false'>
            <timeline align='sequence' repeat='1'>
                <tween jQuery='#waterWave1' duration='2' css='left:-15%' ease='Linear.easeNone'/>
                <tween jQuery='#waterWave1' duration='2' css='left:-5%' ease='Linear.easeNone'/>
            </timeline>
            <timeline align='sequence' repeat='1'>
                <tween jQuery='#waterWave2' duration='2' css='left:-5%' ease='Linear.easeNone'/>
                <tween jQuery='#waterWave2' duration='2' css='left:-15%' ease='Linear.easeNone'/>
            </timeline>
            <timeline align='sequence'>
                <tween jQuery='.waterBubbles' css='autoAlpha:1, top:105%' />
                <tween jQuery='#waterBubble1' css='left:85%' />
                <tween jQuery='#waterBubble2' css='left:86%' />
                <tween jQuery='#waterBubble3' css='left:87%' />
                <tween jQuery='#waterBubble4' css='left:88%' />
                <tween jQuery='#waterBubble5' css='left:89%' />
                <staggerTo jQuery='.waterBubbles' duration='1' css='top:20%, autoAlpha:0' ease='Linear.easeNone' stagger='0.25' sort='123' />
                <tween jQuery='.waterBubbles' css='autoAlpha:1, top:105%' />
                <tween jQuery='#waterBubble1' css='left:21%' />
                <tween jQuery='#waterBubble2' css='left:22%' />
                <tween jQuery='#waterBubble3' css='left:23%' />
                <tween jQuery='#waterBubble4' css='left:24%' />
                <tween jQuery='#waterBubble5' css='left:25%' />
                <staggerTo jQuery='.waterBubbles' duration='1' css='top:20%, autoAlpha:0' ease='Linear.easeNone' stagger='0.25' sort='123' />
            </timeline>
            <timeline align='sequence'>
                <tween jQuery='#fish' css='left:25%, top:25%, zIndex:99' duration='2' ease='Power3.easeOut' />
                <tween jQuery='#fish' css='left:60%, top:55%' duration='2' ease='Linear.easeNone' />
                <tween jQuery='#fish' css='left:75%, top:25%' duration='2' ease='Power3.easeOut' />
                <tween jQuery='#fish' css='left:125%, top:55%' duration='2' ease='Power3.easeIn' />
            </timeline>
            <timeline align='sequence' repeat='15'>
                <tween jQuery='#fishTail' css='rotation:25deg, transformOrigin:100% 50%' duration='0.25' ease='Power3.easeIn' />
                <tween jQuery='#fishTail' css='rotation:-25deg' duration='0.25' ease='Power3.easeIn' />
            </timeline>
        </timeline>
        <timelineControl>
            <playButton jQuery='#multiSize_play' enableCss='display:block' disableCss='display:none'/>
            <pauseButton jQuery='#multiSize_pause' enableCss='display:block' disableCss='display:none'/>
            <seekBar jQuery='#multiSize_seekBar'>
                <progressBar jQuery='#multiSize_seekProgress' type='progress'/>
            </seekBar>
        </timelineControl>
    </timelineBanner>
</data>

<div id="multiSizeDemoHolder">
    <div id="mainMultiSizeHolder"> 
        <img alt="image" id="waterBg" src="assets/water_bg.jpg"/> 
        <img alt="image" id="waterWave1" src="assets/water_wave1.png"/> 
        <img alt="image" id="waterWave2" src="assets/water_wave2.png"/> 
        <img alt="image" id="waterBubble1" class="waterBubbles" src="assets/water_bubble.png"/> 
        <img alt="image" id="waterBubble2" class="waterBubbles" src="assets/water_bubble.png"/> 
        <img alt="image" id="waterBubble3" class="waterBubbles" src="assets/water_bubble.png"/> 
        <img alt="image" id="waterBubble4" class="waterBubbles" src="assets/water_bubble.png"/>
        <img alt="image" id="waterBubble5" class="waterBubbles" src="assets/water_bubble.png"/>
        <div id="fish"> 
            <img alt="image" id="fishTail" src="assets/fish_tail.png"/> 
            <img alt="image" id="fishBody" src="assets/fish_body.png"/> 
        </div>
        <img alt="image" id="multiSize_play" src="assets/fish_play.png"/> 
        <img alt="image" id="multiSize_pause" src="assets/fish_pause.png"/>
        <div id="multiSize_seekBar">
            <div id="multiSize_seekProgress"></div>
        </div>
    </div>
</div>
</body>

<style>
#multiSizeDemoHolder 
{
	background-color:#FFFFFF;
	width:780px;
	padding-bottom:10px;
	padding-top:10px;
	margin:10px auto;
}
#mainMultiSizeHolder 
{
	width:760px;
	height:300px;
	display:block;
	overflow:hidden;
	position:relative;
	margin:auto auto;
}
#waterBg 
{
	position:absolute;
	left:0px;
	top:0px;
	width: 100%;
	height: 100%;
}
#waterWave1 
{
	position:absolute;
	left:-5%;
	top:10px;
	width:120%;
}
#waterWave2 
{
	position:absolute;
	left:-15%;
	bottom:30px;
	width:120%;
}
.waterBubbles 
{
	position:absolute;
	top:105%;
	left:85%;
}
#fish 
{
	width:81px;
	height:40px;
	position:absolute;
	left:-25%;
	top:50%;
	background-image:url(../assets/empty.gif);
	background-repeat:repeat;
}
#fishTail 
{
	position:absolute;
	left:0px;
	top:0px;
}
#fishBody 
{
	position:absolute;
	left:27px;
	top:0px;
}
#multiSizeForm 
{
	width:100%;
	height:30px;
	position:relative;
}
#example2_sizeLabel 
{
	top:5px;
	left:320px;
	position:absolute;
}
#multiSize_seekBar 
{
	width:100%;
	height:10px;
	background-color:#1C608B;
	position:absolute;
	bottom:0px;
	left:0px;
	cursor:pointer;
}
#multiSize_seekProgress 
{
	width:0%;
	height:10px;
	background-color:#2A7DB5;
	position:absolute;
	top:0px;
	left:0px;
}
#multiSize_play, #multiSize_pause 
{
	position:absolute;
	top:12px;
	right:12px;
	display:none;
	border:none;
	cursor:pointer;
}
</style>