/**
 * Mediacenter base class.
 *
 * @author S. Hogrebe <s.hogrebe@e-media.de>
 * @version $Id:$
 * @package Mediabiz
 * @subpackage Modules.Mediacenter
 */
Mediacenter = {

    flashVersion: "10.0.0",

    /**
     * Static: Call/Request filter url after filter selection.
     *
     * @param string baseUrl
     * @param string filter
     */
    filterList: function(baseUrl, filter) {

        window.location.href = baseUrl + '/' + filter;
    }
};

/**
 * Namespacing for mediacenter control objects
 */
Mediacenter.Control = {};

/**
 * access class for initializing clipplayer objects
 */
Mediacenter.Control.Clipplayer = {

    /**
     * default initializing
     */
    init: function(playerId, width, height, config, initItem, autoplay) {

        if ("undefined" == typeof(config) || config == null || config == '')
        {
            config = 'http://flashplayer.mediabiz.de/config/default.xml';
        }
        if ("undefined" == typeof(autoplay))
        {
            autoplay = false;
        }
        var player = new Mediacenter.Clipplayer(playerId, width, height, config, initItem);
        player.setAutoPlay(autoplay);

        var obsId = playerId + "Observer";
        var observer = new Emv.Observer(obsId);
        observer.registerObject(player);

        player.setObserver(observer);

        Emv.Observer.Controller.addObserver(observer);
        Emv.Registry.setObject(player);
        return player;
    }
};

Mediacenter.Control.Clipplayer.Legend = {

    /**
     * Initialize the clipinfo.
     *
     * @param string playerId
     * @param string clipinfoId
     * @param string requestUrl
     */
    init: function(playerId, clipinfoId, requestUrl)
    {
        var legend = new Mediacenter.Clipplayer.Legend(clipinfoId);
        legend.setPlayerId(playerId);
        // Set new requestUrl?
        if ("undefined" != typeof(requestUrl)) {

            legend.setRequestUrl(requestUrl);
        }

        // Register clipinfo to player observer
        var player = Emv.Registry.getObject(playerId);
        if (null != player)
        {
            var observer = player.getObserver();
            observer.registerObject(legend);
        }

        return legend;
    }
};

Mediacenter.Control.Fotoshow = {
    /**
     * inits a observer and registers all objects to it
     *
     * @param int playerId
     * @param int playlistId
     * @param int overlayId
     * @param int legendId
     */
    initForMediacenter: function(playerId, playlistId, overlayId, legendId)
    {
        var fotoshow = Emv.Registry.getObject(playerId);
        var playlist = Emv.Registry.getObject(playlistId);
        var overlay  = Emv.Registry.getObject(overlayId);
        var legend   = Emv.Registry.getObject(legendId);

        var observer = new Emv.Observer('fotoshowObserver_' + playerId);
        observer.registerObject(fotoshow);
        observer.registerObject(playlist);
        observer.registerObject(legend);
        if(null != overlay)
        {
            observer.registerObject(overlay);
            fotoshow.setOverlay(overlay);
        }
        fotoshow.setPlaylistId(playlistId);
        fotoshow.setFotoshowId(playerId);

        fotoshow.setOverlayId(overlayId);

        Emv.Observer.Controller.addObserver(observer);
        fotoshow.initialize();
        playlist.reloadPlaylist();
    }
};

Mediacenter.Control.Fotoshow.Overlay = {

    init: function(overlayId)
    {
        var overlay = new Mediacenter.Fotoshow.Overlay(overlayId);
        Emv.Registry.setObject(overlay);
        return overlay;
    }
};

Mediacenter.Control.Fotoshow.Legend = {

    init: function(legendId, showDetailsLink, linkUrl, linkLabel)
    {
        var legend   = new Mediacenter.Fotoshow.Legend(legendId);
        if('undefined' == typeof(showDetailsLink))
        {
            showDetailsLink = false;
        }

        if('undefined' != typeof(linkUrl) && 'undefined' != typeof(linkLabel)){
            legend.setLinkLabel(linkLabel);
            legend.setLinkUrl(linkUrl);
        }
        //no link data set - no link will be shown
        else
        {
            showDetailsLink = false;
        }
        legend.showDetailsLink(showDetailsLink);

        Emv.Registry.setObject(legend);
        return legend;
    }
};

Mediacenter.Control.Playlist = {
    /**
     * Initialize the playlist.
     *
     * @param string playerId
     * @param string playlistId
     * @param object items []
     * @param boolean autoplay
     */
    init: function(playerId, playlistId, items, gotoPlayer)
    {
        if ("undefined" == typeof(gotoPlayer))
        {
            gotoPlayer = false;
        }
        var playlist = new Mediacenter.Playlist(playlistId);
        //true crashes player (autostart)
        playlist.setLoadFirstItem(true);
        playlist.setGotoPlayer(gotoPlayer);

        if ("object" == typeof(items))
        {
            playlist.setItems(items);
        }
        var player = Emv.Registry.getObject(playerId);
        var observer = player.getObserver();
        playlist.setPlayer(player);

        observer.registerObject(playlist);
        Emv.Registry.setObject(playlist);
        // Init the playlist
        playlist.init();
        return playlist;
    }
};

