<div class="player">
    <div class="vinyl"></div>
    <div class="cover">
        <div class="header">
            <div class="artist"><a href="#" target="_blank"></a></div>
            <div class="title"></div>
        </div>
        <div class="controls">
            <button class="transparent loop fi-loop"></button>
            <span>
                <button class="prev fi-previous"></button>
                <button class="play fi-play"></button>
                <button class="stop fi-stop"></button>
                <button class="next fi-next"></button>
            </span>
            <button class="transparent shuffle fi-shuffle"></button>
            <div class="progressbar">
                <div class="progress"></div>
            </div>
        </div>
    </div>
</div>

var music = [
    {
        title: 'Free Four',
        artist: 'Pink Floyd',
        artistWiki: 'http://en.wikipedia.org/wiki/Pink_floyd',
        album: 'Obscured by Clouds',
        cover: 'http://upload.wikimedia.org/wikipedia/en/e/ef/Pink_Floyd_-_Obscured_by_Clouds.jpg',
        length: '5000'
    },
    {
        title: 'Iron Tusk',
        artist: 'Mastodon',
        artistWiki: 'http://en.wikipedia.org/wiki/Mastodon_(band)',
        album: 'Leviathan',
        cover: 'http://upload.wikimedia.org/wikipedia/en/c/ca/Leviathan_special_edition_cover.jpg',
        length: '5000'
    },
    {
        title: 'I Want You (She\'s So Heavy)',
        artist: 'The Beatles',
        artistWiki: 'http://en.wikipedia.org/wiki/Beatles',
        album: 'Abbey Road',
        cover: 'http://upload.wikimedia.org/wikipedia/en/4/42/Beatles_-_Abbey_Road.jpg',
        length: '5000'
    }
]

var song_id = 0;
var song = music[0];
var titleInterval = null;
var timerStart = 0;
var timerPause = 0;

function init() {
    show();
    setTimeout(function() {
        showHeader();
        play();
    }, 1000);
}

function show() {
    song = music[song_id];
    $('.artist a').html(song.artist).attr('href', song.artistWiki);
    $('.title').html(song.title);
    $('.cover').css('background-image', 'url('+song.cover+')');
}

function showHeader() {
    $('.header').addClass('show');
    setTimeout(function() { $('.header').removeClass('show'); }, 2000);
}

function togglePlay() {
    if($('.player').hasClass('playing') && !$('.player').hasClass('paused')) pause();
    else play();
}

function play() {
    show();
    $('.player').removeClass('paused').addClass('playing');
    $('.controls .play').removeClass('fi-play').addClass('fi-pause');
    startProgress();
}

function pause() {
    $('.player').addClass('paused');
    $('.controls .play').removeClass('fi-pause').addClass('fi-play');
    pauseProgress();
}

function stop() {
    $('.player').removeClass('paused').removeClass('playing');
    $('.controls .play').removeClass('fi-pause').addClass('fi-play');
    stopProgress();
    initProgress();
    song_id = 0;
    show();
}

function prev() {
    if(song_id <= 0) song_id = 0;
    else song_id--;
    
    show();
    showHeader();
    stopProgress();
    initProgress();
    if($('.player').hasClass('playing') && !$('.player').hasClass('paused')) startProgress();
}

function next() {
    if(song_id >= music.length-1) {
        stop();
    }
    else {
        song_id++;
        show();
        showHeader();
        stopProgress();
        initProgress();
        if($('.player').hasClass('playing') && !$('.player').hasClass('paused')) startProgress();
    }
}

function initProgress() {
    $('.progress').css('width', '0');
}

function startProgress() {
    if(timerStart == 0) {
        timerStart = Date.now();
        var length = parseInt(song.length);
    }
    else var length = parseInt(song.length) - (timerPause - timerStart);
    
    $('.progress').animate({ width: '100%' }, length, 'linear', next);
}

function pauseProgress() {
    $('.progress').stop();
    timerPause = Date.now();
}

function stopProgress() {
    $('.progress').stop();
    timerStart = 0;
    timerPause = 0;
}

$('.play').click(function(){ togglePlay(); });
$('.stop').click(function(){ stop(); });
$('.prev').click(function(){ prev(); });
$('.next').click(function(){ next(); });
$('.loop, .shuffle').click(function(){ 
    $(this).toggleClass('active'); 
});

init();