<?php $option = $this->getCurrentOption(); ?>
<?php $playlists = new Media_Model_Gallery_Music(); ?>
<?php $playlists = $playlists->findAll(array('value_id' => $option->getId()), 'position ASC'); ?>

<?php $albums = array(); ?>
<?php $tracks = array(); ?>

<?php foreach ($playlists as $playlist) : ?>
    <?php $elements = new Media_Model_Gallery_Music_Elements(); ?>
    <?php $elements = $elements->findAll(array('gallery_id' => $playlist->getId()), 'position ASC'); ?>
    <?php foreach($elements as $element) : ?>
        <?php
            if($element->getAlbumId()) {
                $albums[] = $element;
            }
            if($element->getTrackId()) {
                $tracks[] = $element;
            }
        ?>
    <?php endforeach; ?>
<?php endforeach; ?>

<div id="playlists">
    <div id="tab_<?php echo $option->getId(); ?>" class="playlists header">
        <div id="header_playlists_scrollview_<?php echo $option->getId(); ?>" class="scroll_list relative" rel="<?php echo $option->getId(); ?>">
            <ul>
                <?php if($playlists) : ?>
                    <li>
                        <a href="javascript:void(0)" id="first_musics_list_<?php echo $option->getId(); ?>" onclick="page.getSubpage('<?php echo $option->getId(); ?>').showElements(this); return false;" class="show_images show_types_<?php echo $option->getId(); ?> noclickdelay" rel="playlists"><?php echo $this->_('Playlists') ?></a>
                    </li>
                <?php endif ?>
                <?php if($albums) : ?>
                    <li>
                        <a href="javascript:void(0)" onclick="page.getSubpage('<?php echo $option->getId(); ?>').showElements(this); return false;" class="show_images show_types_<?php echo $option->getId(); ?> noclickdelay" rel="albums"><?php echo $this->_('Albums') ?></a>
                    </li>
                <?php endif; ?>
                <?php if($tracks) : ?>
                    <li>
                        <a href="javascript:void(0)" onclick="page.getSubpage('<?php echo $option->getId(); ?>').showElements(this); return false;" class="show_images show_types_<?php echo $option->getId(); ?> noclickdelay" rel="tracks"><?php echo $this->_('Titles') ?></a>
                    </li>
                <?php endif; ?>
            </ul>
            <div class="separator"></div>
        </div>
    </div>
    <a class="playlist_read_all_elements playlist_read_all_elements_<?php echo $option->getId() ?>" href="javascript:void(0)" rel="playlists" onclick="javascript:loadAllTypes(this); return false;"><?php echo $this->_('Read all') ?></a>
    <div id="playlists_scrollview_<?php echo $option->getId() ?>" class="relative">
        <ul id="playlists_list_<?php echo $option->getId() ?>" class="clearfix"></ul>
    </div>
</div>