Mediacenter.Control.Playlist.NewsClips = {

    init: function(playlistId, items, playerId)
    {
        var playlist = new Mediacenter.Playlist.NewsClips(playlistId); //FPC.getInstance(playlistId);
        Emv.Registry.setObject(playlist);
        if ("object" == typeof(items))
        {
            playlist.setItems(items);
        }
        var player = Emv.Registry.getObject(playerId);
        var observer = player.getObserver();
        playlist.setPlayer(player);

        observer.registerObject(playlist);
        // Init the playlist
        playlist.init();
        return playlist;
    }
};

/**
 * Mediacenter playlist access Object
 */
Mediacenter.Playlist  = function(domid)
{
    // Id of the playlist div container.
    this.id = domid;

    // Name for embed und object "tags" - callbacks will use this name.
    this.name = domid + "Name";

    // used observer object
//    this.observer;

    //assigned player object
    this.player;

    // Playlist items
    this.items = new Array();

    // Current item
    this.currentItem;

    // Next item
    this.nextItem;

    // Playlist "Autostart/-play".
    // Can be set via PlaylistControl.setLoadFirstItem()
    this.loadFirstItem = true;

    this.autoPlay = false;

    // Go to player element on playing video.
    // Can be set via PlaylistControl.setGotoPlayer()
    this.gotoPlayer = false;

    this.getId = function()
    {
        return this.id;
    };

    /**
     * Set playlist "autoplay" on/off.
     *
     * Effects only before FlashplayerControlObject.draw().
     * @param boolean bool
     */
    this.setLoadFirstItem = function(bool)
    {
        this.loadFirstItem = bool;
    };

    /**
     * setting autoplay flag
     * if true - clip is started immediately
     * @param boolean
     */
    this.setAutoPlay = function(bool)
    {
        this.autoPlay = bool;
    };

    /**
     * Set playlist "gotoPlayer" on/off.
     *
     * @param boolean bool
     */
    this.setGotoPlayer = function(bool)
    {
        this.gotoPlayer = bool;
    };

    /**
     * Set the assigned Player.
     *
     * @param string id
     */
    this.setPlayer = function(pla)
    {
        this.player = pla;
    };

    /**
     * returns player object
     */
    this.getPlayer = function()
    {
        return this.player;
    };

    /**
     * Set playlist´s item list of PlaylistItem.
     *
     * @param object [] items filled with Mediacenter.PlaylistItem
     */
    this.setItems = function(items)
    {
        this.items = items;
    };

    /**
     * Add single playlist item PlaylistItem.
     *
     * @param Mediacenter.PlaylistItem item
     */
    this.addItem = function(item)
    {
        this.items[this.items.length] = item;
    };

    /**
     * Set playlist´s current item PlaylistItem.
     *
     * @param Mediacenter.PlaylistItem item
     */
    this.setCurrentItem = function(item)
    {
        this.currentItem = item;
    };

    /**
     * Set playlist´s next item PlaylistItem.
     *
     * @param Mediacenter.PlaylistItem item
     */
    this.setNextItem = function(item)
    {
        this.nextItem = item;
    };

    /**
     * Get playlist´s current item PlaylistItem.
     *
     * @return Mediacenter.PlaylistItem
     */
    this.getCurrentItem = function()
    {
        return this.currentItem;
    };

    /**
     * Get playlist´s next item PlaylistItem.
     *
     * @return Mediacenter.PlaylistItem
     */
    this.getNextItem = function()
    {
        return this.nextItem;
    };

    /**
     * Get playlist´s first item PlaylistItem.
     *
     * @return Mediacenter.PlaylistItem
     */
    this.getFirstItem = function()
    {
        return this.items[0];
    };

    /**
     * Get playlist´s item PlaylistItem by Id.
     *
     * @return Mediacenter.PlaylistItem
     */
    this.getItemById = function(itemId) {

        for (var i=0; i<this.items.length; i++)
        {
            if (itemId == this.items[i].id) {

                return this.items[i];
            }
        }
    };

    this.getItemsForOffset = function(offset)
    {
        return this.items[offset];
    };

    /**
     * Initialize the playlist.
     */
    this.init = function()
    {
        if ("undefined" == typeof(this.items[0])) {

            return;
        }

        var firstItem = this.getFirstItem();
        this.currentItem = firstItem;

        //player is drawn everytime - autoplay has to be set extra
        if(!this.player.isVisible())
        {
            var url = firstItem.getItemUrl();
            this.player.setInitItem(url);
            this.player.draw();
        }
        var evName = Mediacenter.Playlist.Event._PLAYLIST_LOADED;
        Emv.Observer.Controller.fireEvent(evName, {playlistSize: this.items.length, firstItem: firstItem, loadItem: this.loadFirstItem}, this.id);
    };

    /**
     * Play (or start)/Pause a video clip.
     *
     * @param string itemId
     */
    this.toggleClipPlay = function (itemId)
    {
        var item = this.getItemById(itemId);

        if ("undefined" == typeof(item) || item === null) {

            return;
        }

        // Check if item is current item.
        var currentItem = this.getCurrentItem();
        //this item is equal to current played item
        if ("undefined" != typeof(currentItem) && item.id == currentItem.id) {

            var eventParams = "{ sourceId: '" + this.id + "'}";
            // Fire the toggle event.
            Emv.Observer.Controller.fireEvent(Mediacenter.Clipplayer.Event._PLAY_PAUSE, eventParams, this.id);

        }
        //out item is a new one - or no current item is set
        else {

            // Play new clip item.
            Mediabiz.Statistics.setCountPixel();

            // Set the item as "next" item.
            // After the player pushes an playingVideo event, the nextItem will be moved to currentItem.
            this.currentItem = item;

            // Do we have to stop a current item?
            if ("undefined" != typeof(currentItem)) {

                currentItem.setStopped();
                // The player is already there. Play the new item now.
                var jsonItem    = YAHOO.lang.JSON.stringify(item);
                var eventParams = "{item: " + jsonItem + ", autoplay: true }";

                // Fire the load item event.
                Emv.Observer.Controller.fireEvent(Mediacenter.Clipplayer.Event._LOAD_ITEM, eventParams, this.id);
            }

            this.player.setAutoPlay(true);
            this.player.draw();
        }
    };

    /**
     * Handle the playlist events.
     * See Mediacenter.Clipplayer.Event for event definitions.
     *
     * @param FPC_ObserverEvent
     */
    this.handleEvent = function(event)
    {

        if (event.name == Mediacenter.Clipplayer.Event._PLAY)
        {
            this.eventPlay();
        }
        else if(event.name == Mediacenter.Clipplayer.Event._PAUSE)
        {
            this.eventPause();
        }
        else if(event.name == Mediacenter.Clipplayer.Event._STOP)
        {
            this.eventStop();
        }
        else if(event.name == Mediacenter.Clipplayer.Event._PLAYING_VIDEO)
        {
            this.currentItem.setPlaying();
        }
        else if(event.name == Mediacenter.Clipplayer.Event._ASSIGNED_VIDEO)
        {
            this.assignNextClip();
        }
        else if(event.name == Mediacenter.Clipplayer.Event._DONE)
        {
            this.eventDone();
        }
        else {}
    };

    /**
     * Handle the event "play".
     *
     * Call current item "play" event.
     */
    this.eventPlay = function()
    {
        if ("undefined" == typeof(this.getCurrentItem())) {

            return;
        }
        this.currentItem.setPlaying();
    };

    /**
     * Handle the event "pause".
     *
     * Call current item "pause" event.
     */
    this.eventPause = function()
    {
        if ("undefined" == typeof(this.getCurrentItem())) {

            return;
        }

        this.currentItem.setPaused();
    };

    /**
     * Handle the event "stop".
     *
     * Call current item "stop" event.
     */
    this.eventStop = function()
    {
        if ("undefined" == typeof(this.getCurrentItem())) {

           return;
        }

        this.currentItem.setStopped();
    };

    /**
     * Handle the event "done".
     *
     * Call "stop" event.
     */
    this.eventDone = function()
    {
        if ("undefined" == typeof(this.getCurrentItem())) {

            return;
        }

        this.currentItem.setStopped();
    };

    /**
     * Handle the event "playingVideo".
     *
     * Call "play" event.
     */
    this.assignNextClip = function()
    {
        // Set the next item to the current one
        if ("undefined" != typeof(this.getNextItem()) && false != this.getNextItem()) {

            // Jump to the player window position?
            if (this.gotoPlayer == true) {
                var windowXPos = YAHOO.util.Dom.getY(this.player.getId());
                if (windowXPos >= 20) {

                    windowXPos -= 20;
                }

                window.scrollTo(0, windowXPos);
            }
            this.setCurrentItem(this.getNextItem());
            this.setNextItem(false);
        }

        if ("undefined" == typeof(this.getCurrentItem())) {

           return;
        }
        if(this.autoPlay)
        {
            this.currentItem.setPlaying();
        }
        else
        {
            this.currentItem.setPaused();
        }
    };
};

