var playSlideshow =  setInterval( "slideSwitch()", 5000 );
 
       
  function slideSwitch() {
    var $active = jQuery('#art-slideshow IMG.active');

    if ( $active.length == 0 ) $active = jQuery('#art-slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : jQuery('#art-slideshow IMG: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}, 3000, function() {
            $active.removeClass('active last-active');
        });
}



jQuery(function() {


	var $active = jQuery('#art-slideshow IMG.active');
							
	$active.animate({opacity: 1.0}, 1000);
		
	jQuery('.sc_menu > a').click(function(){
	clearInterval(playSlideshow);
	});
	
	jQuery('#stop-slideshow').click(function(){
	clearInterval(playSlideshow);
	});
	
	jQuery('#play-slideshow').click(function(){
	slideSwitch();
	playSlideshow =  setInterval( "slideSwitch()", 5000 );
	});
	


			

        
           jQuery('.sc_menu > a').bind('mouseenter',function(){
					var $elem = jQuery(this);
					 
					
					// This bit to find the month element
					
					// here we need to change the function -  just want to show an element.
					// we will just hide the element all the time and just pull the values from the elements
					
					
					$elem.find('.stdimg')
							.addClass('active')
							.stop(true)
						 	.animate({opacity: 1}, .1)
						 	.show()

				
										
					
					
				})
				
				
				.bind('mouseleave',function(){
					var $elem = jQuery(this);
					
					$elem.find('img')
						 .stop(true)
						 .animate({opacity: .2}, .1)
						 .removeClass('active')

				})
				.bind('click',function(){
				clearInterval(playSlideshow);
				var $active = jQuery('#art-slideshow IMG.active');
				$active.addClass('last-active');
				var $elem = jQuery(this);
				thumbid = $elem.attr('id');
				var thmbsplit = thumbid.split('-'); 
				var theslide = "#slide-" + thmbsplit[1];
				
				jQuery(theslide).css({opacity: 0.0})
						   .addClass('active')
        				   .animate({opacity: 1.0}, 1000, function() {
            					$active.removeClass('active last-active');
        					});

				
				});
				
		});		


function makeScrollable(wrapper, scrollable){
	// Get jQuery elements
	var wrapper = jQuery(wrapper), scrollable = jQuery(scrollable);
	
	// Hide images until they are not loaded
	scrollable.hide();
	var loading = jQuery('<div class="loading">Loading...</div>').appendTo(wrapper);
	
	// Set function that will check if all images are loaded
	var interval = setInterval(function(){
		var images = scrollable.find('img');
		var completed = 0;
		
		// Counts number of images that are succesfully loaded
		images.each(function(){
			if (this.complete) completed++;	
		});
		
		if (completed == images.length){
			clearInterval(interval);
			// Timeout added to fix problem with Chrome
			setTimeout(function(){
				
				loading.hide();
				// Remove scrollbars	
				wrapper.css({overflow: 'hidden'});						
				
				scrollable.slideDown('slow', function(){
					enable();	
				});					
			}, 1000);	
		}
	}, 100);
	
function enable(){
  // height of area at the top at bottom, that don't respond to mousemove
  var inactiveMargin = 100;         
  // Cache for performance
  var wrapperWidth = wrapper.width();
  var wrapperHeight = wrapper.height();
  // Using outer height to include padding too
  var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
  // Do not cache wrapperOffset, because it can change when user resizes window
  // We could use onresize event, but it&#39;s just not worth doing that 
  // var wrapperOffset = wrapper.offset();

  //When user move mouse over menu          
  wrapper.mousemove(function(e){
    var wrapperOffset = wrapper.offset();
    // Scroll menu
    var top = (e.pageY -  wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight  - inactiveMargin;

    if (top < 0){
      top = 0;
    }

    wrapper.scrollTop(top);
  });       
}
}
	

jQuery(function(){	
	makeScrollable("div.sc_menu_wrapper", "div.sc_menu");
});