/* Animate Slider.  Please use the HTML tag:

<div id="scroller-body">
	<div id="mask">
		<div id="panel">
			<div id="panel-1"> 
				[flv:[filename].flv click-to-play.jpg 480 360]
			</div>

			<div id="panel-2">
				[flv:[filename].flv click-to-play.jpg 480 360]
			</div>
			
		</div>  <!-- /panel -->
	</div>  <!-- /mask -->
</div> <!-- /scroller-body -->
 */

$(document).ready(function() {
    //Get the height of the first item
    $('#mask').css({'height':$('#panel-1').height()});	
    
    //Calculate the total width - sum of all sub-panels width
    //Width is generated according to the width of #mask * total of sub-panels
    $('#panel').width(parseInt($('#mask').width() * $('#panel div').length));
    
    //Set the sub-panel width according to the #mask width (width of #mask and sub-panel must be same)
    $('#panel div').width($('#mask').width());
    
    //Get all the links with rel as panel
    $('a[rel=panel]').click(function () {
    
        //Get the height of the sub-panel
        var panelheight = $($(this).attr('href')).height();
        
        //Set class for the selected item
        $('a[rel=panel]').removeClass('selected');
        $(this).addClass('selected');
        
        //Resize the height
        $('#mask').animate({'height':panelheight},{queue:false, duration:500});			
        
        //Scroll to the correct panel, the panel id is grabbed from the href attribute of the anchor
        $('#mask').scrollTo($(this).attr('href'), 800);		
        
        //Discard the link default behavior
        return false;
    });
    
});