Ext.onReady( function(){
    var lookup = {};

    var siteData = [
        ['http://mojalog.com','http://capture.heartrails.com/small?http://mojalog.com','mojalog'],
        ['http://google.co.jp','http://capture.heartrails.com/small?http://google.co.jp','google'],
        ['http://yahoo.co.jp','http://capture.heartrails.com/small?http://yahoo.co.jp','yahoo'],
        ['http://extjs.com','http://capture.heartrails.com/small?http://extjs.com','extjs'],
        ['http://capture.heartrails.com','http://capture.heartrails.com/small?http://capture.heartrails.com','heartrails' ],
        ['http://youtube.com','http://capture.heartrails.com/small?http://youtube.com','youtube' ]
    ];

    var store = new Ext.data.SimpleStore({
        fields: [
           { name: 'siteurl'},
           { name: 'imgurl' },
           { name: 'name'   }
        ],
        data : siteData
    });

    var formatData = function( data ){
        lookup[ data.name ] = data;
        return data;
    };

    var view = new Ext.DataView({
        tpl: new Ext.XTemplate(
            '<tpl for=".">',
                '<div class="thumb-wrap" id="{name}">',
                '<div class="thumb"><img src="{imgurl}" title="{name}"></div>',
                '<span>{name}</span>',
                '</div>',
            '</tpl>'
        ),
        singleSelect: true,
        overClass:'x-view-over',
        itemSelector: 'div.thumb-wrap',
        store: store,
        listeners: {
            'dblclick':{
                fn:function(){
                    var selNode = view.getSelectedNodes()[0];
                    var data = lookup[selNode.id];
                    location.href=data.siteurl;
                }
            }
        },
        prepareData: formatData.createDelegate(this)
    });

    var panel = new Ext.Panel({
        id: 'img-chooser-view',
        title: 'DataView',
        renderTo: 'container',
        width:320,
        autoScroll: true,
        items:view,
        collapsible:true
    });
});