$(function() {
    
    var scroller = $('#scroller').scrollable({
       size: 1,
       loop: true,
       circular: true
    })
    .autoscroll({
       interval: 6000,
       api: true
    });
    
    $('#video-thumb').click(function() {
        Overlay.mask('body', 'mask', 0.9, '#000');
        $('body').append("<div id='player'><div class='close'>CLOSE X</div><a href='/content/video/aca.mp4' id='video'></a></div>");
        var top = $('html').scrollTop();
		if (top < 1) {
			top = $('body').scrollTop();
		}
		var diff = $(window).height() / 2;
		top = top + diff;
        $('#player').css('top', top + 'px');
        Player.load();
        $('#player .close').click(function() {
            $('#player').remove();
            Overlay.unmask('body', 'mask');
        });
    });
        
});

var Player = {

    load: function() {
    
        $f("video", "/ui/js/flowplayer/flowplayer-3.1.5.swf", {
    
            canvas: {
                backgroundColor: "#000" 
            },
    
            clip: {
                autoPlay: true,
                autoBuffering: true
            },
    
            plugins: {
               controls: {
                  backgroundColor: '#ffffff',
                  bufferGradient: 'none',
                  tooltipColor: '#999999',
                  sliderColor: '#1A1A1A',
                  timeColor: '#999999',
                  progressGradient: 'medium',
                  timeBgColor: '#1A1A1A',
                  volumeSliderColor: '#1A1A1A',
                  sliderGradient: 'none',
                  volumeSliderGradient: 'none',
                  durationColor: '#666666',
                  buttonColor: '#1A1A1A',
                  progressColor: '#666666',
                  borderRadius: '0',
                  bufferColor: '#1A1A1A',
                  buttonOverColor: '#666666',
                  backgroundGradient: 'low',
                  tooltipTextColor: '#ffffff',
                  height: 25,
                  autoHide: 'always',
                  opacity: 1.0
               }
            }
        });
    }

};

var Overlay = {

    curIndex: 1000,

    mask: function(elm, id, opacity, color){
        if (elm === 'body') {
            $('body').prepend("<div id='" + id + "'></div>");

        } else if ($('#' + elm).length) {
            $('#' + elm).prepend("<div id='" + id + "'></div>");

        }
        var parent = $('#' + id).parent();
        $('#' + id).css({
            display: 'block',
            height: parent.height(),
            width: parent.width(),
            position: 'fixed',
            left: parent.position().left,
            top: parent.position().top,
            'z-index': Overlay.curIndex,
            opacity: opacity,
            background: color
        });
        Overlay.curIndex++;

        if ($('body').height() < $(window).height()) {
            $('#' + id).height($(window).height());
        }
    },

    unmask: function(elm, id) {
        $('#' + id).remove();
        Overlay.curIndex--;
    }
};