Mediacenter.Playlist.Item = function(domid, itemUrl, itemType, itemDbId)
{
    // Id of the playlist item container.
    this.id   = domid;

    // Id for the status element.
    this.statusId = domid + "Status";

    // Items XML/image source url.
    this.itemUrl = itemUrl;

    // Item type (film, video, game, clip, news, fs)
    this.itemType = itemType;

    // Item db dataset id
    this.itemDbId = itemDbId;

    // Items status (play/pause/stop).
    this.status = Mediacenter.Clipplayer.Event._STOP;

    /**
     * Get the item url.
     *
     * @return string
     */
    this.getItemUrl = function()
    {
        return this.itemUrl;
    };

    /**
     * Get the item type.
     *
     * @return string
     */
    this.getItemType = function()
    {
        return this.itemType;
    };

    /**
     * Set the status.
     *
     * @param string status
     */
    this.setStatus = function(status)
    {
        this.status = status;
    };

    /**
     * Get the status.
     *
     * @return string
     */
    this.getStatus = function()
    {
        return this.status;
    };

    /**
     * Handle the event "play".
     *
     * Set item status and switch image status indicator.
     */
    this.setPlaying= function()
    {
        this.setStatus(Mediacenter.Clipplayer.Event._PLAY);

        if (null != this.getElement()) {

            Emv.Effects.addClassName(this.id, "active");
        }

        if (null != this.getStatusElement()) {

            this.getStatusElement().src = '/mediathek/pics/clipPause.png';
        }
    };

    /**
     * Handle the event "pause".
     *
     * Set item status and switch image status indicator.
     */
    this.setPaused = function()
    {
        this.setStatus(Mediacenter.Clipplayer.Event._PAUSE);

        if (null != this.getStatusElement()) {

            this.getStatusElement().src = '/mediathek/pics/clipPlay.png';
        }
        if (null != this.getElement()) {

            Emv.Effects.addClassName(this.id, "active");
        }
    };

    /**
     * Handle the event "stop".
     *
     * Set item status and switch image status indicator.
     */
    this.setStopped = function()
    {
        this.setStatus(Mediacenter.Clipplayer.Event._STOP);

        if (null != this.getElement()) {

            Emv.Effects.removeClassName(this.id, "active");
        }

        if (null != this.getStatusElement()) {

            this.getStatusElement().src = '/mediathek/pics/clipPlay.png';
        }
    };

    /**
     * Handle the event "done".
     *
     * Call event "stop".
     */
    this.eventDone = function()
    {
        this.eventStop();
    };

    /**
     * Get the playlist item´s dom element.
     *
     * @return object
     */
    this.getElement = function()
    {
        return document.getElementById(this.id);
    };

    /**
     * Get the playlist item´s status dom element.
     *
     * @return object
     */
    this.getStatusElement = function()
    {
        return document.getElementById(this.statusId);
    };
};


