<?php $playlist = $this->getPlaylist() ?>
<?php $option = $this->getCurrentOption(); ?>
<?php $albums = $playlist->getAllAlbums() ?>
<?php $tracks = $playlist->getAllTracks(true) ?>

<div id="tab_<?php echo $option->getId(); ?>" class="playlists header">
    <div id="header_playlists_scrollview_<?php echo $playlist->getId(); ?>" class="scroll_list relative" rel="<?php echo $option->getId(); ?>">
        <ul>
            <?php if($albums) : ?>
                <li>
                    <a href="javascript:void(0)" onclick="page.getSubpage('playlist_<?php echo $playlist->getId(); ?>').showElements(this); return false;" class="header reverse show_images show_playlist_types_<?php echo $playlist->getId(); ?> noclickdelay" rel="albums"><?php echo $this->_('Albums') ?></a>
                </li>
            <?php endif; ?>
            <?php if($tracks) : ?>
                <li>
                    <a href="javascript:void(0)" onclick="page.getSubpage('playlist_<?php echo $playlist->getId(); ?>').showElements(this); return false;" class="show_images show_playlist_types_<?php echo $playlist->getId(); ?> noclickdelay" rel="tracks"><?php echo $this->_('Titles') ?></a>
                </li>
            <?php endif; ?>
        </ul>
        <div class="separator"></div>
    </div>
</div>
<a style="display:none" class="playlist_read_all_elements playlist_read_all_elements_<?php echo $playlist->getId(); ?> noclickdelay" href="javascript:void(0)" onclick="loadPlaylistAlbums('<?php echo $playlist->getId() ?>'); return false;"><?php echo $this->_('Read all') ?></a>
<a style="display:none" class="playlist_read_all_elements playlist_read_all_elements_<?php echo $playlist->getId(); ?> noclickdelay" href="javascript:void(0)" onclick="loadPlaylist($('#tracks_list_<?php echo $playlist->getId() ?>')); return false;"><?php echo $this->_('Read all') ?></a>
<div id="playlists_scrollview_playlist_<?php echo $playlist->getId() ?>" class="relative">
    <ul id="playlists_list_<?php echo $playlist->getId() ?>">
    </ul>
</div>
<ul style="display:none" id="albums_list_<?php echo $playlist->getId() ?>">
    <?php echo $this->getLayout()->addPartial('playlist_albums_'.$playlist->getId(), 'core_view_default', 'media/gallery/music/l1/view/list/music/albums.phtml')->setCurrentOption($option)->setAlbums($albums)->toHtml(); ?>
</ul>
<ul style="display:none" id="tracks_list_<?php echo $playlist->getId() ?>">
    <?php echo $this->getLayout()->addPartial('playlist_tracks_'.$playlist->getId(), 'core_view_default', 'media/gallery/music/l1/view/list/music/tracks.phtml')->setCurrentOption($option)->setTracks($tracks)->setId($playlist->getId())->toHtml(); ?>
</ul>