<script type="text/javascript">
    var subpage = page.getSubpage('<?php echo $option->getId(); ?>');

    subpage.setCallback('willappear', function() {
        if(!$('#audio_player_tag').length) {
            $('#tab_<?php echo $option->getId(); ?>').before('<audio id="audio_player_tag" style="display:none" preload="auto" controls><source src="" type="audio/mpeg" /></audio>');
        }
        this.setScrollview(new iScroll('playlists_scrollview_'+this.id))
            .setContentSize(false)
        ;
    }).setCallback('didappear', function() {

        if(!$('.show_types_<?php echo $option->getId(); ?>.selected').length) {
            $('#first_musics_list_<?php echo $option->getId(); ?>').click();
        }

    });

    subpage.createPlayer = function(callback) {

        if(typeof callback != 'function') callback = function() {};

        var datas = {
            id: 'audio_player',
            url:'<?php echo $this->getUrl('front/mobile_player/view', array('option_value_id' => $option->getId())); ?>',
            isAjax: 1,
            type: 'player',
            hide_navbar: true,
            callbacks: {
                didappear: function() {
                    this.player = new AudioPlayer();
                    callback.call(this);
                    this.unsCallback('didappear');
                }
            }
        };
        page.showSubpage(datas);
    }

    subpage.refreshScrollview = function() {
        var height = $(window).height() - $('#playlists_scrollview_<?php echo $option->getId() ?>').offset().top;

        $('#playlists_scrollview_<?php echo $option->getId() ?>').css('height', height);
        $('#playlists_scrollview_<?php echo $option->getId() ?>').children('ul').css('min-height', height);
        if(this.scrollview) {
            this.scrollview.refresh();
        }
        return this;
    };

    subpage.showElements = function(a) {
        a = $(a);
        if(a.hasClass('selected')) return;
        var type = a.attr('rel');
        if($('#playlists_list_'+this.id).children('li.'+type+'_of_'+this.id).length) {
            $('.show_types_'+this.id).removeClass('selected header reverse');
            a.addClass('selected header reverse');
            $('#playlists_list_'+this.id).children('li').hide();
            $('#playlists').find('a.playlist_read_all_elements').attr('rel', type);
            $('#playlists_list_'+this.id).children('li.'+type+'_of_'+this.id).fadeIn();
            if(this.scrollview) {
                this.scrollview.scrollTo(0, 0, 0);
                this.scrollview.refresh();
            }
        }
        else {
            loader.show();
            $.ajax({
                url: '<?php echo $this->getUrl('media/mobile_gallery_music/list'); ?>',
                dataType: 'json',
                data: [{name:'option_value_id',value:this.id}, {name:'type', value:type}],
                type: 'post',
                success: function(datas) {
                    if(datas.html) {
                        $('.show_types_'+this.id).removeClass('selected header reverse');
                        a.addClass('selected header reverse');
    //                    $('.types').hide();
                        $('#playlists_list_'+this.id).children('li').hide();
                        $('#playlists_list_'+this.id).append(datas.html);
                        $('#playlists').find('a.playlist_read_all_elements').attr('rel', type);
                        if(this.scrollview) {
                            this.scrollview.refresh();
                            this.scrollview.scrollTo(0, 0, 0);
                        }
                        loader.hide();
                    }
                }.bind(this),
                error: function() {
                    loader.hide();
                    new Alert('<?php echo addslashes($this->_("An error occurred while loading. Please try again later.")); ?>').show();
                }
            });
        }
    };

    function loadAllTypes(a) {
        clickPlayer();
        loader.show();
        var type = $(a).attr('rel');
        $.ajax({
            url: '<?php echo $this->getUrl('media/mobile_gallery_music/playlistall'); ?>',
            dataType: 'json',
            data: [{name:'option_value_id',value:'<?php echo $option->getId() ?>'}, {name:'type', value:type}],
            type: 'post',
            success: function(datas) {
                var tracks = [];
                $.each(datas.tracks, function(index, track) {
                    var track = {
                        id: index,
                        name: track.track_name,
                        duration: track.track_duration,
                        artist: track.track_artist,
                        url: track.track_url,
                        buy_url: track.track_buy_url
                    };
                    tracks.push(track);
                });

                var callback = function() {
                    this.player.createPlaylist(tracks, true);
                }

                if(!page.getSubpage('audio_player')) {
                    page.getSubpage('<?php echo $option->getId(); ?>').createPlayer(callback);
                } else {
                    callback.call(page.getSubpage('audio_player'));
                }
            }.bind(this),
            error: function() {
                new Alert('<?php echo $this->_("An error occurred while loading. Please try again later.") ?>').show();
            },
            complete: function() {
                loader.hide();
            }
        });

    };

    function loadPlaylistAlbums(playlist_id) {
        clickPlayer();
        loader.show();
        $.ajax({
            url: '<?php echo $this->getUrl('media/mobile_gallery_music/playlistalbums'); ?>',
            dataType: 'json',
            data: [{name:'option_value_id',value:'<?php echo $option->getId() ?>'}, {name:'playlist_id', value:playlist_id}],
            type: 'post',
            success: function(datas) {
                var tracks = [];
                $.each(datas.tracks, function(index, track) {
                    var track = {
                        id: index,
                        name: track.track_name,
                        duration: track.track_duration,
                        artist: track.track_artist,
                        url: track.track_url,
                        buy_url: track.track_buy_url
                    };
                    tracks.push(track);
                });

                var callback = function() {
                    this.player.createPlaylist(tracks, true);
                }

                if(!page.getSubpage('audio_player')) {
                    page.getSubpage('<?php echo $option->getId(); ?>').createPlayer(callback);
                } else {
                    callback.call(page.getSubpage('audio_player'));
                }
            }.bind(this),
            error: function() {
                new Alert('<?php echo $this->_("An error occurred while loading. Please try again later.") ?>').show();
            },
            complete: function() {
                loader.hide();
            }
        });

    };

    function loadPlaylist($ul, a) {

            clickPlayer();
//        var load_tracks = function() {
//            loader.show();
            var tracks = [];
            $ul.find('li.tracks a').each(function(index, a) {
                var track_name = $(a).find('.track_full_name').html();
                var track_duration = $(a).find('.track_duration').html();
                var track_artist = $(a).find('.track_artist').html();
                var track_url = $(a).find('.track_url').html();
                var track_buy_url = $(a).find('.track_buy_url').html();
                var track = {
                    id: index,
                    name: track_name,
                    duration: track_duration,
                    artist: track_artist,
                    url: track_url,
                    buy_url: track_buy_url
                };
                tracks.push(track);
            });
            var callback;
            if (typeof a == 'undefined') {
                callback = function() {this.player.createPlaylist(tracks, true);}
            } else {
                callback = function() {this.player.createPlaylist(tracks, true, $(a).attr('rel'));}
            }
            if(!page.getSubpage('audio_player')) {
                page.getSubpage('<?php echo $option->getId(); ?>').createPlayer(callback);
            } else {
                callback.call(page.getSubpage('audio_player'));
            }

    }

    function clickPlayer() {
        if(!$('#audio_player_tag').hasClass('loaded')) {
            $('#audio_player_tag').get(0).play();
            $('#audio_player_tag').addClass('loaded');
        }
    }