Mediacenter.Playlist.Item.Clip = function(id, imageUrl, title)
{

    this.oid = id;
    this.title=null;
    this.previewImageUrl;
//    this.itemUrl = this.getItemUrl();
    if('undefined' != typeof(imageUrl))
    {
        this.previewImageUrl = imageUrl;
    }
    if('undefined' != typeof(title))
    {
        this.title = title;
    }

    this.getOid = function()
    {
        return this.oid;
    };

    this.setTitle = function(t)
    {
        this.title = t;
    };

    this.getTitle = function()
    {
       return this.title;
    };

    this.getItemUrl = function()
    {
        if('undefined' == typeof(this.itemUrl))
        {

            this.itemUrl = 'http://fpc.mediabiz.de/mediabiz/clip/' + this.oid +'.xml';
        }
        return this.itemUrl;
    };

    this.setPreviewImageUrl = function(iu)
    {
        this.previewImageUrl = iu;
    };

    this.getPreviewImageUrl = function()
    {
        return this.previewImageUrl;
    };
};

Mediacenter.Playlist.JsSlider = function(id)
{
    this.id = id;
    this.playlistArray = new Array();
    this.currentOffset = 0;
    this.visibleImagesCount = 6;
    this.activeImageOffset = 0;

    this.setPlaylist = function(array){

        this.playlistArray = array;
        this.currentOffset = 0;
        this.populateSliderForOffset();
        var params = {playlistSize: this.playlistArray.length};
        var evName = Mediacenter.Playlist.Event._PLAYLIST_LOADED;
        Emv.Observer.Controller.fireEvent(evName, params, this.id);
    };

    this.reloadPlaylist = function(){

        this.currentOffset = 0;
        var evName = Mediacenter.Playlist.Event._PLAYLIST_LOADED;
        Emv.Observer.Controller.fireEvent(evName, {playlistSize: this.playlistArray.length}, this.getId());
    };

    this.getId = function()
    {
        return this.id;
    };

    this.getSize = function()
    {
        return this.playlistArray.length;
    };

    this.setCurrentOffset = function(off)
    {
        this.currentOffset = off;
    };

    this.getCurrentOffset = function()
    {
        return this.currentOffset;
    };

    this.slotClicked = function(slot)
    {
        var cOffset = this.currentOffset + slot;
        if(cOffset >= this.getSize())
        {
            cOffset = cOffset - this.getSize();
        }
        //var clickedImage = this.playlistArray[cOffset];
        Emv.Observer.Controller.fireEvent('imageClicked', {clickedPlaylistOffset: cOffset, playlistSlot: slot}, this.id);
        this.activateSlot(slot);
    };

    /**
     * adding an active style to current playlist slider slot
     */
    this.activateSlot = function(slot)
    {
        this.clearSlots();
        this.activeImageOffset = this.currentOffset + slot;
        Emv.Effects.addClassName(this.id + 'jsSliderSlot_'+slot, 'active');
    };

    /**
     * removes all active styles from plalist slider
     */
    this.clearSlots = function()
    {
        for (var i=0; i<this.visibleImagesCount; i++)
        {
            Emv.Effects.removeClassName(this.id + 'jsSliderSlot_'+i, 'active');
        }
    };

    this.getImageForOffset = function(offset)
    {
        return this.playlistArray[offset];
    };

    this.getPreviousImage = function(offset)
    {
        return this.getImageForOffset(this.getPreviousOffset(offset));
    };

    this.getNextImage = function(offset)
    {
        return this.getImageForOffset(this.getNextOffset(offset));
    };


    /**
     * gets previous offset to current playlist item
     * switches at the beginning of the playlist to the end
     * @return int - playlist position
     */
    this.getPreviousOffset = function(offset)
    {
        var nOff;
        if(offset > 0)
        {
            nOff = offset - 1;
        }
        else
        {
            nOff = this.getSize() - 1;
        }
        return nOff;
    };

    /**
     * gets next offset to current playlist item
     * switches at the end of the playlist to the beginning
     * @return int - playlist position
     */
    this.getNextOffset = function(offset)
    {
        var nOff = offset + 1;
        if(nOff >= this.getSize())
        {
            nOff = 0;
        }
        return nOff;
    };

    /**
     * pages forward in playlist
     */
    this.pageNext = function()
    {
        this.clearSlots();
        if(this.getSize() < this.visibleImagesCount)
        {
            return;
        }

        this.currentOffset = this.currentOffset + this.visibleImagesCount;
        if(this.currentOffset >= this.getSize())
        {
            this.currentOffset = 0;
        }
        this.populateSliderForOffset();
        this.slotClicked(0);
    };

    /**
     * pages backward in playlist
     */
    this.pagePrevious = function()
    {
        if(this.playlistArray.length < this.visibleImagesCount)
        {
            return;
        }

        this.currentOffset = this.currentOffset - this.visibleImagesCount;
        if(this.currentOffset < 0 )
        {
            this.currentOffset = (Math.ceil(this.playlistArray.length / this.visibleImagesCount) * this.visibleImagesCount) - this.visibleImagesCount;
        }
        this.populateSliderForOffset();
        this.slotClicked(0);
    };

    /**
     * redraws the images for the jsslider
     */
    this.populateSliderForOffset = function()
    {
        var elem = document.getElementById(this.getId());
        //iterate all list items
        var lis = elem.getElementsByTagName('li');
        for(var i = 0; i < this.visibleImagesCount; i++)
        {
            var plPos = this.currentOffset + i;
            var cListItem = lis[i];
            var imgs = cListItem.getElementsByTagName('img');
            var cImg = imgs[0];

            //populate with playlist images
            if(i < lis.length && i < this.playlistArray.length)
            {

                //restart on the start of the array
                if(plPos < this.playlistArray.length) {

                    var cPlaylistItem = this.playlistArray[plPos];
                    cImg.src = cPlaylistItem.getImageUrl();
                } else {

                    cImg.src = '/_assets/pics/transparent.gif';
                }
            }
            else
            {
                cImg.src = '/_assets/pics/transparent.gif';
            }

        }

        this.checkActiveForImageOffset(this.activeImageOffset);
    };

    /**
     * checks and activates slot for current playlist item
     */
    this.checkActiveForImageOffset = function(offset)
    {
        if(this.isImageAtOffsetVisible(offset))
        {
            this.activateSlot(this.getSlotForOffset(offset));
        }
        else
        {
            this.clearSlots();
        }
    };

    /**
     * checks, if the image at this position in playlist is visible for current playlistslider state
     * @return boolean
     */
    this.isImageAtOffsetVisible = function(offset)
    {
        var off = this.getSlotForOffset(offset);
        return (off == -1) ? false : true;
    };

    /**
     * gets Slot position for array offset
     * 6 fields from array are shown (slots)
     * example:
     *      array: 0, 1, 2, [3, 4, 5, 6, 7, 8], 9, 10 | [] is visible area
     *                slot:  0, 1, 2, 3, 4, 5
     *
     *      3-8 are visible - if given offset is 3-8, slot 0-5 is returned
     *      else -1 is returned
     *
     *      other visible area position:
     *      ----
     *      array: 0, 1, 2], 3, 4, 5, 6, 7, [8, 9, 10
     *      slot:  3, 4, 5  ................ 0, 1, 2
     * return integer 0-5 for true -1 for false
     */
    this.getSlotForOffset = function(offset)
    {
        var sl = offset - this.currentOffset;
        var ret;
        if(sl >= 0 && sl < this.visibleImagesCount)
        {
            ret = sl;
        }
        else if(sl < 0)
        {
            ret = -1;
        }
        else
        {
            ret = -1;
        }
        return ret;
    };

    this.handleEvent = function(event)
    {
        if(event.name == 'imageLoaded')
        {
            this.checkActiveForImageOffset(event.params.offset);
        }
        else if(event.name == Mediacenter.Playlist.Event._PLAYLIST_RECEIVED)
        {
            this.setPlaylist(event.params.list);
        }
    };

};

