small.extendMethods({
    screen: function(url){
        var container = small(this).first();
        var pool1 = container.append("div").setClass("pool");
        var pool2 = pool1.append("div").setClass("pool");
        var panel = container.append("div").setClass("panel");
        var statusList = [];
        var position = 1;
        var total = 0;
        var list = [];
        var images = [];
        small.json({
            "url": url,
            "callback": function(response){
                var firstFlag = false;
                small.each(response, function(key, value){
                    var current = new Image();
                    current.src = value;
                    images[key] = current;
                    statusList[key] = panel.append("div").setClass("status usual");
                    if(!firstFlag){
                        refresh(response[key]);
                        statusList[key].setClass("status actual");
                        firstFlag = true;
                    }
                    statusList[key].click(function(event){
                        position = event.attach.id;
                        changeStatus();
                        refresh(list[position]);
                        cycle();
                    }, {
                        "id": key
                    });
                });
                list = response;
                total = list.length - 1;
                cycle();
            }
        });
        function cycle(){
            container.stop().start({
                "time": 5000,
                "callback": function(){
                    changeStatus();
                    refresh(list[position]);
                    position = (position < total ? position + 1 : 0);
                    cycle();
                }
            });
        }
        function refresh(link){
            pool2.css({
                "backgroundImage": "url(" + link + ")"
            }).opacity(0);
            var index = 0;
            pool2.stop().start({
                "time": 50,
                "callback": function(){
                    pool2.opacity(++index * 10);

                    if(index >= 10){
                        pool1.css({
                            "backgroundImage": "url(" + link + ")"
                        });
                    }
                },
                "repeat": 10
            });
        }
        function changeStatus(){
            small.each(statusList, function(key, value){
                value.setClass("status " + (position == key ? "actual" : "usual"));
            });
        }
    }
});