/**
 * object for a Mediabiz Fotoshow element with preview and postview :P
 */
Mediacenter.Fotoshow = function (id) {
    this.id = id;
    this.htmlElem = document.getElementById(id);
    //check inital visibility
    if(this.htmlElem.style.visibility == 'visible')
    {
        this.visible = true;
    }
    else
    {
        this.visible = false;
    }
    this.requestUrl = '/mediathek/fotoshowplaylist';

    //constructor end
    this.getId = function()
    {
        return this.id;
    };
    
    this.hide = function()
    {
        var elem = this.getElementById(id);
        elem.style.visibility = 'hidden';
        elem.style.display    = 'none';
    };
    
    this.show = function()
    {
        var elem = this.getElementById(id);
        elem.style.visibility = 'visible';
        elem.style.display    = 'block';
    };
    
    this.loadFotoshow = function(mldb, mlid)
    {
        var requestUrl = this.requestUrl + '/' + mldb + '/' +mlid;

//        console.log("ClipinfoControl.eventLoadItem(): request " + requestUrl);
        Mediacenter.Fotoshow.LoadPlaylistCallback.callerId = this.id;
        var request = YAHOO.util.Connect.asyncRequest('GET', requestUrl, Mediacenter.Fotoshow.LoadPlaylistCallback );
    };
    
    this.loadPlaylist = function(list)
    {
        var pl = Emv.Registry.getObject(this.id + '_playlist');
        var p  = Emv.Registry.getObject(this.id + '_player');

        pl.setPlaylist(list);
        pl.populateSliderForOffset();
        p.loadImage(0);
    };
};


/**
 * Mediacenter Triple View Player class.
 * shows last and next image additionally
 *
 * @author damo
 * @version $Id: fotoshow.js 1159 2010-06-08 10:02:07Z stho $
 * @package MediabizDe
 * @subpackage Modules.Mediacenter
 */
