$(document).ready(function(){
			
	
     // execute your scripts when the DOM is ready. This is a good habit 
    $(function() { 
        var main_api = $("div.videos").scrollable({  
                                            size: 1,
                                            prev: ".main_prev", 
                                            next: ".main_next",
                                            clickable: false
                                            }).mousewheel({speed: 400, api: true });

        var thumbs_api = $("div.navigation").scrollable({
        												vertical:true,
                                                        size: 3,
                                                        prev: ".scrollUp", 
                                                        next: ".scrollDown",
                                                        items: "li",
                                                        clickable: true
                                                     	}).mousewheel({speed: 400, api: true });
                                                     	
         
                                                         
       
 		
        

        
		
        // set fading on all thumbs except the one at index
        	thumbs_api.setFade = function(index) {
            thumbs_api.getItems().fadeTo("fast",0.2); 
            thumbs_api.getItems().eq(index).stop().fadeTo("fast",1);
            main_api.getItems().fadeTo("fast",0.2);
            main_api.getItems().eq(index).stop().fadeTo("fast",1);
        };

        // the initial state
        
        thumbs_api.setFade(0);
        
       $('.nav_items li.desc a').click(function(index) {
      	thumbs_api.setFade(index);
        //thumbs_api.seekTo(9);
        });

        // - scroll the main scrollable according to the clicks on the thumbs
        // - set the fading to thumbs accordingly
        // Rem.
        //   - getClickIndex requires clickable: true
        //   - We can use seekTo to scroll the main scrollable as it presents only
        //     a single image in its viewport
       

$('.nav_items li:eq(index)').click(function() { 
         	
         	
         	thumbs_api.clicked = true;
        	thumbs_api.setFade(index);
         	main_api.seekTo(index);
       		}); 

/*
$('.nav_items li').hover(function() {
			$(this).append('<span class="bug">'+ indexed +'</span>');	
				
				},
				function() {
				$('.bug').remove();
				
				});
*/

        // - scroll the thumb scrollable according to the scroll of the main
        //   scrollable when it is scroll directly (click on the image, use of
        //   the mousewheel or the main control buttons)
        // Rem.
        //   - onBeforeSeek callback is called at each time the main scrollable
        //     is scrolled, even when it is due to a thumb click. We use a state
        //     variable to avoid double effects
        //   - requires scrollable 1.1.1 (bugfix on callback for onSeek and
        //     onBeforeSeek)
        main_api.onBeforeSeek(function (jq_event, index){
            if (! thumbs_api.clicked) {
                thumbs_api.setFade(index);
               thumbs_api.seekTo(index);
           }
        });

        // reset the state variable after each main scroll
        main_api.onSeek(function (jq_event, index){
            thumbs_api.clicked = false;
        });

    });
        	
	$("a[rel^='prettyPhoto']").prettyPhoto({theme:'light_square'});
			
	});