function InitMediaPlayerControl(WebSiteRoot, thumbsPerPage) {
    // select one or more elements to be scrollable-enabled
    $("div.scrollable").scrollable({
        // one configuration property
        size: thumbsPerPage
        // ... rest of the configuration properties
    });

    //Init flowplayer
    //See http://flowplayer.org/documentation/configuration/ for documentation
    $f("videoPlayer", { src: WebSiteRoot + "MediaPlayer/FlowPlayer/flowplayer-3.1.0.swf", wmode: 'transparent' }, {
        // don't start automcatically
        clip: {
            autoPlay: true,
            autoBuffering: false,
            onFinish: function() {
                //this.pause();
                this.stop();
            },
            scaling: 'scale'
        },
        plugins: {
            controls: {
                url: 'flowplayer.controls-3.1.0.swf',
                autoHide: 'always',
                hideDelay: 1000
            }
        }
    });

    $.metadata.setType("attr", "data")

    $f("videoPlayer").hide();
    $("#imgLargeImage").hide();
    $("#playIconLarge").hide();

    //Select first file
    DisplayGalleryFile($("div.scrollable").find('li:first'), true);
    var api = $("div.scrollable").scrollable();
    api.click(0);

    //Hide thumbnails if only one image
    if ($("div.scrollable").find('li').size() < 2) {
        $("div.ThumbFrame").hide();
    }
}

function DisplayGalleryFile(currentItem, isFirst) {
    var selectedImage = $(currentItem).find('img')[0];
    if ($(selectedImage).metadata().movie == 'True') {


        if (isFirst) {
            $f("videoPlayer").stop();
            $f("videoPlayer").hide();
            $("#imgLargeImage").show();
            $("#playIconLarge").show();

            var newSrc = $(selectedImage).attr('src').replace("&ps=" + $(selectedImage).metadata().PredefinedSettingThumb, "&ps=" + $(selectedImage).metadata().PredefinedSettingDisplayedImage);
            $("#imgLargeImage").attr('src', newSrc.replace("?id=" + $(selectedImage).metadata().smallPlayIconFileID, "?id=" + $(selectedImage).metadata().largePlayIconFileID));

            $("#imgLargeImage").attr('alt', $(selectedImage).attr('alt'));
            $("#imgLargeImage").attr('title', $(selectedImage).attr('title'));
            $("#imgLargeImage").click(function() {
                DisplayGalleryFile(currentItem, false);
            });
            $("#playIconLarge").click(function() {
                DisplayGalleryFile(currentItem, false);
            });
        }
        else {
            $f("videoPlayer").show();
            $("#imgLargeImage").hide();
            $("#playIconLarge").hide();
            $f("videoPlayer").stop();
            $f("videoPlayer").play($(selectedImage).metadata().displayFileUrl);
        }
    }
    else {
        $("#imgLargeImage").unbind('click');
        $("#playIconLarge").unbind('click');
        $("#playIconLarge").hide();
        $f("videoPlayer").stop();
        $f("videoPlayer").hide();
        $("#imgLargeImage").show();

        $("#imgLargeImage").attr('src', $(selectedImage).attr('src').replace("&ps=" + $(selectedImage).metadata().PredefinedSettingThumb, "&ps=" + $(selectedImage).metadata().PredefinedSettingDisplayedImage));
        $("#imgLargeImage").attr('alt', $(selectedImage).attr('alt'));
        $("#imgLargeImage").attr('title', $(selectedImage).attr('title'));
    }

    //Correction is neaded because videoplayer has not been visible yet
    if ($("#imgLargeImage").is(':visble')) {
        var imagePosition = $("#imgLargeImage").offset().top;
        var videoPosition = $("#video").offset().top;
        if (videoPosition + 1 == imagePosition) {
            $("#imgLargeImage").css("top", 16 + "px");
        }
    }

    var description = $(selectedImage).metadata().descr
    $("#pDescription").html(description);
}