Ext.require([
    'Ext.data.*',
    'Ext.util.*',
    'Ext.view.View',
	'Ext.tab.*',
	'Ext.window.MessageBox',
    'Ext.tip.*'
]);

var vTip;

Ext.onReady(function(){
	
    ImageModel = Ext.define('ImageModel', {
        extend: 'Ext.data.Model',
        fields: [
           {name: 'name'},
           {name: 'url'},
           {name: 'thumb'},
		   {name: 'desc'},
           {name: 'size', type: 'float'},
           {name:'lastmod', type:'date', dateFormat:'timestamp'}
        ]
    });

    var store_antonie = Ext.create('Ext.data.Store', {
        model: 'ImageModel',
        proxy: {
            type: 'ajax',
            url: 'get-images-antonie.php',
            reader: {
                type: 'json',
                root: 'images'
            }
        }
    });

	var store_wes = Ext.create('Ext.data.Store', {
        model: 'ImageModel',
        proxy: {
            type: 'ajax',
            url: 'get-images-wes.php',
            reader: {
                type: 'json',
                root: 'images'
            }
        }
    });
	
    store_antonie.load();
	store_wes.load();

	var dataview_antonie = Ext.create('Ext.view.View', {
	        id: 'dataview_antonie2',
			autoScroll: true,
            store: store_antonie,
            tpl: [
                '<tpl for=".">',
                    '<div class="thumb-wrap" id="{name}">',
                    '<div class="thumb"><a href="{url}" rel="lightbox[antonie]" title="{desc}"><img src="{thumb}"></a></div>',
                    '<span class="x-editable">{shortName}</span></div>',
                '</tpl>',
                '<div class="x-clear"></div>'
            ],
            multiSelect: false,
            trackOver: true,
            overItemCls: 'x-item-over',
            itemSelector: 'div.thumb-wrap',
            emptyText: 'No images to display',
            prepareData: function(data) {
                Ext.apply(data, {
                    shortName: age(data.name,new Date(2011,4,20))
                });
                return data;
            }
        })
        
	var dataview_wes = Ext.create('Ext.view.View', {
			autoScroll: true,
            store: store_wes,
            tpl: [
                '<tpl for=".">',
                    '<div class="thumb-wrap" id="{name}">',
                    '<div class="thumb"><a href="{url}" rel="lightbox[wes]" title="{desc}"><img src="{thumb}"></a></div>',
                    '<span class="x-editable">{shortName}</span></div>',
                '</tpl>',
                '<div class="x-clear"></div>'
            ],
            multiSelect: false,
            trackOver: true,
            overItemCls: 'x-item-over',
            itemSelector: 'div.thumb-wrap',
            emptyText: 'No images to display',
            prepareData: function(data) {
                Ext.apply(data, {
                    shortName: age(data.name,new Date(2007,8,20))
                });
                return data;
            }
        })

   var image_view_antonie = Ext.create('Ext.Panel', {
		id: 'images-view',
		height: document.documentElement.clientHeight - 210,
        width: document.documentElement.clientWidth - 280,
		autoScroll: true,
		frame: false,
		collapsible: false,
		items: dataview_antonie
	});
				
	var image_view_wes = Ext.create('Ext.Panel', {
	        height: document.documentElement.clientHeight - 210,
            width: document.documentElement.clientWidth - 280,
		    id: 'images-view-wes',
		    autoScroll: true,
		    frame: false,
		    collapsible: false,
		    items: dataview_wes
	    });
				
	var tabs = Ext.createWidget('tabpanel', {
		id: 'photo-album-panel',
		height: document.documentElement.clientHeight - 185,
        width: document.documentElement.clientWidth - 280,
        plain: true,
        renderTo: 'photo_album',
        activeTab: 0,
        items: [{
            title: 'Welkom',
            loader: {
                    url: 'welkom.html',
                    contentType: 'html',
                    autoLoad: true
            },
            listeners: {
                activate: function(tab){
                    document.getElementById('header_image').src="images/denhaag.jpg";
                }
            }
        },{
            title: 'Antonie',
			items: image_view_antonie,
			listeners: {
               activate: function(tab){
                    document.getElementById('header_image').src="images/woezel_en_pip.png";
					/* if(vTip!=false)
					{
						Ext.example.msg('Sneltoetsen', 'Navigeer met de < toets of ALT+P naar de vorige foto.<br/> Navigeer met de > toets of ALT+N naar de volgende foto.<br/>Druk op esc om de voorstelling te beëindigen.');
						vTip=false;
					}*/
                }
            }
        },{
            title: 'Wes',
			items: image_view_wes,
			listeners: {
               activate: function(tab){
                    document.getElementById('header_image').src="images/wes.png";
					/*if(vTip!=false)
					{
						Ext.example.msg('Sneltoetsen', 'Navigeer met de < toets of ALT+P naar de vorige foto.<br/> Navigeer met de > toets of ALT+N naar de volgende foto.<br/>Druk op esc om de voorstelling te beëindigen.');
						vTip=false;
					}*/
                }
            }
        }]
    });
});

var age = function(name,date){
 var year = name.substring(name.indexOf('_') + 1,name.indexOf('_') + 5);
 var month = name.substring(name.indexOf('_') + 5,name.indexOf('_') + 7);
 var day = name.substring(name.indexOf('_') + 7,name.indexOf('_') + 9);
 var picture_date = new Date(year,month -1,day);
 var days = (picture_date.getTime() - date.getTime())/86400000;
 if(Math.ceil(days)==1)
 {
    return Math.ceil(days) + ' dag';
 }
 if(Math.ceil(days) < 14)
 {
    return Math.ceil(days) + ' dagen';
 }
 if(Math.floor(days /7) < 26)
 {
    return Math.floor(days /7) + ' weken';
 }
 if(Math.floor(days /7) < 52)
 {
    return Math.floor(days /30) + ' maanden';
 }
 return Math.floor(days /365) + ' jaar';
}