Mediacenter.Fotoshow.TripleViewPlayer = function (id) {
    this.id = id;
    this.fotoshowId;
    this.overlayId;
    this.playlistId;
    this.overlay;
    this.currentOffset;
    this.requestUrl = '/mediathek/fotoshowplaylist';

    this.initialize = function()
    {
        this.loadImage(0);
        var pl = this.getPlaylist();
    };

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

    /**
     * assigning appended playlist id
     */
    this.setPlaylistId = function(id)
    {
        this.playlistId = id;
    };

    this.setOverlay = function(ov)
    {
//    	console.log('setting overlay (' + ov.getId()+') for player: ' + this.id);
        this.overlay = ov;
    };
    
    /**
     * id of the fotoshowBlock html element
     * used for switching visibility
     * @param string id
     */
    this.setFotoshowId = function(id)
    {
        this.fotoshowId = id;
    };

    /**
     * assigning appended overlay id
     */
    this.setOverlayId = function(id)
    {
        this.overlayId = id;
    };

    this.showPlayer = function()
    {
        Emv.Effects.removeClassName(this.fotoshowId, 'fotoshowHide');
        Emv.Effects.removeClassName(this.id + 'hideButton', 'hidden');
    };

    this.hidePlayer = function()
    {
        Emv.Effects.addClassName(this.fotoshowId, 'fotoshowHide');
        Emv.Effects.addClassName(this.id + 'hideButton', 'hidden');
    };

    this.openOverlayImage = function()
    {
        var plItem = this.getPlaylist().getImageForOffset(this.currentOffset);

        var sub = (plItem.getSubTitle().length > 1) ? plItem.getSubTitle() : plItem.getTitle();

        if (plItem.getCredits() != '') {

            sub += ' (Bild: ' + plItem.getCredits() + ') ';
        }
        //playlist Id has to be assigned to overlay in case that multiple fotoshows share one overlay
        if('undefined' == typeof(this.playlistId))
        {
        	if('undefined' != typeof(this.playlist))
        	{
//        		console.log('no playlist id set - getting id from playlist object');
        		this.playlistId = this.playlist.getId();
        	}
        	else
        	{
//        		console.log('could not get a playlist id - rats!');
        	}
        }

        this.overlay.setPlaylistId(this.playlistId);
        this.overlay.setCurrentOffset(this.currentOffset);
        this.overlay.setSubtitle(sub)
        this.overlay.setImage(plItem);
        this.overlay.show();

        Video.Statistics.setCountPixel();
    };

    this.showImageInOverlay = function(img){

        subtitle = document.getElementById(this.overlayId + '_subtitle');
        var sub = (img.getSubTitle().length > 1) ? img.getSubTitle() : img.getTitle();
        subtitle.innerHTML = sub + ' ';

        if (img.getCredits() != '') {

            subtitle.innerHTML += '(Bild: ' + img.getCredits() + ') ';
        }

        this.setWidth(img.getPopupImgWidth());
        //document.getElementById(this.overlayId + '_more_stage_outer').style.width = img.getPopupImgWidth() + 'px';

        Emv.Effects.Overlay.Image.show(this.overlayId, img.getPopupImgUrl(), img.getSubTitle());
        Video.Statistics.setCountPixel();
    };

    /**
     * sets value for current shown image
     */
    this.setCurrentPosition = function(pos)
    {
        var el = document.getElementById(this.getId() + '_currentPosition');
        el.innerHTML = pos;
    };
    
    /**
     * assigning new playlistSize to players imageCount values
     */
    this.setPlaylistSize = function()
    {
        var el = document.getElementById(this.getId() + '_playlistSize');
        el.innerHTML = this.getPlaylist().getSize();
    };

    /**
     * loading image for playlist offset
     */
    this.loadImage = function(cOffset)
    {
        this.setAllLoading();
        //this.setPlaylistSize();
        this.currentOffset = cOffset;
        var pl = this.getPlaylist();
        this.setCurrentPosition((cOffset + 1));
        var img     = pl.getImageForOffset(cOffset);
        var prev    = pl.getPreviousImage(cOffset);
        var next    = pl.getNextImage(cOffset);
        this.setSourceToId(img.getBigImageUrl(), this.id + '_main');
        this.setSourceToId(prev.getBigImageUrl(), this.id + '_previous');
        this.setSourceToId(next.getBigImageUrl(), this.id + '_next');
        Emv.Observer.Controller.fireEvent('imageLoaded', {image: img, offset: cOffset}, this.getId());
    };

    this.loadFotoshow = function(mldb, mlid)
    {
        var requestUrl = this.requestUrl + '/' + mldb + '/' +mlid;

//        console.log("Mediacenter.Fotoshow.TripleViewPlayer.loadFotoshow(): request " + requestUrl);
        Mediacenter.Fotoshow.LoadPlaylistCallback.callerId = this.id;
        var request = YAHOO.util.Connect.asyncRequest('GET', requestUrl, Mediacenter.Fotoshow.LoadPlaylistCallback );
    };

    this.setAllLoading = function()
    {
        Emv.Effects.Ajaxloader.setToImageId(this.id + '_main');
        Emv.Effects.Ajaxloader.setToImageId(this.id + '_previous');
        Emv.Effects.Ajaxloader.setToImageId(this.id + '_next');
    };

    //++ setters for the 3 separate images in this playertype +++
    this.setSourceToId = function(url, id)
    {
        elem = document.getElementById(id);
        elem.src = url;
    };
    
    this.previousImage = function()
    {
        this.currentOffset = this.getPlaylist().getPreviousOffset(this.currentOffset);
        this.loadImage(this.currentOffset);
    };
    
    this.nextImage = function()
    {
        this.currentOffset = this.getPlaylist().getNextOffset(this.currentOffset);
        this.loadImage(this.currentOffset);
    }
    ;
    this.getPlaylist = function()
    {
        return Emv.Registry.getObject(this.playlistId);
    };
    
    //handle events
    this.handleEvent = function(event)
    {
//        console.log('Mediacenter.Fotoshow.TripleViewPlayer.handleEvent: ' + event.name);
        if(event.name == 'imageClicked')
        {
            this.loadImage(event.params.clickedPlaylistOffset);
            this.showPlayer();
        }
        else if(event.name == Mediacenter.Playlist.Event._PLAYLIST_LOADED)
        {
            this.setPlaylistSize(event.params.playlistSize);
            this.loadImage(0);
        }
    };
};


