/***TOP***/
function slideSwitch() {
    var $active = $('#top_img DIV.active');

    if ( $active.length == 0 ) $active = $('#top_img DIV:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#top_img DIV:first');

    // uncomment the 3 lines below to pull the images in random order
    
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );


    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 7000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 15000 );
});

/***TOP***/

/******/
	//$(document).ready(function(){
		//$("#musicmenu > ul").tabs({event: 'mouseover',fx:{opacity: "toggle"}}).tabs("rotate", 8000, true);
		//$('#musicmenu > ul').tabs({ event: 'mouseover' , fx: { opacity: 'toggle' , duration: 0 } });
	//});
	
	function out() {
	    // フェードアウト
	    $('#featured').hide();
	    //$('#featured').fadeOut(500);
		//$('#musicmenu > ul').tabs({ event: 'mouseover' , fx: { opacity: 'toggle' , duration: 0 } });
	};
	function on() {
		// フェードイン
	    //$('#featured').fadeIn(0);
	    //$('#featured').hide();
	    	    $('#musicmenu > ul').tabs( { event: 'mouseover', fx: { opacity: 'toggle', duration: 0,queue: false} } );
//	    $('#musicmenu > ul').tabs({ event: 'mouseover', fx: { opacity: 'toggle'} });
	    //$('#musicmenu > ul').tabs({ event: 'mouseover' });
	    $('#featured').show();
	};
	
/******/

  $(document).ready(function() {
        //move he last list item before the first item. The purpose of this is if the user clicks to slide left he will be able to see the last item.
        $('.musicmenu_list li:first').before($('.musicmenu_list li:last')); 
        
        
        //when user clicks the image for sliding right        
        $('#right_scroll img').click(function(){
        
            //get the width of the items ( i like making the jquery part dynamic, so if you change the width in the css you won't have o change it here too ) '
            var item_width = $('.musicmenu_list li').outerWidth() + 10;
            
            //calculae the new left indent of the unordered list
            var left_indent = parseInt($('.musicmenu_list').css('left')) - item_width;
            
            //make the sliding effect using jquery's anumate function '
            $('.musicmenu_list:not(:animated)').animate({'left' : left_indent},500,function(){    
                
                //get the first list item and put it after the last list item (that's how the infinite effects is made) '
                $('.musicmenu_list li:last').after($('.musicmenu_list li:first')); 
                
                //and get the left indent to the default -310px
                $('.musicmenu_list').css({'left' : '-310px'});
            }); 
        });
        
        //when user clicks the image for sliding left
        $('#left_scroll img').click(function(){
            
            var item_width = $('.musicmenu_list li').outerWidth() + 10;
            
            /* same as for sliding right except that it's current left indent + the item width (for the sliding right it's - item_width) */
            var left_indent = parseInt($('.musicmenu_list').css('left')) + item_width;
            
            $('.musicmenu_list:not(:animated)').animate({'left' : left_indent},500,function(){    
            
            /* when sliding to left we are moving the last item before the first list item */            
            $('.musicmenu_list li:first').before($('.musicmenu_list li:last')); 
            
            /* and again, when we make that change we are setting the left indent of our unordered list to the default -310px */
            $('.musicmenu_list').css({'left' : '-310px'});
            });
            
            
        });
  });