var $j = jQuery.noConflict();
		$j(document).ready(function(){
		
		function mycarousel_initCallback(carousel)
{
    // Disable autoscrolling if the user clicks the prev or next button.
    jQuery('#viewport a').bind('click', function() {
	carousel.stopAuto();
    });
	
	   jQuery('.jcarousel-control a').bind('click', function() {
        carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
        return false;
    });

    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
};

var autonum=0;
if ($j("#viewport ul li").length>3) { autonum=3; }

    jQuery('#viewport').jcarousel({
        auto: autonum,
		scroll: 1,
        wrap: 'circular',
        initCallback: mycarousel_initCallback
    });
				  
	//rollover hover
	 $j("#viewport li").hover(function() { //On hover...

		var thumbOver = $j(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'
		
		$j(this).find("a").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});
		$j(this).find("em").stop().animate({bottom:"-1"}, "fast")
		//Animate the image to 0 opacity (fade it out)
		$j(this).find("span").stop().fadeTo('normal', 0 , function() {
		$j(this).hide() //Hide the image after fade
		});
		}, function() { //on hover out...
		//Fade the image to full opacity 
		$j(this).find("span").stop().fadeTo('normal', 1).show();
		$j(this).find("em").stop().animate({bottom:"-60"}, "fast")
	});
	
	 $j('.scroll-pane').jScrollPane({showArrows:false, scrollbarWidth:11, dragMaxHeight:63});		 	
		
	});