/**
 * Mediacenter Single View Player class.
 *
 * @author damo
 * @version $Id: fotoshow.js 1159 2010-06-08 10:02:07Z stho $
 * @package MediabizDe
 * @subpackage Modules.Mediacenter
 */
Mediacenter.Fotoshow.SingleViewPlayer = function (id) {
    this.id = id;
    this.fotoshowId;
    this.overlayId;
    this.playlistId;
    this.overlay;
    this.currentOffset;
    this.requestUrl = '/mediathek/fotoshowplaylist';

    this.initialize = function()
    {
        this.loadImage(0);
        var pl = this.getPlaylist();
    };

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

    /**
     * assigning appended playlist id
     */
    this.setPlaylistId = function(id)
    {
        this.playlistId = id;
    };

    this.setOverlay = function(ov)
    {
//    	console.log('setting overlay (' + ov.getId()+') for player: ' + this.id);
        this.overlay = ov;
    };
    
    /**
     * id of the fotoshowBlock html element
     * used for switching visibility
     * @param string id
     */
    this.setFotoshowId = function(id)
    {
        this.fotoshowId = id;
    };

    /**
     * assigning appended overlay id
     */
    this.setOverlayId = function(id)
    {
        this.overlayId = id;
    };

    this.showPlayer = function()
    {
        Emv.Effects.removeClassName(this.fotoshowId, 'fotoshowHide');
        Emv.Effects.removeClassName(this.id + 'hideButton', 'hidden');
    };

    this.hidePlayer = function()
    {
        Emv.Effects.addClassName(this.fotoshowId, 'fotoshowHide');
        Emv.Effects.addClassName(this.id + 'hideButton', 'hidden');
    };
    
    this.openOverlayImage = function()
    {
        var plItem = this.getPlaylist().getImageForOffset(this.currentOffset);

        var sub = (plItem.getSubTitle().length > 1) ? plItem.getSubTitle() : plItem.getTitle();

        if (plItem.getCredits() != '') {

            sub += ' (Bild: ' + plItem.getCredits() + ') ';
        }
        //playlist Id has to be assigned to overlay in case that multiple fotoshows share one overlay
        if('undefined' == typeof(this.playlistId))
        {
        	if('undefined' != typeof(this.playlist))
        	{
//        		console.log('no playlist id set - getting id from playlist object');
        		this.playlistId = this.playlist.getId();
        	}
        	else
        	{
//        		console.log('could not get a playlist id - rats!');
        	}
        }
        else
        {
//        	console.log('setting playlist id: ' + this.playlistId + ' for offset');
        }
        this.overlay.setPlaylistId(this.playlistId);
        this.overlay.setCurrentOffset(this.currentOffset);
        this.overlay.setSubtitle(sub)
        this.overlay.setImage(plItem);
        this.overlay.show();

        Video.Statistics.Ivw.refreshPixel();
    };

    this.showImageInOverlay = function(img){

        subtitle = document.getElementById(this.overlayId + '_subtitle');
        var sub = (img.getSubTitle().length > 1) ? img.getSubTitle() : img.getTitle();
        subtitle.innerHTML = sub + ' ';

        if (img.getCredits() != '') {

            subtitle.innerHTML += '(Bild: ' + img.getCredits() + ') ';
        }

        this.setWidth(img.getPopupImgWidth());
        //document.getElementById(this.overlayId + '_more_stage_outer').style.width = img.getPopupImgWidth() + 'px';

        Emv.Effects.Overlay.Image.show(this.overlayId, img.getPopupImgUrl(), img.getSubTitle());
        Video.Statistics.Ivw.refreshPixel();
    };

    /**
     * sets value for current shown image
     */
    this.setCurrentPosition = function(pos)
    {
        var el = document.getElementById(this.getId() + '_currentPosition');
        el.innerHTML = pos;
    };
    
    /**
     * assigning new playlistSize to players imageCount values
     */
    this.setPlaylistSize = function()
    {
        var el = document.getElementById(this.getId() + '_playlistSize');
        el.innerHTML = this.getPlaylist().getSize();
    };

    /**
     * loading image for playlist offset
     */
    this.loadImage = function(cOffset)
    {
        this.setAllLoading();
        //this.setPlaylistSize();
        this.currentOffset = cOffset;
        var pl = this.getPlaylist();
        this.setCurrentPosition((cOffset + 1));
        var img     = pl.getImageForOffset(cOffset);
        this.setSourceToId(img.getBigImageUrl(), this.id + '_main');
        Emv.Observer.Controller.fireEvent('imageLoaded', {image: img, offset: cOffset}, this.getId());
    };

    this.loadFotoshow = function(mldb, mlid)
    {
        var requestUrl = this.requestUrl + '/' + mldb + '/' +mlid;

//        console.log("Mediacenter.Fotoshow.TripleViewPlayer.loadFotoshow(): request " + requestUrl);
        Mediacenter.Fotoshow.LoadPlaylistCallback.callerId = this.id;
        var request = YAHOO.util.Connect.asyncRequest('GET', requestUrl, Mediacenter.Fotoshow.LoadPlaylistCallback );
    };

    this.setAllLoading = function()
    {
        Emv.Effects.Ajaxloader.setToImageId(this.id + '_main');
    };

    //++ setters for the 3 separate images in this playertype +++
    this.setSourceToId = function(url, id)
    {
        elem = document.getElementById(id);
        elem.src = url;
    };
    
    this.previousImage = function()
    {
        this.currentOffset = this.getPlaylist().getPreviousOffset(this.currentOffset);
        this.loadImage(this.currentOffset);
    };
    
    this.nextImage = function()
    {
        this.currentOffset = this.getPlaylist().getNextOffset(this.currentOffset);
        this.loadImage(this.currentOffset);
    };
    
    this.getPlaylist = function()
    {
        return Emv.Registry.getObject(this.playlistId);
    };
    
    //handle events
    this.handleEvent = function(event)
    {
//        console.log('Mediacenter.Fotoshow.TripleViewPlayer.handleEvent: ' + event.name);
        if(event.name == 'imageClicked')
        {
            this.loadImage(event.params.clickedPlaylistOffset);
            this.showPlayer();
        }
        else if(event.name == Mediacenter.Playlist.Event._PLAYLIST_LOADED)
        {
            this.setPlaylistSize(event.params.playlistSize);
            this.loadImage(0);
        }
    };
};

