//http://127.0.0.1:2620/media/test.html
$(function(){
    backend= {
        base:'/',
        profile: '96p.webm',
        request: function(func, data, callback) {
            $.getJSON(this.base+func, data, callback);
        },
        extractStills: function(oshash, callback) {
            this.request('extract', {'oshash': oshash, 'media': 'stills'}, callback);
        },
        extractVideo: function(oshash, callback) {
            this.request('extract', {'oshash': oshash, 'media': this.profile}, callback);
        },
        info: function(oshash, callback) {
            this.request('get', {'oshash': oshash}, callback);
        },
    };

    function addStill(parent, oshash) {
        backend.request('get', {'oshash':oshash}, function(result) {
            //console.log(result);
            if(result.stills.length>0) {
                $(parent).append('<img width="128" src="'+result.stills[1]+'">');
            } else {
                backend.request('extract', {'oshash':oshash, 'media': 'stills'}, function(result) {
                    setTimeout(function () {
                        addStill(parent, oshash);
                    }, 25000);
                });
            }
        });
    }
    function addVideo(parent, oshash) {
        backend.request('get', {'oshash':oshash}, function(result) {
            console.log(result);
            if(result.video.length>0) {
                $(parent).append('<video width="128" src="'+result.video[0]+'" controls>');
            } else {
                backend.request('extract', {'oshash':oshash, 'media': backend.profile}, function(result) {
                    if(!result.status == 'failed') {
                        setTimeout(function () {
                            addVideo(parent, oshash);
                        }, 25000);
                    }
                });
            }
        });
    }


    function for_each_sorted(elements, callback) {
        function pad(str) {
            var len = 10;
            while (str.length < len) {
                str = '0' + str;
            }
            return str;
        };
        var keys = new Array();
        $.each(elements, function(k) {
            keys.push(k);
        });
        keys.sort(function(a,b) {
            a = a.replace(/\d+/, pad);
            b = b.replace(/\d+/, pad);
            return a > b;
        });
        $.each(keys, function(i, k) {
            var v = elements[k];
            callback(k, v);
        });
    }

    function addMovie(movie, files) {
        var $m = $('<div>');
        $m.css('padding-left', '50px');
        $m.html(movie);
        //var oshash = files[0].info.oshash;
        //$img = $('<img>').attr('src', '/media/' + oshash
        //$m.append($img);
        var $files = $('<div>');
        $files.css('padding-left', '50px');
        for_each_sorted(files, function(k, v) {
            if (v.video && v.video.length>0) {
                addStill($files, v.oshash);
                addVideo($files, v.oshash);
            }
            $files.append(k + '<br />');
        });
        $m.append($files);
        return $m;
    }
    backend.request('files', function(result) {
        for_each_sorted(result, function(archive, movies) {
            var $archive = $('<div>');
            $archive.html(archive);
            $('#movies').append($archive);
            for_each_sorted(movies, function(movie, files) {
                $archive.append(addMovie(movie, files));
            });
        });
    });
});