Mediacenter.Playlist.NewsClips = function(id){

    this.id            = id;
    this.currentOffset = 0;
    this.visibleItems  = 4;
    this.slotPrefix    = id + 'slot_';
    this.imgPrefix     = id + 'img_';
    this.statusPrefix  = id + 'status_';
    this.activeElement = null;
    this.activeElementPlaying = false;
    this.subTitleId    = '';

    /**
     * trying to get this jslist class generic - so here are new getters
     */
    this.init = function()
    {
        if ("undefined" == typeof(this.items[0])) {

            return;
        }
        //player is drawn everytime - autoplay has to be set extra
        var evName = Mediacenter.Playlist.Event._PLAYLIST_LOADED;
        Emv.Observer.Controller.fireEvent(evName, {playlistSize: this.items.length, playlist: this}, this.id);
    };

    this.pagePrevious = function(){
        if(this.currentOffset <= 0)
        {
            this.currentOffset = this.items.length - 1;
        }
        else
        {
            this.currentOffset -= 1;
        }
        this.repaintPlaylistForOffset();
    };

    this.pageNext = function()
    {
        if(this.currentOffset >= this.items.length-1)
        {
            this.currentOffset = 0;
        }
        else
        {
            this.currentOffset += 1;
        }
        this.repaintPlaylistForOffset();
    };

    this.repaintPlaylistForOffset = function()
    {
        this.clearSlots();
        var i, j;
        for(i = 0; i < 4; i++)
        {
           j = this.currentOffset + i;
           if(j >= this.items.length)
           {
               j = j - this.items.length;
           }
           var elem = this.items[j];
           var slotDom = document.getElementById(this.slotPrefix + i);
           var imgDom  = document.getElementById(this.imgPrefix + i);
           slotDom.title = elem.getTitle();
           if(j == this.activeElement)
           {
               Emv.Effects.addClassName(this.slotPrefix + i, 'active');
               if(this.activeElementPlaying)
               {
                      this.setSlotItemToPause(i);
               }
           }
           imgDom.title  = elem.getTitle();
           imgDom.src    =  elem.getPreviewImageUrl();
        }
    };

    this.clearSlots = function()
    {
        for(var i = 0; i < 4; i++)
        {
            Emv.Effects.removeClassName(this.slotPrefix + i, 'active');
            this.setSlotItemToPlay(i);
        }
    };

    this.getItemForOffset = function(offset)
    {
        return this.items[offset];
    };

    this.getPreviousItem = function(offset)
    {
        return this.getItemForOffset(this.getPreviousOffset(offset));
    };

    this.getNextItem = function(offset)
    {
        return this.getItemForOffset(this.getNextOffset(offset));
    };

    this.slotClicked = function(slot)
    {
        this.clearSlots();
        this.player.setAutoPlay(true);
        var activeElement = this.currentOffset + slot;
        if(activeElement >= this.items.length)
        {
           activeElement = activeElement - this.items.length;
        }
        if(activeElement == this.activeElement)
        {
            Emv.Effects.addClassName(this.slotPrefix + slot, 'active');
            if(this.activeElementPlaying)
            {
                this.setSlotPaused(slot);
                this.player.swfCall_Pause();
            }
            else
            {
                this.setSlotPlaying(slot);
                this.player.swfCall_Play();
            }
        }
        else
        {
            this.activeElement = activeElement;
            var plItem = this.getItemForOffset(this.activeElement);
            if(!this.playerIsVisible())
            {
                this.player.setInitItem(plItem.getItemUrl());
                //show minimize button
                Emv.Effects.removeClassName(this.player.getId() +'CloseButton', 'hidden');
                this.player.draw();
            }
            else
            {
                this.player.playInitItem(plItem.getItemUrl());
            }
            this.setSlotPlaying(slot);
            Emv.Effects.addClassName(this.slotPrefix + slot, 'active');
        }

    };

    this.playerIsVisible = function()
    {
        var elem = document.getElementById(this.player.getId()).tagName;
        return (elem == 'OBJECT' || elem == 'object');
    };

    this.setSubtitleId = function(id)
    {
        this.subTitleId = id;
    };

    this.getSlotForActiveElement = function()
    {
        var i, j;
        for(i = 0; i < 4; i++)
        {
           j = this.currentOffset + i;
           if(j >= this.items.length)
           {
               j = j - this.items.length;
           }
           if(this.activeElement == j)
           {
               return i;
           }
        }
        return null;
    };

    this.setSlotPlaying = function(slot)
    {
        this.setSlotItemToPause(slot);
        this.activeElementPlaying = true;
    };

    this.setSlotPaused  = function(slot)
    {
        this.setSlotItemToPlay(slot);
        this.activeElementPlaying = false;

    };

    this.setSlotItemToPlay = function(slot)
    {
        var elem = document.getElementById(this.statusPrefix + slot);
        if(elem)
        {
            elem.src = '/mediathek/pics/clipPlay.png';
        }
    };

    this.setSlotItemToPause = function(slot)
    {
        var elem = document.getElementById(this.statusPrefix + slot);
        elem.src = '/mediathek/pics/clipPause.png';
    };

    this.handleEvent = function(event)
    {
        if(event.name == Mediacenter.Clipplayer.Event._PLAYING_VIDEO)
        {
            document.getElementById(this.subTitleId).innerHTML = this.items[this.activeElement].getTitle();
        }

        if(event.name == Mediacenter.Clipplayer.Event._PLAY)
        {
            var slot = this.getSlotForActiveElement();
            if(slot != null)
            {
                this.setSlotPlaying(slot);
            }
        }

        if(event.name == Mediacenter.Clipplayer.Event._PAUSE)
        {
            var slot = this.getSlotForActiveElement();
            if(slot != null)
            {
                this.setSlotPaused(slot);
            }
        }
    };
};

