onDailymotionPlayerReady = function(){
    player = document.getElementById('videoplayer');
    player.addEventListener('onStateChange', 'DM_Widget_PageItem_Navigation.playerStateChangeHandler');

    vsStat();
}


var DM_Widget_PageItem_Navigation =
{
    itemByPage:             5,      // nb item we can see
    speed:                  26,     // max global speed
    acceleration:           1.2,    // smaller means faster
    showItemInfosDelay:     .65,
    hideItemInfosDelay:     .05,    // must be at last .02
    showItemInfosDuration:  .2,
    hideItemInfosDuration:  .1,
    itemByClic:             4,      // nb of item to pass when clic on next/prev
    reloadMasscast: true,

    // env variable
    videoList:              new Array(),

    // status variable
    itemNum:                0,      // video total
    itemWidth:              null,
    working:                false,  // if true then animation is running
    setuped:                false,  // if true everything is ready
    lastSpeed:              0,
    timeout:                null,
    count:                  1,      // incrase up to 100 to drive animation
    mouseDown:              false,
    infoShowTimeout:        null,
    infoHideTimeout:        null,
    leftItem:               0,      // navigation left item's number
    item:                   0,      // curently playing item's number
    clickBuffer:            0,      // animation will replay until buffer is empty
    loadVideoTimeout:       null,
    playerStopTimeout:      null,   // avoid player always calling twice its callback (bug)
    currentVideoId:         null,
    currentPlaylistId:      null,
    currentUserLogin:       null,
    currentHash:            '',
    active:                 false,  // must be true to load the widget on window's loading
    loadedVideos:           0,
    location:               null,
    volumeState:            3,
    group:                  null,
    masscastLocation:       null,
    _by:                    null,


    /**********************************
    *  INIT
    **********************************/

    preLoad: function()
    {
        // leave active to false if you plan to setup the widget manualy after page is loaded
        if (this.active)
        {
            // automaticaly setup widget at page's loading
            var hash = window.document.location.hash;
            this.videoList = this.videoList.evalJSON(true);
            EventSelectors.start(this.rules);

            // if there is a has in the url
            if (hash.blank())
            {
                this.setupWidget(0);
            }
            else
            {
                this.currentHash = hash;
                this.goToRequest(hash.substring(1));
            }
        }

        // watch if hash changes
        new PeriodicalExecuter(this.checkHashChanges.bind(this), .1);
    },

    setupWidget: function(itemNumber)
    {
        // setup the widget and set focus on itemNumber
        this.itemNum = this.videoList.length;
        this.leftItem = 0;
        this.item = itemNumber;
        this.initList();
        this.checkLinksVisibility();
        this.hideItemInfos();
        this.loadVideo(itemNumber);
        this.setuped = true;
    },

    initList: function ()
    {
        // empty then build the list ...
        $('navigation_list_content').update();

        var from = this.leftItem * this.itemByPage;
        var to = from + this.itemByPage;
        to = (to > this.itemNum) ? this.itemNum : to;
        for (var i = from; i < to; i ++)
        {
            $('navigation_list_content').insert(this.newItem(i));
        }

        this.currentVideoId = this.videoList[this.item].video_id;

        var listWidth = $('navigation_list_content').getWidth();
        $('navigation_list').setStyle({
            'width': $('navigation_list').getWidth() + 'px'
        });
        $('navigation_list_content').setStyle({
            'width': (listWidth / this.itemByPage) + listWidth + 'px'
        });
    },


    /**********************************
    *  URL
    *
    *  USE SMALL ID, xd1e NOT xd1e_...
    **********************************/

    checkHashChanges: function(e)
    {
        if (this.currentHash != window.document.location.hash)
        {
            // if hash changed update widget according to it
            this.currentHash = window.document.location.hash;
            this.goToRequest(this.currentHash.substring(1));
        }
    },

    changeWindowHash: function(hash)
    {
        // this changes the hash avoiding the check
        this.currentHash = window.document.location.hash = hash;
    },

    goToPlaylist: function(playlistId)
    {
        // load a playlist and focus on the 1st video
        if (this.currentPlaylistId == playlistId)
        {
            if (!this.setuped)
            {
                this.setupWidget(0);
            }
            else
            {
                this.loadVideo(0);
            }
        }
        else
        {
            this.changeWindowHash('#playlist/' + playlistId);
            DM_WidgetV3.reload('div.dmpi_navigation', '/playlist/' + playlistId);
        }

        this.currentUserLogin = null;
        this.currentPlaylistId = playlistId;
    },

    goToPlaylistVideo: function(playlistId, videoId)
    {
        if (this.currentPlaylistId == playlistId && this.currentVideoId == videoId)
        {
            return;
        }
        // load a playlist and focus on a video
        else
        {
            this.changeWindowHash('#playlist/' + playlistId + '/video/' + videoId);

            if (this.currentPlaylistId == playlistId)
            {
                for (var i = 0; i < this.videoList.length; i ++)
                {
                    if (this.videoList[i].video_id == videoId)
                    {
                        if (!this.setuped)
                        {
                            this.setupWidget(i);
                            break;
                        }
                        else
                        {
                            this.loadVideo(i);
                            break;
                        }
                    }
                }
            }
            else
            {
                DM_WidgetV3.reload('div.dmpi_navigation', '/playlist/' + playlistId, {
                    'videoId': videoId
                });
            }
        }

        this.currentUserLogin = null;
        this.currentPlaylistId = playlistId;
        this.currentVideoId = videoId;
    },

    goToUser: function(userLogin)
    {
        // load a user's videos or playlist and focus on 1st video
        if (this.currentUserLogin == userLogin)
        {
            if (!this.setuped)
            {
                this.setupWidget(0);
            }
            else
            {
                this.loadVideo(0);
            }
        }
        else
        {
            this.changeWindowHash('#' + userLogin);
            DM_WidgetV3.reload('div.dmpi_navigation', '/' + userLogin);
        }

        this.currentPlaylistId = null;
        this.currentUserLogin = userLogin;
    },

    goToUserVideo: function(userLogin, videoId)
    {
        // load a user's videos or playlist and focus on a video
        if (this.currentUserLogin == userLogin && this.currentVideoId == videoId)
        {
            return;
        }
        else
        {
            this.changeWindowHash('#' + userLogin + '/video/' + videoId);

            if (this.currentUserLogin == userLogin)
            {
                for (var i = 0; i < this.videoList.length; i ++)
                {
                    if (this.videoList[i].video_id == videoId)
                    {
                        if (!this.setuped)
                        {
                            this.setupWidget(i);
                            break;
                        }
                        else
                        {
                            this.loadVideo(i);
                            break;
                        }
                    }
                }
            }
            else
            {
                DM_WidgetV3.reload('div.dmpi_navigation', '/' + userLogin, {
                    'videoId': videoId
                });
            }
        }

        this.currentPlaylistId = null;
        this.currentUserLogin = userLogin;
        this.currentVideoId = videoId;
    },

    goToVideo: function(videoId)
    {
        // focus on a video (if it is in the list)
        if (!videoId)
        {
            this.videoId = arguments[0];
        }

        if (this.currentVideoId == videoId)
        {
            return;
        }
        else
        {
            if (this.currentPlaylistId)
            {
                this.changeWindowHash('#playlist/' + this.currentPlaylistId + '/video/' + videoId);
            }
            else if (this.currentUserLogin)
            {
                this.changeWindowHash('#' + this.currentUserLogin + '/video/' + videoId);
            }
            else
            {
                return;
            }

            for (var i = 0; i < this.videoList.length; i ++)
            {
                if (this.videoList[i].video_id == videoId)
                {
                    if (!this.setuped)
                    {
                        this.setupWidget(i);
                        break;
                    }
                    else
                    {
                        this.loadVideo(i);
                        break;
                    }
                }
            }
        }

        this.currentVideoId = videoId;
    },

    goToRequest: function(request)
    {
        // analyse a request to load the right content
        playlistId = 'undefined';
        userLogin = 'undefined';
        videoId = 'undefined';

        // retrieve a playlist id, and shorten it if it's extended
        if (request.match(/^\/*playlist\/([0-9a-zA-Z_-]+).*$/)){
            var playlistId = request.gsub(/^\/*playlist\/([0-9a-zA-Z_-]+).*$/, function(match){
                if (match[1].match(/_/)){
                    return match[1].gsub(/^([0-9a-zA-Z]+)_.*$/, function(match){
                        return match[1];
                    });
                }
                else
                {
                    return match[1];
                }
            });
        }

        // retrieve a user login
        if (request.match(/^\/*([0-9a-zA-Z_-]+).*$/)){
            var userLogin = request.gsub(/^\/*([0-9a-zA-Z_-]+).*$/, function(match){
                return match[1];
            });
        }

        // retrieve a video id, and shorten it if it's extended
        if (request.match(/^.*video\/([0-9a-zA-Z_-]+)$/)){
            var videoId = request.gsub(/^.*video\/([0-9a-zA-Z_-]+)$/, function(match){
                if (match[1].match(/_/)){
                    return match[1].gsub(/^([0-9a-zA-Z]+)_.*$/, function(match){
                        return match[1];
                    });
                }
                else
                {
                    return match[1];
                }
            });
        }

//         dbg('playlistId = ' + playlistId);
//         dbg('userLogin = ' + userLogin);
//         dbg('videoId = ' + videoId);

        // analyse the situation and do the right thing
        if (userLogin == 'undefined' && playlistId == 'undefined')
        {
            if (!this.setuped)
            {
                this.setupWidget(0);
            }
            else
            {
                this.loadVideo(0);
            }
        }
        else if (userLogin == 'playlist')
        {
            if (videoId == 'undefined')
            {
                this.goToPlaylist(playlistId);
            }
            else
            {
                this.goToPlaylistVideo(playlistId, videoId);
            }
        }
        else if (userLogin != 'video')
        {
            if (videoId == 'undefined')
            {
                this.goToUser(userLogin);
            }
            else
            {
                this.goToUserVideo(userLogin, videoId);
            }
        }
        else
        {
            // wrong request
            // this.changeWindowHash('');
        }
    },


    /**********************************
    *  Links
    **********************************/

    hideAllLink: function()
    {
        // hide all navigation buttons
        $('navigation_previous_link').hide();
        $('navigation_next_link').hide();
        $('navigation_rollback_link').hide();
    },

    checkLinksVisibility: function()
    {
        // if we are at the begining of the list
        if (this.leftItem == 0)
        {
            $('navigation_previous_link').hide();
            // $('navigation_rollback_link').hide();
        }
        else
        {
            $('navigation_previous_link').show();
        }

        // if we are at the end of the list
        if (this.leftItem == this.itemNum - this.itemByPage)
        {
            $('navigation_next_link').hide();

            // if there is more than 1 page
            // if (this.itemNum > this.itemByPage)
            // {
                // $('navigation_rollback_link').show();
            // }
        }
        else
        {
            if (this.itemNum > this.itemByPage){
                $('navigation_next_link').show();
                // $('navigation_rollback_link').hide();
            }
            else
            {
                $('navigation_next_link').hide();
                // $('navigation_rollback_link').hide();
            }
        }
    },


    /**********************************
    *  List Movement
    **********************************/

    moveList: function(d, effect)
    {
        // if asked for effect 1 while we are working: exit
        if (effect == 1 && this.working)
        {
            return;
        }

        // remember we are working
        this.working = true;

        if (d == -1)
        {
            // add item at the end of the list
            var item = this.newItem(this.leftItem + this.itemByPage);
            $('navigation_list_content').insert(item);
        }
        else
        {
            // add item at the top of the list
            var item = this.newItem(this.leftItem - 1);
            $('navigation_list_content').insert({'top': item});
        }

        // launch animation
        this.itemWidth = item.getWidth() + 9;
        this.moveListCallback(d, effect);
    },

    moveListCallback: function()
    {
        var d = arguments[0];
        var effect = arguments[1];

        // count goes from 1 to 100
        if (this.count > 100)
        {
            var countMod =  this.count % 100;
             this.count = 100;
        }

        // calculate margin depending on direction and count value
        if (d == 1)
        {
            var margin = Math.floor((this.itemWidth / 100) * this.count) - this.itemWidth;
        }
        else
        {
            var margin = Math.floor((this.itemWidth / 100) * this.count) * -1;
        }
        $('navigation_list_content').childElements()[0].setStyle({'marginLeft': margin + 'px'});

        // if we reach the end of the animation
        if (this.count == 100){
            window.clearTimeout(this.timeout);

            // remove last item
            if (d == -1)
            {
                $('navigation_list_content').childElements()[0].remove();
            }
            else
            {
                $('navigation_list_content').childElements()[this.itemByPage].remove();
            }
            $('navigation_list_content').childElements()[0].setStyle({
                'marginTop': '0'
            });

            this.leftItem -= d;

            // if we can continue the animation
            if (this.leftItem > 0 && this.leftItem < this.itemNum - this.itemByPage)
            {
                // if mouse is still down or if we have queued clics
                if (this.mouseDown || this.clickBuffer > 0)
                {
                    // if effect was 1 we continue wiff effect 2 else we continue on the same effect
                    effect = (effect == 1) ? 2 : effect;

                    // the show must go on !
                    this.count = countMod + 1;
                    this.count = (!this.count) ? 1 : this.count;
                    this.moveList(d, effect);
                    this.clickBuffer --;
                    return;
                }
            }

            // or just stop
            this.count = 1;
            this.lastSpeed = 0;
            this.checkLinksVisibility();
            this.working = false;
        }else{
            // if using effect 1 accelerate
            if (effect == 1)
            {
                if (this.lastSpeed < this.speed)
                {
                    this.lastSpeed = this.count / this.acceleration;
                }
                else
                {
                    this.lastSpeed = this.speed;
                }

                this.count += this.lastSpeed;
            }
            // if effect 2 then do nothing (use last speed)
            else if (effect == 2)
            {
                if (this.lastSpeed < this.speed)
                {
                    this.lastSpeed = this.speed;
                }

                this.count += this.lastSpeed;
            }
            // if effect >= 3 then use max speed multiplied by effect number
            else if (effect >= 3)
            {
                this.count += this.speed * effect;
            }

            this.timeout = window.setTimeout(this.moveListCallback.bind(this, d, effect), 35);
            return;
        }
    },


    /**********************************
    *  List Item
    **********************************/

    newItem: function(n)
    {
        // create elements
        var item = new Element('div', {
            'id': 'navigation_list_item_' + n,
            'class': 'item'
        }).setStyle({
            'background': 'url(' + this.videoList[n].preview_uri + ')'
        });

        item.update(new Element ('span'));

        if (n == this.item)
        {
            item.addClassName('selected');
        }

        // observe item
        item.observe('click', this.itemMouseClick.bind(this, n));
        item.observe('mouseover', this.itemMouseOver.bind(this, n));
        item.observe('mouseout', this.itemMouseOut.bind(this));
        item.observe('mouseover', function(){
            this.toggleClassName('hover');
        });
        item.observe('mouseout', function(){
            this.toggleClassName('hover');
        });

        return item;
    },

    itemMouseClick: function()
    {
        var n = arguments[0];

        this.goToVideo(this.videoList[n].video_id);
        this.vsStat('kids/navigation_list_item_' + n);
    },

    itemMouseOver: function()
    {
        var n = arguments[0];

        // launch a timeout to display info bubble
        window.clearTimeout(this.infoShowTimeout);
        if ($('navigation_list_infos').visible())
        {
            this.infoShowTimeout = window.setTimeout(this.showItemInfos.bind(this, n), (this.hideItemInfosDelay + this.hideItemInfosDuration) * 1000);
        }
        else
        {
            this.infoShowTimeout = window.setTimeout(this.showItemInfos.bind(this, n), this.showItemInfosDelay * 1000);
        }
    },

    itemMouseOut: function()
    {
        // launch a timeout to hide info bubble
        window.clearTimeout(this.infoShowTimeout);
        this.infoHideTimeout = window.setTimeout(this.hideItemInfos.bind(this), this.hideItemInfosDelay * 1000);
    },

    showItemInfos: function()
    {
        var n = arguments[0];
        var infos = $('navigation_list_infos');
        var content = infos.down();
        var title = new Element('span').addClassName('title');
        var user = new Element('span').addClassName('user');

        // fill title
        title.update(this.videoList[n].video_title);

        // fill user
        user.insert(new Element('span').update(this._by));
        user.insert(new Element('a', {
            'href': this.videoList[n].user_uri
        }).update(this.videoList[n].user_login));

        // fill infos
        content.update();
        content.insert(title);
        content.insert(user);

        // adjust position
        var position = $('navigation_list_item_' + n).positionedOffset();
        infos.setStyle({
            'marginLeft': (position[0] + 20) + 'px'
        });

        // Show or Appear if not IE7
        if (navigator.userAgent.indexOf('MSIE 7.') != -1 || navigator.userAgent.indexOf('Chrome') != -1)
        {
            infos.show();
        }
        else
        {
            Effect.Appear(infos, {
                duration: this.showItemInfosDuration,
                queue: 'end'
            });
        }
    },

    hideItemInfos: function()
    {
        // Hide or Fade if not IE7
        if (navigator.userAgent.indexOf('MSIE 7.') != -1 || navigator.userAgent.indexOf('Chrome') != -1)
        {
            $('navigation_list_infos').hide();
        }
        else
        {
            Effect.Fade('navigation_list_infos', {
                duration: this.hideItemInfosDuration,
                queue: 'end'
            });
        }
    },


    /**********************************
    *  VIDEO
    **********************************/

    leftItemNumber: function(itemNumber)
    {
        // find what is the number of the left item
        var newLeftItem = itemNumber - Math.floor(this.itemByPage / 2);
        newLeftItem = (newLeftItem < 0) ? 0 : newLeftItem;
        if (newLeftItem > this.itemNum - this.itemByPage)
        {
            newLeftItem = this.itemNum - this.itemByPage;
        }
        return newLeftItem;
    },

    loadVideo: function(n)
    {
        window.clearTimeout(this.loadVideoTimeout);
        // launch a video in the player

        // manage focus class
        if (previousFocus = $('navigation_list_item_' + this.item))
        {
            previousFocus.toggleClassName('selected');
        }
        if (actualFocus = $('navigation_list_item_' + n))
        {
            actualFocus.toggleClassName('selected');
        }

        this.hideItemInfos();
        this.item = n;

        // calculate which video should be on the left
        var newLeftItem = this.leftItemNumber(n);

        // if different than actual
        if (newLeftItem != this.leftItem && this.itemNum > this.itemByPage)
        {
            // how many clic should we simulate ? then launch the animation
            var diff = newLeftItem - this.leftItem;
            this.clickBuffer = Math.abs(diff) - 1;
            if (diff < 0)
            {
                this.moveList(1, 3);
            }
            else
            {
                this.moveList(-1, 3);
            }
        }

        // update title and user's information
        $('player_video_title').update(this.videoList[n].video_title);
        var userLink = $$('#player_user_link a.login')[0];
        userLink.update(this.videoList[n].user_login);
        userLink.writeAttribute('title', this.videoList[n].user_login);
        userLink.writeAttribute('href', this.videoList[n].user_uri);

        this.loadVideoTimeout = window.setTimeout(this.loadVideoCallback.bind(this, n), 500);
    },

    loadVideoCallback: function()
    {
        var n = arguments[0];

        // the old way
        DM_WidgetV3.reload('div.dmpi_video_player', '/video/' + this.videoList[n].video_id, {
            'masscastLocation': this.masscastLocation,
            'playlist_id': this.getPlaylistId() ? this.getPlaylistId() : 0
        });

        // the best way
        // player.loadVideoById(this.videoList[n].video_id);

        // the not so good way
        //var player = new SWFObject('/swf/' + this.videoList[n].video_id + '?autoplay=1&callback=DM_Widget_PageItem_Navigation.videoCallback&enableJsApi=1&hide=controls,info,endpanel&setAutoPlay=true', 'video_player', '596', '445');
        //player.skipDetect = true;
        //player.addParam('allowScriptAccess', 'always');
        //player.addParam('bgcolor', '#000000');
        //player.write('player_container');

        this.loadedVideos++;
    },

    playerStateChangeHandler: function(code)
    {
        if (code == 1)
        {
            var playButton = $('navigation_controls_play');

            if (playButton.hasClassName('paused'))
            {
                playButton.removeClassName('paused');
            }
        }
        else if (code == 2)
        {
            var playButton = $('navigation_controls_play');

            if (!playButton.hasClassName('paused'))
            {
                playButton.addClassName('paused');
            }
        }
        else if (code == 3)
        {
            DM_Widget_PageItem_Navigation.initVolumeState();
        }
        else if (code == 0)
        {
            window.clearTimeout(DM_Widget_PageItem_Navigation.playerStopTimeout);
            DM_Widget_PageItem_Navigation.playerStopTimeout = window.setTimeout('DM_Widget_PageItem_Navigation.playerStopCallback();', 500);
        }
    },

    playerStopCallback: function()
    {
        $('navigation_controls_forward').onclick();
    },

    getVideoId: function(){
        return this.currentVideoId;
    },

    getPlaylistId: function(){
        if (this.currentPlaylistId)
        {
            return this.currentPlaylistId;
        }
        return false;
    },

    getUserLogin: function(){
        if (this.currentUserLogin)
        {
            return this.currentUserLogin;
        }
        return false;
    },

    initVolumeState: function()
    {
        var currentVolume = player.getVolume();

        if (currentVolume < 20)
        {
            this.setVolumeState(0, 0);
        }
        else if (currentVolume < 50)
        {
            this.setVolumeState(1, 0);
        }
        else if (currentVolume < 100)
        {
            this.setVolumeState(2, 0);
        }
        else
        {
            this.setVolumeState(3, 0);
        }
    },

    setVolumeState: function(state, h)
    {
        var muteButton = $('navigation_controls_mute');

        this.volumeState = state;

        switch (state)
        {
            case 0:
                player.setVolume(0);
                break;

            case 1:
                player.setVolume(20);
                break;

            case 2:
                player.setVolume(50);
                break;

            case 3:
                player.setVolume(100);
                break;
        }

        // dumb line because assets is dumb (it's reversed ...)
        pos = 3 - state;

        muteButton.setStyle({
            'margin': '-' + (48 * pos) + 'px 0 0 ' + '-' + (48 * h) + 'px'
        });
    },


    /**********************************
    *  CONTROLS
    **********************************/

    displayControls: function(toggle)
    {
        var buttonList = $('navigation_controlbox').childElements();

        if (typeof toggle == 'undefined' || !toggle)
        {
            for (var i = 0; i < buttonList.length; i ++)
            {
                buttonList[i].hide();
            }
        }
        else
        {
            for (var i = 0; i < buttonList.length; i ++)
            {
                buttonList[i].show();
            }
        }
    },


    /**********************************
    *  STATS
    **********************************/

    vsStat: function(action)
    {
        var param = {
            'log' : 1,
            'action': action,
            'locale': this.location,
            'group': this.group
        };

        var image = new Element('img', {
            'src': 'http://sense.dailymotion.com/images/vs/tag.gif?' + $H(param).toQueryString(),
            'id': 'vstag'
        });

        var oldImage = $('vstag');

        if (oldImage)
        {
            oldImage.remove();
        }

        $('bodyall').insert(image);
    },


    /**********************************
    *  RULES
    **********************************/

    rules:
    {
        '#navigation_previous_link' : function(element)
        {
            element.onclick = function()
            {
                this.vsStat('kids/navigation_previous_link');

                return false;
            }.bind(DM_Widget_PageItem_Navigation);

            element.onmousedown = function()
            {
                this.mouseDown = true;

                if (this.leftItem > 0)
                {
                    if (this.working == false)
                    {
                        // move
                        this.clickBuffer = this.itemByClic - 1;
                        this.moveList(1, 1);
                        this.hideItemInfos();
                    }
                    else
                    {
                        // we'll continue moving at the end of the animation
                        this.clickBuffer = 1;
                    }
                }
            }.bind(DM_Widget_PageItem_Navigation);

            element.onmouseup = element.onmouseout = function()
            {
                this.mouseDown = false;
            }.bind(DM_Widget_PageItem_Navigation);
        },

        '#navigation_next_link' : function(element)
        {
            element.onclick = function()
            {
                this.vsStat('kids/navigation_next_link');

                return false;
            }.bind(DM_Widget_PageItem_Navigation);

            element.onmousedown = function()
            {
                this.mouseDown = true;

                if (this.leftItem < this.itemNum - this.itemByPage)
                {
                    if (this.working == false)
                    {
                        // move
                        this.clickBuffer = this.itemByClic - 1;
                        this.moveList(-1, 1);
                        this.hideItemInfos();
                    }
                    else
                    {
                        // we'll continue moving at the end of the animation
                        this.clickBuffer = 1;
                    }
                }
            }.bind(DM_Widget_PageItem_Navigation);

            element.onmouseup = element.onmouseout = function()
            {
                this.mouseDown = false;
            }.bind(DM_Widget_PageItem_Navigation);
        },

        '#navigation_rollback_link' : function(element)
        {
            element.onclick = function()
            {
                // avoid link's action
                return false;
            };

            element.onmousedown = function()
            {
                if (this.working == false)
                {
                    this.clickBuffer = this.itemNum - this.itemByPage - 1;
                    this.moveList(1, 1);
                    this.hideAllLink();
                }
            }.bind(DM_Widget_PageItem_Navigation);

            element.onmouseover = element.onmouseout = function()
            {
                this.toggleClassName('hover');
            };
        },

        '#navigation_controls_reload' : function(element)
        {
            element.onclick = function()
            {
                // go to previous video if we clicked has video just began
                if (player.getCurrentTime() < 3 && player.getPlayerState() != 2 && this.item > 0)
                {
                    if (this.working == false)
                    {
                        this.goToVideo(this.videoList[this.item - 1].video_id);
                    }
                }
                // or go to at the bigining of the video
                else
                {
                    player.seekTo(0, false);
                    player.playVideo();
                }

                this.vsStat('kids/navigation_control_reload');

                return false;
            }.bind(DM_Widget_PageItem_Navigation);

            element.onmouseover = element.onmouseout = function()
            {
                this.toggleClassName('hover');
            };
        },

        '#navigation_controls_play' : function(element)
        {
            element.onclick = function()
            {
                if (player.getPlayerState() == 1)
                {
                    player.pauseVideo();
                }
                else
                {
                    player.playVideo();
                }

                this.vsStat('kids/navigation_control_play');

                return false;
            }.bind(DM_Widget_PageItem_Navigation);

            element.onmouseover = element.onmouseout = function()
            {
                this.toggleClassName('hover');
            };
        },

        '#navigation_controls_forward' : function(element)
        {
            element.onclick = function()
            {
                if (this.working == false)
                {
                    if (this.item < this.itemNum - 1)
                    {
                        this.goToVideo(this.videoList[this.item + 1].video_id);
                    }
                    else
                    {
                        this.goToVideo(this.videoList[0].video_id);
                    }
                }

                this.vsStat('kids/navigation_control_forward');

                return false;
            }.bind(DM_Widget_PageItem_Navigation);

            element.onmouseover = element.onmouseout = function()
            {
                this.toggleClassName('hover');
            };
        },

        'div.dmpi_navigation span.button.mute' : function(element)
        {
            element.onclick = function()
            {
                this.volumeState = (this.volumeState + 1)%4;
                this.setVolumeState(this.volumeState, 1);

                this.vsStat('kids/navigation_control_sound');

                return false;
            }.bind(DM_Widget_PageItem_Navigation);

            element.onmouseout = function()
            {
                this.setVolumeState(this.volumeState, 0);
            }.bind(DM_Widget_PageItem_Navigation);

            element.onmouseover = function()
            {
                this.setVolumeState(this.volumeState, 1);
            }.bind(DM_Widget_PageItem_Navigation);
        },

        '#navigation_list_infos' : function(element)
        {
            element.onmouseout = function()
            {
                this.infoHideTimeout = window.setTimeout(this.hideItemInfos.bind(this), this.hideItemInfosDelay * 1000);
            }.bind(DM_Widget_PageItem_Navigation);

            element.onmouseover = function()
            {
                window.clearTimeout(this.infoHideTimeout);
            }.bind(DM_Widget_PageItem_Navigation);
        }
    },


    /**********************************
    *  INITIALIZE
    **********************************/

    initialize: function ()
    {
        Event.onDOMReady(
            function()
            {
                DM_Widget_PageItem_Navigation.preLoad();
            }
        );
    }
};
DM_Widget_PageItem_Navigation.initialize();