var Widget = new Class({
    Implements: [Options],
    options: {
        count: 5,
        method: 'get',
        secure: false,
    },
    initialize: function(element, options) {
        this.container = element;
        this.setOptions(options);
        this.fetch();
    },
    fetch: function() {
        this.request = new Request.JSON({
            url: this.url(),
            method: 'get',
            secure: false,
            onSuccess: function(data) {
                this.build(data)
            }.bind(this)
        });

        this.request.send();
    },
    url: function() {
        if (this.options.url) {
            return this.options.url
        } else {
            return '/data/' + this.container + '.json'
        }
    },
    build: function (data) {
        var container = $(this.container)
        
        var ul = new Element('ul');
        container.grab(ul)

        this.options.count.times(function(n) {
            var entry = data[n];
            var li = new Element('li');
            var a = new Element('a', {
                html: entry.title,
                href: entry.link
            });
            li.grab(a)
            ul.grab(li);
        });
    }
});

var ImageWidget = new Class({
    Extends: Widget,
    build: function (data) {
        var container = $(this.container)
        
        var ul = new Element('ul', {
            styles: {
                'padding': '0'
            }
        });
        container.grab(ul)

        this.options.count.times(function(n) {
            var photo = data[n];
            var li = new Element('li', {
                styles: {
                    'display': 'inline',
                }
            });
            var a = new Element('a', {
                href: photo.link
            });
            var img = new Element('img', {
                src: photo.source,
                title: photo.title,
                styles: {
                    'border': 'none',
                    'margin': '0 3px',
                    'height': '75px',
                    'width': '75px'
                }
            });
            a.grab(img);
            li.grab(a);
            ul.grab(li);
        });
    }

});