jQuery(function ($) {
    'use strict'
    var supportsAudio = !!document.createElement('audio').canPlayType;
    if (supportsAudio) {
        // initialize plyr
        var player = new Plyr('#audio1', {
            controls: [
                'restart',
                'play',
                'progress',
                'current-time',
                'duration',
                'mute',
                'volume'//,
                //'download'
            ]
        });
        // initialize playlist and controls
        var index = 0,
            playing = false,
            // mediaPath = 'https://archive.org/download/mythium/',
            mediaPath = '/_templates/_4/tracks/',
            extension = '',
            tracks = [
            	
		                {
		                    "track": 1,
		                    "name": "",
		                    "duration": "",
		                    "file": "https://cdn.curios.com/1/58BE94D5-A30A-4C9D-C2BB7D24EE9770D8.mp3",
		                    "artwork": ""
		                }, 
		                {
		                    "track": 2,
		                    "name": "",
		                    "duration": "",
		                    "file": "https://cdn.curios.com/1/58BECF59-93BD-E91F-A4569C23D9A7DB20.mp3",
		                    "artwork": ""
		                }, 
		                {
		                    "track": 3,
		                    "name": "",
		                    "duration": "",
		                    "file": "https://cdn.curios.com/1/58BF0561-9975-6982-5898E77B647B4C46.mp3",
		                    "artwork": ""
		                }, 
		                {
		                    "track": 4,
		                    "name": "",
		                    "duration": "",
		                    "file": "https://cdn.curios.com/1/58BF151C-EC22-7707-B4BEB413BC8F2A5C.mp3",
		                    "artwork": ""
		                }, 
		                {
		                    "track": 5,
		                    "name": "",
		                    "duration": "",
		                    "file": "https://cdn.curios.com/1/58BF2CB0-F5FC-C26A-FAC92D960F2B1F37.mp3",
		                    "artwork": ""
		                }, 
		                {
		                    "track": 6,
		                    "name": "",
		                    "duration": "",
		                    "file": "https://cdn.curios.com/1/58BF3E92-D0E5-5C8D-201B65D5620D0835.mp3",
		                    "artwork": ""
		                }, 
		                {
		                    "track": 7,
		                    "name": "",
		                    "duration": "",
		                    "file": "https://cdn.curios.com/1/58BF560E-0A81-6F9A-571A0DB541030B5A.mp3",
		                    "artwork": ""
		                }, 
		                {
		                    "track": 8,
		                    "name": "",
		                    "duration": "",
		                    "file": "https://cdn.curios.com/1/58C207AD-D730-03BE-D8E6F4E5D3344282.mp3",
		                    "artwork": ""
		                }, 
		                {
		                    "track": 9,
		                    "name": "",
		                    "duration": "",
		                    "file": "https://cdn.curios.com/1/58BEFDA2-C5FE-96E6-A0E3719EC013E7E3.mp3",
		                    "artwork": ""
		                }, 
		                {
		                    "track": 10,
		                    "name": "",
		                    "duration": "",
		                    "file": "https://cdn.curios.com/1/58BF0CC7-DB66-CD4A-E4B905006C17E263.mp3",
		                    "artwork": ""
		                }, 
		                {
		                    "track": 11,
		                    "name": "",
		                    "duration": "",
		                    "file": "https://cdn.curios.com/1/58BF1727-A769-479E-97C470A62EAC088E.mp3",
		                    "artwork": ""
		                } 
            ],
            buildPlaylist = $.each(tracks, function(key, value) {
                var trackNumber = value.track,
                    trackName = value.name,
                    trackDuration = value.duration,
                    trackArtwork = value.artwork;
                if (trackNumber.toString().length === 1) {
                    trackNumber = '0' + trackNumber;
                }
                $('#plList').append('<li> \
                    <div class="plItem"> \
                      <div class="plItemDetails"> \
                        <span class="plArtwork"><img src="' + trackArtwork + '"></span> \
                        <span class="plNum">' + trackNumber + '.</span> \
                        <span class="plTitle">' + trackName + '</span> \
                      </div> \
                      <div class="plItemDuration"> \
                        <span class="plLength">' + trackDuration + '</span> \
                      </div> \
                    </div> \
                </li>');
            }),
            trackCount = tracks.length,
            npAction = $('#npAction'),
            npTitle = $('#npTitle'),
            audio = $('#audio1').on('play', function () {
                playing = true;
                npAction.text('Now Playing...');
            }).on('pause', function () {
                playing = false;
                npAction.text('Paused...');
            }).on('ended', function () {
                npAction.text('Paused...');
                if ((index + 1) < trackCount) {
                    index++;
                    loadTrack(index);
                    audio.play();
                } else {
                    audio.pause();
                    index = 0;
                    loadTrack(index);
                }
            }).get(0),
            btnPrev = $('#btnPrev').on('click', function () {
                if ((index - 1) > -1) {
                    index--;
                    loadTrack(index);
                    if (playing) {
                        audio.play();
                    }
                } else {
                    audio.pause();
                    index = 0;
                    loadTrack(index);
                }
            }),
            btnNext = $('#btnNext').on('click', function () {
                if ((index + 1) < trackCount) {
                    index++;
                    loadTrack(index);
                    if (playing) {
                        audio.play();
                    }
                } else {
                    audio.pause();
                    index = 0;
                    loadTrack(index);
                }
            }),
            li = $('#plList li').on('click', function () {
                var id = parseInt($(this).index());
                if (id !== index) {
                    playTrack(id);
                }
            }),
            loadTrack = function (id) {
                $('.plSel').removeClass('plSel');
                $('#plList li:eq(' + id + ')').addClass('plSel');
                npTitle.text(tracks[id].name);
                index = id;
                //audio.src = mediaPath + tracks[id].file + extension;
                audio.src = tracks[id].file;
                updateDownload(id, audio.src);

                // artwork
                var art = $('#artwork img');
                  if (tracks[id].artwork !== '') {
                      art.prop('src', tracks[id].artwork);
                  } else {
                      art.prop('src', '//example.com/no-art.jpg');
                }
            },
            updateDownload = function (id, source) {
                player.on('loadedmetadata', function () {
                    //$('a[data-plyr="download"]').attr('href', source);
                });
            },
            playTrack = function (id) {
                loadTrack(id);
                audio.play();
            };
        extension = audio.canPlayType('audio/mpeg') ? '.mp3' : audio.canPlayType('audio/ogg') ? '.ogg' : '';
        loadTrack(index);
    } else {
        // no audio support
        $('.column').addClass('hidden');
        var noSupport = $('#audio1').text();
        $('.container').append('<p class="no-support">' + noSupport + '</p>');
    }
});