$(function(){
    // scroller
    $('.videos-container #videos').serialScroll({
        //target:'#videos ul',
        items:'li',
        duration:400,
        step: 8, // 3 items par page
        next: ".pager .next",
        prev: ".pager .previous",
        axis: "x",
        //exclude: 3,
        onBefore:function( e, elem, $pane, $items, pos ){
            /*if (console) {
                console.log(elem);
            }*/
            // cacher le lien previous/next si on est à la limite
            var $prev = $('.pager .previous');
            var $next = $('.pager .next');
            $($prev).add($next).show();
            if (pos == 0) {$prev.hide();}
            if (pos == 24 ){$next.hide();}
            $(".pager li").removeClass("selected");
            
            function cls(){
                var c = (pos / 8) + 1;
                return c;
            }
            
            $(".pager a." + cls()).parent().addClass("selected");
        },
        onAfter:function( elem ){
            /*if (console) {
                console.log(elem);
            }*/
		},
        force: true // on force à revenir au premier élément,
                    // car si on fait reload il reste sur le même élément, et comme on cache le lien previous ça cause problème.
    });
    $('.pager .previous').hide();
    
    function pageClick(){
        $(".pager li").removeClass("selected");
        $(this).parent().addClass("selected");
        $(".videos-container .videos ul").trigger( 'goto', [ 8 * (parseInt($(this).attr("class")) - 1)  ] );
    }
    
    // pager
    $('.pager a.1').add(".pager a.2").add(".pager a.3").add(".pager a.4").click(pageClick);
    
    // flowplayer avec vidéo d'intro!
    $('#player .player').flowplayer('flash/flowplayer.swf', {
        autoPlay: true
		, plugins: { 
            controls : { url: 'flash/flowplayer.controls.swf' }
        }
		, play: {
            replayLabel: 'Rejouer'
        }
		, playlist: [
            'img/player.png'
            , { url: $('#player .video-default').attr('href'), autoPlay: false }
        ]
    });
	if (flowplayer(0)) {
		flowplayer(0).load();
	}
    // changer la video sur clique des thumbnails!
    $('.videos ul li a').click(function(event) {
        var $this = $(this);
        var href = $this.attr('href');
        if (href && href != "#") {
            $('#player .player').flowplayer(0).play({
                url: href
            });
            var $divText = $('.videoText', $this.parent());
            $('#videoText').html($divText.html());
        }
        return false;
    });
    
    // se rendre à la recette
    $("div.osez form input").click(function(){
        var sel = $(this).parent().children("select");
        window.open(sel.val());
    });
});