/**
 * Mediacenter Paginator
 * @author phan
 * @version $Id: fotoshow.js 1159 2010-06-08 10:02:07Z stho $
 * @package MediabizDe
 * @subpackage Modules.Mediacenter
 */
Mediacenter.Fotoshow.Paginator = function(id, itemsPerPage)
{
    this.id = id;
    this.playerId = null;
    this.playlistId = null;
    this.itemCount = 0;
    if (itemsPerPage == null) {

    	itemsPerPage = 10;
    }
    this.itemPerPage = itemsPerPage;
    this.itemOffset = 0;

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

    this.setPlaylistId = function(id)
    {
        this.playlistId = id;
    };

    this.setPlayerId = function(id)
    {
        this.playerId = id;
    };

    this.getPlaylist = function()
    {
        return Emv.Registry.getObject(this.playlistId);
    };

    this.getPlayer = function()
    {
        return Emv.Registry.getObject(this.playerId);
    };

    this.init = function() {

    	playerContainer = document.getElementById(this.playerId);
    	paginatorContainer = YAHOO.util.Dom.getElementsByClassName('fotoshowpaginator', null, playerContainer);
    	paginatorContainer[0].innerHTML = '';

    	paginatorContainer[0].innerHTML += '<span style="font-size: 12px;"><a href="javascript:">n</a></span>';

    	if (this.itemCount < this.itemPerPage) {

    		this.itemPerPage = this.itemCount;
    	}

    	for(i = 0; i < this.itemPerPage; i++) {

    		paginatorContainer[0].innerHTML += '<a href="javascript:">' + (i+1) + '</a>';
    		if (i < this.itemPerPage-1) {

    			paginatorContainer[0].innerHTML += ' | ';
    		}
    	}

    	paginatorContainer[0].innerHTML += '<span style="font-size: 12px;"><a href="javascript:">n</a></span>';
    };

    this.pageTo = function(page) {

    	player = this.getPlayer();
    	fsReg  = 'fspage_' + this.playerId;

    	if (player) {

    		player.loadImage(page-1);
    	}

    	if( 'undefined' == typeof(Emv.Registry.getParam(fsReg)) ||
    	    Emv.Registry.getParam(fsReg) == '' ||
    	    Emv.Registry.getParam(fsReg) == null ||
    	    page != Emv.Registry.getParam(fsReg) ) {

    		Video.Statistics.Ivw.refreshPixel();
    	}
    	Emv.Registry.setParam(fsReg, page);
    };

    this.draw = function() {

    	playerContainer = document.getElementById(this.playerId);
    	paginatorContainer = YAHOO.util.Dom.getElementsByClassName('fotoshowpaginator', null, playerContainer);

        //we use not getByTagName, because we want only on level of A tags not all
    	subElements = YAHOO.util.Dom.getChildrenBy(paginatorContainer[0], function(el){ return (el.tagName == 'A') });
        //this time we want only the a tags inside a span ;)
        subSpecials = YAHOO.util.Dom.getElementsBy(function(el){ return (el.parentNode && el.parentNode.tagName == 'SPAN') }, 'A', paginatorContainer[0]);

        if(subElements.length == this.itemPerPage) {

            subSpecials[0].style.display = 'none';
            subSpecials[1].style.display = 'none';

	        pageNumber = this.itemOffset;
	        pageCount  = this.itemCount;
	        pageRange  = this.itemPerPage;

	        if (pageRange > pageCount) {
	        	pageRange = pageCount;
	        }

	        delta = Math.ceil(pageRange / 2);

	        if (pageNumber - delta > pageCount - pageRange) {
	            lowerBound = pageCount - pageRange + 1;
	            upperBound = pageCount;
	        } else {
	            if (pageNumber - delta < 0) {
	                delta = pageNumber;
	            }

	            offset     = pageNumber - delta;
	            lowerBound = offset + 1;
	            upperBound = offset + pageRange;
	        }

	        current = lowerBound;

	        var _this = this;

	        for(var i=0; i < this.itemPerPage; i++) {

	        	subElements[i].className = 'paginatorLink';
	        	subElements[i].style.width = (String(this.itemCount).length * 8) + 'px';
	        	subElements[i].href = 'javascript:Emv.Registry.getObject(\'' + this.id + '\').pageTo(\'' + current + '\')';

	        	subElements[i].innerHTML = '';

	    		if (i == 0 && lowerBound > 1 ) {

	    			subElements[i].innerHTML += ' .. ';
	    			subElements[i].style.width = ((String(this.itemCount).length * 8) + 12) + 'px';

                    subSpecials[0].href = 'javascript:Emv.Registry.getObject(\'' + this.id + '\').pageTo(\'1\')';
                    subSpecials[0].innerHTML = '1';
                    subSpecials[0].style.display = 'inline-block';
	    		}
	        	subElements[i].innerHTML += current;

	        	if (i == this.itemPerPage -1 && upperBound < this.itemCount) {

	        		subElements[i].innerHTML += ' ..';
	        		subElements[i].style.width = ((String(this.itemCount).length * 8) + 12) + 'px';

                    subSpecials[1].href = 'javascript:Emv.Registry.getObject(\'' + this.id + '\').pageTo(\'' + this.itemCount + '\')';
                    subSpecials[1].innerHTML = this.itemCount;
                    subSpecials[1].style.display = 'inline-block';
	        	}

	        	if (current-1 == this.itemOffset) {

	        		/*subElements[i].className = 'active';*/
	        		YAHOO.util.Dom.addClass(subElements[i], 'active');
	        	}

                subElements[i].blur();

	        	current++;
	        	if (current > upperBound) {

	        		break;
	        	}
	        }
        }
    };

    this.handleEvent = function(event)
    {
    	if(event.name == 'imageLoaded')
    	{
    		this.itemOffset = event.params.offset;
    		this.draw();
    	}
    	else if(event.name == 'playlistLoaded')
        {
        	this.itemCount = event.params.playlistSize;
        	this.init();
        	this.draw();
        }
    };
};

