//<script type="text/javascript">

/**
 * @desc Video page ajax loading, event handling and page control.
 * @author Bojan Popadic
 * @version 1.0
 */
$(document).ready(function() {
    
    /** Common site URL **/
    var COMMON_URL = 'http://' + $.tv2common;

    /** Row clip limit **/
    var ROW_CLIPS = 6;

    /** Animation speed **/
    var ANI_SPEED = 300;

    /** Player dimensions **/
    var PLAYER_WIDTH = 647;
    var PLAYER_HEIGHT = 364;

    /** Tab vars **/
    var DEFAULT_TAB = 'nyheder';
    var tab = 'nyeste';

    /** Paging constants **/
    var PAGE = {
        'nyh0600' : {'header' : 'Nyhederne 06:00', 'index' : 0, 'loading' : false},
        'nyh0900' : {'header' : 'Nyhederne 09:00', 'index' : 0, 'loading' : false},
        'nyh1900' : {'header' : 'Nyhederne 19:00', 'index' : 0, 'loading' : false},
        'nyh2200' : {'header' : 'Nyhederne 22:00', 'index' : 0, 'loading' : false}
    };
    var MAX_PAGES = 30;
    var DAY_MAP = {'0' : 'Søndag', '1' : 'Mandag', '2' : 'Tirsdag', '3' : 'Onsdag', '4' : 'Torsdag', '5' : 'Fredag', '6' : 'Lørdag'};
    var SECTIONS = {'newsmagasiner' : 'News Magasiner'};

    /** Default header **/
    var d = new Date();
    var DEFAULT_HEADER = $('<div class="video-info"></div>').append($('<h2>TV 2 | NYHEDERNE</h2>'))
                        .append($('<span>'+d.getHours()+':'+d.getMinutes()+' '+d.getDate()+'-'+(d.getMonth()+1)+'-'+d.getFullYear()+'</span>'))
                        .append($('<p>Få et hurtigt overblik over dagens begivenheder<p>'));

    /** Play video clip given video id **/
    var playClip = function(li, item) {
        if (li != null) {
            $('#videotabs-tabs ol.video-list li.selected').removeClass('selected');
            $(li).addClass('selected');
        }
        var xml = COMMON_URL+'/flashplayer/playlist.xml.php/autoplay-1/clipid-'+item.id+'.xml';
        $('#video-player').css('background-image', 'none');
        $('#video-player').empty().flash({
                src: COMMON_URL+'/flash/videoplayer.swf',
                width: PLAYER_WIDTH, height: PLAYER_HEIGHT,
                allowfullscreen: 'true', allowscriptaccess: 'always',
                wmode: 'transparent',
                quality: 'high', bgcolor: '#000000',
                name: 'videoclip', id: 'videoclip',
                flashvars: {
                    xmlfile: xml,
                    player_id: 'video_nyhederne',
                    adtech_alias: 'player_nyhederne',
                    domain: 'nyhederne.tv2.dk',
                    adtech_group: TV2Helios.IqGroup
                }
        });
        $link = $('<input class="link" value="http://'+$.tv2nyhederne+'/video/index/id/'+item.id+'/" />').click(
            function() { this.select(); }
        );
        $('#video-player').append(
            $('<div class="video-info"></div>').append($('<h2></h2>').html(item.title))
                .append($('<span>'+item.time+'</span>')).append($('<p>'+item.description+'</p>'))
                .append($('<div class="link">Link: </div>').append($link))
        );
        $('html, body').animate({scrollTop: $('#content').offset().top-20}, ANI_SPEED);
    };
    
    /** Generate default video player if video is not preselected via URL id parameter **/
    var $player = $('#video-player');
    var videoId = $('#video-param-id').html();
    if (!isNaN(videoId) && videoId != '') {
        $.getStaticJSONPZF('/video/clipinfo/id/'+videoId, function(data) {
            playClip(null, data);
        });
    } else {
        $player.flash({
                src: '/flash/nyhedernepausefisk.swf',
                width: PLAYER_WIDTH, height: PLAYER_HEIGHT,
                wmode: 'transparent'
        }).append(DEFAULT_HEADER);
    }

    /** Get video data **/
    var load = function(key, day) {
        var enableDays = (typeof(PAGE[key]) != 'undefined');
        var url = '/video/data/tag/'+key;
        $videotab = $('#video-tab-'+key);
        var d = null;

        /** If paging is enabled **/
        if (enableDays) {
            url += '/day/'+day;
            var $page = $('#video-tab-'+key+' ol.video-list.page'+PAGE[key].index);
            if ($page.size() > 0) {
                $selected = $videotab.find(' ol.video-list.selected');
                $selected.animate(
                    {opacity : 0}, ANI_SPEED, 'linear', function() {
                        $selected.removeClass('selected');
                        $('#video-top-navi-'+key+' .page-day').html($videotab.find('ol.video-list.page'+day+' div.pagedate').html());
                        $videotab.find('ol.video-list.page'+day).addClass('selected').animate(
                            {opacity : 1}, ANI_SPEED, 'linear', function() {
                                PAGE[key].loading = false;
                            }
                        );
                    }
                );
                return;
            }
        }

        $('#video-top-navi-'+key+' .small-ajax-loader').animate({opacity: 1}, ANI_SPEED, 'linear');
        
        var section = '';
        $.getStaticJSONPZF(url, function(data) {
            if (data.length == 0) {
                $('#video-top-navi-'+key+' .small-ajax-loader').animate({opacity: 0}, ANI_SPEED, 'linear');
                // Fixme: page indexes wrong if enabled since returning...
                return;
            }
            var is_sections = (typeof(SECTIONS[key]) != 'undefined');
            var $row = null;
            $html = $('<ol class="video-list page'+day+'"></ol>');
            $.each(data, function(i, item) {
                if (i == 0) d = new Date(item.created*1000);
                if (is_sections && section != item.section) {
                    $html.append('<div class="section-header"><h2>'+item.section+'</h2></div>');
                    section = item.section;
                }
                if ($row == null || $row.children().size() == ROW_CLIPS) {
                    $row = $('<ol class="row"></ol>');
                    $html.append($row);
                }

                $li = $([
                    '<li class="video video-id-', item.id, '">',
                        '<a href="','http://'+$.tv2nyhederne+'/video/index/id/'+item.id+'/','">',
                        '<div class="play-button"></div>',
                        '<img width="149" height="84" alt="" src="'+item.img+'" />',
                        '<b class="title">', item.title, '</b>',
                        '<span class="description">', item.description, '</span>',
                        '<span class="time">', item.time, '</span>',
                        '</a>',
                    '</li>'
                ].join(''));
                $row.append($li);
            });
            
            var show = function() {
                $selected = $videotab.find(' ol.video-list.selected');
                var pageDate = DAY_MAP[d.getDay()]+' d. '+d.getDate()+'.'+(d.getMonth()+1)+'.'+d.getFullYear();
                if ($selected.size() > 0) {
                    $selected.animate({opacity : 0}, ANI_SPEED, 'linear', function() {
                        $selected.removeClass('selected');
                        $html.addClass('selected');
                        $html.append($('<div class="pagedate" style="display:none"></div>').html(pageDate));
                        $('#video-top-navi-'+key+' .page-day').html(pageDate);
                        $videotab.append($html).animate({opacity : 1}, ANI_SPEED, 'linear', function() { if (enableDays) PAGE[key].loading = false; });
                    });
                } else {
                    $html.addClass('selected');
                    $html.append($('<div class="pagedate" style="display:none"></div>').html(pageDate));
                    $('#video-top-navi-'+key+' .page-day').html(pageDate);
                    $videotab.append($html).animate({opacity : 1}, ANI_SPEED, 'linear');
                }
                $('#video-top-navi-'+key+' .small-ajax-loader').animate({opacity: 0}, ANI_SPEED, 'linear');
            };
            $videotab.animate({opacity : 1}, ANI_SPEED, 'linear', function() { show(); }).removeClass('ajax-loader').find('span.ajax').remove();
        });

        /* initialize a event delegator */
        $videotab.closest('.tab-content').click(function(event) {
            event.preventDefault();
            var $target = $(event.target),
                $li = $target.closest('li');

            /* escape if no video is found */
            if ($li.length !== 1 && !$li.hasClass('video')) return;

            var vidId = /video-id-([0-9]*)/.exec($li[0].className);

            if (vidId && vidId[1]) {
                /* parse the data and send it to the playClip method */
                playClip($li[0], {
                    'id' : parseInt(vidId[1], 10),
                    'title' : $li.find('b.title').text(),
                    'description' : $li.find('span.description').text(),
                    'time' : $li.find('span.time').text()
                });
            }
            
            return;
        });
    };

    /** create paging button **/
    var button = function(type, key) {
        var $button = $('<div class="button '+type+(type == 'right' ? ' disabled' : '')+'"></div>');
        $button.hover(
            function() { $(this).addClass('hover'); },
            function() { $(this).removeClass('hover'); }
        );
        $button.click(function() {
            if (PAGE[key].loading == true)
                return;
            var $left = $('#video-top-navi-'+key+' .button.left');
            var $right = $('#video-top-navi-'+key+' .button.right');
            if (type == 'right') {
                if (PAGE[key].index  <= 0) return;
                if (PAGE[key].index == 1) $right.addClass('disabled');
                PAGE[key].loading = true;
                PAGE[key].index--;
                $left.removeClass('disabled');
            } else if (type == 'left') {
                if (PAGE[key].index >= MAX_PAGES-1) return;
                if (PAGE[key].index == MAX_PAGES-2) $left.addClass('disabled');
                PAGE[key].loading = true;
                PAGE[key].index++;
                $right.removeClass('disabled');
            }
            load(key, PAGE[key].index);
        });
        return $button;
    };

    /** Add paging and header to video tab **/
    var paging = function(key) {
        $paging = $('<div class="video-top-navi" id="video-top-navi-'+key+'"></div>');
        $paging.append($('<h2></h2>').html(PAGE[key].header));
        $page_day = $('<div class="page-day">&nbsp;</div>');
        $page_day.get(0).onselectstart = function() { return false; };
        $loader = $('<div class="small-ajax-loader disabled"></div>');
        $navi = $('<div class="vp-navi"></div>').append($loader).append(button('left', key)).append($page_day).append(button('right', key));
        $paging.append($navi);
        $('#video-tab-'+key).before($paging);
    };


    /* Other tabs will load on first click */
    $('#videotabs-tabs .ui-state-default.ui-corner-top a:not(.ui-state-active a)').one('click', function() {
        var key = $(this).attr('class');
        if (typeof(PAGE[key]) != 'undefined') { // header + paging needed ?
            paging(key);
        }
        load(key, 0);
    });

    
    /* Load default tab */
    $tabs = $('#videotabs-tabs .ui-state-default.ui-corner-top a.'+tab);
    if (tab != DEFAULT_TAB && $tabs.length > 0) { $tabs.click(); }
    else { load(DEFAULT_TAB, 0); }

    if (tab != DEFAULT_TAB) {
        $('#videotabs-tabs .ui-state-default.ui-corner-top a.'+DEFAULT_TAB).one('click', function() {
            if (typeof(PAGE[DEFAULT_TAB]) != 'undefined') { paging(DEFAULT_TAB); }
            load(DEFAULT_TAB, 0);
        });
    }

    /*** START of SONY's video skin link ***/
    $('#video-player').prepend('<a class="sony-tv-link" href="http://track.adform.net/C/?bn=360554" target="_blank"></a>');
    $('#video-player').prepend('<img src="http://track.adform.net/adfserve/?bn=360554;1x1inv=1;srctype=3;ord=[timestamp]" border="0" width="1" height="1" />');
    /*** END of SONY's video skin link ***/
});