Mediacenter.Playlist.NewsClips.prototype = new Mediacenter.Playlist();

Mediacenter.Playlist.Audioplayer = function(id)
{
    this.id = id;
    this.playlistArray = new Array();
    this.currentOffset = 0;
    this.visibleItemsCount = 10;
    this.activeImageOffset = 0;

    this.setPlaylist = function(array)
    {
        this.playlistArray = array;
        this.currentOffset = 0;
        this.populatePlaylistForOffset(this.currentOffset);
        this.visibleItemsCount = array.length;
        var evName = Mediacenter.Playlist.Event._PLAYLIST_LOADED;
        Emv.Observer.Controller.fireEvent(evName, {playlistSize: this.playlistArray.length}, this.getId());
    };

    this.reloadPlaylist = function()
    {
        this.currentOffset = 0;
        var evName = Mediacenter.Playlist.Event._PLAYLIST_LOADED;
        Emv.Observer.Controller.fireEvent(evName, {playlistSize: this.playlistArray.length}, this.getId());
    };

    this.getId = function()
    {
        return this.id;
    };

    this.getSize = function()
    {
        return this.playlistArray.length;
    };

    this.setCurrentOffset = function(off)
    {
        this.currentOffset = off;
    };

    this.getCurrentOffset = function()
    {
        return this.currentOffset;
    };

    this.slotClicked = function(slot)
    {
        var cOffset = this.currentOffset + slot;
        if(cOffset >= this.getSize())
        {
            cOffset = cOffset - this.getSize();
        }
        //var clickedImage = this.playlistArray[cOffset];
        Emv.Observer.Controller.fireEvent(Mediacenter.Playlist.Event._SLOT_CLICKED, {clickedPlaylistOffset: cOffset, playlistSlot: slot}, this.getId());
        this.activateSlot(slot);
    };

    /**
     * adding an active style to current playlist slider slot
     */
    this.activateSlot = function(slot)
    {
        this.clearSlots();
        this.activeImageOffset = this.currentOffset + slot;
        Emv.Effects.addClassName(this.id + '_slot_'+slot, 'active');
    };

    /**
     * removes all active styles from plalist slider
     */
    this.clearSlots = function()
    {
        for (var i=0; i<this.playlistArray.length; i++)
        {
            Emv.Effects.removeClassName(this.id + '_slot_'+i, 'active');
        }
    };

    this.getTrackForOffset = function(offset)
    {
        return this.playlistArray[offset];
    };

    this.getPreviousTrack = function(offset)
    {
        return this.getTrackForOffset(this.getPreviousOffset(offset));
    };

    this.getNextTrack = function(offset)
    {
        return this.getTrackForOffset(this.getNextOffset(offset));
    };

    /**
     * gets previous offset to current playlist item
     * switches at the beginning of the playlist to the end
     * @return int - playlist position
     */
    this.getPreviousOffset = function(offset)
    {
        var nOff;
        if(offset > 0)
        {
            nOff = offset - 1;
        }
        else
        {
            nOff = this.getSize() - 1;
        }
        return nOff;
    };

    /**
     * gets next offset to current playlist item
     * switches at the end of the playlist to the beginning
     * @return int - playlist position
     */
    this.getNextOffset = function(offset)
    {
        var nOff = offset + 1;
        if(nOff >= this.getSize())
        {
            nOff = 0;
        }
        return nOff;
    };

    /**
     * pages forward in playlist
     */
    this.pageNext = function()
    {
        this.clearSlots();

        this.currentOffset = this.currentOffset + this.visibleItemsCount;

        if(this.currentOffset >= this.getSize())
        {
            this.currentOffset = 0;
        }
        this.populatePlaylistForOffset();
    };

    /**
     * pages backward in playlist
     */
    this.pagePrevious = function()
    {
        if(this.playlistArray.length < this.visibleItemsCount)
        {
            return;
        }

        this.currentOffset = this.currentOffset - this.visibleItemsCount;

        if(this.currentOffset < 0 )
        {
            this.currentOffset = (Math.ceil(this.playlistArray.length / this.visibleItemsCount) * this.visibleItemsCount) - this.visibleItemsCount;
        }
        this.populatePlaylistForOffset();
    };

    /**
     * redraws the images for the jsslider
     */
    this.populatePlaylistForOffset = function()
    {
        var elem = document.getElementById(this.getId());
        //iterate all list items
        var lis = elem.getElementsByTagName('li');
        for (var i = 0; i < this.visibleItemsCount; i++)
        {
            var plPos = this.currentOffset + i;
            var cListItem = lis[i];
            if(cListItem)
            {

                var links = cListItem.getElementsByTagName('a');
                var cA = links[0];
            } else {

                continue;
            }

            //populate with playlist images
            if(i < lis.length && i < this.playlistArray.length)
            {

                if(plPos < this.playlistArray.length) {

                    var cPlaylistItem = this.playlistArray[plPos];
                    if(cA.innerHTML == '')
                    {
                        Emv.Effects.removeClassName(this.id + '_slot_'+i, 'nobg');
                    }
                    cA.innerHTML = cPlaylistItem.getTrackTitle();
                    cListItem.title = cPlaylistItem.getTrackTitle();
                }
                else
                {
                    cA.innerHTML = '';
                    Emv.Effects.addClassName(this.id + '_slot_'+i, 'nobg');
                }
            }
            else
            {
                cListItem.innerHTML = '';
            }
        }

        this.checkActiveForTrackOffset(this.activeImageOffset);
    };

    /**
     * checks and activates slot for current playlist item
     */
    this.checkActiveForTrackOffset = function(offset)
    {
        if(this.isTrackAtOffsetVisible(offset))
        {
            this.activateSlot(this.getSlotForOffset(offset));
        }
        else
        {
            this.clearSlots();
        }
    };

    /**
     * checks, if the image at this position in playlist is visible for current playlistslider state
     * @return boolean
     */
    this.isTrackAtOffsetVisible = function(offset)
    {
        var off = this.getSlotForOffset(offset);
        return (off == -1) ? false : true;
    };

    /**
     * gets Slot position for array offset
     * 6 fields from array are shown (slots)
     * example:
     *      array: 0, 1, 2, [3, 4, 5, 6, 7, 8], 9, 10 | [] is visible area
     *                slot:  0, 1, 2, 3, 4, 5
     *
     *      3-8 are visible - if given offset is 3-8, slot 0-5 is returned
     *      else -1 is returned
     *
     *      other visible area position:
     *      ----
     *      array: 0, 1, 2], 3, 4, 5, 6, 7, [8, 9, 10
     *      slot:  3, 4, 5  ................ 0, 1, 2
     * return integer 0-5 for true -1 for false
     */
    this.getSlotForOffset = function(offset)
    {
        var sl = offset - this.currentOffset;
        var ret;
        if(sl >= 0 && sl < this.visibleItemsCount)
        {
            ret = sl;
        }
        else if(sl < 0)
        {
            ret = -1;
        }
        else
        {
            ret = -1;
        }
        return ret;
    };

    this.handleEvent = function(event) {

        if(event.name == Mediacenter.Audioplayer.Event._SLOT_CLICKED) {

        } else if(event.name == Mediacenter.Audioplayer.Event._TRACK_LOADED) {

            this.checkActiveForTrackOffset(event.params.offset);
        }
    };
};

