//$(function() {
$(document).ready(function(){
    //load lecemc
    $('.link-phvd').click(function(){        
        phvdSlide($(this));
    }).mouseover(function(){
            $(this).addClass('hover');
        }).mouseout(function(){
            $(this).removeClass('hover');
        });;
});

    function phvdSlide(obj){
        var idObj=obj.attr('id');
        
        $('#phvd-menu div').removeClass('selected');
        obj.addClass('selected');

        var contentSlide='';
        $('#phvd-scroll-content').hide();
        $('#phvd-scroll-content').html('Loading...');
        loadXML(ressourcesXML+'video-'+idObj.replace(/^phvd-/,'')+'.xml', function(xml){
            
            $(xml).find('reg').each(function(){
                var href=$(this).find('resource').text();
                
                contentSlide+='<div class="scroll-content-item"><div class="content">'+
                    '<div class="thumb" id="thumb-block-'+$(this).attr('id')+'">'+
                        '<a href="'+href+'">'+
                            '<img src="ressources/photo-video/thumb/'+$(this).find('thumb').text()+'" height="200" />'+
                        '</a>'+
                    '</div>'+
                    '<div class="date">'+$(this).find('date').text()+'</div>'+
                    '<div class="title">'+replaceXMLtoHTML($(this).find('title').text())+'</div>'+
                '</div></div>';
            });
            $('#phvd-scroll-content').html(contentSlide);
            $('#phvd-scroll-content').fadeIn(1500);
            var contWidth=0;
            $('.scroll-content-item').each(function(){
                contWidth=contWidth+$(this).width();
            });

            $('#phvd-scroll-content').width(contWidth);
            inicioSlider(contWidth);
        });
    }

    
    function inicioSlider(){

        $('#phvd-slider').html('<div id="scroll-bar-wrap"><div id="scroll-bar"></div></div>');

        $('.scroll-content-item a').fancybox();

        //scrollpane parts
        var scrollPane = $('#scroll-pane');
        var scrollContent = $('#phvd-scroll-content');

        //build slider
        var scrollbar = $("#scroll-bar").slider({
                slide:function(e, ui){
                    if( scrollContent.width() > scrollPane.width() ){
                        var factor=Math.round( ui.value / 100 * ( scrollPane.width() - scrollContent.width() ));
                        scrollContent.css('margin-left',  factor+ 'px');
                        var porc=Math.round(factor/( scrollPane.width() - scrollContent.width())*100);
                        $('.ui-slider-handle').attr('title',porc+'%');
                    }
                    else {scrollContent.css('margin-left', 0);}
                }
        });
        scrollbar.width('98%');
        //append icon to handle
        var handleHelper = scrollbar.find('.ui-slider-handle')
            .append('<img src="images/slifer-icon.png"/>')
            .wrap('<div class="ui-handle-helper-parent"></div>').parent();

        //change overflow to hidden now that slider handles the scrolling
        scrollPane.css('overflow','hidden');

        //reset slider value based on scroll content position
        function resetValue(){
                var remainder = scrollPane.width() - scrollContent.width();
                var leftVal = scrollContent.css('margin-left') == 'auto' ? 0 : parseInt(scrollContent.css('margin-left'));
                var percentage = Math.round(leftVal / remainder * 100);
                scrollbar.slider("value", percentage);
        }
        //if the slider is 100% and window gets larger, reveal content
        function reflowContent(){
                        var showing = scrollContent.width() + parseInt( scrollContent.css('margin-left') );
                        var gap = scrollPane.width() - showing;
                        if(gap > 0){
                                scrollContent.css('margin-left', parseInt( scrollContent.css('margin-left') ) + gap);
                        }
        }

        //change handle position on window resize
        $(window).resize(function(){
                resetValue();
                reflowContent();
                $('#phvd-scroll-content').css('background-image','none');
        });
        
    }