</script>
<style>
    /*Menu haut*/
    #header_playlists_scrollview_<?php echo $option->getId(); ?> ul { margin-left: 10px; margin-right: 10px; }
    #header_playlists_scrollview_<?php echo $option->getId(); ?> ul li { width: 32%; text-align: center; }
    #playlists_list_<?php echo $option->getId() ?> { display: block; text-align: center; }
    #playlists_list_<?php echo $option->getId() ?> li.blocks { display: inline-block; margin: 7px; border-bottom: 2px solid #d8d8d8; }
    #playlists_list_<?php echo $option->getId() ?> li.blocks a { position: relative; height: 181px; width: 135px; border: 1px solid #fff; display: block; }
    #playlists_list_<?php echo $option->getId() ?> li.blocks img { position:absolute; top:0; left:0; }
    #playlists_list_<?php echo $option->getId() ?> li.blocks img.top { top:0; border-bottom: 1px solid #ccc;}
    #playlists_list_<?php echo $option->getId() ?> li.blocks img.left { left:0; border-right: 1px solid #ccc;}
    #playlists_list_<?php echo $option->getId() ?> li.blocks img.right { left:auto; right:0; }
    #playlists_list_<?php echo $option->getId() ?> li.blocks img.bottom { top: 68px; }
    #playlists_list_<?php echo $option->getId() ?> li.blocks p.playlist_infos { position:absolute; bottom:0; left:0; width:100%; height: 41px; background: #fff; color: #000000 !important; clear: both; display: block; margin: 0; padding: 0; padding-top: 5px; border-top: 1px solid #CCCCCC; }
    #playlists_list_<?php echo $option->getId() ?> li.blocks p.playlist_infos span { text-align: center; width: 100%; display: block;}
    #playlists_list_<?php echo $option->getId() ?> li.blocks span.playlist_name { font-weight: bold; font-size: 12px; }
    #playlists_list_<?php echo $option->getId() ?> li.blocks span.playlist_songs { margin-top: 3px; font-size: 11px; }
</style>