/**
 * Mediacenter Legend class. currently used with tripleViewPlayer
 * @todo check and port to ajax, if necessary
 * @author damo
 * @version $Id: fotoshow.js 1159 2010-06-08 10:02:07Z stho $
 * @package MediabizDe
 * @subpackage Modules.Mediacenter
 */
Mediacenter.Fotoshow.Legend = function(id)
{
    this.id = id;
    this.fotoshowId;
    this.linkLabel = null;
    this.linkUrl   = null;
    this.showDetailsLink = false;

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

    this.showDetailsLink = function(b)
    {
        this.showDetailsLink = b;
    };

    this.setFotoshowId = function(id)
    {
        this.fotoshowId = id;
    };

    this.getFotoshow = function()
    {
        return Emv.Registry.getObject(this.fotoshowId);
    };

    this.handleEvent = function(event)
    {
        if(event.name == 'imageLoaded')
        {
            this.drawFullHTMLLegend(event.params.image);
        }

        else if(event.name == Mediacenter.Playlist.Event._PLAYLIST_RECEIVED)
        {
            this.linkUrl = event.params.detailLink;
        }
    };

    /**
     * setting overall detail url
     *
     * @param String url
     */
    this.setLinkUrl = function(url)
    {
        this.linkUrl = url;
    };

    /**
     * setting label for a detailpage link
     * currently for all images
     *
     * @param String label
     */
    this.setLinkLabel = function(label)
    {
        this.linkLabel = label;
    };

    this.drawFullHTMLLegend = function(img)
    {
        var innerH = '';
        var legendCopy = document.getElementById(this.getId() + '_copy');
        var legend = document.getElementById(this.getId());

        if (!legend && !legendCopy) {
        	return;
        }

//        if (img.getTitle() != '' && img.getTitle() != ' ') {
//
//            innerH = '<h2>' + img.getTitle() +'<span>';
//            if(img.hasAdditionalTitle())
//            {
//              innerH += '/' + img.getAdditionalTitle();
//            }
//            innerH += '</span></h2>';
//        }
        var sub = (img.getSubTitle().length > 1) ? img.getSubTitle() : img.getTitle();
        innerH += sub + '<br />';

        if (!legendCopy)
        {
	        if('' != img.getCredits())
	        {
	            innerH += '<br/><strong>Bild:</strong> ' + img.getCredits();
	        }
        } else {

	        if('' != img.getCredits())
	        {
	        	legendCopy.innerHTML = 'Foto: ' + img.getCredits();
	        }
        }

        if(this.showDetailsLink && this.linkUrl != null && this.linkLabel != null)
        {
            innerH += ' <a class="more" href="'+this.linkUrl+'">' + this.linkLabel + '</a>';
        }

        if (legend) {

        	legend.innerHTML = innerH;
        }
    };
};