<script type="text/javascript">

    var subpage = page.getSubpage('playlist_<?php echo $playlist->getId(); ?>');
    var $albums = $('#albums_list_<?php echo $playlist->getId() ?>').html();
    var $tracks = $('#tracks_list_<?php echo $playlist->getId() ?>').html();

    subpage.setCallback('willappear', function() {
        this.setScrollview(new iScroll('playlists_scrollview_playlist_<?php echo $playlist->getId(); ?>'))
            .setContentSize(false)
        ;
    }).setCallback('didappear', function() {

        if(!$('.show_playlist_types_<?php echo $playlist->getId(); ?>.selected').length) {
            $('#header_playlists_scrollview_<?php echo $playlist->getId(); ?> li').eq(0).find('a').addClass('selected header reverse');
            $('a.playlist_read_all_elements_<?php echo $playlist->getId(); ?>').eq(0).show();
            var $a = $albums;
            if($a.trim().length < 1) $a = $tracks;
            $('#playlists_list_<?php echo $playlist->getId() ?>').html($a);
        }

    });

    subpage.refreshScrollview = function() {

        var height = $(window).height() - $('#playlists_scrollview_playlist_<?php echo $playlist->getId() ?>').offset().top;

        $('#playlists_scrollview_playlist_<?php echo $playlist->getId() ?>').css('height', height);
        $('#playlists_scrollview_playlist_<?php echo $playlist->getId() ?>').children('ul').css('min-height', height);

        this.scrollview.refresh();
        return this;


//        var height = $(window).height() - $('#page_header_playlist_<?php echo $playlist->getId() ?>').height();
//        if($('#header_playlists_scrollview_<?php echo $playlist->getId() ?>').is(':visible')) {
//            height -= $('#header_playlists_scrollview_<?php echo $playlist->getId(); ?>').height();
//        }
//
//        if($('.playlist_read_all_elements_<?php echo $playlist->getId(); ?>').is(':visible')) {
//            height -= $('.playlist_read_all_elements_<?php echo $playlist->getId(); ?>').outerHeight(true, true);
//        }
//
//        $('#playlists_scrollview_playlist_<?php echo $playlist->getId() ?>').css('height', height);
//        $('#playlists_scrollview_playlist_<?php echo $playlist->getId() ?>').children('ul').css('min-height', height);
//        this.scrollview.refresh();
//
//        return this;
    };

    subpage.showElements = function(a) {
        $('.show_playlist_types_'+'<?php echo $playlist->getId(); ?>').removeClass('selected header reverse');
        $(a).addClass('selected header reverse');
        if($(a).attr('rel') == 'albums') {
            $('#playlists_list_<?php echo $playlist->getId() ?>').hide();
            $('#playlists_list_<?php echo $playlist->getId() ?>').html($albums);
            $('#playlists_list_<?php echo $playlist->getId() ?>').fadeIn(function(){
                this.scrollview.refresh();
                this.scrollview.scrollTo(0,0,0);
            }.bind(this));

            $('a.playlist_read_all_elements_<?php echo $playlist->getId(); ?>').hide();
            $('a.playlist_read_all_elements_<?php echo $playlist->getId(); ?>').eq(0).show();
        } else {
            $('#playlists_list_<?php echo $playlist->getId() ?>').hide();
            $('#playlists_list_<?php echo $playlist->getId() ?>').html($tracks);
            $('#playlists_list_<?php echo $playlist->getId() ?>').fadeIn(function() {
                this.scrollview.refresh();
                this.scrollview.scrollTo(0,0,0);
            }.bind(this));

            $('a.playlist_read_all_elements_<?php echo $playlist->getId(); ?>').hide();
            $('a.playlist_read_all_elements_<?php echo $playlist->getId(); ?>').eq(1).show();
        }
    };
</script>

<style type="text/css">
    #playlists_scrollview_playlist_<?php echo $playlist->getId() ?> { text-align: center; }
    #page_playlist_<?php echo $playlist->getId() ?> li.blocks { margin: 7px; display: inline-block; border-bottom: 2px solid #d8d8d8; }
    #page_playlist_<?php echo $playlist->getId() ?> li.blocks a { height: 181px; width: 135px; border: 1px solid #fff; display: block; }
    #page_playlist_<?php echo $playlist->getId() ?> li.blocks img { float: left; }
    #page_playlist_<?php echo $playlist->getId() ?> li.blocks p.playlist_infos { height: 41px; background: #fff; clear: both; display: block; margin: 0; padding: 0; padding-top: 5px; border-top: solid 1px #ccc; }
    #page_playlist_<?php echo $playlist->getId() ?> li.blocks p.playlist_infos span { text-align: center; width: 100%; display: block; color: #000 !important; }
    #page_playlist_<?php echo $playlist->getId() ?> li.blocks span.playlist_name { font-weight: bold; font-size: 12px; }
    #page_playlist_<?php echo $playlist->getId() ?> li.blocks span.playlist_songs { margin-top: 5px; font-size: 11px; }
    #header_playlists_scrollview_<?php echo $playlist->getId(); ?> ul { margin: 0 10px; }
</style>