Mediacenter.Playlist.Audioplayer.Compact = function(id)
{
    this.id = id;
    this.playlistArray = new Array();
    this.currentOffset = 0;
    this.visibleItemsCount = 10;
    this.activeImageOffset = 0;

    this.populatePlaylistForOffset = function(offset)
    {
        this.assignItemForOffset(offset);
    };

    this.loadItemForOffset = function(offset){
        this.currentOffset = offset;
        this.assignItemForOffset(offset);
        var item = this.getItemForOffset(offset);
        var eventParams = {item: item, offset: offset};
        Emv.Observer.Controller.fireEvent(Mediacenter.Playlist.Event._TRACK_SELECTED, eventParams, this.id);
    };

    this.assignItemForOffset = function(offset)
    {
        var item = this.getItemForOffset(offset);
        var elem = document.getElementById(this.getId()+'Title');
        elem.innerHTML = item.getTrackTitle();
    };

    this.getItemForOffset = function(off)
    {
        return this.playlistArray[off];
    };

    this.playNext = function()
    {
        var nOff = this.getNextOffset(this.currentOffset);
        this.loadItemForOffset(nOff);
    };

    this.playPrevious = function()
    {
        var pOff = this.getPreviousOffset(this.currentOffset);
        this.loadItemForOffset(pOff);
    };

    this.handleEvent = function(event)
    {
        if(event.name == Mediacenter.Audioplayer.Event._TRACK_LOADED)
        {
            this.assignItemForOffset(event.params.offset);
        }
    };
};