/**
* image overlay
* for displaying picture in big mode
* this class uses Yahoo yui Panel Object
*
* @param id - html id of the parent element of overlaying content
*
*/
Mediacenter.Fotoshow.Overlay = function(id)
{
    this.id = id;
    this.currentImage;
    this.playerId;
    this.playlistId;
    this.currentOffset;
    /**
     * ie check
     * JScript (IE) parses this comment and interprets this as true (!false)
     */
    this.IE = /*@cc_on!@*/false;

    this.panel = new YAHOO.widget.Panel(this.id, {
        close: false,
        draggable: false,
        modal: true,
        visible: false,
        effect: {effect:YAHOO.widget.ContainerEffect.FADE, duration: 0.25} }
    );

    /* Add two click listener on the image and the overlay mask */
    YAHOO.util.Event.addListener(this.id + 'Image', "click", this.showNext, this.panel, true);
    YAHOO.util.Event.addListener(this.id + '_mask', "click", this.panel.hide, this.panel, true);

    /* Add key (ESC) listener to the overlay object */
    this.keyListener = new YAHOO.util.KeyListener(document, { keys: 27 },
                                   { fn:this.panel.hide,
                                     scope:this.panel,
                                     correctScope: true } );
    if ('undefined' != typeof(this.panel.cfg))
    {
        this.panel.cfg.queueProperty("keylisteners", this.keyListener);
    }

    this.showNext = function()
    {
        var pl = Emv.Registry.getObject(this.playlistId);
        if('undefined' == typeof this.currentOffset)
        {
            this.currentOffset = pl.getCurrentOffset();
        }
        this.currentOffset = pl.getNextOffset(this.currentOffset);
        this.showImageForOffset(this.currentOffset);
    };

    this.showPrevious = function()
    {
        var pl = Emv.Registry.getObject(this.playlistId);
        if('undefined' == typeof this.currentOffset)
        {
            this.currentOffset = pl.getCurrentOffset();
        }
        this.currentOffset = pl.getPreviousOffset(this.currentOffset);
        this.showImageForOffset(this.currentOffset);
    };
    this.showImageForOffset = function(offset)
    {
        var pl = Emv.Registry.getObject(this.playlistId);
        //Emv.Observer.Controller.fireEvent('loadImage', {imageOffset: offset}, this.getId());
        this.setImage(pl.getImageForOffset(offset));
        this.panel.render(document.body);
        this.panel.center();
        this.panel.show();
        this.panel.cfg.setProperty("zIndex", 9999);
    };

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

    this.setImage = function(nImage)
    {
    	//console.log('Mediacenter.Fotoshow.Overlay.setImage');
    	//console.log(nImage);
        this.currentImage = nImage;
        //local var is used for inner class handling
        var currentImg = nImage;
        var cId = this.id;
        //var cPanel = this.panel;

        this.setWidth(this.currentImage.getPopupImgWidth());
        //.----
        this.setLoading();
        img = document.getElementById(this.id + 'Image');
        img.src = '/jslib/int/ajax-loader.gif';
//        console.log('before onload overlad content id: ' + this.id+ '_content');
        //implementing the onLoad event to replace loading gif with right image
        imageObj = new Image();
        //onload: replace loading animation with right image
        var isIE = this.IE;
        imageObj.onload = function () {
            img = document.getElementById(cId + 'Image');
            img.src = this.src;

            var alt = '';
            if ("undefined" != typeof(currentImg.getSubTitle())) {

                if('' == currentImg.getSubTitle())
                {
                    alt += currentImg.getTitle();

                }
                else
                {
                    alt += currentImg.getSubTitle();
                }
            }
            if ("undefined" != typeof(currentImg.getCredits()) && '' != currentImg.getCredits()) {

                alt += '&nbsp;(Foto: ' + currentImg.getCredits() + ')';
            }

            var st = document.getElementById(cId + '_subtitle');
            st.innerHTML = alt;
            img.alt = alt;

//          document.getElementById(cId+ '_content').style.width   = this.width + 'px';
//          document.getElementById(cId + '_content').style.height = this.height + 'px';

            var cOverlay = Emv.Registry.getObject(cId);
            cOverlay.setContentWidth(this.width);
            cOverlay.setContentHeight(this.height);
            cOverlay.centerPanel();
            this.onload = null;
        };
        imageObj.src = this.currentImage.getPopupImgUrl();
    };

    this.setPlaylistId = function (plid)
    {
        this.playlistId = plid;
    };

    this.setPlayerId = function (pid)
    {
        this.playerId = pid;
    };

    this.setSubtitle = function(sTitle)
    {
        subtitle = document.getElementById(this.id + '_subtitle');
        subtitle.innerHTML = sTitle;
    };

    this.setLoading = function()
    {
//    	console.log('setImage Loading: (' + this.id + 'Image)')
        var img = document.getElementById(this.id + 'Image');
        img.src = '/jslib/int/ajax-loader.gif';
    };

    this.centerPanel = function()
    {
        this.panel.center();
    };

    this.setWidth = function(wid)
    {
        wid = parseInt(wid) + 2;
        document.getElementById(this.id + '_more_stage_outer').style.width = (wid+82) + 'px';
    };

    this.setHeight = function(hei)
    {
        document.getElementById(this.id + '_more_stage_outer').style.height = hei + 'px';
    };

    this.setContentWidth = function(wid)
    {
        wid = parseInt(wid) + 2;
        document.getElementById(this.id + '_content').style.width = wid + 'px';
    };

    this.setContentHeight = function(hei)
    {
        document.getElementById(this.id + '_content').style.height = hei + 'px';
    };

    this.show = function()
    {
//    	console.log('Emv.Fotoshow.Overlay.show: ' + this.id);
        if ("object" != typeof(this.panel)) {

            return false;
        }

        this.panel.render(document.body);
        this.panel.center();
        this.panel.show();
        this.panel.cfg.setProperty("zIndex", 9999);

        //Emv.Effects.Overlay.Image.show(this.overlayId, plItem.getPopupImgUrl(), plItem.getSubTitle());
    };

    this.hide = function()
    {
        this.panel.hide();
    };
    //handle events
    this.handleEvent = function(event)
    {
        //console.log('Mediacenter.Fotoshow.Overlay.handleEvent: ' + event.name);
        //console.log(event);
        if(event.name == 'loadImage')
        {
            this.loadImage(event.params.currentOffset);
        }
    };
};

/**
 * callback object for handling loaded playlist callbacks
 */
Mediacenter.Fotoshow.LoadPlaylistCallback = {

    callerId:'',
    /**
     * Yui connection success.
     *
     * @param object o
     */
    success: function(o) {
        clipinfoControl = o.argument[0];
        var resp = eval('(' + o.responseText + ')');
        var i = 0;
        var list = new Array();
        for(i = 0; i < resp.list.length; i++)
        {
            var ob = resp.list[i];
//          list[i] = new Mediacenter.Playlist.JsSlider.ImageItem(ob.id, ob.smUrl, ob.bigUrl, ob.title, ob.subtitle, ob.credit);
            list[i] = new Mediacenter.Playlist.JsSlider.ImageItem.createFromRequestObject(ob);
        }
        //Emv.Registry.getObject(this.callerId).loadPlaylist(list);
        Emv.Observer.Controller.fireEvent(Mediacenter.Playlist.Event._PLAYLIST_RECEIVED, {list: list, detailLink: o.detailLink}, this.callerId);
    },

    /**
     * Yui connection failed.
     */
    failure: function() {

//      console.log("FotoshowPlaylistLoadCallback: request FAILED");
    },

    argument: [ this ]
};