$(document).ready(function(){
    $.getJSON("/providers/", function(data) {
        var data2 = {};
        var keys = new Array();
        
        for (var i in data) {
            var item = data[i];

            data2[item.title] = item;
            keys.push(item.title);
        }
        
        keys.sort();
        
        for(var i = 0; i < keys.length; i++) {
            var item = data2[keys[i]];
                       
            $("#fillme").append(
                "<h3><a href=\"#"+encodeURIComponent(item.title)+"\">"+item.title+"</a></h3>"+
                "<div><p><a class=\"oembed\" href=\""+item.example_url+"\">"+
                item.example_url+"</a></p></div>"
            );
        }
        
        $("#fillme").accordion({
            'header' : 'h3',
            'autoHeight': false,
            'collapsible' : true,
            'active' : false,
            change: function(event, ui) { 
                window.location.hash = "#"+encodeURIComponent(ui.newHeader.find("a").text());
                ui.newContent.find("a.oembed").oembed({
                    'source' : '/oembed/',
                    'maxwidth' : '640',
                });
            }
        });
        
        $("#fillme").find("a[href=\""+window.location.hash+"\"]").click();
        
        $(".supported").show();
    });
});