Mediacenter.Playlist.Audioplayer.Compact.prototype = new Mediacenter.Playlist.Audioplayer();

Mediacenter.Playlist.Audioplayer.Item = function(id, url, title)
{
    this.id = id;
    this.trackUrl = url;
    this.trackTitle = title;

    this.getId = function()
    {
        return this.id;
    };

    this.getTrackUrl = function()
    {
        return this.trackUrl;
    };

    this.getTrackTitle = function()
    {
        return this.trackTitle;
    };
};

Mediacenter.Playlist.JsSlider.ImageItem = function(id, imgUrl, bigImgUrl, popupImgUrl, title, subtitle, credit, popupImgWidth, additionalTitle)
{
    this.id = id;
    this.previewImageUrl = imgUrl;
    this.bigImageUrl     = bigImgUrl;
    this.popupImgUrl     = popupImgUrl;
    this.popupImgWidth   = popupImgWidth;
    this.additionalTitle = additionalTitle;
    this.title    = title;
    this.subtitle = subtitle;
    this.credits  = credit;

    this.getId = function()
    {
        return this.id;
    };

    this.getTitle = function()
    {
        return this.title;
    };

    this.getSubTitle = function()
    {
        return this.subtitle;
    };

    this.getCredits = function()
    {
        return this.credits;
    };

    this.getImageUrl = function()
    {
        return this.previewImageUrl;
    };

    this.getBigImageUrl = function()
    {
        return this.bigImageUrl;
    };

    this.getPopupImgUrl = function()
    {
        return this.popupImgUrl;
    };

    this.getPopupImgWidth = function()
    {
        return this.popupImgWidth;
    };

    this.hasAdditionalTitle = function()
    {
        return (typeof this.additionalTitle == 'undefined' || this.additionalTitle == '') ? false : true;
    };

    this.getAdditionalTitle = function()
    {
        return this.additionalTitle;
    };
};

Mediacenter.Playlist.JsSlider.ImageItem.createFromRequestObject = function(obj) {

    return new Mediacenter.Playlist.JsSlider.ImageItem(obj.id, obj.smUrl, obj.bigUrl, obj.popupUrl, obj.title, obj.subtitle, obj.credit, obj.popupWidth, obj.additionalTitle);
};

/**
 * events for playlist
 */
Mediacenter.Playlist.Event = {

    //fired, when playlist finished initialisation/refill
    _PLAYLIST_LOADED   : 'playlistLoaded',
    //playlist via ajax call received - next is to load playlist
    _PLAYLIST_RECEIVED : 'playlistReceived',
    _SLOT_CLICKED      : 'slotClicked',
    _TRACK_SELECTED    : 'trackSelected'
};